es6有哪些新特性？

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【es6有哪些新特性？ 】

1.背景介绍

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

2.知识剖析

下面是介绍下ES6中的解构赋值

解构赋值

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

let a = 1;

let b = 2;

let c = 3;

ES6允许写成这样：

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

数组的解构，数组的元素是按次序排列的，变量的取值由它的位置决定 。

const color = ['red', 'blue']

const [first, second] = color

console.log(first) //'red'

console.log(second) //'blue'

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

const people = {

    name: 'lux',

    age: 20

}

const { name, age } = people

对象的解构，变量和属性名对应即可，跟顺序无关,也可以起一个别名。

let { foo: baz } = { foo: ‘aaa’, bar: ‘bbb’ };

baz // “aaa”

let obj = { first: ‘hello’, last: ‘world’ };

let { first: f, last: l } = obj;

f // ‘hello’

l // ‘world’

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。真正被赋值的是后者，而不是前者。

解构不成功的值

当解构不成功值为undefined

var [a,b] = [1];

console.log(a,b); //1 undefined

默认值

只有当值全等与undefined时才会起作用

var [a,b = 2] = [1];

console.log(a,b); //1 2

var [a,b = 2] = [1,null];

console.log(a,b); //1 null

默认值也可以引用解构赋值中的其他变量，但是这个变量必须已经声明

let [a,b = a] = [1];

console.log(a,b); //1 1

let [a = b,b = 1] = [];

console.log(a,b); //Uncaught ReferenceError: b is not defined

解构的用途

交换变量

let a = 1;

let b = 2;

[a,b] = [b,a];

console.log(a,b); //2 1

从函数返回多个值

// 返回一个数组

function example() {

return [1, 2, 3];

}

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

// 返回一个对象

function example() {

return {

foo: 1,

bar: 2

};

}

let { foo, bar } = example();

只取需要的值

let arr = [

{

title:1111,

love:{

  one:'one_1',

  two:'two_1'

}

},

{

title:2222,

love:{

  one:'one_2',

  two:'two_2'

}

}

];

for(let {title,love:{two}} of arr){

console.log(title,two);

}

提取 JSON 数据

解构赋值对提取 JSON 对象中的数据，尤其有用

let jsonData = {

id: 42,

status: “OK”,

data: [867, 5309]

};

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

console.log(id, status, number);

// 42, “OK”, [867, 5309]

3 常见问题

解构赋值还有什么用法？

4 解决方案

简写

let {log,warn} = console;

log(‘hello’);

console.log(‘hello’)

5.编码实战

视频

PPT

6.扩展思考

7.参考文献

ECMAScript 6 入门

8 更多讨论

1，什么是块级作用域

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

function f1() {

let n = 5;

if (true) {

let n = 10;

}

console.log(n); // 5

}

上面的函数有两个代码块，都声明了变量n，运行后输出 5。这表示外层代码块不受内层代码块的影响。如果两次都使用var定义变量n，最后输出的值才是 10。

2.const用法？

const声明一个只读的常量。一旦声明，常量的值就不能改变。const的作用域与let命令相同：只在声明所在的块级作用域内有效。

3，对象简写使用？

function f(x, y) {

return {x, y};

}

// 等同于

function f(x, y) {

return {x: x, y: y};

}

f(1, 2) // Object {x: 1, y: 2}