简单谈谈ES6的六个小特性


Posted in Javascript onNovember 18, 2016

前言

本文主要针对ES6做一个简要介绍,也许你还不知道ES6是什么, 实际上, 它是一种新的JavaScript规范。在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的六大特性。

过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性。

一、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! */
};

开发者可以使用[]包裹变量从而使用一条语句完成所有的功能。

二、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);

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

三、find/findIndex

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

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];

这个特定的另一个红利可以把可迭代对象(NodeList、arguments)变成真的数组,以前我们经常使用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提供给开发者,当然还有许多特性。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

Javascript 相关文章推荐
JavaScipt基本教程之前言
Jan 16 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
JQuery从头学起第二讲
Jul 04 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery UI插件实现百度提词器效果
Nov 21 Javascript
浅谈Angular的$q, defer, promise
Dec 20 Javascript
react-native使用leanclound消息推送的方法
Aug 06 Javascript
微信小程序实现按字母排列选择城市功能
Nov 25 Javascript
node.js中process进程的概念和child_process子进程模块的使用方法示例
Feb 11 Javascript
JS图片懒加载技术实现过程解析
Jul 27 Javascript
JavaScript继承的三种方法实例
May 12 Javascript
jQuery post数据至ashx实例详解
Nov 18 #Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 #Javascript
基于jQuery的checkbox全选问题分析
Nov 18 #Javascript
JavaScript动态数量的文件上传控件
Nov 18 #Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
Nov 18 #Javascript
Node.js 实现简单小说爬虫实例
Nov 18 #Javascript
基于jQuery的select下拉框选择触发事件实例分析
Nov 18 #Javascript
You might like
php session应用实例 登录验证
2009/03/16 PHP
php csv操作类代码
2009/12/14 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
小谈php正则提取图片地址
2014/03/27 PHP
PHP实现Soap通讯的方法
2014/11/03 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php使用curl模拟多线程实现批处理功能示例
2019/07/25 PHP
日期 时间js控件
2009/05/07 Javascript
js类型检查实现代码
2010/10/29 Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
2011/09/21 Javascript
js判断undefined类型示例代码
2014/02/10 Javascript
AngularJS入门教程之多视图切换用法示例
2016/11/02 Javascript
Vue 2.0+Vue-router构建一个简单的单页应用(附源码)
2017/03/14 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
vue中v-text / v-html使用实例代码详解
2019/04/02 Javascript
Vuex 模块化使用详解
2019/07/31 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
如何在 ant 的table中实现图片的渲染操作
2020/10/28 Javascript
关于javascript中的promise的用法和注意事项(推荐)
2021/01/15 Javascript
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
代码总结Python2 和 Python3 字符串的区别
2020/01/28 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
基于Python3读写INI配置文件过程解析
2020/07/23 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
详解android与HTML混合开发总结
2018/06/06 HTML / CSS
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Clarria化妆品官方网站:购买天然和有机化妆品系列
2018/04/08 全球购物
豪华床上用品、床单和浴室必需品:Peacock Alley
2019/09/04 全球购物
如何利用find命令查找文件
2016/11/18 面试题
怎么写好自荐书
2014/03/02 职场文书
高中教师先进事迹材料
2014/08/22 职场文书
小爸爸观后感
2015/06/15 职场文书
2016年全国爱牙日宣传活动总结
2016/04/05 职场文书
pytorch中[..., 0]的用法说明
2021/05/20 Python