set,map,array,object（一）

ES6又新增了两个数据类型，set,map.既然新增了，就会有可取之处，或者是说为了解决什么问题而新增。

1.set的出现就解决了array里面有重复数据的情况
2.map的出现就可以解决object的属性只能为字符串的问题
复制代码

对于set和map的学习，我建议分别对应着array，object一起学习。

Array

数组就是类似于列表的高级对象。

对于数组的方法，我先上一张我所收集的图：

这张图包含了数组的大部分方法：

1.every 和 some

every 和 some 不完全属于数组操作方法

every (找到false就返回)和 some(找到true就返回)

都是判断条件直接返回整个数组Boolean类型的方法.every速度会比some快很多.

2.unshift 和 shift

unshift在数组的开头插入一个或多个元素，并返回数组的新长度

shift删除数组的第一个元素，并返回这个元素

3.reduce 和 reduceRight

reduce数组中的每个值（从左到右）开始合并，最终为一个值.元素想加

reduceRight使用同上，与reduce（）的执行方向相反

4.push 和 pop

push添加一个或多个元素到数组的末尾，并返回数组新的长度

pop删除一个数组中的最后一个元素，并且返回这个元素

5.splice

splice 在任意的位置给数组添加或删除任意个元素（拼接），返回被删除的元素组成的数组，没有则返回空数组

** 让我想起了前面遇到的一个vue问题，数组不能被监听。是因为在利用一个索引去设置数组时，就无法监听得到。解决方案: 就是使用数组的splice方法。 或者 this.$set(arr,index,newVal)</p>
复制代码

6.join

将数组中的所有元素连接成一个字符串(默认用逗号作为分隔符，如果separator是一个空字符串，那么数组中的所有元素将被直接连接)如果元素是undefined或者null，则会转化成空字符串

####小插曲
一般将数组转化为字符串,就用join(',')  this.urls = arr.join(',')
将字符串转化为数组,就用splice   fileUrl = this.urls.split(',')
复制代码

7.reverse

前后颠倒数组中元素的位置，第一个元素会成为最后一个

8.sort

对数组的元素做原地的排序，并返回这个数组。sort可能不稳定，默认按照字符串的unicode码位点排序.

    var arr = [1,2,5,10];
    arr.sort() // [1,10,2,5]
    
    sort是将数值转为字符串进行比较，所以很不稳定。
    
    解决方法： 带上函数参数
        let numberArray = [1,2,3,10,5]
        
        function compare(value1, value2){
            //function1 (更简洁)
            // return  a - b;
    
            //function2
            if(value1 > value2) {
                return -1
            } else if (value1 < value2) {
                return 1
            } else if (value1 == value2){
                return 0
            }
        }
    
       console.log('numberArray:' + numberArray.join());
       console.log('Sorted without a compare function:'+ numberArray.sort());
       console.log('Sorted with compareNumbers224764:'+ numberArray.sort(compare));
    
复制代码

9.indexOf 与 lastIndexOf

indexOf 返回指定元素能在数组中找到的第一个索引值，否则返回-1

fromIndex可以为负，表示从倒数第n个开始（此时仍然从前向后查询数组）使用“严格相等”（===）进行匹配

lastIndexOf返回指定元素在数组中的最后一个的索引，如果不存在则返回-1， 从数组的后面向前查找

**还有一个查找数组里面是否有该元素的方法就是：find()

arr.find( (val) => {
    if (val == '0') return true
})
复制代码

10.slice 与 concat

slice把数组中一部分的浅复制（shallow copy）存入一个新的数组对象中，并返回这个新的数组.不修改原数组，只会返回一个包含了原数组中提取的部分元素的一个新数组

具体拷贝规则同concat函数 concat将传入的数组或非数组值与原数组合并，组成一个新的数组并返回

**拷贝数组： 还可以用...  （...arr）
复制代码

11.filter

使用指定的函数测试所有元素，并创建一个包含所有测试通过的元素的新数组

补充：

12. Array.isArray

判断传递的值是不是数组,返回布尔值

    Array.isArray()
    
    
    ///
    const arr = [1,2,3]
    Array.isArray(arr) // true
复制代码

其中能改变数组本身的方法： 1.array.pop() 2.array.push() 3. array.reverse() 4.arr.sort() 5.array.splice() 剩下的均不改变数组本身

介绍完数组，就开始介绍set了。

Set

set类似于数组，他的值是唯一的，没有重复的值。

set的方法：
    1.add(value) 添加某个值
    2.delete（value）： 删除某个值
    3.has(value): 是否有某个值，返回boolean类型
    4.clear(): 清除所有成员，没有返回指。
    
    size:用来看set的长度
复制代码

通过set去实现去重

 1.
const set = new Set();
[1,2,3,4,4].forEach( item => s.add(item))
for (let i of s) console.log(i) //  1 2 3 4


/2.
let arr = [1,2,2,3]
arr = [... new Set(arr)]

3.去除重复字符
var str = 'aabbs'
str = [... new Set(str)].join('')
复制代码

set 怎样去转化为数组：

1.Array.form()

let set = new Set([1,2,3])
let arr = Array.form(new Set(array))

...（扩展运算符）
2.let arr = [...set]
复制代码

遍历操作：

    keys()：返回键名的遍历器
    values()：返回键值的遍历器
    entries()：返回键值对的遍历器
    forEach()：使用回调函数遍历每个成员
复制代码

实例：

let set = new Set(['red', 'green', 'blue']);

for (let item of set.keys()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.values()) {
  console.log(item);
}
// red
// green
// blue

for (let item of set.entries()) {
  console.log(item);
}
// ["red", "red"]
// ["green", "green"]
// ["blue", "blue"]
复制代码

以及使用set可以更好的去是实现并集（Union）、交集（Intersect）和差集（Difference）。

let a = new Set([1, 2, 3]);
let b = new Set([4, 3, 2]);

// 并集
let union = new Set([...a, ...b]);
// Set {1, 2, 3, 4}

// 交集
let intersect = new Set([...a].filter(x => b.has(x)));
// set {2, 3}

// 差集
let difference = new Set([...a].filter(x => !b.has(x)));
// Set {1}
复制代码

先到这里object和map 下篇再讲~

转载于:https://juejin.im/post/5c773dd26fb9a049a7127f52