ES6的新特性

落日映苍穹つ 2022-07-14 09:14 177阅读 0赞

**1. 设置对象变量键值的语法**

JavaScript开发者的烦恼之一是不能在对象字面量里设置变量键值——必须要在初始化后对象后增加变量键/值：

// \*Very\* reduced example

let myKey = 'key3';

let obj = \{

key1: 'One',

key2: 'Two'

\};

obj\[myKey\] = 'Three';

这个烦恼说好一点是不方便，说差一点是难以阅读以及丑陋无比。ES6给开发者们提供了一个解决方法：

let myKey = 'variableKey';

let obj = \{

key1: 'One',

key2: 'Two',

\[myKey\]:'Three' /\* yay! \*/

\};

加上一层\[\]，程序员们就可以在一条对象字面量定义语句就做完所有的事情。

**2. 箭头函数**

不用了解ES6带来的改变，你也早就知道箭头函数了——它已经是许多话题的中心，给JavaScript程序员造成了一些困扰（至少在开始的时候是这样的）。我可以写出好几篇博客来解释箭头函数的方方面面，但是我最想告诉大家的是，箭头函数是如何压缩简单函数的代码量的：

// Adds a 10% tax to total

let calculateTotal = total => total \* 1.1;

calculateTotal(10) // 11

// Cancel an event -- another tiny task

let brickEvent = e => e.preventDefault();

document.querySelector('div').addEventListener('click',brickEvent);

不用写function和return这两个关键词，有时候甚至不需要写()，箭头函数是简单函数非常好的一个快捷写法。

**3. find/findIndex**

JavaScript提供了Array.prototype.indexOf方法，用来获取一个元素在数组中的索引，但是indexOf方法不能计算目标元素的查找条件。有时候你还会想获取满足查找条件的那个元素本身。输入find和findIndex吧——这两个方法可以在一个数组搜索出第一个满足条件的值。

let ages = \[12, 19, 6, 4\];

let firstAdult = ages.find(age => age >= 18); // 19

let firstAdultIndex = ages.findIndex(age => age >=18); // 1

find和findIndex允许搜索一个计算后的值，也防止了一些不必要的副作用和循环产生的不确定值。

**4. 扩展运算符：**

扩展运算符表示一个数组或者一个可迭代的对象可以在一次调用中将它们的内容分割为独立的参数。比如：

// Pass to function that expects separate multiplearguments

// Much like Function.prototype.apply() does

let numbers = \[9, 4, 7, 1\];

Math.min(...numbers); // 1

// Convert NodeList to Array

let divsArray = \[...document.querySelectorAll('div')\];

// Convert Arguments to Array

let argsArray = \[...arguments\];

这个神奇的运算符带来的附加好处是能够把可迭代对象（NodeList, arguments等等）转化为真正的数组——一直以来我们都用[Array.from][] 或其它的hack方法。

**5. 模板字符串**

在JavaScript中，我们用[连接符或者在一行字符的末尾增加\\来创建多行字符串][Link 1] ，这两种方法都难以维护。许多开发者和框架都开始滥用标签来封装多行字符串模板，其它的则通过DOM和outerHTML来获取元素的HTML作为一个字符串。

ES6给我们提供了[模板字符串][Link 2]，你可以用它和重音符一起轻松的写多行字符串。

// Multiline String

let myString = \`Hello

I'm a new line\`; // No error!

// Basic interpolation

let obj = \{ x: 1, y: 2 \};

console.log(\`Your total is: $\{obj.x + obj.y\}\`); // Yourtotal is: 3

当然，除了多行字符串，模板字符串还有其它的能力，比如说[简单或者高级的插值][Link 2]。不过，仅仅是优雅的写多行字符串这件事情，已经让我十分欣慰了。

**6. 默认参数值**

许多服务端语言可以在函数声明中定义默认参数值，比如python和PHP，现在JavaScript也可以了。

// Basic usage

function greet(name = 'Anon') \{

console.log(\`Hello $\{name\}!\`);

\}

greet(); // Hello Anon!

// You can have a function too!

function greet(name = 'Anon', callback = function()\{\}) \{

console.log(\`Hello $\{name\}!\`);

// No more"callback && callback()" (no conditional)

callback();

\}

// Only set a default for one parameter

function greet(name, callback = function()\{\}) \{\}

如果没有传递无默认值的参数，其它的语言可能会报错，但是JavaScript会将它们设为undefined。

这六个特性只是ES6中的沧海一粟，却是我们会不假思索的、频繁使用的特性。这些微小的新特性往往得不到人们的关注，却是代码中的核心部分。

[Array.from]: https://davidwalsh.name/array-from
[Link 1]: https://davidwalsh.name/multiline-javascript-strings
[Link 2]: https://davidwalsh.name/javascript-template-strings

发表评论取消回复

表情：

评论列表（有 0 条评论，177人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6新特性

ES6，全称 ECMAScript 6.0 ，是 JavaScript 的下⼀个版本标准，2015.06 发版。ES6 主要是为了解决 ES5 的先天不⾜，⽐如 Jav...

矫情吗；*/ 2024年04月21日 08:03/ 0 赞/ 70 阅读

相关 ES6新特性

文章目录一、ECMASript 介绍二、ES6 新特性 2.1 let、const 关键字 2.2 变量的解构赋值

ゝ一世哀愁。/ 2022年09月06日 15:27/ 0 赞/ 277 阅读

相关 ES6的新特性

ECMAScript 6（以下简称ES6）是JavaScript语言的下一代标准，已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上，推出JavaScr

客官°小女子只卖身不卖艺/ 2022年05月15日 01:41/ 0 赞/ 223 阅读

相关 es6新特性

1.let && const •都是块级作用域 •不能重复定义 •避免了变量提升 ① let命令也用于声明对象，但是作用域为局部。 ![在这里插入图片描述][

红太狼/ 2022年03月07日 21:24/ 0 赞/ 370 阅读

相关 es6新特性

es6语法 > es6语法用起来是十分方便的，但是有些浏览器还是不支持，但是做大型项目中基本上要用到转码器（babel转码器），可以把es6语法转为es5直接使用。 T

落日映苍穹つ/ 2022年01月25日 15:30/ 0 赞/ 366 阅读

相关 ES6新特性

转：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] co

Bertha 。/ 2022年01月12日 02:19/ 0 赞/ 338 阅读

相关 ES6新特性

转自：[https://www.jianshu.com/p/87008f4f8513][https_www.jianshu.com_p_87008f4f8513] 1.con

冷不防/ 2021年12月18日 07:07/ 0 赞/ 346 阅读

相关 es6新特性

https://www.cnblogs.com/minghui007/p/8177925.html 转载于:https://www.cnblogs.com/LWWTT/p/1

野性酷女/ 2021年11月02日 14:58/ 0 赞/ 506 阅读

相关 ES6新特性

1.变量声明let和const 在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如:

我会带着你远行/ 2021年10月29日 07:08/ 0 赞/ 517 阅读

相关 ES6新特性

1.声明变量的关键字：const 和 let JavaScript ES6中引入了另外两个声明变量的关键字：const和let。在ES6中，我们将很少能看到var了。 co

电玩女神/ 2021年09月17日 01:12/ 0 赞/ 505 阅读