数组API和迭代方法:本篇是自己以及网上少部分资料的整合
改变原数组的
ES5
1 splice(参数1,参数2,参数3...参数n)//删除数组的一部分;参数1是开始的位置,参数2是删除的长度,参数3是删除后所要替换的新元素;返回被删除的元素,没有删除元素则返回一个空数组 2 reverse()//反转数组中的元素,会改变原来的数组,返回改变后的数组 3 sort([compareFunction])//compareFunction 指定定义排序顺序的函数。如果省略,则将数组元素转换为字符串,然后根据每个字符的Unicode代码点值进行排序。 4 push()//在数组末尾增加元素,并返回新数组长度 5 pop(num)//在数组末尾删除元素,num代表删除几个元素,返回删除的最后一个元素,如果数组为空,返回undefined 6 shift()//在数组开头删除第一个元素,返回第一个元素的值,如果数组为空返回undefined 7 unshift()//在数组开头增加元素,可以增加多个元素,返回新数组的长度
ES6
1. fill() //给定值填充一个数组,value代表填充的数值,start是开始的位置,end是结束的位置(不包括) 语法: arr.fill(value[start[,end]]) 2. [了解不多] copyWithin() // 在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员),然后返回当前数组。 语法:arr.copyWithin(target[, start[, end]])
返回新对象的
ES5
1. toString() //返回数组转换的字符串 2. toSource() //返回该对象的源代码 3. toLocalString() //把数组转换为本地数组,并返回结果 4. join([参数]) //返回字符串,参数值数组元素之间的分隔符,默认是逗号(,) 5. concat(参数1,参数2,参数3,...参数n) //拼接多个数组,返回拼接后的数组,参数是要拼接的数组 6. slice(参数1,[参数2]) //截取数组的元素,返回截取后的数组;参数1开始截取的位置,参数2结束的位置(为空,截取到最后),(start,end-1) 7. indexOf() // 返回可以在数组中找到给定元素的第一个索引;如果不存在,则返回-1 语法:arr.indexOf(searchElement[, fromIndex]) 8. lastIndexOf() //返回可以在数组中找到给定元素的最后一个索引;如果不存在,则返回-1。 语法:arr.lastIndexOf(searchElement[, fromIndex]) 9. Array.isArray(arr) //判断arr是否是一个数组类型 当Array.isArray不存在可以用Object.prototype.toString.call(arr) === ‘[object Array]’
ES5参数为callback(回调函数)
1. every() //如果回调函数每个数组元素都为true,返回一个true,否则,false。返回一个布尔值 //注意:(修改,添加和删除)影响初始数组 eg. let array = ['1', '2', '3', '4']; let newArr = array.every((item,inddex)=> typeof item == "string") console.log(newArr) //true let array = ['1', '2', 3, '4']; let newArr = array.every((item,inddex)=> typeof item == "string") console.log(newArr) //false ---------------------------------------- 2. some() //数组中至少一个元素为true,返回true,否则,false,返回一个布尔值 eg. let array = ['1', '2', 3, '4']; let newArr = array.some((item,index)=> typeof item == "number") console.log(newArr) // true let array = ['1', '2', '3', '4']; let newArr = array.some((item,index)=> typeof item == "number") console.log(newArr) // false ---------------------------------------- 3. filter() //返回通过测试的元素的新数组,没有通过测试的,返回一个空数组。 eg. let array = ['a', 'b', 'c']; let newArr = array.filter((item,index)=>{ if(item!=='a'){ return false } return true }) console.log(newArr) // ["a"] ---------------------------------------- 4. [了解不多] reduce()累加器:默认从左向右累加 // 最终返回一个值 5. [了解不多] reduceRight() // 从右到左累加 与reduce相反
ES6
1. find() //用于找出第一个符合条件的数组成员 语法:arr.find(callback(element[, index[, array]])[, thisArg]) 2. findIndex() //返回第一个符合条件的数组成员的位置(索引) 语法:arr.findIndex(callback(element[, index[, array]])[, thisArg]) 3. includes() // 表示某个数组是否包含给定的值,返回一个布尔值 语法:arr.includes(valueToFind[, fromIndex]) 4. [了解不多] flat() //用于将嵌套的数组“拉平”,变成一维的数组。 语法:var newArray = arr.flat([depth]) 可以将flat()方法的参数写成一个整数,表示想要拉平的层数,默认为1。 如果不管有多少层嵌套,都要转成一维数组,可以用Infinity关键字作为参数。 5. [了解不多] flatMap() //方法对原数组的每个成员执行一个函数,flatMap()只能展开一层数组。
ES5其他
1. forEach() //遍历数组,没有返回值,不改变原数组 语法:arr.forEach(callback(currentValue [, index [, array]])[, thisArg]) eg. let array = ['a', 'b', 'c']; arr.forEach((item,index)=>{ console.log(`第${index+1}项是:`+item) // 第1项是:a // 第2项是:b // 第3项是:c }) 2. map() //遍历数组,react比较常用,一般需要改变数组时使用 //map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 eg. let array = [1, 4, 9, 16]; let newArr = array.map((item,index)=> Math.sqrt(item)) //开根 console.log(newArr) // [1, 2, 3, 4]
ES6其他
1. 拓展运算符(...) //rest参数的逆运算,将一个数组转为逗号分隔的参数序列 应用: 1.使用拓展运算符可以解构数组和对象,并返回解构后的新数组或者新对象 2. ...用到左侧是聚合 用到右侧是展开 3.实现了Iterator接口的对象任何定义了遍历器(Iterator)接口的对象,都可以用扩展运算符转为真正的数组。 2. Array.from()://将类数组(可迭代)对象转换为数组 3. Array.of();//参数是数组元素,为了解决new Array()传递一个数组,创建length 4. Array.prototype.find() //find方法返回第一个满足条件的元素或者undefined;参数回调函数 eg. let arr=[1,2,3,2,3]; let result=arr.find((item)=>{ return item>2 }) console.log(result) //3 ------------------------------------------ 5. Array.prototype.findIndex();//参数回调函数; findIndex返回第一个满足条件的元素的索引或者-1 eg. let arr=[1,2,3,2,3]; let result=arr.findIndex((item)=>{ return item>2 }) 6. Array.prototype.includes(); //includes是否包含某个元素,返回true/false 7. Array.prototype.fill() //用来填充数组,修改原数组 8. Array.prototype.keys() 9. Array.prototype.values() 10. Array.prototype.entries() //可迭代的类数组对象,不能直接显示数据,需要使用Array.from将类数组对象转换为数组显示出来 eg. let arr1 = Array.of(1,2,3,4,5,6) let keys = arr1.keys() let values = arr1.values() let entries = arr1.entries() console.log(keys,values,entries); //Object [Array Iterator] {} Object [Array Iterator] {} Object [Array Iterator] {} console.log(Array.from(keys)); console.log(Array.from(values)); console.log(Array.from(entries)); // [ 0, 1, 2, 3, 4, 5 ] // [ 1, 2, 3, 4, 5, 6 ] // [ [ 0, 1 ], [ 1, 2 ], [ 2, 3 ], [ 3, 4 ], [ 4, 5 ], [ 5, 6 ] ] 11.Set集合 Set类似于数组,但是成员的值都是唯一的,没有重复的值。 Set 本身是一个构造函数,用来生成 Set 数据结构展。 Set 构造函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化。 Set API var set=new Set() //添加元素 set.add() //删除元素 set.delete() // 遍历 let keys=set.keys() let values=set.values() let entries=set.entries(); console.log(keys,values,entries); set.forEach((value)=>{ console.log(value) }) //判断有没有某个成员 set.has() 返回布尔值true/false //清空set set.clear() //返回set的成员个数 set.size 11.Map集合 Map类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。 也就是说,Object 结构提供了“字符串—值”的对应,Map结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。 如果你需要“键值对”的数据结构,Map 比 Object 更合适。Map 可以接受一个数组作为参数。 该数组的成员是一个个表示键值对的数组。 let obj={ name:"zhangsan", age:12 } //遍历键值对组成的数组 let arr=Object.entries(obj); console.log(arr); //将数组作为参数放到Map中 let map=new Map(arr) console.log(map); //添加元素 map.set('键','值') //删除元素 map.delete('键') //获取元素 map.get('键') // 遍历 let keys=map.keys() let values=map.values() let entries=map.entries(); console.log(keys,values,entries); map.forEach((value,key)=>{ console.log(value,key) })
数组的空位
ES5
ES5 对空位的处理,大多数情况下会忽略空位。
1. forEach(), filter(), reduce(), every() 和some()都会跳过空位。 2. map()会跳过空位,但会保留这个值 3. join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。
ES6
1. Array.from方法会将数组的空位,转为undefined 2. 扩展运算符(…)也会将空位转为undefined。 3. copyWithin()会连空位一起拷贝。 4. fill()会将空位视为正常的数组位置。 5. for…of循环也会遍历空位。 上面代码中,数组arr有两个空位,for…of并没有忽略它们。如果改成map方法遍历,空位是会跳过的。 6. entries()、keys()、values()、find()和findIndex()会将空位处理成undefined。 7. 如果原数组有空位,flat()方法会跳过空位