ES6--JavaScript扩展知识点（letconst解构）

Posted 2022-09-20 blogzzy

一，ES2015(ES6)新增了两个声明变量的关键字：let、const

let：只在代码块内有效，不可重复声明，不会提前初始化

　　1.只在代码块内有效

    let a = 1;    
    var b = 2;

console.log(b);
console.log(a);//输出a会报错 因为let声明只在代码块内有效
    

　　2.不可重复声明　

let a = 1;
let a = 2;//报错Uncaught SyntaxError: Identifier ‘a‘ has already been declared

　　3.不会提前初始化

console.log(b);//undefined
var b = 2;
console.log(a);//报错 Cannot access ‘a‘ before initialization
let a = 1;

const：规则与let相似，但声明必须赋值，且基础数据类型不可更改(数值 number、字符串 string 、布尔值 boolean)，引用数据类型(对象 object，数组 array，函数 function)只可更改其引用内容

　　1.声明必须赋值

const PI = "3.1415926";
PI  // 3.1415926
const MY_AGE;  // SyntaxError: Missing initializer in const declaration    

　　2.基础数据类型不可更改，引用数据类型可更改内容

const a = 1;
a = 2;//Uncaught TypeError: Assignment to constant variable.
const arr = [1,2,3];
arr.push(4);
console.log(arr);//[1, 2, 3, 4]

二，解构赋值：用来解决赋值时需要产生大量新的变量的问题，对赋值运算的扩展

任何解构都有两个部分 
1 解构源： 等号右边是要解构的对象。 
2 解构目标：等号左边是要解构的对象。

数组解构模型(Array)：

1.基本数据

let [a,b,c] = [1,2,3];
//a=1 b=2 c=3 

　　2.数组中嵌套数组

let [a,[[b],c]] = [1,[[2],3]];
//a=1 b=2 c=3 

　　3.忽略某个元素

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

　　4.不完全解构:当解构对象属性不存在或无值或为undefined时取属性它的默认值

let[a=2,b]=[];
console.log(a,b);//2 undefined

　　5.解构可遍历对象(数组，对象，字符串)

let[a,b,c,d,e] = ‘hello‘;
console.log(a,b,c,d,e);//h e l l o

　　6.剩余运算符：将未被解构的剩余对象解构到一个对象中，只能放在最后

let [a,b,...c] = [1,2,3,4,5,6];
// a=1
// b=2
// c=[4,5,6]

　　

　　对象解构模型(Array)：

　　1.基本

let a,b = a:1,b:2;
// a:1
// b:2

　　2.嵌套、忽略

let obj = a:1,b:c:1;
let a,b:c = obj;
console.log(a,c);//1 1

let obj = a:1,b:c:1;
let a,b: = obj;
console.log(a);//1 

　　3.不完全解构、默认值

let obj = p: [y: ‘world‘] ;
let p: [ y , x=1 ]  = obj;
// x = 1
// y = ‘world‘

　　4.剩余运算符:只能放在最后

let a, b, ...rest = a: 10, b: 20, c: 30, d: 40;
// a = 10
// b = 20
// rest = c: 30, d: 40