简单谈谈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 相关文章推荐
js实现的网站首页随机公告随机公告
Mar 14 Javascript
javascript中删除指定数组中指定的元素的代码
Feb 12 Javascript
随窗体滑动的小插件sticky源码
Jun 21 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
实例分析js和C#中使用正则表达式匹配a标签
Nov 26 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
Nov 29 Javascript
详解Angular路由 ng-route和ui-router的区别
May 22 Javascript
详解angular中的作用域及继承
May 31 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
Jan 21 Javascript
JS拖动选择table里的单元格完整实例【基于jQuery】
May 28 jQuery
layui自定义工具栏的方法
Sep 19 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文件打包 下载之使用PHP自带的ZipArchive压缩文件并下载打包好的文件
2012/06/13 PHP
php 过滤英文标点符号及过滤中文标点符号代码
2014/06/12 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
JavaScript使用indexOf获得子字符串在字符串中位置的方法
2015/04/06 Javascript
javascript处理a标签超链接默认事件的方法
2015/06/29 Javascript
JavaScript Split()方法
2015/12/18 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
2016/12/14 Javascript
详解jQuery停止动画——stop()方法的使用
2016/12/14 Javascript
Chrome浏览器的alert弹窗禁止再次弹出后恢复的方法
2016/12/30 Javascript
Node.js安装配置图文教程
2017/05/10 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
详解Chart.js轻量级图表库的使用经验
2018/05/22 Javascript
如何在JavaScript中优雅的提取循环内数据详解
2019/03/04 Javascript
Vue源码解析之数据响应系统的使用
2019/04/24 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
Python开发的实用计算器完整实例
2017/05/10 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python基于Selenium的web自动化框架
2019/07/14 Python
python下载卫星云图合成gif的方法示例
2020/02/18 Python
Python中Selenium库使用教程详解
2020/07/23 Python
基于python+selenium自动健康打卡的实现代码
2021/01/13 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
CSS实现雨滴动画效果的实例代码
2019/10/08 HTML / CSS
美国克罗格超市在线购物:Kroger
2019/06/21 全球购物
TCP/IP的分层模型
2013/10/27 面试题
留学推荐信写作指南
2014/01/25 职场文书
离婚协议书范文2014
2014/10/16 职场文书
2015年志愿者服务工作总结
2015/04/20 职场文书
2015年机关党委工作总结
2015/05/23 职场文书
MySQL的存储函数与存储过程的区别解析
2022/04/08 MySQL