说出至少5个ES6的新特性，并简述它们的作用_Web前端

8条回答

是你的小甜心呀

2楼 · 2021-02-01 09:43

1.let关键字，用于声明只在块级作用域起作用的变量；

2.const关键字，用于声明一个常量；

3.结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值；

4.Symbol数据类型，定义一个独一无二的值；

5.Proxy代理，用于编写处理函数，来拦截目标对象的操作；

6.for...of遍历，可遍历具有iterator接口的数据结构；

7.Set结构，存储不重复的成员值的集合；

8.Map结构，键名可以是任何类型的键值对集合；

9.Promise对象，更合理、规范地处理异步操作；

10.Class类定义类和更简便地实现类的继承；

小磊子

3楼 · 2021-02-01 10:03

从在过去的12个月里所从事的不同 JavaScript 相关项目中，我发现有 5 个 ES6 特性是不可或缺的，因为它们真正简化了 JavaScript 普通任务的完成方式。你心中的前 5 名可能和我的不一样，如果是的话，我希望你能在结尾的评论区分享它们。

让我们正式开始！

1、箭头函数（Arrow Functions）

2、Promises

3、异步函数（Async Functions）

4、解构（Destructuring）

5、默认和剩余参数（Default and Rest Parameters）

1) JavaScript 箭头函数

在 ES6 JavaScript 中，我最喜欢的新增特性之一并不是一个全新特性，而是一个我每次使用都能让我微笑的新语法。我说的就是箭头函数，它提供了一种极致优雅和简洁的方式来定义匿名函数。

简而言之，箭头函数就是丢掉了关键字 function，然后用一个箭头 => 来分离一个匿名函数的参数部分和函数体：

(x, y) => x * y;

这相当于:

function(x, y){
return x * y;
}

或者:

(x, y) => {
var factor = 5;
var growth = (x-y) * factor;
}

完全等价于:

function(x, y){
var factor = 5;
var growth = (x-y) * factor;
}

在使用传统的匿名函数时，箭头函数还消除了一个关键的错误源，即函数内的 this 对象的值。使用箭头函数， this 是基于词法绑定，这仅仅是意味着它的值被绑定到父级作用域的一种奇特的方式，并且永远不会改变。如果一个箭头函数定义在一个自定义对象 countup 中， this 值毫无疑问地指向 countup。比如：

var countup = {
counter: 15,
start:function(){
window.addEventListener('click', () => {
alert(this.counter) // correctly alerts 15 due to lexical binding of this
})
}
};
countup.start();

对比传统匿名函数， this 的值在哪变化取决于它被定义的上下文环境。当在上面的例子中尝试引用 this.counter，结果将返回 undefined，这种行为可能会把很多不熟悉动态绑定的复杂性的人搞糊涂。使用箭头函数， this 的值总是可预测并且容易推断的。

对于箭头函数的详细讲解，请查看参考链接

参考链接：http://www.javascriptkit.com/javatutors/javascriptarrowfunctions.shtml

2) JavaScript Promises

JavaScript ES6 Promises 使异步任务的处理方式变成线性，这是大多数现代Web应用程序中的一项任务。而不是依靠回调函数 —— 通过JavaScript框架（如jQuery）普及。JavaScript Promises 使用一个中心直观的机制来跟踪和响应异步事件。它不仅使调试异步代码变得更容易，而且使得编写它也是一种乐趣。

所有 JavaScript Promise 都是通过 Promise() 构造函数开始和结束:

const mypromise = new Promise(function(resolve, reject){
// 在这编写异步代码
// 调用 resolve() 来表示任务成功完成
// 调用 reject() 来表示任务失败
})

在内部使用 resolve() 和 reject() 方法，当一个 Promise 被完成或拒绝时，我们可以分别向一个 Promise 对象发出信号。 then() 与 catch() 方法随后可以被调用，用以处理完成或拒绝 Promise 后的工作。

我用下面一个被注入 XMLHttpRequest 函数的 Promise 的变种，来一个接一个的检索外部文件内容：

function getasync(url) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.onload = () => resolve(xhr.responseText)
xhr.onerror = () => reject(xhr.statusText)
xhr.send()
})
}
getasync('test.txt').then((msg) => {
console.log(msg) // echos contents of text.txt
return getasync('test2.txt')
}).then((msg) => {
console.log(msg) // echos contents of text2.txt
return getasync('test3.txt')
}).then((msg) => {
console.log(msg) // echos contents of text3.txt
})

要掌握 JavaScript Promises 的关键点，例如 Promise 链和并行执行 Promise，请查看参考链接

参考链接：http://liubin.org/promises-book/

3) JavaScript 异步函数

除了 JavaScript Promise，异步函数进一步重写了传统的异步代码结构，使其更具可读性。每当我向客户展示带有async 编程功能的代码时，第一个反应总是令人惊讶，随之而来的是了解它是如何工作的好奇心。

一个异步函数由两部分构成:

1) 一个以 async 为前缀的常规函数

async function fetchdata(url){
// Do something
// Always returns a promise
}

2) 在异步函数（Async function）内，使用 await 关键字调用异步操作函数

一个例子胜过千言万语。下面是基于上面示例重写的 Promise，以便使用 Async functions代替：

function getasync(url) { // same as original function
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest()
xhr.open("GET", url)
xhr.onload = () => resolve(xhr.responseText)
xhr.onerror = () => reject(xhr.statusText)
xhr.send()
})
}
async function fetchdata(){ // main Async function
var text1 = await getasync('test.txt')
console.log(text1)
var text2 = await getasync('test2.txt')
console.log(text2)
var text3 = await getasync('test3.txt')
console.log(text3)
return "Finished"
}
fetchdata().then((msg) =>{
console.log(msg) // logs "finished"
})

上面的例子运行时会输出“test.txt”，“test2.txt”，“test3.txt”，最后是“Finished”。

如你所见，在异步函数中，我们把异步函数 getasync() 当作是同步函数调用 - 没有 then() 方法或回调函数通知进行下一步。无论何时遇到关键字 await，执行都会暂停，直到 getasync() 解决，然后再转到异步函数中的下一行。结果与纯粹的基于 Promise，使用一串 then 方法的方式一样。

要掌握异步函数，包括如何 await 并行执行函数，请阅读 "Introduction to JavaScript Async Functions- Promises simplified"

参考链接：http://www.javascriptkit.com/javatutors/intro-javascript-async-functions.shtml

4) JavaScript 解构

除了箭头函数，这是我每天使用最多的 ES6 功能。ES6 解构并非一个新功能，而是一个新的赋值语法，可以让您快速解压缩对象属性和数组中的值，并将它们分配给各个变量。

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name, hobby} = profile // destructure profile object
console.log(name) // "George"
console.log(hobby) // "Tennis"

这里我用解构快速提取 profile 对象的 name 和 hobby 属性。

使用别名，你可以使用与你正在提取值的对象属性不同的变量名：

var profile = {name:'George', age:39, hobby:'Tennis'}
var {name:n, hobby:h} = profile // destructure profile object
console.log(n) // "George"
console.log(h) // "Tennis"

嵌套对象解构

解构也可以与嵌套对象一起工作，我一直使用它来快速解开来自复杂的JSON请求的值：

var jsondata = {
title: 'Top 5 JavaScript ES6 Features',
Details: {
date: {
created: '2017/09/19',
modified: '2017/09/20',
},
Category: 'JavaScript',
},
url: '/top-5-es6-features/'
};
var {title, Details: {date: {created, modified}}} = jsondata
console.log(title) // 'Top 5 JavaScript ES6 Features'
console.log(created) // '2017/09/19'
console.log(modified) // '2017/09/20'

解构数组

数组的解构与在对象上的工作方式类似，除了左边的花括号使用方括号代替：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a, b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Dennis"

你可以跳过某些数组元素，通过使用逗号（，）：

var soccerteam = ['George', 'Dennis', 'Sandy']
var [a,,b] = soccerteam // destructure soccerteam array
console.log(a) // "George"
console.log(b) // "Sandy"

对我而言，解构消除了传统方式提取和分配对象属性和数组值的所有摩擦。要充分掌握ES6解构的复杂性和潜力，请阅读"Getting to Grips with ES6: Destructuring"

链接：https://hackernoon.com/getting-to-grips-with-es6-destructuring-e5b5ddb34990

5) 默认和剩余参数（Default and Rest Parameters）

最后，我最想提出的ES6的两个特性是处理函数参数。几乎我们在JavaScript中创建的每个函数都接受用户数据，所以这两个特性在一个月中不止一次地派上用场。

默认参数（Default Parameters）

我们都使用过一下模式来创建具有默认值的参数：

function getarea(w,h){
var w = w || 10
var h = h || 15
return w * h
}

有了ES6对默认参数的支持，显式定义的参数值的日子已经结束：

function getarea(w=10, h=15){
return w * h
}
getarea(5) // returns 75

关于 ES6 默认参数的更多详情，查看参考链接

参考链接：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters

剩余参数（Rest Parameters）

ES6中的 Rest Parameters 使得将函数参数转换成数组的操作变得简单。

function addit(...theNumbers){
// get the sum of the array elements
return theNumbers.reduce((prevnum, curnum) => prevnum + curnum, 0)
}
addit(1,2,3,4) // returns 10

通过在命名参数前添加3个点 ...，在该位置和之后输入到函数中的参数将自动转换为数组。

没有 Rest Parameters, 我们不得不做一些复杂的操作比如“手动将参数转换为数组 ”

参考链接：http://www.javascriptkit.com/javatutors/arrayprototypeslice.shtml

function addit(theNumbers){
// force arguments object into array
var numArray = Array.prototype.slice.call(arguments)
return numArray.reduce((prevnum, curnum) => prevnum + curnum, 0)
}
addit(1,2,3,4) // returns 10

Rest parameters 只能应用于函数的参数的一个子集，就像下面这样，它只会将参数从第二个开始转换为数组：

function f1(date, ...lucknumbers){
return 'The Lucky Numbers for ' + date + ' are: ' + lucknumbers.join(', ')
}
alert( f1('2017/09/29', 3, 32, 43, 52) ) // alerts "The Lucky Numbers for 2017/09/29 are 3,32,43,52"

722

4楼 · 2021-02-01 10:10

1.let关键字，用于声明只在块级作用域起作用的变量；

2.const关键字，用于声明一个常量；

3.结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值；

4.Symbol数据类型，定义一个独一无二的值；

5.Proxy代理，用于编写处理函数，来拦截目标对象的操作；

6.for...of遍历，可遍历具有iterator接口的数据结构；

7.Set结构，存储不重复的成员值的集合；

8.Map结构，键名可以是任何类型的键值对集合；

9.Promise对象，更合理、规范地处理异步操作；

10.Class类定义类和更简便地实现类的继承；

希希

5楼 · 2021-02-01 10:17

1.let关键字，用于声明只在块级作用域起作用的变量；

2.const关键字，用于声明一个常量；

3.结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值；

4.Symbol数据类型，定义一个独一无二的值；

5.Proxy代理，用于编写处理函数，来拦截目标对象的操作；

6.for...of遍历，可遍历具有iterator接口的数据结构；

7.Set结构，存储不重复的成员值的集合；

8.Map结构，键名可以是任何类型的键值对集合；

9.Promise对象，更合理、规范地处理异步操作；

10.Class类定义类和更简便地实现类的继承；

哈哈哈

6楼 · 2021-02-01 10:22

1.不一样的变量声明：const和let

2.模板字符串

3.箭头函数（Arrow Functions）

4. 函数的参数默认值

5.Spread / Rest 操作符

IT学习

7楼 · 2021-02-01 10:25

1、let关键字，用于声明只在块级作用域起作用的变量。
     2、const关键字，用于声明一个常量。
     3、解构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值。
     4、Symbol数据类型，定义一个独一无二的值。
     5、Proxy代理，用于编写处理函数，来拦截目标对象的操作。
     6、for...of遍历，可遍历具有iterator 接口的数据结构。
     7、Set结构，存储不重复的成员值的集合。
     8、Map结构，键名可以是任何类型的键值对集合。
     9、Promise对象，更合理、规范地处理异步操作。
     10、Class类定义类和更简便地实现类的继承。

梵梵

8楼 · 2021-02-01 11:02

1：基本概念

Iterator 迭代器是一种接口，为不同的数据结构提供统一的访问机制，这个访问机制主要是遍历，我们知道，在数组、在对象、在类数组、在map、在set里面，都可以用for of或者扩展运算符来得到一个数组或者是遍历当前的数据结构，为什么能够遍历的原因就是因为存在这个Iterator 迭代器这个东西，所以我们可以用for of来提供一个统一的遍历，因此这个底层或者是Itrator它最初是为了for of而设计的。

为了给所有的数据结构有一个统一的遍历接口，统一的访问机制，因此就产生了迭代器。

迭代器的特点：

按某种次序排列数据结构
为for of提供一个遍历支持
为不同的数据结构提供统一的访问机制（目的）
遍历过程：要遍历一个对象，Iterator要新建一个指针，指向数据结构的起始位置；然后调用next()方法，返回如下对象：

    {
        /* 当前位置数据值 */
        value: 'value',
        /* 是否遍历完成标识 */
        done: false,
    }
    {
        value: undefined,
        done: true,
    }12345678910

默认部署在数据结构Symbol.iterator属性上：为了提供一个统一的访问，防止篡改。

    let array = ['a', 'b', 'c', 'd'];
    
    let Iterator = array[Symbol.iterator]();
    
    /*
    Iterator.next()
    { value: "a", done: false }
    Iterator.next()
    { value: "b", done: false }
    Iterator.next()
    { value: "c", done: false }
    Iterator.next()
    { value: "d", done: false }
    Iterator.next()
    { value: undefined, done: true }
    Iterator.next()
    { value: undefined, done: true }
    */123456789101112131415161718

默认包含迭代器对象

Array
Map
Set
String
arguments
NodeList

2：应用场景

for…of

结构赋值

  let set = new Set().add('aa').add('bb');
  let [a, b] = set;
  
  //
  a: 'aa'
  b: 'bb'

扩展运算符

generator函数

  let generator = function* () {
    yield 1;
    yield 2;
    yield 3;
    yield 4;
    yield 5;
  };
  
  let iterator = generator();
  
  //
  iterator.next();
  { value: 1, done: false }
  iterator.next()
  { value: 2, done: false }
  iterator.next()
  { value: 3, done: false }
  iterator.next()
  { value: 4, done: false }
  iterator.next()
  { value: 5, done: false }
  iterator.next()
  { value: undefined, done: true }
  iterator.next()
  { value: undefined, done: true }

3：数组遍历

遍历器覆盖

  const array = ['a', 'b', 'c'];
  for(let s of array) {
    console.log(s);
  }
  
  //
  a
  b
  c
  
  const array = ['a', 'b', 'c'];
  const object = {};
  object[Symbol.iterator] = () => {
    return array[Symbol.iterator].call(array);
  }
  for(let s of object) {
    console.log(s);
  }
  //
  a
  b
  c

获取键值与键名

  const array = ['a', 'b', 'c'];
  // for  of 等到的是value
  for(let s of array) {
    console.log(s);
  }
  //
  a
  b
  c
  
  // for  in等到的是key
  for(let s in array) {
    console.log(s);
  }
  //
  0
  1
  2

py大白

9楼 · 2021-02-01 14:13

1.let关键字，用于声明只在块级作用域起作用的变量；

2.const关键字，用于声明一个常量；

3.结构赋值，一种新的变量赋值方式。常用于交换变量值，提取函数返回值，设置默认值；

4.Symbol数据类型，定义一个独一无二的值；

5.Proxy代理，用于编写处理函数，来拦截目标对象的操作；

6.for...of遍历，可遍历具有iterator接口的数据结构；

7.Set结构，存储不重复的成员值的集合；

8.Map结构，键名可以是任何类型的键值对集合；

9.Promise对象，更合理、规范地处理异步操作；

10.Class类定义类和更简便地实现类的继承；