译者:动静若参商

译文:http://www.zcfy.cc/article/1795

原文:https://davidwalsh.name/es6-features

JavaScript社区中的每个人都喜欢新API、新语法和新特性——可以更优雅,更智能,更有效的完成重要任务。ES6带来了很多好东西,并且在过去的一年里,浏览器厂商们全力以赴的升级浏览器来使它们可用。尽管ES6中有一些大的更新,但是一些小升级也给了我巨大的惊喜。下面这些就是我最喜欢的六个JavaScript新特性。

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

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

  1. // *Very* reduced example

  2. let myKey = 'key3';

  3. let obj = {

  4.    key1: 'One',

  5.    key2: 'Two'

  6. };

  7. obj[myKey] = 'Three';

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

  1. let myKey = 'variableKey';

  2. let obj = {

  3.    key1: 'One',

  4.    key2: 'Two',

  5.    [myKey]: 'Three' /* yay! */

  6. };

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

2. 箭头函数

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

  1. // Adds a 10% tax to total

  2. let calculateTotal = total => total * 1.1;

  3. calculateTotal(10) // 11

  4. // Cancel an event -- another tiny task

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

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

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

3. find/findIndex

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

  1. let ages = [12, 19, 6, 4];

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

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

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

4. 扩展运算符: ...

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

  1. // Pass to function that expects separate multiple arguments

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

  3. let numbers = [9, 4, 7, 1];

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

  5. // Convert NodeList to Array

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

  7. // Convert Arguments to Array

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

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

5. 模板字符串

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

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

  1. // Multiline String

  2. let myString = `Hello

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

  4. // Basic interpolation

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

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

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

6. 默认参数值

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

  1. // Basic usage

  2. function greet(name = 'Anon') {

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

  4. }

  5. greet(); // Hello Anon!

  6. // You can have a function too!

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

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

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

  10.  callback();

  11. }

  12. // Only set a default for one parameter

  13. function greet(name, callback = function(){}) {}

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

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

6个小而美的es6新特性的更多相关文章

  1. ES6新特性概览

    本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony( ...

  2. ES6新特性之模板字符串

    ES6新特性概览  http://www.cnblogs.com/Wayou/p/es6_new_features.html 深入浅出ES6(四):模板字符串   http://www.infoq.c ...

  3. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  4. ES6新特性:Proxy代理器

    ES6新特性:Proxy: 要使用的话, 直接在浏览器中执行即可, node和babel目前还没有Proxy的polyfill;,要使用的话,直接在浏览器中运行就好了, 浏览器的兼容性为:chrome ...

  5. ES6新特性(函数默认参数,箭头函数)

    ES6新特性之 函数参数的默认值写法 和 箭头函数. 1.函数参数的默认值 ES5中不能直接为函数的参数指定默认值,只能通过以下的变通方式:   从上面的代码可以看出存在一个问题,当传入的参数为0或者 ...

  6. ES6新特性简介

    ES6新特性简介 环境安装 npm install -g babel npm install -g babel-node //提供基于node的REPL环境 //创建 .babelrc 文件 {&qu ...

  7. 轻松学会ES6新特性之生成器

    生成器虽然是ES6最具魔性的新特性,但也是最难懂得的一节,笔者写了大量的实例来具体化这种抽象的概念,能够让人一看就懂,目的是希望别人不要重复或者减少笔者学习生成器的痛苦经历. 在说具体的ES6生成器之 ...

  8. 必须掌握的ES6新特性

    ES6(ECMAScript2015)的出现,让前端开发者收到一份惊喜,它简洁的新语法.强大的新特性,带给我们更便捷和顺畅的编码体验,赞! 以下是ES6排名前十的最佳特性列表(排名不分先后): 1.D ...

  9. 你不知道的JavaScript--Item24 ES6新特性概览

    ES6新特性概览 本文基于lukehoban/es6features ,同时参考了大量博客资料,具体见文末引用. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代 ...

随机推荐

  1. 第34节:Java当中的异常

    Java当中的异常 了解Java当中的异常,那么什么是异常呢?异常又有什么分类呢?异常中的特殊结构:try...catch...finally 结构的使用方法. 异常是一种对象,是靠虚拟机产生的,异常 ...

  2. 实现简易Promise

    概述 异步编程离不开promise, async, 事件响应这些东西,为了更好地异步编程,我打算探究一下promise的实现原理,方法是自己实现一个简易的promise. 根据promise mdn上 ...

  3. Spring 静态代理+JDK动态代理和CGLIB动态代理

    代理分为两种:静态代理 动态代理 静态代理:本质上会在硬盘上创建一个真正的物理类 动态代理:本质上是在内存中构建出一个类. 如果多个类需要进行方法增强,静态代理则需要创建多个物理类,占用磁盘空间.而动 ...

  4. [原创]K8 Cscan 3.6大型内网渗透自定义扫描器

    前言:无论内网还是外网渗透信息收集都是非常关键,信息收集越多越准确渗透的成功率就越高但成功率还受到漏洞影响,漏洞受时效性影响,对于大型内网扫描速度直接影响着成功率漏洞时效性1-2天,扫描内网或外网需1 ...

  5. Java内存溢出异常(下)

    此篇是上一篇文章Java内存溢出异常(上)的续篇,没有看过的同学,可以先看一下上篇.本篇文章将介绍剩余的两个溢出异常:方法区和运行时常量池溢出. 方法区和运行时常量池溢出 这部分为什么会放在一起呢?在 ...

  6. Asp.NetCoreWebApi图片上传接口(二)集成IdentityServer4授权访问(附源码)

    写在前面 本文地址:http://www.cnblogs.com/yilezhu/p/9315644.html 作者:yilezhu 上一篇关于Asp.Net Core Web Api图片上传的文章使 ...

  7. JavaScript递归中的作用域问题

    需求是这样的,从子节点寻找指定className的父节点,一开始就想到递归(笨!),Dom结构如下: <div class="layer_1"> <div cla ...

  8. shell变量定义与数组-1

    1.查看系统所有shell和默认shell 查看系统所有的shell: cat /etc/shells 查看系统默认shell: echo $SHELL 2.第一个shell脚本,打印字符串Hello ...

  9. linux 命令 — grep

    grep 用于文本搜索,能接受文件或者stdin作为输入,能输出各种格式 grep match_pattern filename 搜索文件中出现match_pattern的行,match_patter ...

  10. Centos-7修改yum源为国内的yum源

    以centos7为例 ,以 修改为阿里的yum源 1. 备份本地yum源 [root@localhost yum.repos.d]# cp CentOS-Base.repo CentOS-Base.r ...