set,map,array,object(一)

328 阅读5分钟
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 下篇再讲~