企业级开发

Posted 2021-05-07 wodeqiyuan

三、ES6基础

1.新增命令

ES6新增了let命令，用来声明变量。它的用法类似于var，但存在不同的新特性。首先，let所声明的变量，只在let命令所在的代码块内有效。let不存在变量提升，在代码块内，使用let命令声明变量之前，该变量都是不可用的。

不允许用let在同一作用域内重复声明相同的变量，let实际上为javascript新增了块级作用域。外层作用域无法读取内层作用域的变量，内层作用域可以定义外层作用域的同名变量。

 

const声明一个只读的常量，一旦声明，常量的值就不能改变，所以必须在声明时初始化常量。const常量也存在块级作用域，且不允许重复声明。

 

2.解构赋值

ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如：

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

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。如果解构不成功，变量的值就等于undefined。

另一种情况是不完全解构，即等号左边的模式，只匹配一部分等号右边的数组。这种情况下，解构（对应变量的赋值）依然可以成功。

 

数组的解构例：

let [a, [b], d] = [1, [2, 3], 4];        //a = 1; b = 2; d = 4，属于不完全解构
let [head, ...tail] = [1, 2, 3, 4];     //head = 1; tail = [2, 3, 4]，属于集合解构
let [x, y = ‘b‘] = [‘a‘];                // x=‘a‘, y=‘b’，默认值（当匹配值严格等于undefined时，默认值生效）
let [x = f()] = [1];                 //默认值也可以为函数
function f() { console.log(‘aaa‘); } 

 

对象的解构例：

对象的属性没有次序，变量必须与属性同名，才能取到正确的值

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

如果变量名与属性名不一致，必须写成下面这样

let { foo: baz } = { foo: ‘aaa‘, bar: ‘bbb‘ }; //baz = "aaa”

这实际上说明，对象的解构赋值是下面形式的简写

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

嵌套解构

let obj = { p: [ ‘Hello‘, { y: ‘World‘ } ] };

let { p: [x, { y }] } = obj; //x = "Hello”; y = "World”

默认值（默认值生效的条件是，对象的属性值严格等于undefined）

let {x: y = 3} = {}; y // 3

 

字符串的解构例：

解构时，字符串被转换成了一个类似数组的对象

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

还可以对数组的属性解构

let {length : len} = ‘hello’; //len = 5

 

数值和布尔值解构例：

解构时，如果等号右边是数值和布尔值，则会先转为对象

let {toString: s} = 123;

s === Number.prototype.toString //true

let {toString: s} = true;

s === Boolean.prototype.toString //true

 

函数参数的解构例：

function add([x, y]){ return x + y; }

add([1, 2]); //3

带默认值

function move({x = 0, y = 0}){ return [x, y]; } 
move({x: 3, y: 8});            //等价于参数为[3, 8] 
move({x: 3});                //等价于参数为[3, 0] 
move({});                    //等价于参数为[0, 0]
move();                    //等价于参数为[0, 0]

 

解构赋值用途例：

 

交换变量的值

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

 

接收从函数返回的多个值

function example(){ return [1, 2, 3]; }

let [a, b, c] = example();

 

函数参数的定义

function f([x, y, z]){ ... }

f([1, 2, 3]);

 

提取JSON数据

let jsonData = { id: 42, status: "OK", data: [867, 5309] };

let { id, status, data: number } = jsonData;

 

输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

 

函数参数的默认值

jQuery.ajax = function(url, { 
    async = true, 
cache = true,
 global = true, 
    beforeSend = function(){}, 
    complete = function(){},     
    // ... more config 
}) { // ... do stuff };

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo或者‘default foo‘;这样的语句

 

遍历map结构

let map = new Map();
map.set(‘first‘, ‘hello‘);
map.set(‘second‘, ‘world‘);
for (let [key, value] of map){ console.log(key + " is " + value); }