ES6标准汇总

本文转载自我的个人博客。

ES6新标准的知识点零散，经常是看一遍就忘了，所以特别开了这一贴，作为一个ES6知识的汇总贴。主要讲ES6的新命令的具体用法，以及与之前用法的区别。知识点不会讲得很深，很多只是蜻蜓点水的讲一下，适合当作ES6的入门贴来看。本帖长期更新，实用向。

let 命令

ES6 新增了一个 let命令用来声明变量。同样是声明变量，let与之前的var主要有以下几点区别：

  1. let 声明的变量不允许重复声明:
  var a = 1;
  var a = 2;
  console.log(a); //输出 2

  let b = 1;
  let b = 2;     //报错
  console.log(b) ;

在一个大型项目中或者多人协助项目中，我们往往因为不知道那些变量已经被声明过了而重复声明变量，导致之前变量的值被覆盖。由于程序不会报错，debug是很困难的，而现在的let命令很好的解决了这个问题。

  1. let 声明的变量存在块级作用域:
  function f1() {
    let n = 5;
    if (true) {
      let n = 10;
      console.log(n); //输出 10
    }
    console.log(n); // 输出 5
  }

上面的两个代码块中拥有各自的变量n，不会相互影响。

再给一个例子：

  ///////// 使用 var /////////
  var printNumTwo;
  for (var i = 0; i < 3; i++) {
    if(i === 2){
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 3
  
  ///////// 使用 let /////////
  'use strict';
  let printNumTwo;
  for (let i = 0; i < 3; i++) {
    if (i === 2) {
      printNumTwo = function() {
        return i;
      };
    }
  }
  console.log(printNumTwo());
  // returns 2
  console.log(i);
  // returns "i is not defined"
  1. let声明不存在变量提升

所谓变量提升，就是之前我们在使用var声明变量时，变量可以放在声明之前使用，只不过使用还没有声明的变量时，其值为undefined。但是使用let声明变量时，如果使用放在声明之前则会报错。

  console.log(a); //输出 undefined
  var a = 1;

  console.log(b); //报错
  let b = 1;

const 命令

const除了拥有let的所有优秀特性(不允许重复声明，有用块级作用域)之外，还有一个特性，那就是它是只读的。

“ const 实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针， const 只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。”

《ES6标准入门》 阮一峰

阮大佬上面这段话具体是什么意思呢，请看下面这个例子：

  "use strict";
  const s = [5, 6, 7];
  s = [1, 2, 3]; // 报错
  s[2] = 45; // 正常工作
  console.log(s); // returns [5, 6, 45]

我们将一个新数组[1, 2, 3]赋值给变量s时，其实是企图改变变量s内指针的指向，而因为变量s是使用const命令声明的，其指针指向是固定的，不能变动的，所以程序报错。第二次，我们想修改数组中第二项的值，因为修改数组中某一项的值并不改变数组的地址，变量s内所保存的指针依旧指向原来的地址，所以程序可以成功执行。

Object.freeze

因为const并不能保证复合类型的数据是不可改变的，所以我们需要一个新的命令来保证复合类型的只读性，这个命令就是Object.freeze，具体用法请看下例：

  let person = {
    name:"XiaoMing",
    review:"yes"
  };
  Object.freeze(person);
  person.review = "no"; //这条命令将会被忽略，因为此时person对象是只读的
  person.newProp = "age"; // 这条命令也将会被忽略
  console.log(obj); 
  // { name: "XiaoMing", review:"yes"}

箭头函数 (Arrow Functions)

ES6 为我们带来了一种更简洁的书写函数的方式，箭头函数。在旧的标准中，我们是这样书写函数的：

  const myFunc = function() {
    const myVar = "value";
    return myVar;
  }

使用剪头函数，我们可以将其简化为：

  const myFunc = () => {
    const myVar = "value";
    return myVar;
  }

还可以进一步简化，我们可以甚至连return都不要:

  const myFunc = () => "value"

箭头函数可以传参:

  // 将输入的数乘以2，并返回
  const doubler = (item) => item * 2;

箭头函数可以极大的化简高阶函数的使用。所谓高阶函数，就是那些接受一个函数作为参数的函数，常见的有：map()，filter()，reduce()。在以前我们是这么写高阶函数的:

  FBPosts.filter(function(post) {
    return post.thumbnail !== null && post.shares > 100 && post.likes > 500;
  })

利用箭头函数可以化简为一行：

FBPosts.filter((post) => post.thumbnail !== null && post.shares > 100 && post.likes > 500)

为函数的参数设置默认值

在ES6中，你可以为函数的参数设置默认值：

  function greeting(name = "Anonymous") {
    return "Hello " + name;
  }
  console.log(greeting("John")); // 输出 Hello John
  console.log(greeting()); // 输出 Hello Anonymous

参数name的默认值被设置为"Anonymous"，所以在不传参直接调用greeting()时，输出的是Hello Anonymous。

rest 参数 (Rest Operator)

ES6中引入了rest参数，其形式为...变量名。通过使用rest参数，你可以向函数传入不同数量的参数：

  function howMany(...args) {
    return "You have passed " + args.length + " arguments.";
  }
  console.log(howMany(0, 1, 2)); // 传入三个参数
  console.log(howMany("string", null, [1, 2, 3], { })); // 传入四个参数

rest参数中的变量代表一个数组，所有数组特有的方法都可以用于这个变量：

  function push(array, ...items) {
    items.forEach(function(item) {
      array.push(item);
      console.log(item);
    });
  }
  var a = [];
  push(a, 1, 2, 3)
  console.log(a)  //输出 [1， 2， 3]

rest参数之后不能再有其他参数，否则程序会报错。

扩展运算符 (Spread Operator)

扩展运算符其实就是rest参数中的那三个点...，其作用是将数组打散：

  console.log(...[1, 2, 3])
  // 1 2 3
  console.log(1, ...[2, 3, 4], 5)
  // 1 2 3 4 5
  [...document.querySelectorAll('div')]
  // [<div>, <div>, <div>]

在之前，如果我们想求数组中的最大值需要这样写：

  var arr = [6, 89, 3, 45];
  var maximus = Math.max.apply(null, arr); // 返回 89

因为Math.max()方法只接受由逗号分隔的参数序列，比如Math.max(1, 2, 3)，所以我们需要apply()进行转化。在ES6中，我们不再需要apply()方法，而是可以直接利用扩展运算符，其形式更易于理解：

  const arr = [6, 89, 3, 45];
  const maximus = Math.max(...arr); // 返回 89

请注意，扩展运算符...只在某些特定的情况下才可以使用，比如函数的参数中，或者数组中。裸用扩展运算符程序会报错:

  var arr = [6, 89, 3, 45]
  const spreaded = ...arr; //报错

解构赋值(Destructuring Assignment)

我们已经看过了扩展运算符可以让我们的数组操作变得多么高效。对于操作对象，ES6也给出了相似的方法。

  1. 请看下面这个ES5的例子:
  var voxel = {x: 3.6, y: 7.4, z: 6.54 };
  var x = voxel.x; // x = 3.6
  var y = voxel.y; // y = 7.4
  var z = voxel.z; // z = 6.54

在ES6中，我们可以这样做：

  const { x, y, z } = voxel; // x = 3.6, y = 7.4, z = 6.54

如果你想赋值的变量与对象的属性有不同的名称，你可以这样做:

  const { x : a, y : b, z : c } = voxel // a = 3.6, b = 7.4, c = 6.54

以上操作方法被我们称为解构赋值。

  1. 解构赋值也可以作用于嵌套的对象:
  const a = {
    start: { x: 5, y: 6},
    end: { x: 6, y: -9 }
  };
  const { start : { x: startX, y: startY }} = a;
  console.log(startX, startY); // 5, 6
  1. 利用解构赋值，我们可以轻易的获取数组的特定元素：
  const [a, b] = [1, 2, 3, 4, 5, 6];
  console.log(a, b); // 1, 2

  const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
  console.log(a, b, c); // 1, 2, 5
  1. 解构赋值可以搭配扩展运算符使用
  const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
  console.log(a, b); // 1, 2
  console.log(arr); // [3, 4, 5, 7]
  1. 如果你想将一个对象当参数传入，你可能会想到这样做：
  const profileUpdate = (profileData) => {
    const { name, age, nationality, location } = profileData;
    // 函数操作
  }

但其实你可以这样：

  const profileUpdate = ({ name, age, nationality, location }) => {
    // 函数操作
  }

这样做的好处是，我们不用把整个对象都传进来，只需要传入我们需要的那部分。

模板字符串 (Template String)

ES6中引入了一种更强大的字符串写法，被称为模板字符串，用反引号( ` )标识，用法如下：

  const person = {
    name: "Zodiac Hasbro",
    age: 56
  };

  //用模板字符串方式书写的字符串，并将其赋给greeting变量
  const greeting = `Hello, my name is ${person.name}!
  I am ${person.age} years old.`;

  console.log(greeting); 
  // 输出：
  // Hello, my name is Zodiac Hasbro!
  // I am 56 years old.

在上面这段代码中，有三个地方需要我们注意：

  1. 模板字符串的标识符是反引号(`) 而不是单引号(')
  2. 输出的字符串是多行的，我们在也不需要\n了
  3. 语法${}可以用来获取变量，化简了之前用+来进行字符串拼接的写法

更简洁的定义对象的方法

在ES5中我们是这样定义对象的方法的:

  const person = {
    name: "Taylor",
    sayHello: function() {
      return `Hello! My name is ${this.name}.`;
    }
  };

在ES6中，我们可以将function关键词省略：

  const person = {
    name: "Taylor",
    sayHello() {
      return `Hello! My name is ${this.name}.`;
    }
  };

class

ES6中提供了一种新的语法创建对象，即使用class关键词。需要注意的是，这里的class关键词只是语法糖，并不具有像传统的面向对象的语言那样的特性。

在ES5中，我们通常是这样创建构造函数的:

  var Person = function(name){
    this.name = name;
  }
  var person1 = new Person('Jim');

利用class语法糖，我们可以这样写:

  class Person {
    constructor(name){
      this.name = name;
    }
  }
  const person1 = new Person('Jim');

在由class定义的对象中，我们添加了构造函数constructor()，构造函数在new被调用时唤醒，创建一个新的对象。

用取值函数和存值函数(getters and setters)来封装对象

在由class定义的对象中，存值函数和取值函数现在有了自己的关键字get和set，用法也更加简单:

  class Book {
    constructor(author) {
      this._author = author;
    }
    // getter
    get writer(){
      return this._author;
    }
    // setter
    set writer(updatedAuthor){
      this._author = updatedAuthor;
    }
  }
  const lol = new Book('anonymous');
  console.log(lol.writer);  // anonymous
  lol.writer = 'wut';
  console.log(lol.writer);  // wut

请注意我们调用存值函数和取值函数的方式：lol.writer。这种调用方式让他们看起来并不像是函数。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,657评论 6赞 492
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,662评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 158,143评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,732评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,837评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 50,036评论 1赞 291
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,126评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,868评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,315评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,641评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,773评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,470评论 4赞 333
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,126评论 3赞 317
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,859评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,095评论 1赞 267
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,584评论 2赞 362
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,676评论 2赞 351