文章目录
- 1.数组解构
- 2.对象解构
- 3.模板字符串
- 4.字符串的扩展方法
- 5.参数默认值
- 6.剩余(rest)参数
- 7.展开数组参数
- 8.箭头函数
- 9.对象字面量增强
- 10.class类
- 11.set和Map 数据结构
- 12. 数组的扩展方法
- 13.Moudle
1.数组解构
解构数组的方法
const arr = [100, 200, 300];
const [one, two, three] = arr;
console.log(one);//100
console.log(two);//200
console.log(three);//300在数组解构语法中，我们****通过值在数组中的位置进行选取****，且可以存储在任意变量中，未显式声明的元素都会直接被忽略。在这个过程中，数组本身不会发生任何变化。
只解构想要获取的元素
const [,,mo]
console.log(mo);//300解构赋值
数组解构也可用于赋值上下文
a=1;
b=2;
const [a,b]=arr;
console.log(a);//100
console.log(b);//200在数组中，可以通过…语法将数组中的其余元素赋值给一个特定的变量,并且以数组的形式返回结果
let colors = ["red","green","blue"];
let [firstColor,...restColors] = colors;
console.log(firstColor);//"red"
console.log(restColors.length);//2
console.log(restColors[0]);//"green"注意：在被解构的数组中，*不定元素必须为最后一个条目*，在后面继续添加逗号会导致程序抛出语法错误。
如果解构位置的成员个数小于被解构的数组长度，那么就会按照从前到后的顺序去提取
const arr = [100, 200, 300];
const [f]=arr
console.log(f);//100反之，如果结构位置的成员个数大于被解构的数组长度，那么就会返回undefined
const arr = [100, 200, 300];
const[one, two, three,more]=arr
console.log(more)//undefined如同访问数组中一个不存在的下标
如果没有查询到元素的值，那么就会返回默认值；如果能查询到，那就还是返回原值
const arr = [100, 200, 300];
const[one, two, three=123,more="default value"]=arr
console.log(three)//123
console.log(more)//default value拆分字符串
const path = '/foo/bar/baz';
const [, rootdir] = path.split('/');
console.log(rootdir)//baz
const [rootdirs,] = path.split('/');
console.log(rootdirs)//foo嵌套数组解构
let colors = ["red",["green","lightgreen"],"blue"];
let [firstColor,[secondColor]] = colors;
console.log(firsrColor);//"red"
console.log(secondColor)//green2.对象解构
大部分性质和数组的解构差不多，但唯独注意一点
当外面定义的变量和对象里的属性名重名时，应该采取这种方法去解决
const obj = {name:'zce',age:18};
const {name} = obj;
console.log(name);//zce
const name = 'tom';
const {name :objName} = obj;
console.log(objName);嵌套对象解构
let node = {
type:"Identifier",
name:"foo",
loc:{
start:{
line:1,
column:1
},
end:{
line:1,
column:4
}
}
};
let {loc:{start}} = node;
console.log(start.line);//1在这个示例中，我们在解构模式中使用了花括号，其含义为在找到node对象中的loc属性后，应当深入一层继续查找start属性
3.模板字符串
const person = {
username: 'Jan',
age: 21,
sex: 'male'
};一般字符串
const info='我的名字是：' +
person.username +
', 性别：' +
person.sex +
', 今年' +
person.age +
'岁了';
console.log(info);//我的名字是Jan，性别：male，今年21模板字符串
const info = `我的名字是：${person.username}, 性别：${person.sex}, 今年${person.age}岁了`;
console.log(info);
//我的名字是Jan，性别：male，今年21岁了输出多行字符串
方式一：
const info=`第一行\n第二行`;
方式二：
const info=`第一行
第二行`;//这里前面会有空格输出`和\等特殊字符
const info=`\`\\`;//需要转义
console.log(info)//`\模板字符串的注入
模板字符串中嵌入变量，要将变量名写在${}之中。大括号内可以放入任意的JavaScript表达式，可以进行运算，以及引入对象属性。
const username = 'Jan';
const person = { age: 21, sex: 'male' };
const getSex = function (sex) {
return sex === 'male' ? '男' : '女';
};
const info = `${username}, ${person.age},${getSex(person.sex)}`;
console.log(info);//Jan,21,女
const value=`${1+2}`;
console.log(value);//3只要最终可以得出一个值的就可以通过 ${} 注入到模板字符串中
4.字符串的扩展方法
const message="Error:foo is not defined"
//startWith(),判断是否以某个字符串开头
console.log(message.startsWith("Error"))//true
//endsWith()判断是否以某个字符串结尾
console.log(message.endsWith("."))//true
//includes()判断是否包含某个字符串
console.log(message.includes("foo"))//true字符串的遍历器接口
for(let item of "cyl"){
console.log(item);
}//c,y,lrepeat 方法返回一个新字符串，表示将原字符串重复n次
"x".repeat(3)//"xxx"
//参数如果是小数，会被取整
"x".repeat(2.9)//xx如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全
'x'.padStart(5,"ad");//adadx
'x'.padEnd(4,"ad");//xada
"x".padStart(4);//" x"5.参数默认值
函数参数的默认值：函数没有传递形参时，默认使用的值
//enable=true,形参默认值，只会在没有传递实参，或者为undefind时才会使用
function foo(enable=true){
console.log(enable);
}
foo();//true
foo(false);//false
//当有多个形参时，带有默认值的形参一定要出现在参数列表的最后，因为参数是按照次数传递的
function foo1(bar,enable=true){
}6.剩余(rest)参数
//...args会以数组的形式去接受，从当前这个位置开始，往后所有的形参
function foo(...args){
console.log(args)
}
foo(1,2,3)//[1,2,3]7.展开数组参数
const arr=["foo","bar","baz"]
console.log(...arr);//foo bar baz8.箭头函数
箭头函数是匿名函数，允许我们用更短的语法定义函数。
传统函数：
function sum(a,b){
return a+b;
}箭头函数
const sum=(a,b)=>a+b
//没有参数
const sum=()=>console.log("123")
//方法体有多条语句
const f=()=>{
//结果需要用return返回
}const users = [
{
name: "John",
age: 24
},
{
name: "Jane",
age: 32
},
{
name: "Blake",
age: 12
}
]选择18岁以上的用户
//user相对于users数组里面的每个user
const adults=users.filter(user=>user.age>18)箭头函数没有自己的this
箭头函数中的this实际是外层函数的this(箭头函数的this对象是定义时所在的对象，而不是使用时的对象)
箭头函数最大的一个好处就是它的 this指向定义时所在环境的 this ,而非使用时环境的 this,比如在SetTimeeout 函数的回调函数中，如果使用箭头函数，那么THIS还是指向调用 SetTimeeout 的对象里的this
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100); // s1: 3
setTimeout(()=>console.log('s2: ',timer.s2),3100)//0箭头函数永远指向上下文的this
9.对象字面量增强
const bar="345"
const obj={
foo:123,
//bar:bar，相同的名字可以省略
bar,
method1(){
console.log("method")
},
//随机属性名,方括号里面的结果会作为属性名
[Math.random()]:123
}
obj.method1();10.class类
class Person{
constructor(name){
this.name=name;
}
say(){
console.log(`hi,my name is ${this.name}`)
}
static setName(name){
return new Person(name);
}
}
const p=new Person("Jan");
p.say();//hi,my name is Jan
//static 方法，不属于某个对象，而是属于类，可以直接使用类型调用
Person.setName("Jan");
//继承
Class student extends Person{
constructor(name,number){
super(name)
this.number=number;
}
hello(){
super.say()
console.log(`my school number is ${this.number}`)
}
}
const s=new Student("Jan",12323);
s.hello();//hi,my name is Jan,my school number is 1232311.set和Map 数据结构
set
const s=new Set();
s.add(1).add(2).add(3).add(2)
console.log(s)//{1,2,3}
//遍历
for(let i of s){
console.log(i);
}
//s.size():长度，
s.has(1)//true,判断元素是否在集合中
s.delete(3)//删除3
s.clear()//清空s
const arr=[1,2,1,3,4,1]
//对arr进行去重
const result=new Set(arr);
console.log(result)Map:以键值对的形式存在
const map = new Map([
['name', '张三'],
['title', 'Author']
]);
map.set("age","21");//添加元素
map.size // 3
map.has('name') // true
map.get('name') // "张三"
map.has('title') // true
map.get('title') // "Author"
//遍历Map
//方法一
map.forEach(function(value,key,map){
console.log(key+":"+value);//name:张三...
})
//方法二
for(let [key,value] of map){
console.log(key,value)
}12. 数组的扩展方法
Array.from()方法
- 将数组对象装换为真正的数组
let person = {
0: 'cyl',
1: '21',
2: '女',
3: ['jane', 'john', 'Mary'],
'length': 4
}
let arr = Array.from(person)
console.log(arr) // ['cyl','21','女',['jane','john','Mary']]注：
1、该类数组对象必须具有length属性，用于指定数组的长度。如果没有length属性，那么转换后的数组是一个空数组。
2、该类数组对象的属性名必须为数值型或字符串型的数字
ps: 该类数组对象的属性名可以加引号，也可以不加引号
- 将set结构的数据转换为真正的数组
let arr=[1,2,3,4]
let set=new Set(arr);//将数组转换为set集合
console.log(Array.from(set))//[1,2,3,4]Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下：
let arr=[1,2,3,4]
arr.map((item,index)=>{
console.log(item+1);//2,3,4,5
})
let set =new Set(arr);
console.log(Array.from(set,item=>item+1))//[2,3,4,5]- 将字符串转换为数组
string="abc";
console.log(Array.from(string));//["a","b","c"]find（）和findIndex（）
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2fill()
fill方法使用给定值，填充一个数组。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
//fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置
['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']entries(),keys(),values()
ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。
for (let index of ['a', 'b'].keys()) {
console.log(index);
}
// 0
// 1
for (let elem of ['a', 'b'].values()) {
console.log(elem);
}
// 'a'
// 'b'
for (let [index, elem] of ['a', 'b'].entries()) {
console.log(index, elem);
}
// 0 "a"
// 1 "b"13.Moudle
- 基本导入导出
基本导出:类似于 exports.xxx = xxxx ，基本导出可以有多个，每个必须有名称基本导出的语法如下：
export 声明表达式
或
export {具名符号}基本导入：由于使用的是依赖预加载，因此，导入任何其他模块，导入代码必须放置到所有代码之前。对于基本导出，如果要进行导入，使用下面的代码
import { 导入的符号列表 } from "模块路径";实例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<script src="./test1.js" type="module"></script>
<script src="./test2.js" type="module"></script>
</body>
</html>//test1.js,导出
export var name="cyl";
export function fn(){
console.log("test1")
}
var age=21;
var sex="male";
export{age,sex};
//test2.js,导入
import {name,age,sex,fn} from "./test1.js"
console.log(name)//cyl
fn();//test1
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
