简单谈谈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 相关文章推荐
javascript 单选框,多选框美化代码
Aug 01 Javascript
javascript 构造函数强制调用经验总结
Dec 02 Javascript
基于jQuery实现的菜单切换效果
Oct 16 Javascript
jQuery Ajax 加载数据时异步显示加载动画
Aug 01 Javascript
JS获取鼠标相对位置的方法
Sep 20 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Angular2入门教程之模块和组件详解
May 28 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
基于Angularjs-router动态改变Title值的问题
Aug 30 Javascript
微信小程序左滑删除实现代码实例
Sep 16 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 Vue.js
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
mysql 中InnoDB和MyISAM的区别分析小结
2008/04/15 PHP
PHP程序员常见的40个陋习,你中了几个?
2014/11/20 PHP
win7系统配置php+Apache+mysql环境的方法
2015/08/21 PHP
php微信公众号开发之校园图书馆
2018/10/20 PHP
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
2015/12/11 Javascript
JS实现简单的右下角弹出提示窗口完整实例
2016/06/21 Javascript
IE下JS保存图片的简单实例
2016/07/15 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
2016/12/14 Javascript
Vue.js开发环境快速搭建教程
2017/03/17 Javascript
BootStrap表单控件之复选框checkbox和单选择按钮radio
2017/05/23 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
2017/07/10 Javascript
使用Node.js实现简易MVC框架的方法
2017/08/07 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
AngularJS中控制器函数的定义与使用方法示例
2017/10/10 Javascript
vue-router 组件复用问题详解
2018/01/22 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
vue组件tabbar使用方法详解
2018/11/06 Javascript
微信小程序如何利用getCurrentPages进行页面传值
2019/07/01 Javascript
Vue实战教程之仿肯德基宅急送App
2019/07/19 Javascript
转换layUI的数据表格中的日期格式方法
2019/09/19 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
如何优雅地取消 JavaScript 异步任务
2020/03/22 Javascript
Python计算机视觉里的IOU计算实例
2020/01/17 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
美国在线和移动免费会员制批发零售商:Boxed(移动端的Costco)
2020/01/02 全球购物
数百万免费的图形资源:Freepik
2020/09/21 全球购物
数据库专业英语
2012/11/30 面试题
推荐信格式要求
2014/05/09 职场文书
安全生产先进个人事迹材料
2014/12/30 职场文书
运动会广播稿200字
2015/08/19 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
MySQL 四种连接和多表查询详解
2021/07/16 MySQL