【2022.07.15】【es6】【001】【读书笔记-复习自用】

一、let和const命令

let

1.用let声明变量，只在let命令所在代码块中有效

2.设置循环变量的部分是父作用域，循环体内部是单独的子作用域

for (let i = 0; i < 4; i++)  //父作用域
//以下是子作用域
{ 
  let i = 'aaaa';
  console.log(i);
}

3.不存在变量提升（只有var定义才存在变量提升，var定义变量提升后输出undefined）

4.存在暂时性死区：在变量声明完成前，使用会报错，声明后的就可用

5.不允许在相同作用域内重复声明同一个变量

6.let为js新增了块级作用域

（1）外层代码块不受内层代码块的影响

（2）不同作用域可以声明同名变量

const

1.声明一个只读的常量，遵循声明后立即初始化，且声明后的常量值不可更改        //变量指向的内存地址所保存的数据不可改动，如地址指向一个对象，指向的对象地址不可改，但对象可以修改，

2.只在声明所在的块级作用域有效

3.不可提升，存在暂时性死区

4.在同一作用域内，不可重复声明

二、变量的解构赋值

从数组和对象中提取值，对变量进行赋值，这被称为解构        //解构分为完全解构和不完全解构

数组：按照对应位置，给变量赋值        //相当于模式匹配，只要等号两边的模式相同，等号右边的值就会赋予左边所对应的变量，若解构不成功，则等于undefined/空数组[]，

let [a,b,c] = [11,22,33];  
// 等价于
let a = 11; 
let b = 22; 
let c = 33;

数组的解构赋值

//完全解构
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

//不完全解构
let [x, y] = [1, 2, 3];
x // 1
y // 2

//默认值
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'

//默认值可以引用解构赋值的其他变量，但该变量必须已经声明
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

对象的解构赋值

对象的解构与数组的解构不同，数组的元素是按照次序排列的，变量的取值是由它的位置决定；而对象的属性没有次序，变量必须和属性同名才可以获取到正确的值。

let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // 解构失败为undefined 

//变量名与属性名不一致
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
//对象的解构赋值的内部机制：先找到同名属性，然后再赋给对应的变量。此例子中，先找到foo（匹配的模式），再将值赋给baz（变量）
baz // "aaa"
foo // error: foo is not defined     

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

对象的解构赋值可以取到继承的属性。

const obj1 = {};
const obj2 = { foo: 'bar' };

//更换对象的原型对象方法：Object.setPrototypeOf（）：为现有对象设置原型，返回一个新对象，obj1.__proto__ 指向obj2
//obj1为现有对象，obj2为原有对象
Object.setPrototypeOf(obj1, obj2);

const { foo } = obj1;
foo // "bar"

字符串的解构赋值

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

//类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
let {length : len} = 'hello';
len // 5

以上例子cv by《ECMAScript 6 入门》--阮一峰

地址：ES6 入门教程