译《ES6的6个小特性》

Six Tiny But Awesome ES6 Features.md

JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性。过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性。

1.Object[key]

有时候不能在对象变量声明时设置所有的key/value,所以得再声明之后添加key/value。

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.Arrow Functions

你不需要跟上ES6的所有改变,箭头函数已经是许多讨论的话题并且也给JS开发者带来了一些困惑。即使我可以写很多博文来说箭头函数的特点,但是我想指出箭头函数是如何提供一个为简单函数压缩代码的方法。

// 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);

functionsreturn关键词,有时甚至不需要添加(),箭头函数为写函数提供了一种简短的代码书写方式。

find/findIndex

JS为开发者提供了Array.prototype.indexOf方法来获取数组中的指定元素下标,但是indexOf并没有提供一个根据判断条件来获取指定元素的方法,findfindIndex两个方法提供了取出第一个满足计算条件的元素和下标。

let age = [12,19,6,4];

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

...扩展修饰符

扩展修饰符表示数组和可迭代对象在调用的时候应该拆分成单个参数:

// Pass to function that expects separate multiple arguments
// 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];

这个特定的另一个红利可以把可迭代对象(NodeListarguments)变成真的数组,以前我们经常使用Array.from或其他方法实现的。

Template Literals

JS里多行字符起初通过+\来完成的,但是都很难维护。许多开发者甚至一些框架使用<script>标签来容纳模板,然后使用DOM方法的outerHTML来获取HTML字符。

ES6提供了Template Literals使用反引号来容易的创建多行字符串:

// Multiline String
let myString = `Hello

I'm a new line`;

//Basic interpolations
let obj = {x:1,y:2};

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

Default Argument Values

为函数参数提供默认值在服务端语言已经提供(python、php),现在JS也有此能力:

//Basic usage

function great( name = 'Anon' ){
    console.log(`Hello ${name}`);
}

great(); // 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(){}) {}

以上列出的6个特性就是ES6提供给开发者,当然还有许多特性。

评论里提供的:

1 .

const isRequired = () => {throw new Error('param is required');};

const hello = (name = isRequired()) => { console.log(`hello ${name}`) };

2 .

const is = {
    get required(){
        throw new Error('Required argument')
    }
}

import {is} from 'utils'

const foo(name = is.required) => Array.from(name)

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

原文发布于微信公众号 - 前端黑板报(FeHeiBanBao)

原文发表时间:2016-11-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏华仔的技术笔记

编程规范之《招聘一个靠谱的iOS》

3237
来自专栏菩提树下的杨过

linq to sql生成not in语句的小技巧

以前一直觉得linq to sql生成类似where id not in (1,3,5)或where id not in (select id from ......

1945
来自专栏醒者呆

基础大扫荡——背包,栈,队列,链表一口气全弄懂

提到数据结构,不得不说数据类型,有人将他们比作分子和原子的关系,我们都知道大自然最小的构成单位是原子,数据类型描述的是原子的内部,如质子、中子的情况,而数据结构...

41915
来自专栏Golang语言社区

Golang 中 for-loop 和 goroutine 的问题

00. 背景 最近在学习MIT的分布式课程6.824的过程中,使用Go实现Raft协议时遇到了一些问题。参见如下代码: for i := 0; i < len(...

4507
来自专栏IMWeb前端团队

探索Sass3.3中的Maps(一)

Sass的数据类型可以说是一个大家庭了,其数据类型中的数字、字符串、列表、颜色和布尔型,涵盖了大多数我们的需求。但是,正如一个框架开始的演变,在这个数据类型中还...

1899
来自专栏阿凯的Excel

Python读书笔记15(人机交互input函数)

后期如何需要制作游戏或者网站等需要记忆客户输入信息的时候,需要大量的进行人机交互,今天和大家分享input函数。功能上类似Excel VBA的InputBox功...

3805
来自专栏MasiMaro 的技术博文

COM学习(一)——COM基础思想

学习微软技术COM是绕不开的一道坎,最近做项目的时候发现有许多功能需要用到COM中的内容,虽然只是简单的使用COM中封装好的内容,但是许多代码仍然只知其然,不知...

1553
来自专栏数据科学学习手札

(数据科学学习手札32)Python中re模块的详细介绍

  关于正则表达式,我在前一篇(数据科学学习手札31)中已经做了详细介绍,本篇将对Python中自带模块re的常用功能进行总结;

3304
来自专栏高性能服务器开发

写给新手们看的编程修养

什么是好的程序员?是不是懂得很多技术细节?还是懂底层编程?还是编程速度比较快?我觉得都不是。对于一些技术细节来说和底层的技术,只要看帮助,查资料就能找到,对于速...

1363
来自专栏较真的前端

新手们容易在Promise上挖的坑~

2325

扫码关注云+社区

领取腾讯云代金券