ES6的一些常用特性

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提出了两个新的声明变量的命令:letconst。其中,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)全局常量和线程安全

letconst之间,建议优先使用const,尤其是在全局环境,不应该设置变量,只应设置常量。

const优于let有几个原因。一个是const可以提醒阅读程序的人,这个变量不应该改变;另一个是const比较符合函数式编程思想,运算不改变值,只是新建值,而且这样也有利于将来的分布式运算;最后一个原因是 JavaScript 编译器会对const进行优化,所以多使用const,有利于提供程序的运行效率,也就是说letconst的本质区别,其实是编译器内部的处理不同。

// bad
var a = 1, b = 2, c = 3;

// good
const a = 1;
const b = 2;
const c = 3;

// best
const [a, b, c] = [1, 2, 3];

回到顶部

解构赋值

1.使用数组成员对变量赋值时,优先使用解构赋值。

const arr = [1, 2, 3, 4];

// bad
const first = arr[0];
const second = arr[1];

// good
const [first, second] = arr;

2.函数的参数如果是对象的成员,优先使用解构赋值。

// bad
function getFullName(user) {
  const firstName = user.firstName;
  const lastName = user.lastName;
}

// good
function getFullName(obj) {
  const { firstName, lastName } = obj;
}

// best
function getFullName({ firstName, lastName }) {
}

3.如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值。(因为数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。)

// bad
function processInput(input) {
  return [left, right, top, bottom];
}

// good
function processInput(input) {
  return { left, right, top, bottom };
}

const { left, right } = processInput(input);

回到顶部

数组

1.使用扩展运算符(...)拷贝数组。

// bad
const len = items.length;
const itemsCopy = [];
let i;

for (i = 0; i < len; i++) {
  itemsCopy[i] = items[i];
}

// good
const 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。

// bad
const self = this;
const boundMethod = function(...params) {
  return method.apply(self, params);
}

// acceptable
const boundMethod = method.bind(this);

// best
const boundMethod = (...params) => method.apply(this, params);

4.不要在函数体内使用arguments变量,使用rest运算符(...)代替。因为rest运算符显式表明你想要获取参数,而且arguments是一个类似数组的对象,而rest运算符可以提供一个真正的数组。

// bad
function concatenateAll() {
  const args = Array.prototype.slice.call(arguments);
  return args.join(‘‘);
}

// good
function 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的写法更简洁,更易于理解。

// bad
function Queue(contents = []) {
  this._queue = [...contents];
}
Queue.prototype.pop = function() {
  const value = this._queue[0];
  this._queue.splice(0, 1);
  return value;
}

// good
class Queue {
  constructor(contents = []) {
    this._queue = [...contents];
  }
  pop() {
    const value = this._queue[0];
    this._queue.splice(0, 1);
    return value;
  }
}

使用extends实现继承,因为这比ES5的通过修改原型链实现继承,要清晰和方便很多。

// bad
const inherits = require(‘inherits‘);
function PeekableQueue(contents) {
  Queue.apply(this, contents);
}
inherits(PeekableQueue, Queue);
PeekableQueue.prototype.peek = function() {
  return this._queue[0];
}

// good
class 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

// bad
const moduleA = require(‘moduleA‘);
const func1 = moduleA.func1;
const func2 = moduleA.func2;

// good
import { 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开发使用它们是非常友好的。日后若水平提高了再来叙谈。

时间: 2024-10-22 19:00:55

ES6的一些常用特性的相关文章

C#网络程序设计(1)网络编程常识与C#常用特性

    网络程序设计能够帮我们了解联网应用的底层通信原理!     (1)网络编程常识: 1)什么是网络编程 只有主要实现进程(线程)相互通信和基本的网络应用原理性(协议)功能的程序,才能算是真正的网络编程. 2)网络编程的层次 现实中的互联网是按照"TCP/IP分层协议栈"的体系结构构建的,因此程序员必须搞清楚自己要做的是哪个层次上的编程工作. TCP/IP协议体系的实现情况: 其中,网络接口层已经被大多数计算机生产厂家集成在了主板上,也就是经常所说的网卡(NIC).windows操

MVC常用特性

MVC常用特性使用 简介 在以前的文章中,我和大家讨论如何用SingalR和数据库通知来完成一个消息监控应用. 在上一篇文章中,我介绍了如何在MVC中对MongoDB进行CRUD操作. 今天,我将继续介绍一些在开发中非常有用的MVC特性,如下: BindAttribute Remote HandleError HiddenInput BindAttribute 使用BindAttribute的目的是限制用户在提交form表单时使用合适且正确的值.当我们提交一个表单时,就会检查每一个实体上绑定的特

AngularJS 的常用特性(五)

13.使用路由和 $location 切换视图 对于一些单页面应用来说,有时候需要为用户展示或者隐藏一些子页面视图,可以利用 Angular 的 $route 服务来管理这种场景. 你可以利用路由服务来定义这样的一种东西:对于浏览器所指向的特定 URL,Angular 将会加载并显示一个模板,并实例化一个控制器来为模板提供内容. 在应用中可以调用 $routeProvider 服务上的函数来创建路由,把需要创建的路由当成一个配置块传给这些函数即可.伪代码如下: 1 var someModule

Vue的常用特性

Vue的常用特性 一.表单基本操作 都是通过v-model 单选框 1. 两个单选框需要同时通过v-model 双向绑定 一个值 2. 每一个单选框必须要有value属性 且value值不能一样 3. 当某一个单选框选中的时候 v-model 会将当前的 value值 改变 data 中的 数据 gender 的值就是选中的值,我们只需要实时监控他的值就可以了 <input type="radio" id="male" value="1"

ES6常用特性

以下是ES6排名前十的最佳特性列表(排名不分先后): Default Parameters(默认参数) in ES6 Template Literals (模板文本)in ES6 Multi-line Strings (多行字符串)in ES6 Destructuring Assignment (解构赋值)in ES6 Enhanced Object Literals (增强的对象文本)in ES6 Arrow Functions (箭头函数)in ES6 Promises in ES6 Blo

【ES6】最常用的es6特性(一)

参考链接: http://www.jianshu.com/p/ebfeb687eb70 http://www.cnblogs.com/Wayou/p/es6_new_features.html 1.let, const 这两个的用途与var类似,都是用来声明变量的,但在实际运用中他俩都有各自的特殊用途. 1.1第一种场景就是你现在看到的内层变量覆盖外层变量 var name = 'zach' while (true) { var name = 'obama' console.log(name)

【ES6】最常用的es6特性(二)

1.for of 值遍历 for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值. var someArray = [ "a", "b", "c" ]; for (v of someArray) { console.log(v);//输出 a,b,c } 2.iterator, generator基本概念 2.1 iterator:它是这么一个对象,拥有一个next方法,这个

ES6语法的新特性

ES6 就是ECMAScript 6是新版本JavaScript语言的标准.虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法.目前ES6也是使用最多的最新的javaScript语言标准.要查看ES6的支持情况请点此. 在2009年ES5问世以后,javaScript的标准就一直没有更新.从那时起ES标准委员会就已经开始筹划新的ES标准,在2015年发布了ES6.ES6是ECMAScript 的第6个版本. 经过持续几年的磨砺,它已成为

ES6--Class、Module及常用特性

十八.Class 示例:ES5 function Point(x, y) { this.x = x; this.y = y; } Point.prototype.toString = function () { return '(' + this.x + ', ' + this.y + ')'; }; var p = new Point(1, 2); 示例:ES6的等价写法 class Point{ constructor(x, y){ this.x = x; this.y = y; } toS