ES6的一些常用特性
来源:互联网 发布:中越海警船 知乎 编辑:程序博客网 时间:2024/04/28 16:06
Default Parameters(默认参数)
还记得我们以前不得不通过下面方式来定义默认参数:
var link = function (height, color, url) { var height = height || 50; var color = color || 'red'; var url = url || 'http://azat.co'; ...}
但在ES6,我们可以直接把默认值放在函数申明里:
var link = function(height = 50, color = 'red', url = 'http://azat.co') { ...}
Multi-line Strings (多行字符串)
ES6的多行字符串是一个非常实用的功能。在ES5中,我们不得不使用以下方法来表示多行字符串:
var roadPoem = 'Then took the other, as just as fair,nt' + 'And having perhaps the better claimnt' + 'Because it was grassy and wanted wear,nt' + 'Though as for that the passing therent' + 'Had worn them really about the same,nt';var fourAgreements = 'You have the right to be you.n You can only be you when you do your best.';
然而在ES6中,仅仅用反引号就可以解决了:
var roadPoem = `Then took the other, as just as fair, And having perhaps the better claim Because it was grassy and wanted wear, Though as for that the passing there Had worn them really about the same,`;var fourAgreements = `You have the right to be you. You can only be you when you do your best.`;
Template Literals(模板对象)
在其它语言中,使用模板和插入值是在字符串里面输出变量的一种方式。因此,在ES5,我们可以这样组合一个字符串:
var name = 'Your name is ' + first + ' ' + last + '.';var url = 'http://localhost:3000/api/messages/' + id;
幸运的是,在ES6中,我们可以使用新的语法$ {NAME},并把它放在反引号里:
var name = `Your name is ${first} ${last}. `;var url = `http://localhost:3000/api/messages/${id}`;
块级作用域
ES6提出了两个新的声明变量的命令:let
和const
。其中,let
完全可以取代var
,因为两者语义相同,而且let
没有副作用。
(1).使用let 取代 var
1.for
循环的计数器,就很合适使用let
命令。
/* let */for (let i = 0; i < 10; i++) {}console.log(i); //ReferenceError: i is not defined/* var */for (var i = 0; i < 10; i++) {}console.log(i); // 10
2.var
命令存在变量提升效用,let
命令没有这个问题。
/* let */if(true) { console.log(x); // ReferenceError let x = 'hello';}/* var */if(true) { console.log(x); // hello var x = 'hello';}//使用var,有输出,这违反了变量先声明后使用的原则。所以,建议不再使用var命令,而是使用let命令取代。
(2)全局常量和线程安全
在let
和const
之间,建议优先使用const
,尤其是在全局环境,不应该设置变量,只应设置常量。
const
优于let
有几个原因。一个是const
可以提醒阅读程序的人,这个变量不应该改变;另一个是const
比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;最后一个原因是 JavaScript 编译器会对const
进行优化,所以多使用const
,有利于提供程序的运行效率,也就是说let
和const
的本质区别,其实是编译器内部的处理不同。
// badvar a = 1, b = 2, c = 3;// goodconst a = 1;const b = 2;const c = 3;// bestconst [a, b, c] = [1, 2, 3];
解构赋值
1.使用数组成员对变量赋值时,优先使用解构赋值。
const arr = [1, 2, 3, 4];// badconst first = arr[0];const second = arr[1];// goodconst [first, second] = arr;
2.函数的参数如果是对象的成员,优先使用解构赋值。
// badfunction getFullName(user) { const firstName = user.firstName; const lastName = user.lastName;}// goodfunction getFullName(obj) { const { firstName, lastName } = obj;}// bestfunction getFullName({ firstName, lastName }) {}
3.如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。(因为数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。)
// badfunction processInput(input) { return [left, right, top, bottom];}// goodfunction processInput(input) { return { left, right, top, bottom };}const { left, right } = processInput(input);
数组
1.使用扩展运算符(...)拷贝数组。
// badconst len = items.length;const itemsCopy = [];let i;for (i = 0; i < len; i++) { itemsCopy[i] = items[i];}// goodconst itemsCopy = [...items];
2.使用Array.from方法,将类似数组的对象转为数组。(包括ES6新增的数据结构Set和Map)
const foo = document.querySelectorAll('.foo');const nodes = Array.from(foo);
函数
简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法。
1.立即执行函数可以写成箭头函数的形式。
(() => { console.log('Welcome to the Internet.');})();
2.那些需要使用函数表达式的场合,尽量用箭头函数代替。因为这样更简洁,而且绑定了this。
// bad[1, 2, 3].map(function (x) { return x * x;});// good[1, 2, 3].map((x) => { return x * x;});// best[1, 2, 3].map(x => x * x);
3.箭头函数取代Function.prototype.bind
,不应再用self/_this/that绑定 this。
// badconst self = this;const boundMethod = function(...params) { return method.apply(self, params);}// acceptableconst boundMethod = method.bind(this);// bestconst boundMethod = (...params) => method.apply(this, params);
4.不要在函数体内使用arguments变量,使用rest运算符(...)代替。因为rest运算符显式表明你想要获取参数,而且arguments是一个类似数组的对象,而rest运算符可以提供一个真正的数组。
// badfunction concatenateAll() { const args = Array.prototype.slice.call(arguments); return args.join('');}// goodfunction concatenateAll(...args) { return args.join('');}
Map结构
注意区分Object和Map,只有模拟现实世界的实体对象时,才使用Object。如果只是需要key: value
的数据结构,使用Map结构。因为Map有内建的遍历机制。
let map = new Map(arr);for (let key of map.keys()) { console.log(key);}for (let value of map.values()) { console.log(value);}for (let item of map.entries()) { console.log(item[0], item[1]);}
Class
用Class,取代需要prototype的操作。因为Class的写法更简洁,更易于理解。
// badfunction Queue(contents = []) { this._queue = [...contents];}Queue.prototype.pop = function() { const value = this._queue[0]; this._queue.splice(0, 1); return value;}// goodclass Queue { constructor(contents = []) { this._queue = [...contents]; } pop() { const value = this._queue[0]; this._queue.splice(0, 1); return value; }}
使用extends
实现继承,因为这比ES5的通过修改原型链实现继承,要清晰和方便很多。
// badconst inherits = require('inherits');function PeekableQueue(contents) { Queue.apply(this, contents);}inherits(PeekableQueue, Queue);PeekableQueue.prototype.peek = function() { return this._queue[0];}// goodclass PeekableQueue extends Queue { peek() { return this._queue[0]; }}
再来看一个react中的常见例子:
class ReactCounter extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; }}
可以看到里面有一个constructor
方法,这就是构造方法;而super
关键字,它在这里表示父类的构造函数,用来新建父类的this
对象。
这里做点补充:ES5的继承,实质是先创造子类的实例对象this
,然后再将父类的方法添加到this
上面(Parent.apply(this)
)。ES6的继承机制完全不同,实质是先创造父类的实例对象this
(所以必须先调用super
方法),然后再用子类的构造函数修改this
。
模块
1.使用import
取代require
// badconst moduleA = require('moduleA');const func1 = moduleA.func1;const func2 = moduleA.func2;// goodimport { func1, func2 } from 'moduleA';
2.使用export
取代module.exports
// commonJS的写法var React = require('react');var Breadcrumbs = React.createClass({ render() { return <nav />; }});module.exports = Breadcrumbs;// ES6的写法import React from 'react';class Breadcrumbs extends Component { render() { return <nav />; }} //这里不要加逗号export default Breadcrumbs
其它
ES6里面还要很多比较重要的概念,特别是Generator函数,Promise对象等,个人认为在node开发使用它们是非常友好的。日后若水平提高了再来叙谈。
- ES6的一些常用特性
- ES6的一些特性
- 常用的es6特性
- ES6的一些新特性
- 一些实用的es6特性
- 最常用的ES6特性
- 总结ES6常用的新特性
- 总结ES6常用的新特性
- JavaScript之ES6的常用新特性
- ES6常用的一些语法总结
- 【ES6】ES6的新特性
- ES6中的一些新特性
- 四,ES6给string带来的一些特性
- ES6常用新特性总结
- ES6十大常用特性
- es6常用特性学习总结
- 【C#】常用的一些特性
- 一些常用的html5特性
- 浏览器 之 无头浏览器
- AngularJS的Filter用法详解
- Spring-hibernate使用全xml配置结合方式搭建开发
- data augmentation 数据增强方法总结
- Android SDK Manager Extras中没有 Intel x86 Emulator Accelerator (HAXM installer)
- ES6的一些常用特性
- 用于 TI Stellaris 和 Concerto 微控制器可扩展的 RTOS 解决方案
- SpringMVC02-Controller与RequestMapping
- Python访问Mysql分表数据的方法示例
- ./asadmin: 52: exec: java: not found
- XAMPP的使用
- Linux安装man
- 基于 Android NDK 的学习之旅-----Android.mk 介绍
- java 堆栈的区别