关于ES6的六个小特性(二)

前言

Javascript 团体的每个人都喜欢新的API,语法更新以及特性,它们提供了更好的,更智能,更有效的方式以完成重要的任务。

继上一篇的 《简单谈谈ES6的六个小特性》,这次我再分享6个可以减少代码和最大化效率的方法。

1.Object Shorthand

新的对象声明方法允许我们可以不声明对象的 key :

var x = 12;
var y = yes;
var z = {one:'1',two:'2'};

// The old way
var obj = {
 x:x,
 y:y,
 z:z
}
// The new way
var obj = {x,y,z};

2.Method Properties

避免 function 关键字声明函数:

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}

必须承认去除掉 function 关键字确实使代码简洁、更好维护。

3.Blocks vs Immediately Executed Functions

下面创建立即执行方法的模式有点难看:

(function(){
 // do stuff
})();

通过ES6我们可以通过 {} 和 let 来创建块级作用于,完成立即执行函数的作用:

{
 let j = 12;
 let divs = document.querySelectorAll('div');

 // do stuff
}

j; // ReferenceError: j is not defined...

如果在 Block 内部声明函数,它将会被外部访问到。但你如果使用 let 关键字声明函数自变量,将不使用括号的情况下实现 IEF 的功能。

4. for loops and let

因为在JS里面会存在变量提升,我们经常会在作用域前面声明一些”无用”的迭代变量,例如(for var x = …)。ES6 使用 let 解决了此恼人的问题:

for(let x = 0; x < len; i++){
 //do stuff
}

x; // ReferenceError: x is not defined

不久以后 let 会被应用的更多。

5.get and set for Classes

class Cart{
 constructor(total){
 this._total = total;
 }
 get total(){return this._total;}
 set total(v){this._total = Number(v);}
}

var cart = new Cart(100);

cart.total // 100

能为属性设置 get、set 是这部分最棒的。不需要使用函数来进行特殊的设定–当执行 obj.prop = {value} 时,一切都会自动执行。

6.startsWith,endsWith and includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;

注:includes 方法兼容性还是很多,曾有一个线上bug,就是因为不支持此方法导致的。

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

总结

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

(0)

相关推荐

  • ES6中非常实用的新特性介绍

    ECMAScript 6离我们越来越近了,作为它最重要的方言,Javascript也即将迎来语法上的重大变革,InfoQ特开设"深入浅出ES6"专栏,来看一下ES6将给我们带来哪些新内容. 写在前面 ES6 已经提交给 Ecma 大会审查了,也就是说,我们将迎来一大波 javascript 的最新标准,还有一些语法糖.ES6 中有很多值得我们关注的东西,下面是我发现的一些我们最常用的一些新特性,进行记录一下. 1. for-of循环 这个东西用来循环数组很爽,原因呢,是因为它弥补了目前

  • ES6新特性之模块Module用法详解

    本文实例讲述了ES6新特性之模块Module用法.分享给大家供大家参考,具体如下: 一.Module简介 ES6的Class只是面向对象编程的语法糖,升级了ES5的构造函数的原型链继承的写法,并没有解决模块化问题.Module功能就是为了解决这个问题而提出的. 历史上,JavaScript一直没有模块(module)体系,无法将一个大程序拆分成互相依赖的小文件,再用简单的方法拼装起来.其他语言都有这项功能. 在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和AMD两种.前者用

  • ES6新特性之变量和字符串用法示例

    本文实例讲述了ES6新特性之变量和字符串用法.分享给大家供大家参考,具体如下: 一.变量 1. LET 我们都习惯用var 来声明变量,现在还可以用let来声明变量,两者的主要区别是作用域:var声明的变量作用域为包围它的函数,而let声明的变量作用域仅在它所在的块中.(在ES5中是没有块的概念的). if(true){ let a=1; } console.log(a);//undifined 这样使代码更加干净,减少滞留的变量,再如我们经常用的数组遍历: for(let i=0;i<list

  • 简单谈谈ES6的六个小特性

    前言 本文主要针对ES6做一个简要介绍,也许你还不知道ES6是什么, 实际上, 它是一种新的JavaScript规范.在这个大家都很忙碌的时代,如果你想对ES6有一个快速的了解,那么请继续往下读,去了解当今最流行的编程语言JavaScript最新一代的六大特性. 过去一年ES6带来了十足的进步,下面是6个我最喜欢的JS新增特性. 一.Object[key] 有时候不能在对象变量声明时设置所有的key/value,所以得再声明之后添加key/value. let myKey = 'key3'; l

  • ES6新特性之解构、参数、模块和记号用法示例

    本文实例讲述了ES6新特性之解构.参数.模块和记号用法.分享给大家供大家参考,具体如下: 一.解构 解构提供了一个方便的地从对象或数组中提取数据的方法,请看下面的例子: //ES6 let [x,y]=[1,2];//x=1,y=2 //ES5 var arr=[1,2]; var x=arr[0]; var y=arr[1]; 使用这个语法,可以一次性给多个变量赋值.一个很好的附加用处是可以很简单的交换变量值: let x=1,y=2; [x,y]=[y,x];x=2 y=1 解构也可以用于对

  • ES6(ECMAScript 6)新特性之模板字符串用法分析

    本文实例讲述了ES6(ECMAScript 6)新特性之模板字符串用法.分享给大家供大家参考,具体如下: ES6引入了一种新型的字符串字面量语法,我们称之为模板字符串(template strings).除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外,它们看起来与普通字符串并无二致.在最简单的情况下,它们与普通字符串的表现一致: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 但我们不能说:"原来只是被反撇号括起

  • ES6中module模块化开发实例浅析

    本文实例讲述了ES6中module模块化开发.分享给大家供大家参考,具体如下: 多人开发JavaScript时伴随着命名冲突等问题,先后有了模拟块级作用域.命名空间.模块化开发等方法. 之前,模块化开发一直是由第三方库来模拟的,比较知名的有AMD规范和CMD规范. 两个规范分别对应requirejs和seajs. 而现在,ES6提出了自己的模块化统一标准. 一个ES6的模块是一个包含了js代码的文件.ES6里没有所谓的module关键字,一个模块就是一个普通的脚本文件,除了以下两个区别: 1.

  • ES6新特性之字符串的扩展实例分析

    本文实例讲述了ES6新特性之字符串的扩展.分享给大家供大家参考,具体如下: 一.ES5字符串函数 concat: 将两个或多个字符的文本组合起来,返回一个新的字符串. indexOf: 返回字符串中一个子串第一处出现的索引(从左到右搜索).如果没有匹配项,返回 -1 . charAt: 返回指定位置的字符. lastIndexOf: 返回字符串中一个子串最后一处出现的索引(从右到左搜索),如果没有匹配项,返回 -1 . match: 检查一个字符串匹配一个正则表达式内容,如果么有匹配返回 nul

  • ES6的新特性概览

    Nick Justice是GitHub开发者计划的一员.早在ES6语言标准发布之前,他就借助像Babel这样的转译器以及最新版本的浏览器在自己的项目中使用ES6特性.他认为,ES6的新特性将极大地改变JavaScript的编写方式. ES6(ECMAScript 6)是即将到来的新版本JavaScript语言的标准,代号harmony(和谐之意,显然没有跟上我国的步伐,我们已经进入中国梦版本了).上一次标准的制订还是2009年出台的ES5.目前ES6的标准化工作正在进行中,预计会在14年12月份

  • ES6新特性之Symbol类型用法分析

    本文实例讲述了ES6新特性之Symbol类型用法.分享给大家供大家参考,具体如下: Symbol类型 1. 为了避免属性名的冲突,ES6新增了Symbol类型.Symbol可以产生一个独一无二的值. let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1); //Symbol(a) console.log(typeof s1); //symbol console.log(s1 == s2); //false 2.Symbol用于属性名

  • ES6新特性之函数的扩展实例详解

    本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识

随机推荐