ECMAScript 6 的新特性

参考文章地址：1, https://babeljs.io/learn-es2015/#ecmascript-2015-features-destructuring
2,https://segmentfault.com/a/1190000005863641

Arrows and Lexical This(箭头函数)

一、 箭头函数没有独立上下文的(this), 其内部引用this对象其实是父级的this
二、 箭头函数没有独立的arguments，所以如果需要取不定参数的时候，要么用function，要么用ES6另一个新特性：rest

// 箭头函数没有独立的this
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends() {
    this._friends.forEach(f =>  //箭头函数使用父级的this
      console.log(this._name + " knows " + f));
  }

// 普通方法有独立的this。
var bob = {
  _name: "Bob",
  _friends: [],
  printFriends: function printFriends() {
    var _this = this;

    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};

Classes 类

ES6中实现的一个语法糖，用于简化基于原型集成实现类定义的场景，但是它实际上并没有其他语言的Class应用的特点。

class SkinnedMesh extends THREE.Mesh {
  constructor(geometry, materials) {
    super(geometry, materials);

    this.idMatrix = SkinnedMesh.defaultMatrix();
    this.bones = [];
    this.boneMatrices = [];
    //...
  }
  update(camera) {
    //...
    super.update();
  }
  static defaultMatrix() {   //ES6中可以定义静态的方法。
    return new THREE.Matrix4();
  }
  static get personName(){  //ES6中定义静态变量
     return 'jelly';
   }
}

//Class没有私有属性，但是可以通过一种其他方式实现的私有属性
// 自动执行的闭包
const TbFedMembers = (() => {
 const personName = 'jelly';
 return class{
   getOneMemberName(){
     return HuaChen;
   }
 };
})();

Enhanced Object Literals（增强的对象字面量）

增强的对象字面量是 ES6 中的升华功能，他设计了很多简写，这些简写不但保留了明确的语义，还减少了我们多余的代码量。

var obj = {
    // Sets the prototype. "__proto__" or '__proto__' would also work.
    __proto__: theProtoObj,
    // Computed property name does not set prototype or trigger early error for
    // duplicate __proto__ properties.
    ['__proto__']: somethingElse,
    // Shorthand for ‘handler: handler’
    handler,
    // Methods
    toString() {
     // Super calls
     return "d " + super.toString();
    },
    // Computed (dynamic) property names(计算所得的(动态的)属性名称)
    [ "prop_" + (() => 42)() ]: 42
};

// ES6 增强写法
var obj = {
    handler,
    toString() {
        return "d " + super.toString();
    },
    [ 'prop_' + (() => 42)() ]: 42
};

//普通写法
var obj = {
    handler: handler,
    toString: function() {
        return "d " + super.toString();
    },
    prop42: 42
};

Template Strings 模板字符串

模板字符串提供构造字符串的语法糖，这与Perl、Python等许多语言中的字符串插值功能非常相似，你也可以通过添加标签(tag)来自定义构造字符串，避免注入攻击，或者基于字符串构建更高层次的数据结构。

// Basic literal string creation
// 基础字符串字面量的创建
`In JavaScript '\n' is a line-feed.`

// Multiline strings
// 多行字符串
`In JavaScript this is
 not legal.`

 // String interpolation
// 字符串插值
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// Construct an HTTP request prefix is used to interpret the replacements and construction
// 构造一个HTTP请求前缀用来解释替换和构造，大意就是可以构造一个通用的HTTP prefix并通过赋值生成最终的HTTP请求
GET`http://foo.org/bar?a=${a}&b=${b}
    Content-Type: application/json
    X-Credentials: ${credentials}
    { "foo": ${foo},
      "bar": ${bar}}`(myOnReadyStateChangeHandler);

字符串的扩展

ES5对字符串对象提供了CharAt方法，返回字符串给定位置的字符。但是该方法不能识别码点大于0xFFFF的字符。于是在ES7中提供了一个at方法，可以识别Unicode编号大于0xFFFF的字符。

includes(),startsWith(),endsWith()方法。JS中只有indexOf方法可以用来确定一个字符串是否包含在另一个字符串中，ES6又提供了三种方法：

includes()：返回布尔值，表示是否找到了参数字符串；

startsWith()：返回布尔值，表示参数字符串是否在源字符串的头部；

endsWith()：返回布尔值，表示参数字符串是否在源字符串的尾部；

repeat()，repeat方法返回一个新字符串，表示将原字符串重复n次。

padStart()，padEnd()：ES7推出了字符串补全长度的功能。如果某个字符串长度未达指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。如果原字符串的长度大于或等于指定的最小长度，则返回原字符串。例如：

'x'.padStart(5, 'ab') //'ababx'
'x'.padStart(4, 'ab') //'abax'

'x'.padEnd(5, 'ab') //'xabab'
'x'.padEnd(4, 'ab') //'xaba'

'xxx'.padStart(2, 'ab') //'xxx'

数值的扩展

ES6提供了二进制和八进制数值的新写法，分别用前缀0b(或0B)和0o(或0O)来表示。从ES5开始，在严格模式中，八进制数值就不再允许使用前缀0表示，ES6进一步明确，要使用0o前缀表示。

Number.isFinite(),Number.isNaN()：ES6在Number对象上面新提供了这两个方法，分别用于检查Infinite(是否非无穷)和NaN这两个特殊值。

Number.parseInt(),Number.parseFloat()：ES6将全局方法parseInt()和parseFloat()移植到了Number对象上。这样是为了逐步减少全局性的方法，使语言逐步模块化。

//ES5
parseInt('');

//ES6
Number.parseInt('');

Number.parseInt === parseInt; //true
Number.isInteger()：该方法用来判断一个值是否为整数。

新增了一个极小的常量Number.EPSILON，当我们做计算的时候，如果误差可以小于这个常量，那么就可以认为计算的结果是正确的。

Number.isSafeInteger()：JavaScript能够准确表示的整数范围在-2{53}到2{53}之间，超出的就不能精确表示了，该函数用来判断一个数是否落在这个范围之内。

Math对象的扩展，ES6在Math对象上新增了17个与数学相关的方法：

Math.trunc()：用于去除小数部分，返回整数部分；

Math.sign()：用于判断一个数到底是正数、负数还是0，整数返回1，负数返回-1，0返回0，-0返回-0，其他返回NaN；

Math.cbrt()：计算一个数的立方根；

Math.clz32()：返回一个数的32位无符号数有多少个前导0；

Math.imul()：返回两个数以32位带符号整数形式相乘的结果，返回的也是一个带符号整数，例如：Math.imul(-1, 8); //-8

Math.fround()：返回一个数的单精度浮点数形式；

Math.hypot()：返回所有参数平方和的平方根，例如：Math.hypot(3, 4);//5

还有一些和对数运算、三角函数运算、指数运算相关的方法。

数组的扩展

Array.from()：将类似数组的对象和可遍历的对象转为真正的数组；

Array.of()：将一组数值转换为数组，例如：Array.of(3, 11, 8) //[3,11,8]

fill()方法，使用给定值填充数组，例如：new Array(3).fill(7) //[7,7,7]

数组实例的entries()、keys()、和values()方法，主要用来遍历数组，keys()是对键名的遍历，values()是对键值的遍历，entries()是对键值对的遍历；

函数的扩展

ES6之前不能直接为函数的参数指定默认值，所以经常有x = x || "XXX"这样的写法，ES6允许为函数的参数设置默认值，就可以这样写function test(x, y = "xxx"){};，这样的设计还有一个好处就是开发人员阅读别人的代码一眼就能看出来在调用这个接口哪些参数是可省的。此外，这种写法还可以和解构赋值结合使用，非常灵活。

函数的length属性修改，如果函数中的参数有指定默认值，那么length就不会把这个参数计算进去，例如：(function(a=5){}).length;//0

作用域问题，如果一个参数的默认值是一个变量，那么这个变量所处的作用域与其他变量的作用域规则是一样的，先是当前函数的作用域，然后才是全局作用域；

ES6引入了rest参数(形式为"...变量名")，用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入其中，例如：

function add(...values){
    let sum = 0;
    for(var val of values){
        sum += val;
    }
    return sum;
}
add(2, 5, 3); //10
//add函数是一个求和函数，利用rest参数可以向该函数传入任意数目的参数。
扩展运算符，三个点(...)，作用是把一个数组转为用逗号隔开的参数序列。例如：console.log(1,...[2,3,4],5);//1 2 3 4 5;

扩展运算符替代数组的apply方法，扩展运算符可以直接把数组拆开，例如：

//ES5
function f(x,y,z){};
var args = [0,1,2];
f.apply(null, args);

//ES6
function f(x,y,z){};
var args = [0,1,2];
f(...args);

扩展运算符提供了数组合并的新方法：

//ES5
[1,2].concat(more)
//ES6
[1,2, ...more]

扩展运算符还可以与解构赋值结合；

ES6还写入了函数的name属性，可以返回函数名，虽然这个属性很早就被各个浏览器支持了，但是在ES6才正式写入；

箭头函数：ES6允许使用"箭头"(=>)定义函数，例如：

var sum = (num1, num2) => num1 + num2;
//等价于
var sum = function(num1, num2){
    return num1 + num2;
}

使用箭头函数有几个注意点：

函数体内的this对象就是定义时所在的对象，而不是使用时所在的对象。在js中this的指向是可以改变的，但是在箭头函数中this的指向是不变的；

不可以当作构造函数。也就是说，不可以使用new命令；

不可以使用arguments对象，该对象在函数体内不存在。如果要用，可以用ES6中的rest参数代替；

不可以使用yield命令，因此箭头函数不能用作Generator函数；

函数绑定：在ES6之后的ES7版本中有一个提案是函数绑定运算符(::)，双冒号左边是一个对象，右边是一个函数。这个运算符会自动将左边的对象作为this绑定到右边的函数上面，例如：foo::bar(...arguments)等价于bar.apply(foo,arguments;)。感觉函数绑定这个设计非常的便捷，不需要在显式的去绑定一下上下文，期待该提案的通过(目前babel已经支持这个写法了)；

尾调用：就是指某个函数的最后一步是调用另一个函数；

尾调用优化：尾调用之所以与其他调用不同，就在于其特殊的调用位置。函数调用的时候会在内存形成一个‘调用记录’，又称为‘调用帧’，保存调用位置和内部变量等信息。如果在函数A内部调用函数B，那么在A的调用帧上方还会形成一个B的调用帧。等到B执行结束再返回给A，B的调用帧才消失。如果B的内部调用了C，那么还会产生一个调用帧，以此类推，所有调用帧会形成一个‘调用栈’。然而尾调用是函数的最后一步操作，所以不需要保留外层函数的调用帧，因为调用位置、内部变量等信息都不会再用到了，直接用内层函数的调用帧取代外层函数的即可；

尾递归：函数调用自身称为递归，如果尾调用自身就称为尾递归。递归非常耗费内存，因为需要同时保存成千上百个调用帧，很容易stackoverflow。但对于尾递归来说，只存在一个调用帧，所以永远不会发生“栈溢出”错误。例如：

//这是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度为O(n)。
function factorial(n){
    if(n === 1) return 1;
    return n * factorial(n - 1);
}
//改写成尾递归，只保用一个调用记录，则复杂度为O(1)；
function factorial(n, totla){
    if(n === 1) return total;
    return factorial(n - 1, n * total);
}

由此可见‘尾调用优化’对于递归操作的意义非常重大，所以一些函数式编程语言将其写入了语言规格。ES6也是如此，第一次明确规定，所有ECMAScript的实现，都必须部署‘尾调用优化’。这就是说，在ES6中，只要使用尾递归，就不会栈溢出，节省内存。

let和const命令

ES6新增let命令，用于声明变量，是块级作用域。

let声明的变量不会像var声明的变量发生“变量提升”现象，所以，变量一定要在声明后使用，不然就会报错。

暂时性死区：只要块级作用域内存在let命令，它所声明的变量就会“绑定”在这个区域，不再受外部的影响。即在代码块内，使用let命令声明变量之前，这个变量都是不可用的，这在语法上称为“暂时性死区”。

ES6规定暂时性死区和不存在变量提升，主要是为了减少运行时的错误，防止在变量声明前就使用这个变量，导致意外，这样的错误在ES5中很常见。

let不允许在相同作用域内重复声明同一个变量。

const命令用来声明常量，声明了之后就不能再改变，所以在声明的时候就必须赋值，这个命令同样是块级作用域，同样存在暂时性死区。

对于用const声明的对象，变量名不会指向对象的数据，而是指向对象所在的地址，所以用const声明的复合类型变量中的数据是可以改变的，这点需要当心！

变量的解构赋值

解构：ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被成为解构。如下：

//ES5
var a = 1;
var b = 2;
var c = 3;

//ES6
var [a, b, c] = [1, 2, 3];

//嵌套
let [foo, [[bar], baz]] = [1, [[2], 3]];
foo;//1
bar;//2
baz;//3

//如果等号右边不是可以遍历的结构，就无法匹配就会报错。
解构赋值是允许设置默认值的，在ES6内部使用'==='来判断一个位置是否有值。所以，如果一个数组成员不严格等于undefined，默认值是不会生效的。例如：

[x, y = 'b'] = ['a', undefined];//x='a',y='b'
[x = 1] = [null];//x=null

默认值可以引用解构赋值的其他变量，但该变量必须已经声明。例如：

let [x = 1, y = x] = []; //x=1; y=1
let [x = 1, y = x] = [2]; //x=2; y=2
let [x = 1, y = x] = [1, 2]; //x=1; y=2
let [x = y, y = 1] = []; //报错，因为x在使用y作为其默认值的时候y还没有被声明
对象的解构赋值：

var {foo, bar} = {foo: "aaa", bar:"bbb"};
foo //"aaa"
bar //"bbb"

对象的解构赋值和数组有一个重要的不同：数组的元素是按次序排列的，变量的取值由它的位置来决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

对象的解构赋值可以很方便地将现有对象的方法赋值到某个变量。例如：

let {log, sin, cos} = Math;
//这样就可以把取对数、正弦、余弦3个方法赋值到对应的变量上面，用起来很方便；
字符串也可以解构赋值，因为字符串会被转换成一个类似数组的对象。例如：

const [a, b, c, d, e] = 'hello';
a // 'h'
b // 'e'
c // 'l'
d // 'l'
e // 'o'

let {length : len} = 'hello';
len //5

数值和布尔值的解构赋值：解构赋值时，如果等号右边是数值或布尔值，则会先转为对象。

函数参数也可以解构赋值，例如：

function add([x,y]){
    return x + y;
}

add([1, 2]) //3

变量的解构赋值的用途很多，简洁易读：

交换变量的值[x, y] = [y, x]；

从函数返回多个值；

example(){

return [1, 2, 3];
}

[a, b, c] = example();

函数参数的定义；

//有序
function f([x, y, z]){...};
f([1, 2, 3]);

//无序
function f({x, y, z}){...};
f({z:3, y:2, x:1});

提取JSON数据，可以快速提取json对象中的数据；

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

推荐阅读更多精彩内容

  • ES6入门摘录笔记(二)
    三，字符串扩展 3.1 Unicode表示法 ES6 做出了改进，只要将码点放入大括号，就能正确解读该字符。有了这...
    eastbaby阅读 1,518评论 0赞 8
  • ES6的新特性
    一、ES6简介 ​ 历时将近6年的时间来制定的新 ECMAScript 标准 ECMAScript 6（亦称 ...
    一岁一枯荣_阅读 6,062评论 8赞 25
  • 第5章 引用类型
    第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,216评论 0赞 4
  • 最近，我很焦虑
    昨天终于去了趟超市把冰箱填满了，今天早餐也进入正常程序。起煎锅，丢一根烤肠，再切两片杂粮馒头一并丢进去，小火慢煎，...
    恋恋晨光阅读 284评论 0赞 0
  • 旅澳日记：参观悉尼大学
    这两天被扭的脚虽然好了一点，但是走的多了，还有一点不舒服。今天决定去附近的悉尼大学看看。 悉尼大学建于1850年，...
    独孤行_苍茫阅读 1,811评论 0赞 2