es6中常用的字符串、数组、对象的扩展及应用

2018年3月25日 16584次浏览

前言

目前前端开发流行框架，react,vue,angular以及微信小程序等等，都是对数据的操作，其实es6中对字符串、数组、对象的扩展，对于我们更简单的操作数据提供了方便。今天主要总结一下我项目中主要用到的es6对这些扩展的应用。当然，es6对函数的扩展及其他应用也很重要，关于这些应用，请关注我后面的文章。

includes方法

在e6字符串和数组中，多了一个includes（）方法，这个方法我在项目中经常用到。

有人说includes（）方法完全可以用indexOf取代，但是indexOf有几个缺点：

一是不够语义化，它的含义是找到参数值的第一个出现位置，所以要去比较是否不等于-1，表达起来不够直观。

二是，它内部使用严格相等运算符（===）进行判断，这会导致对NaN的误判。

[NaN].indexOf(NaN)
// -1

但是includes就可以解决这个问题！

[NaN].includes(NaN)
// true

该方法的几个例子：

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

该方法的第二个参数表示搜索的起始位置，默认为0。如果第二个参数为负数，则表示倒数的位置，如果这时它大于数组长度（比如第二个参数为-4，但数组长度为3），则会重置为从0开始。

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

数组includes方法和字符串includes方法类似：

let s = 'Hello world!';
s.includes('o') // true
s.includes('Hello', 6) // false

应用-求两个数组的交集和差集

数组a和数组b的交集：

 a.filter(v => b.includes(v))

数组a和数组b的差集：

a.concat(b).filter(v => !a.includes(v) || !b.includes(v))

字符串 startsWith(), endsWith(),repeat(),padStart()，padEnd()

let haorooms = 'Hello world!';
haorooms.startsWith('Hello') // true
haorooms.endsWith('!') // true
'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""
'na'.repeat('na') // ""
'na'.repeat('3') // "nanana"
'na'.repeat(2.9) // "nana"

padStart()，padEnd()接受2个参数，一个代表补全的长度，一个代表补全的字符串。

'haorooms.com'.padStart(16, 'www.');//"www.haorooms.com"
'haorooms'.padStart(16, '11') //"11111111haorooms"

'haorooms'.padEnd(12, '.com') //"haorooms.com"

'haorooms'.padEnd(5, '.com') //"haorooms"

数组 entries()，keys() 和 values() 及对象的Object.keys()，Object.values()，Object.entries()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

var obj = { foo: 'bar', baz: 42 };
Object.keys(obj) //["foo", "baz"]
Object.values(obj) //[bar,42]
Object.entries(obj)//[["foo", "baz"],[bar,42]]

类数组转为数组

Array.from()

let haorooms = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(haorooms); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(haorooms); // ['a', 'b', 'c']

扩展运算符也可以将类数组转为数组

var args = [...arguments];

应用，获取p标签中文本长度大于100的标签

let haorooms = document.querySelectorAll('p');
Array.from(haorooms).filter(p => {   //等同于[...haorooms].filter
  return p.textContent.length > 100;
});

Array.of()将一组值转为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1

这个方法的主要目的，是弥补数组构造函数Array()的不足。因为参数个数的不同，会导致Array()的行为有差异。

Array() // []
Array(3) // [, , ,]
Array(3, 11, 8) // [3, 11, 8]

数组copyWithin()、find() 和 findIndex() 及fill()

数组实例的copyWithin方法，在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

Array.prototype.copyWithin(target, start = 0, end = this.length)

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]

// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

[1, 4, -5, 10].find((n) => n < 0)
// -5
//上面代码找出数组中第一个小于 0 的成员。

[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10
[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

fill方法使用给定值，填充一个数组。

['a', 'b', 'c'].fill(7)
// [7, 7, 7]

new Array(3).fill(7)
// [7, 7, 7]

fill方法还可以接受第二个和第三个参数，用于指定填充的起始位置和结束位置。

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

表达式用于定义方法名-vuex中经常用到

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi

注意，属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串[object Object]，这一点要特别小心。

const keyA = {a: 1};
const keyB = {b: 2};

const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};

myObject // Object {[object Object]: "valueB"}

上面代码中，[keyA]和[keyB]得到的都是[object Object]，所以[keyB]会把[keyA]覆盖掉，而myObject最后只有一个[object Object]属性。

Object.is()

Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等，与严格比较运算符（===）的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之处只有两个：一是+0不等于-0，二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false

Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

Object.assign()

关于Object.assign()，我前面文章多次提及，请看：http://www.haorooms.com/post/js_copy_sq

http://www.haorooms.com/post/js_objectoperate

super 关键字

ES6 又新增了另一个类似的关键字super，指向当前对象的原型对象。

const proto = {
  foo: 'hello'
};

const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};

Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

react项目中，经常看到

super(props)

这里 super(props) 之后，能在类里通过 this 访问，是因为在 React.Component 里面把传入的 props 绑定到了 this 上去，于是在 super 之后就可以用 this 访问了。

解构赋值数据交换

以前交换2个值比较简单的做法如下：

a=[b,b=a][0]

es6解构赋值如下：

[a,b]=[b,a]

淘宝网性能优化之借鉴——webp及Bigpipe

【译】vue技术分享-你可能不知道的7个秘密

Tags: es6， js