初识ES6

2022-10-19
作者流霞
~4.23K 字
次阅读
条评论

1. 1、初识ES6
2. 2、let 和 const 命令
1. 2.1. 特点：
2. 2.2. 作用域
3. 3、变量的解构赋值

let 和 const 命令：基础用法、特点。
变量的解构赋值：数组、对象、字符串、函数参数的解构赋值。

1、初识ES6

ECMAScript 6.0 (以下简称ES6)是JavaScript语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得JavaScript语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

2、let 和 const 命令

ES6 新增了let命令，用来声明变量，用法类似与var，但let命令声明的变量只在所在代码块内有效。

{
    let a = 10;
    var b = 20;
}
console.log(a); // ReferenceError: a is not defined
console.log(b); // 20

const声明一个只读的常量。一旦声明，常量的值就不能改变。因此const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据，值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合数据类型，变量指向的内存地址，保存的只是一个指向实际数据的指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。

const PI = 3.1415;
PI = 3; // TypeError: Assignment to constant variable.

const obj = {}
obj.age = 18;
obj = {} // TypeError: "foo" is read-only

特点：

不存在变量提升：

var命令会发生“变量提升”现象，即变量可以在声明之前使用，值为undefined。let和 const命令改变了语法行为，它所声明的变量一定要在声明后使用，否则报错。
1
2
3
4
5
console.log(age); // undefined
var age = 18;

console.log(name); // 报错ReferenceError
let name = 18;
暂时性死区

只要块级作用域内存在let命令，它所声明的变量就“绑定”这个区域，不受外部影响。如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。
1
2
3
4
5
var temp = 123;
if(true){
temp = 456; // ReferenceError
let temp;
}

不允许重复声明

let和 const不允许在相同作用域内，重复声明同一个变量。

// 报错 Identifier 'a' has already been declared
var a = 0;
let a = 1;
// 报错 Identifier 'a' has already been declared
let a = 10;
let a = 10;

作用域

ES5

ES5 只有全局作用域和函数作用域，没有块级作用域。

var tmp = new Date();
function f() {
  console.log(tmp);
  if (false) {
    var tmp = 'hello world';
  }
}
f(); // undefined,变量提升，内层tmp覆盖外层tmp

for(var i = 0 ;i < 5;i++){
    console.log(i);
}
console.log(i); // 5，循环变量泄露为全局变量

ES6 的块级作用域

let实际上为 JavaScript 新增了块级作用域。

function fun(){
    let n = 10;
    if(true){
        let n = 20;
    }
    console.log(n); // 10
}

3、变量的解构赋值

数组的解构赋值

// ES5:
let a = 1;
let b = 2;
let c = 3;

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

// 交换两个值
let x = 10;
let y = 20;
[y,x] = [x,y];

// 取第三个值
let [,,n] = [1,2,3]; // 3

// 解构不成功
let [x,y] = [1]; // x=1,y=undefined
let [x] = []

// 嵌套解构
let [x,y,z,p] = [1,2,[3,4],5]; // 不完全解构: x=1,y=2,z=[3,4],p=5
let [x,y,[n,m],p] = [1,2,[3,4],5]; // 完全解构: x=1,y=2,n=3,m=4,p=5

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

// ES6 内部使用严格相等运算符（===），判断一个位置是否有值。
// 只有当一个数组成员严格等于undefined，默认值才会生效。
// 如果一个数组成员是null，默认值就不会生效，因为null不严格等于undefined。
let [x = 1] = [undefined]; // x=1
let [x = 1] = [null]; //x=null

对象的解构赋值

// 数组的元素是按次序排列的，变量的取值由它的位置决定；
// 而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
let { foo, bar, baz } = { foo: 'aaa', bar: 'bbb' }; // baz:undefined

// 对象的解构赋值，可以很方便地将现有对象的方法，赋值到某个变量。
let { log, sin, cos } = Math;
const { log } = console;
log('hello'); // hello

// 如果变量名与属性名不一致，必须写成如下形式。
let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;

// 实质上，对象的解构赋值是下面形式的简写
// 对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量，真正被赋值的是后者
let { foo: foo, bar: bar } = { foo: 'aaa', bar: 'bbb' };

// 嵌套解构
let obj = {
  p: ['Hello', { y: 'World' }]
};
let { p, p: [x, { y }] } = obj;
// x="Hello",y="World",p=["Hello", {y: "World"}]

// 默认值,默认值生效的条件是对象的属性值严格等于undefined。
let {x = 3} = {}; // x=3
let {x, y = 5} = {x: 1}; // x=1,y=5
let {x: y = 3} = {}; // y=3
let {x = 3} = {x: null}; // x=null

字符串的解构赋值

// 字符串也可以解构赋值。转换成了一个类似数组的对象。
const [a, b, c, d, e] = 'hello';

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

函数参数的解构赋值

function getData(){
    let res = {
        code: 200,
        data:{
            list:[100,200,300]
        }
        test(res)
    }
}
function test({code,data}){
    console.log(code,data)
}
getData()

七月檐角的猫

1、初识ES6

2、let 和 const 命令

特点：

作用域

3、变量的解构赋值

数组的解构赋值

对象的解构赋值

字符串的解构赋值

函数参数的解构赋值