【javascript】您好, 您要是的ECMAScript6速记套餐至了 (一)

【前言】本文“严重参考”
自阮一峰先生写的ES6文档,在这个我慎重道谢他沉默无声的辅

 

小结一下ES6吧
javascript中之 对象/数组/函数
这JS三巨头所提供的更精简优雅的修方式,以及扩大的API。

对象篇

  • 属性名简洁表示法,
    当目标的属于性名和作属性值的变量称名一致时,可就写属性名

    var name = “彭湖湾”
    var obj = { name: name }

可是简写为

 

var name = "彭湖湾"
var obj = { name }

 

  • 若是目标的性是函数,可简写为接近于“函数声明”的款型

    var obj = {
    methods: function () {}
    }

但是简写为

 

var obj = {
  methods () {
   // ...
  }
}

 

 

 

  • 靶字面量的习性名表达式

早先您不得不针对单一的靶子属性使用表达式:obj[‘a’

  • ‘b’] = value
    当今你可以当一个靶字面量里对属于性名使用表达式

    var obj = {

  ['a' + 'b']: value
} 

 

  • Object.assign(target,
    source1, source2 ….)
    可将source1,source2等第二个参数后的靶子合并及target

1.规虽说是对同名属性,
后面的对象会蒙前的,如source1覆盖target, source2会覆盖source1

 

var target = { a: 1, b: 1 };
var source1 = { b: 2, c: 2 };
var source2 = { c: 3 };

Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

 

 

 

2.
Object.assign之联结功能只止于第一层属性,也就是说,
如果两独联合对象(如source1和source2)有一个率先重合的同名属性,并且这个特性为是只出总体性之对象,那么Object.assign不会“进入”位于第二叠的习性对象,对那个性能进行统一,而是大概地用后对象的率先重合属性替代前面对象的率先叠属性

var target = { a: { b: 'c', d: 'e' } }
var source = { a: { b: 'hello' } }
Object.assign(target, source)

结果是

{ a: { b: 'hello' } }

不是

 

{ a: { b: 'hello', d: 'e' } }

 

 

 

  • 合历属性对象的几单API对比:

1.for…in
遍历对象我性质与原型着之习性,
且要求凡只是枚举属性
2.
Object.keys(obj)
,返回一个频繁组, 遍历自身性质, 不包原型属性
且要求是而是枚举的
3.
Object.getOwnPropertyNames(obj)
返回一个屡屡组,遍历自身性质, 不包括原型属性
非要求凡可枚举的
4.Object.values():
和Object.keys(obj)
类,不过遍历的是属性值
5.Object.entries()
和Object.keys(obj)
恍如,不过遍历的凡性名/值对,返回一个二维数组
[
[“key1”, “value1”], [“key2”, “value2”] ]

着重对比

1.for…in
Object.keys(obj)/Object.getOwnPropertyNames(obj), 前端取得原型中的性能,后两者不获
2.Object.getOwnPropertyNames(obj)
和Object.keys(obj), 都是只是回遍历自身性质组成的勤组,前者无论是否可枚举都归,
Object.keys(obj)只回可枚举属性

3.Object.keys(obj)
, Object.values(), Object.entries() 分别遍历对象的键, 值,键值对

数组篇

  • Array.of
    将同组参数作为数组元素做数组, 如

    Array.of(1, 2, 3) // [1,2,3]

 

并发由:
弥补Array构造函数的欠缺:

Array构造函数因为接受参数的不比行为表现差异大伟大

  1. 当接到一个参数的时候,它会觉得你传之凡频繁组的长,从而创造一个相应长度的“空”数组

    Array(3) // [, , ,]

  2. 当接受多只参数的当儿,它见面认为你传的凡数组元素
    从而创建一个点名数组元素的数组

    Array(1, 2, 3) // [1, 2, 3]

  3. Array.from将两类对象都转为数组

1仿佛数组对象(如函数内部的arguments,DOM操作有的NodeList集合)
2
ES6新增加的Set对象, Map对象
且转为真正的数组

转发类数组对象

function foo() {
var args = Array.from(arguments);
// arguments从对象变成了数组
}

转车ES6新增加的Set对象,
Map对象

let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
  • find方法,用于在一个数组中找到第一个符合条件的数组元素

    [1, 2, 3, -1].find((n) => n < 0) // -1

ES5挨我们兴许会见采取IndexOf方法来找一个特定的要素,但其的局限性在于indexof只能为数组元素的价作为找条件,而find方法则更进一步灵活,
它提供了一个坐数组元素为参数的函数供而开越来越灵敏的操作,并收获第一独返回true的数组元素

  • fill方法,
    通过array.fill(value), 可以以array数组的所有值都勾啊value

诚如可用于初始化空数组:

new Array(4).fill(1)
// [1, 1, 1,1]
  • includes方法
    检测数组中是不是含有某个元素, 返回true或者false

【注意】array.indexOf(数组元素)
=== -1 这个经常用于判断标准的表达式可以就此 includes方法去替

[1, 2, 3].includes(2) // true
[1, 2, 3].includes(4) // false

函数篇

  • 函数参数在ES6产可装默认值

    function log(x, y = ‘World’) {
    console.log(x, y);
    }

    log(‘Hello’) // Hello World

  • rest
    参数

可以通过“…”的运算符把接受至的函数参数合为数组放入紧跟“…”的变量中

function fn(...args) {
}
fn(1, 2, 3) // 此时 args = [1,2,3]

【注意】
函数的reset参数可以作为是扩大运算符的“逆运算”

  • name属性

函数可取name属性

function fn() {}
fn.name // "fn"
  • 箭头函数

ES6引入了箭头函数,它发几乎百般作用:
1.
设我们能够经过一样种更加简单之章程开函数

2.
箭头函数绑定了this对象, 减少了this绑定丢失所招的难为

 

  • 在javascript中,
    绝大多数变量的追寻的都是静态的,而无是动态的,
    或者说是变量所于的作用域是概念时候决定的,而休是运作时控制
  • 只是this却恰好相反, this的绑定是动态的,
    是运行时控制的

    这生时分就是招了被人坐卧不安的this绑定丢失问题

 

 

因此同样段代码展示一下屡见不鲜函数(相比叫箭头函数)所是this绑定丢失的题材

function foo() {
  setTimeout( function () {
     console.log('id:', this.id);
  }, 100);
}

var id = 21;
foo.call({ id: 42 });
// id: 21

 

为什么输出的凡21无是42吧?
坐setTimeout里之函数是异步执行的,当调用foo.call({
id: 42 })的早晚setTimeout里的函数并没马上得到推行,

故而setTimeout()调用的时刻,它运行于跟所在函数完全分离的实施环境及。这时候this指向的凡window,而休是{
id: 42 }
(在 ES6严厉模式下是undefined)

 

箭头函数的this是静态绑定的
所以能大好地解决这个题材:

 

function foo() {
  setTimeout(() => {
     console.log('id:', this.id);
  }, 100);
}
var id = 21;

foo.call({ id: 42 });
// id: 42

 

假如园友看到此间了,
那么请容我鸣个歉, 在及时篇文章里, 其实多地处“参考”了《ES6契合帮派》中之事例,
比由自己亲手写的代码,多少可能会见叫读者们觉得有把不便了解,因为这几天实在挺累的,所以写就篇稿子的当儿发出几脑筋不足,见谅。

 

 资料来源于

  1.  MDN
     https://developer.mozilla.org/zh-CN/

  2.  ECMAScript 6入门 http://es6.ruanyifeng.com/

 

图片 1