文章目录
1 变量常量
1.1 变量let ，常量const
1.变量声明不会被提升，即在变量声明之前无法使用该变量
2.具有局部作用域，即let声明的变量只能在对应代码块中使，{ }块作用域
3.不允许重复声明
4.const声明的变量在声明的时候就需要赋值，并且只能赋值一次，不能修改
2 解构
ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构，解构的本质属于“模式匹配”。 只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。
2.1 数组解构
等号左边的变量放到中括号内部，匹配右侧数组中的元素
let [a,b,c]=[1,2,3];
console.log(a,b,c);
//1,2,3
let [a,b,c,d,e]=[1,2,3,[4,5],6];
console.log(a,b,c,d,e);
//1,2,3,[a,5],6
2.不完全解构
let [a,b,c,[d],e]=[1,2,3,[4,5,6],7];
console.log(a,b,c,d,e);
//1,2,3,4,7
3.集合解构 …扩展运算符
let [a,...b]=[1,2,3,4,5];
console.log(a,b);
//1,[2,3,4,5]
4.默认值解构（当匹配值严格等于undefined时，默认值生效）
let [a=1,b=2,c=3]=[4,5,6];
console.log(a,b,c);
//4,5,6
let [a=1,b=2,c=3]=[];
console.log(a,b,c);
//1,2,3
//默认值也可以是函数
function f(){
console.log('hello');
return 10;
}
let [a=f()]=[1];
console.log(a);
//1
let [b=f()]=[];
console.log(b);
//hello 10
2.2 对象解构
1.等号左边的变量放到大括号内部，匹配右侧对象中的元素。对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
//使用对象的简写形式(省略key，保留value对应的值)
//let {foo:foo,bar:bar}={foo:'hello',bar:"world"};
let {foo,bar}={foo:'hello',bar:"world"};
console.log(foo,bar);
//hello world
//变量名和属性名不一致的写法
let {foo:fee}={foo:"hello",bar:"world"};
console.log(fee);
//hello
2.嵌套解构
let obj={p:['Hello',{y:'World'}]};
let {p:[a,{y:b}]}=obj;
console.log(a,b);
//Hello World
3.设置默认值
let {name,age,gender="male"}={name:'zs',age:12}
console.log(name,age,gender);
//zs 12 male
经典面试题:
const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f,f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);
//1 2 3 [11,999] undefined undefined 5 {i:6,j:7}
2.3 字符串解构
字符串既可以使用[ ]解构，也可以使用{ }解构
使用[ ]解构字符串内部的字符，使用{ }解构字符串原型中的方法和属性
let [a,b,c,d,e]='hello';
console.log(a,b,c,d,e);
//h e l l o
let {length,toString}='hello';
console.log(length,toString);
//5 [Function: toString]
2.4 数值和布尔值解构
只能使用{ }解构其原型对象中的方法和属性
let {toString,valueOf}=10;
console.log(toString,valueOf);
//[Function: toString] [Function: valueOf]
let {toString,valueOf}=true;
console.log(toString,valueOf);
//[Function: toString] [Function: valueOf]
3 扩展运算符
使用拓展运算符可以解构数组和对象，并返回解构后的新数组或者新对象
…用到=左侧是聚合 用到=右侧是展开
let [a,...b]=[1,2,3]
console.log(a,b); //1 [2,3]
let obj1={
name:'zs',
age:12
}
let obj2={
...obj1,
name:'ls',
gender:'male'
}
console.log(obj2); //{ name: 'ls', age: 12, gender: 'male' }
let arr1=['tom','terry','jacky'];
let arr2=['zs',...arr1,'ls'];
console.log(arr2); //[ 'zs', 'tom', 'terry', 'jacky', 'ls' ]
4 对象
4.1 对象简写
ES6中规定可以直接在对象中写入变量和函数作为对象的属性和方法，此时属性名为变量名, 属性值为变量的值
let name='Tom';
let age=12;
let obj={
name,
age,
sayName(){ //函数中对象简写
console.log(this.name);
}
}
obj.sayName();
//Tom
4.2 对象API拓展
ES6中对于Object的拓展主要是静态方法的拓展。
Object.is()判断两个值是否相等
console.log(1===1);//true
console.log(Object.is(1,1));//true
console.log(Object.is(1,2));//false
console.log(+0===-0)//true
console.log(Object.is(+0,-0));//false
console.log(NaN===NaN);//false
console.log(Object.is(NaN,NaN));//true
Object.assign()对象复制，拷贝
至少两个参数，三个及以上参数代表将后面的对象合并然后复制给第一个对象(参数)
let obj1={}
let obj2={
name:'zs',
age:12
}
let obj3={
name:'ls',
gender:'男'
}
Object.assign(obj1,obj2);
console.log(obj1); //{ name: 'zs', age: 12 }
console.log(obj1 === obj2); //false
Object.assign(obj1,obj2,obj3); //{ name: 'ls', age: 12, gender: '男' }
console.log(obj1);
Object.getPrototypeOf()获取原型对象中的方法
let obj={
name:"",
age:1
}
console.log(Object.getPrototypeOf(obj)); //[Object: null prototype] {}
console.log(obj.__proto__); //[Object: null prototype] {}
console.log(obj.constructor.prototype); //[Object: null prototype] {}
Object.setPrototypeOf()设置原型对象中的方法
let obj1={}
let obj2={
name:'zs',
age:12
}
Object.setPrototypeOf(obj1,obj2);//设置obj1的原型对象为obj2
console.log(obj1.__proto__); //{ name: 'zs', age: 12 }
console.log(obj1.constructor.prototype); //[Object: null prototype] {} 通过构造函数的原型获取，还是原来的不变
console.log(Object.getPrototypeOf(obj1)); //{ name: 'zs', age: 12 }
Object.keys() Object.values() Object.entries()获取属性名 属性值 键值对组成的数组
let obj={
name:'terry',
age:12
}
// 获取所有属性名组成的数组
console.log(Object.keys(obj)); //[ 'name', 'age' ]
// 获取所有属性值组成的数组
console.log(Object.values(obj)); //[ 'terry', 12 ]
// 获取键值对组成的数组
console.log(Object.entries(obj)); //[ [ 'name', 'terry' ], [ 'age', 12 ] ]
5 数组
5.1 数组API拓展
Array.from()将类数组对象转换为数组
//类数组对象
let obj={
0:'zs',
1:'ls',
2:'ww',
length:3
}
console.log(Array.from(obj))
字符串转数组方法
//方法1
let [...arr]='hello';
console.log(arr);
//方法2
let str='hello';
let arr=Array.from(str);
console.log(arr);
//方法3
let str='hello';
let arr=str.split('');
console.log(arr);
Array.of()创建数组，参数是数组元素
let arr=Array.of(1,2,10,'hello',6);
console.log(arr);
//[ 1, 2, 10, 'hello', 6 ]
Array.prototype.find()返回第一个满足条件的元素或者undefined，函数作为参数
let arr=[1,2,3,4,5];
let result=arr.find((item)=>{
return item>2
});
console.log(result);
//3
Array.prototype.findIndex()返回第一个满足条件的元素的索引或者-1，函数作为参数
let arr=[1,2,3,4,5];
let result=arr.findIndex((item)=>{
return item>2
});
console.log(result);
//2
Array.prototype.includes();是否包含某个元素，返回true/falseArray.prototype.fill()填充数组
let arr=[1,2,3,4];
console.log(arr.includes(3)); //true
console.log(arr.fill(5)); //[ 5, 5, 5, 5 ]
Array.prototype.keys()返回由数组索引组成的数组Array.prototype.values()返回由数组的值组成的数组Array.prototype.entries()返回由数组键值对组成的数组
6 函数
6.1 函数参数
ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。通常情况下，定义了默认值的参数，应该是函数的尾参数，函数的length属性，将返回没有指定默认值的参数个数。
let myFun1=function(a,b,c=10,d){
console.log(a,b,c,d); //null,1,10,undefined
}
myFun1(null,1);
console.log(myFun1.length); //2;长度只计算默认值前面的
6.2 函数参数解构
…用在形参位置，叫做 rest 参数，用于获取函数实参，代替arguments，rest参数必须放在参数的最后
arguments—是一个对象，rest—是一个数组
function test(a,...b){
console.log(a,b);
}
test(1,2,3,4,5,6);
//1 [ 2, 3, 4, 5, 6 ]
1.函数参数对象解构
function test({name,age,...a}){ //...a解构剩余对象中的属性并返回一个新对象
console.log(name,age,a);
}
test({name:"zhangsan",age:12,gender:1});
//zhangsan 12 { gender: 1 }
2.函数参数对象默认值解构
function test({name,age=1,...a}){
console.log(name,age,a);
}
test({name:"zhangsan",gender:1});
//zhangsan 1 { gender: 1 }
3.函数参数数组解构
function test([a,b,c]){
console.log(a,b,c);
}
test([,2,3]);
//undefined 2 3
6.3 箭头函数
ES6允许使用箭头(=>)定义函数
let myFun=()=>{}等价于let myFun=function(){}
特点：
1.箭头函数的this是静态的，this始终指向函数声明时所在作用域下的this的值（即继承上一层的this）
2.不能作为构造函数实例化对象
3.不能使用arguments
4.只有一个形参，()可以省略；函数体只有一条语句，{}可以省略
let obj={
name:'zs',
sayHello:()=>{
console.log(this.name); //undefined
},
sayName(){
return ()=>{
console.log(this.name); //zs
}
}
}
obj.sayHello();
obj.sayName()();
箭头函数比较适用this无关的回调（定时器），数组的方法回调
不适合与this有关的回调（DOM事件回调），对象的方法
7 Set与Map
7.1 Set
Set类似于数组，但是成员的值都是唯一的，没有重复的值。Set 本身是一个构造函数，用来生成 Set 数据结构展。Set 构造函数可以接受一个数组（或者具有 iterable 接口的其他数据结构）作为参数，用来初始化。
var set = new Set();
可作为数组去重的一种方法
7.2 Set API
Set.prototype.size返回Set实例的成员总数。Set.prototype.add(value)添加某个值，返回Set结构本身Set.prototype.delete(value)删除某个值，返回一个布尔值，表示删除是否成功。Set.prototype.has(value)返回一个布尔值，表示该值是否为Set的成员。Set.prototype.clear()清除所有成员，没有返回值。Set.prototype.keys()返回键名的遍历器Set.prototype.values()返回键值的遍历器Set.prototype.entries()返回键值对的遍历器Set.prototype.forEach()使用回调函数遍历每个成员
let arr=[1,2,3,4,4,5,3,2,1,7];
let set=new Set(arr);
console.log(Array.from(set)); //[ 1, 2, 3, 4, 5, 7 ]
console.log(set.size); //6
console.log(set.add(100)); //Set(7) { 1, 2, 3, 4, 5, 7, 100 }
set.delete(1);
console.log(set); //Set(6) { 2, 3, 4, 5, 7, 100 }
console.log(set.has(8)); //false
set.clear();
console.log(set); //Set(0) {}
7.3 Map
Map类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。Map 可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。
var map = new Map([ ['name', '张三'], ['title', 'Author'] ]);
7.4 Map API
Set.prototype.size返回 Map 结构的成员总数。Set.prototype.set(key, value)set方法设置键名key对应的键值为value，然后返回整个map结构。如果key已经有值，则键值会被更新，否则就新生成该键。Set.prototype.get(key)get方法读取key对应的键值，如果找不到key，返回undefined。Set.prototype.has(key)has方法返回一个布尔值，表示某个键是否在当前 Map 对象之中。Set.prototype.delete(key)delete方法删除某个键，返回true。如果删除失败，返回false。Set.prototype.clear()清除所有成员，没有返回值et.prototype.values()返回键值的遍历器Set.prototype.entries()返回键值对的遍历器Set.prototype.forEach()使用回调函数遍历每个成员
let obj={
name:'jerry',
age:12
}
let map=new Map(Object.entries(obj));
map.set({a:1,b:2},['tom','jacky']);
console.log(map);
/*Map(3) {
'name' => 'jerry',
'age' => 12,
{ a: 1, b: 2 } => [ 'tom', 'jacky' ]
}*/
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
