ES6
let 和 const
1.let 和 const 没有变量提升
2.let 和 const 不能够重复声明
3.let 和 大括号可以形成块级作用域
4.let可以解决暂时性死区
5.在全局作用域下,let声明的变量不会给window增加键值对
6.const的在创建的时候必须给他赋值
箭头函数
1.箭头函数里面没有arguments,不过可以使用剩余运算符接收参数,(...arg),这样得到的arg是参数构成的数组。
2.箭头函数如果只有一个形参,可以省略形参小括号
3.如果函数里只有return一行代码,可以省略大括号和return
4.如果函数里只有return {} 一行代码,省略的时候需要加上小括号
5.只有一行代码且没有return,大括号不能省略,如果省略大括号,就相当于是return的这行代码了。
let fn = (n) =>{
return m =>{
console.log(100)
}
}
//省略以后
let fn = n => m =>{console.log(100);}
fn()();
6.箭头函数没有this,如果你非要在箭头函数里面使用this,那就往上级作用域查找this。构造函数不能用箭头函数来写。
注意: 构造函数的类不能用箭头函数来写,会报错的,因为里面的this会去上级作用域查找了,就不是实例本身了
let obj = {
fn:()=>{
console.log(this);
}
}
obj.fn(); //=>Window
let f = obj.fn;
f(); //Window
----------------------------------------------
let fn = ()=>{
return ()=>{
console.log(this); // obj
}
}
let obj = {
fn:fn // 给obj新增键值对
};
obj.fn()();
如果fn函数是普通函数,那小函数的this就是obj,
如果fn函数是箭头函数,那小函数的this就是window,
7.函数可以给形参赋默认值(普通函数和箭头函数都可以)
...运算符
1.传递实参的时候 --> 展开运算符
let ary = [12,23,234,15,68];
console.log(Math.max(...ary));
如果当前值是数组,可以用展开运算符将数组展开,变成一组数据
2.接收实参的时候 --> 剩余运算符
剩余运算符必须放在最后面使用,用来接收剩余的参数
前面可以写很多个参数
function fn(...arg){
console.log(arg);
}
fn(1,2,3,4)
3.克隆数组(浅克隆) --> 也是 展开运算符
如果数组里面有引用数据类型,克隆过来以后,里面的引用数据类型的堆内存地址还是同一个,只不过表面的数组不是同一个堆内存,所以是浅克隆。
let ary = [100,200,300,400];
let cloneAry = [...ary];
console.log(cloneAry);
4.克隆对象 --> 也是 展开运算符
let obj = {
name: 1,
age:2
}
let cloneObj = {..obj};
console.log(cloneObj);
5.合并数组 --> 也是 展开运算符
let ary1 = [1,2,3];
let ary2 = [4,5,6];
let ary3 = [...ary1,...ary2,7,8,9];
console.log(ary3);
不仅可以合并,而且还可以手动往里面补充值。
6.合并对象 --> 也是 展开运算符
let obj1 = {name:1};
let obj2 = {age:2};
let obj3 = {
...obj1,
...obj2,
ss:100
}
console.log(obj3);
不仅可以合并,而且还可以手动往里面补充键值对。
解构赋值
前言: 解构赋值的目的是在数组或者对象中拿到你想要的值,就好像在很多的数据中,只取到你需要的那些数据。在进行解构赋值的时候,写中括号或者大括号只是为了保持结构上的一致,为了与结构对应才这样写的,并没有开辟新的堆内存。与结构对应好之后,只有真正拿到了数据的那个变量才是被声明了的变量,其余的所有东西都只是一种格式,为了去与结构对应才这样写的,并不是声明的变量。
1.使用解构赋值时,必须保证等号左右两边结构一样
2.解构赋值要一一对应,不想要的需要占位(普通对象不需要占位,想要哪个属性就写哪个属性名作为变量名解构出来,这个变量就可以用了)。比如数组解构时,为了对应,需要用逗号占位
3.可以配合剩余运算符使用,不过剩余运算符必须用在最后面
4.如果解构的时候没有这一项,可以给变量赋值默认值
let obj = {age:100}
let {s=[]} = obj;
console.log(s);
5.多维数组的解构,必须让结构保持一致,一一对应好
let ary = [100,200,300,400];
// let n = ary[0];
// let m = ary[3];
使用解构赋值时,必须保证等号左右两边结构一样
let [n,,,m] = ary;
如果中间不想解构,就拿逗号占位(只想解构开头和结尾)
console.log(n,m); // 100 400
---------------------------------------------
let [n,...arg] = ary;
// ...arg把剩余的值全部结构到一个数组里边
console.log(n,arg); // 100 [200,300,400]
----------------------------------------------
let [n=0,,,m,o = 0] = ary;
// 如果解构的时候右边没有这一项,咱们可给当前的变量赋一个默认值
console.log(n,o);// 0 0
// 多维数组的解构(只要等号所有两边的结构和位置保持一致就行了)
// let ary1 = [10,[20,30,[40]]];
// let [n,[,m,[x]]] = ary1;
// console.log(n,m,x); // 10 30 40
6.对象解构赋值
左边的变量名要和等号右边的属性名一致,而且不用考虑位置(就不像数组那样需要占位了),想要哪个就解构哪个,不想要的可以不写,不写就不解构,想要哪个属性就写哪个属性名作为变量名解构出来,这个变量就可以用了
let obj = {
sss:1,
age:2
}
let {age,sss} = obj;
// 左边的变量名要和等号右边的属性名一致,而且不用考虑位置
console.log(sss,age); // 1 2
注意:如果属性值是函数的,函数执行时的this不再是解构之前的对象
function fn() {
let obj = {
ss1: ss
}
function ss() {
console.log(this)
}
let {
ss1
} = obj;
ss1(); //解构出来以后就是变量了,函数执行没有点 this就是Window
obj.ss1(); // 函数执行前面有点 this就是obj
}
fn()
7.还可以对象和数组结合起来时一起使用解构赋值
let obj = {
name:1,
age:2,
ary:[100,200,300]
}
let {name,ary:[,,m]} = obj;
console.log(name,m);
//=> 1 300
let ary = [100,{name:1}];
let [,{name}] = ary;
console.log(name);
//=> 1
注意: 声明的变量不一定非要和属性名一致,可以自定义一个,这样相当于声明的变量就变成了 w
// let obj = {age:100};
// let {age:w} = obj;
// 你起的名字不想是对象里的属性名,就用冒号的形式,冒号后边是你新起的名字
// console.log(w);
使用解构赋值的一个案例:
let product = [
{
name:'华为',
time:'2020-01-12',
ss:{a:100}
},
{
name:'小米',
time:'2019-01-12',
ss:{a:100}
},
{
name:'魅族',
time:'2018-01-12',
ss:{a:100}
}
];
product.forEach(function(item,index){
// console.log(item.name,item.time);
// console.log(item.ss.a);
let {name,time,ss:{a:w}} = item;
console.log(name,time,w);
})