ES6知识点整理——let和const及解构赋值

1、 let与const

常量const [常量声明的时候要赋值；常量是不能被修改的，但可以修改对象的值。因为对象是引用类型，const 指向的是对象引用地址，只要地址不变就符合 const 定义]
Es5写法
Object.defineProperty(window,”PI2”,{
value: 3.1415926,
writable: false
})
Es6写法: const PI = 3.1415926
变量let let a = 1 [let声明的变量只在块作用域有效；es6强制开启严格模式，变量未声明不能引用，否则会报引用错误；let不能重复定义变量]

function test(){
  for(let i=1;i<3;i++){
     console.log(i);//1 2
  }
  console.log(i);//uncaught ReferenceError: i is not defined
  //let a = 1;
  let a = 2;
}

function last(){
  const PI=3.1415926;
  const k={
    a:1
  }
  k.b=3;
  console.log(PI,k);
}

test();
last();

2、解构赋值

什么是解构赋值:语法上就是赋值的作用。
解构:左边一种结构，右边一种结构，左右一一对应进行赋值。

解构赋值的分类:
数组解构赋值、对象解构赋值、字符串解构赋值、布尔值解构赋值、函数参数解构赋值、数值解构赋值

1）数组结构赋值

{
  let a,b,rest;
  [a,b]=[1,2];
  //let a=1,b=2;之前的写法
  console.log(a,b);//1  2
}

... 可以把其它的归为一个数组

{
  let a,b,rest;
  [a,b,...rest]=[1,2,3,4,5,6];
  console.log(a,b,rest);//1 2 [3,4,5,6]
}

延伸：可以给c赋值为默认值，防止没有成功配对赋值时候值为undefind情况

{
  let a,b,c,rest;
  //[a,b,c]=[1,2];
  [a,b,c=3]=[1,2];
 //console.log(a,b,c);//1 2 undefined
  console.log(a,b,c);//1 2 3
}

在es5中不好实现的代码，可以通过结构赋值轻松解决，如下

1. 变量交换

{
  let a=1;
  let b=2;
  [a,b]=[b,a];
  console.log(a,b);//2 1
}

2. 取函数return回来的值

{
  function f(){
    return [1,2]
  }
  let a,b;
  [a,b]=f();
  console.log(a,b);//1 2
}

3. 当函数返回多个值时，可以选择性的去接收某几个变量

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,,b]=f();
  console.log(a,b);//1 4
}

4. 不知道返回数组的长度时，后面的数可以接收为数组

{
  function f(){
    return [1,2,3,4,5]
  }
  let a,b,c;
  [a,,...b]=f();
  console.log(a,b);//1 [2,3,4,5]
}

2）对象解构赋值

{
  let a,b;
  ({a,b}={a:1,b:2})
  console.log(a,b);//1 2
}

{
  let o={p:42,q:true};
  let {p,q}=o;
  console.log(p,q);//42 true
}

对象解构赋值的默认值处理

{
  let {a=10,b=5}={a:3};
  console.log(a,b);
}

对象解构赋值场景:

{
  let metaData={
    title:'abc',
    test:[{
      title:'test',
      desc:'description'
    }]
  }
  let {title:esTitle,test:[{title:cnTitle}]}=metaData;
  console.log(esTitle,cnTitle);
}