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)复制代码
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 返回指定元素能在数组中找到的第一个索引值,否则返回-1fromIndex可以为负,表示从倒数第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// bluefor (let item of set.values()) { console.log(item);}// red// green// bluefor (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 下篇再讲~