小邵教你玩转ES6（三）——es6数据类型Symbol以及es6操作数组常用的方法

Author: 邵威儒
Wechat: 166661688

Symbol

在js中，常见的数据类型有undefined null string number boolean object，而es6中，则新增了第七种数据类型symbol。

symbol会生成一个独一无二的值，为常量

1. let s1 = Symbol()

2. let s2 = Symbol()

3. console.log(s1 === s2) // false

5. // 因为Symbol生成的是一个独一无二的值，为常量，一般是作为对象的属性

6. let obj = {

7.  [s1]:1,

8.  [s2]:2

9. }

11. console.log(obj) // { [Symbol()]: 1, [Symbol()]: 2 }

Symbol.for与Symbol差不多，但是Symbol.for会生成一个唯一的标识

1. let s1 = Symbol.for('foo')

2. let s2 = Symbol.for('foo')

3. console.log(s1 === s2) // true

5. // 也可以通过Symbol.keyFor把标识找出来

6. console.log(Symbol.keyFor(s1)) // foo

---

Array

Array的常用方法有from reduce map forEach findIndex find every some filter includes等等

用法也很简单，我主要讲一下from和reduce。

Array.from

把伪数组(包括不含有迭代器的伪数组)转化为数组

1. // 声明一个伪数组

2. let likeArr = { 0:1,1:2,2:3,length:3 }

4. // 转换为数组

5. Array.from(likeArr) // [1,2,3]

那么我们用前面所说的扩展运算符，能够把伪数组转为数组吗？

1. // 声明一个伪数组

2. let likeArr = { 0:1,1:2,2:3,length:3 }

4. // 用扩展运算符转换为数组

5. let arr = [...likeArr] // 报错 likeArr is not iterable

likeArr is not iterable意思是，likeArr这个伪数组没有迭代器，

那么可以看出，Array.from和...扩展运算符的区别了，

Array.from可以将伪数组（包含没有迭代器的伪数组）转为数组，

而...扩展运算符只能把拥有迭代器的伪数组转为数组，如arguments、map、set，

那么我们如果想用...扩展运算符转为数组，该怎么办呢？

1. // 既然扩展运算符只能把有迭代器的伪数组转为数组，

2. // 那么我们就给伪数组添加一个迭代器

3. // 迭代器iterator需要一个generator生成器生成

4. // 我们给这个伪数组新增一个[Symbol.iterator]的迭代器

5. let likeArr = { 0:1,1:2,2:3,length:3,[Symbol.iterator]:function *() {

6.  for(let i = 0;i < this.length;i++){

7.    yield this[i]

8.  }

9. } }

11. console.log([...likeArr]) // [1,2,3]

reduce

1. let arr = [1,2,3,4,5]

3. // 参数一：前一个值

4. // 参数二：下一个值（当前值）

5. // 参数三：当前的索引

6. // 参数四：arr数组

7. let total = arr.reduce(function(prev,next,currentIndex,arr){

8.    return prev + next

9. })

11. console.log(total) // 15

1. // 那么reduce是怎样一个运行流程呢？

2. // 我们一步步拆解出来看

3. let arr = [1,2,3,4,5]

5. // arr会一直是[1,2,3,4,5]

6. // 第一步：此时的prev为1，next为2，currentIndex为1

7. let total = arr.reduce(function(prev,next,currentIndex,arr){

8.    return prev + next // 1+2=3   并且把3当做下一次的prev

9. })

11. // 第二步：此时的prev为3，next为3，currentIndex为2

12. let total = arr.reduce(function(prev,next,currentIndex,arr){

13.    return prev + next // 3+3=6   并且把6当做下一次的prev

14. })

16. // 第三步：此时的prev为6，next为4，currentIndex为3

17. let total = arr.reduce(function(prev,next,currentIndex,arr){

18.    return prev + next // 6+4=10   并且把10当做下一次的prev

19. })

21. // 第四步：此时的prev为10，next为5，currentIndex为4

22. let total = arr.reduce(function(prev,next,currentIndex,arr){

23.    return prev + next // 10+5=15 最终结果会作为返回值返回

24. })

那我们自己实现一个reduce，看看是如何实现的

1. Array.prototype.myReduce = function (callback) {

2.  let prev = this[0]

3.  for(let i = 0;i < this.length-1;i++){

4.    prev = callback(prev,this[i+1],i+1,this)

5.  }

6.  return prev

7. }

9. let arr = [1,2,3,4,5]

10. let total = arr.myReduce(function(prev,next,currentIndex,arr){

11.  console.log(prev,next)

12.  return prev + next

13. })

15. console.log(total) // 15

map映射

可以把数组返回成一个映射后的数组

1. let arr = [1,2,3].map(item => item+1)

2. console.log(arr) // [2,3,4]

find

查找，查找到后不再继续查找，查找不到则返回undefined，内部返回true的话，则返回当前item，

1. let arr = [1,2,3,4]

3. let val = arr.find(item=>item === 3)

4. console.log(val) // 3

every

每个值是否满足条件，如果是则返回true，如果不是则返回false

1. let arr = [1,2,3,4]

2. let isTrue = arr.every(item => {

3.    return item > 0

4. })

6. console.log(isTrue) // true

8. let isTrue2 = arr.every(item => {

9.    return item > 2

10. })

12. console.log(isTrue2) // false

some

是否有其中一个值满足条件，如果是则返回true，如果不是则返回false

1. let arr = [1,2,3,4]

2. let isTrue = arr.every(item => {

3.    return item > 2

4. })

6. console.log(isTrue) // true

8. let isTrue2 = arr.every(item => {

9.    return item > 4

10. })

12. console.log(isTrue2) // false

filter

过滤，在回调函数中返回的为false的话，相当于过滤掉当前项，返回一个过滤后的数组

1. let arr = [1,2,3,4]

3. let newArr = arr.filter(item=>{

4.  return item > 2

5. })

7. console.log(newArr) // [3,4]

includes

基本和some一样

---

Set

set是放不重复的项，也就是去重

1. let set = new Set([1,2,3,4,3,2,1])

2. console.log(set) // Set { 1, 2, 3, 4 }

Set有几个常用的方法，add clear delete entries

1. // add

2. let set = new Set([1,2,3,4,3,2,1])

3. set.add(5)

4. console.log(set) // Set { 1, 2, 3, 4, 5 }

6. // 添加一个已有的值，则不会添加进去

7. set.add(1)

8. console.log(set) // Set { 1, 2, 3, 4, 5 }

10. // delete

11. set.delete(3)

12. console.log(set) // Set { 1, 2, 4, 5 }

14. // entries

15. console.log(set.entries()) // SetIterator { [ 1, 1 ],

16.                                            [ 2, 2 ],

17.                                            [ 4, 4 ],

18.                                            [ 5, 5 ] }

20. // clear

21. set.clear()

22. console.log(set) // Set {}

Set常用于去重（并集）

1. function distinct(arr1,arr2){

2.    return [...new Set([...arr1,...arr2])]

3. }

5. let arr = distinct([1,2,3],[2,3,4,5])

6. console.log(arr) // [1,2,3,4,5]

求交集

1. function intersect(arr1,arr2) {

2.  // 利用Set里的方法has，来判断new Set(arr2)中是否含有item，

3.  // 如果含有，那么则是true，当为true时，filter函数则会保留该项

4.  // 如果没有，则是false,当为false时，filter函数则不会保留该项

5.  return arr1.filter(item => new Set(arr2).has(item))

6. }

8. console.log(intersect([1,2,3],[2,3,4,5])) // [2,3]

求差集

1. function difference(arr1,arr2){

2.    return arr1.filter(item => !new Set(arr2).has(item))

3. }

5. console.log(difference([1,2,3],[2,3,4,5])) // [1]

公众号

前端达人

长按识别左边二维码关注我