文章目录
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' ]
}*/