【JS】ES6部分语法特点,let,const,箭头函数,...运算符,解构赋值

201 阅读6分钟

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);
     })