简单谈谈ES6的六个小特性

 更新时间:2016年11月18日 14:57:47   作者:zhuxy  
ES6(ECMAScript2015)的出现,无疑给前端开发人员带来了新的惊喜,它包含了一些很棒的新特性,可以更加方便的实现很多复杂的操作,提高开发人员的效率。JS社区的每个人都喜欢新的API、语法以及一些简单、明了更高效的完成重要任务的新特性。下面来一起看看吧。

前言

本文主要针对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提供给开发者,当然还有许多特性。

总结

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

相关文章

  • layui 弹出删除确认界面的实例

    layui 弹出删除确认界面的实例

    今天小编就为大家分享一篇layui 弹出删除确认界面的实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • 原生js拖拽功能制作滑动条实例代码

    原生js拖拽功能制作滑动条实例代码

    这篇文章主要介绍了原生js拖拽功能制作滑动条实例教程,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02
  • 基于JavaScript编写8086汇编指令查询工具

    基于JavaScript编写8086汇编指令查询工具

    汇编语言还是在大学的时候学的,汇编语言有个特点是语句短、条数多,很难可以把全部指令都背熟。本文就来用JavaScript编写一个8086汇编指令查询工具,希望对大家有所帮助
    2023-02-02
  • js判断iframe中元素是否存在的实现代码

    js判断iframe中元素是否存在的实现代码

    这篇文章主要介绍了js判断iframe中元素是否存在的实现代码,需要的朋友可以参考下
    2016-12-12
  • JavaScript编程的10个实用小技巧

    JavaScript编程的10个实用小技巧

    尽管我使用Javascript来做开发有很多年了,但它常有一些让我很惊讶的小特性。对于我来说,Javascript是需要持续不断的学习的。
    2014-04-04
  • javascript一些实用技巧小结

    javascript一些实用技巧小结

    javascript一些实用技巧小结,学习js的朋友可以看下。
    2011-03-03
  • 关于javascript DOM事件模型的两件事

    关于javascript DOM事件模型的两件事

    DOM事件模型的两件事:事件捕捉(Event Capture)的实现问题以及IE的高级事件处理模型的问题。
    2010-07-07
  • JS插件overlib用法实例详解

    JS插件overlib用法实例详解

    这篇文章主要介绍了overlib用法,结合实例较为详细的分析了JavaScript插件overlib的相关使用技巧,需要的朋友可以参考下
    2015-12-12
  • JS搜狐面试题分析

    JS搜狐面试题分析

    这篇文章主要介绍了JS搜狐面试题,涉及javascript数组、字符串及面向对象程序设计相关技巧,需要的朋友可以参考下
    2016-12-12
  • Bootstrap缩略图的创建方法

    Bootstrap缩略图的创建方法

    这篇文章主要介绍了Bootstrap缩略图的创建方法,教大家如何实现Bootstrap缩略图,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03

最新评论