多且易乱的数组方法
js 中对数组操作比比皆是,不管是单纯前端操作数组变量,还是后台返回的数组形式接口数据,都需要用到数组一些方法操作数组。不知道大家是不是和我一样经常忘记或混乱数组一些方法,什么 find(),some(),reduce()等等,还有哪些会改变原始数组哪些返回新数组,真是一头雾水。
来张图片压压惊这张图是我收藏的数组方法图,上面列出了常见的数组方法及解释,界面很舒服,应该一看就懂。
看我整理 构造函数 Array 专属Array构造函数的方法常见有三种:
Array.isArray(obj)--- 判断对象是否为数组,返回布尔 Array.isArray([]) // true Array.isArray({}) // false 创建新数组下面两种方法意在创建新数组,所以我总结在一个大类里面。
比较常见的有两种创建形式,大家可以理解分类记忆。
可以指定规则:从一个迭代器对象或一个伪数组按照一定规则生成新的数组。
Array.from(arrayLike[, mapFn[, thisArg]])
参数:
arrayLike
想要转换成数组的伪数组对象或可迭代对象。
mapFn (可选参数)
既然有规则,必定需要指定规则函数。
thisArg(可选参数)
可选参数,执行回调函数 mapFn 时 this 对象。
没有规则,直接生成
Array.of(element0[, element1[, ...[, elementN]]])
参数:
任意参数
Array.of(1) // [1] Array.of(1, 2, 3) // [1, 2, 3] Array.of(undefined) // [undefined] 实例对象专属实例对象的方法是最多的,也是大家容易混淆的,推荐大家从三个大类去记忆。
可以改变原数组(9个) splice() 删除元素并且向数组添加新元素array.splice(index,howmany,item1,.....,itemX)
参数:
index:必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
howmany:必需。要删除的项目数量。如果设置为 0,则不会删除项目。
item1, ..., itemX: 可选。向数组添加的新项目。
var fruits = ["Banana", "Orange", "Apple", "Mango"] fruits.splice(2,1,"Lemon","Kiwi") // 结果 // [Banana,Orange,Lemon,Kiwi,Mango]splice() 方法在 ES5 中常用来数组去重,相当经典。
var arr = [1,2,2,3,4,2] for(var i=0; i<arr.length; i++){ for(var j=i+1; j<arr.length; j++){ if(arr[i]==arr[j]){ //如果第一个和第二个一样,splice方法减去第二个; arr.splice(j,1) // 设置j-- 防止删除元素后,下面第一位元素遗漏 j-- } } } // arr [1, 2, 3, 4] sort() 排序数组参数:排序规则函数或无参数
没有参数:则按照元素的字母升序,如果不是元素不是字符串的话,会调用toString()方法将元素转化为字符串的Unicode(万国码)位点,然后再比较字符。
排序规则函数:排序规则函数接受两个参数:a , b,返回一个正数或负数。这里教大家一个简单记忆方法:升序不变返回负,降序改变返回正。
var a = [1,3,3,5,2,0] a.sort() // [0, 1, 2, 3, 3, 5] a.sort((a, b) => { return a-b // 升序不变返回负,不变指参数位置不变 }) // [0, 1, 2, 3, 3, 5] a.sort((a, b) => { return b-a // 降序改变返回正 }) // [5, 3, 3, 2, 1, 0]下面就是两组头尾删除和添加方法,可以对应记忆
尾部操作
pop() 删除数组最后的一个元素并且返回参数: 无
push(item1, item2...) 数组的末尾添加元素并返回新长度参数:要添加的新元素
// 删除 var a = [1, 3, 5, 7, 9] a.pop() // [1, 3, 5, 7] // 添加 a.push(9, 11) // [1, 3, 5, 7, 9, 11]头部操作
shift() 删除数组第一个元素并返回参数: 无
unshift(item1, item2...) 数组头部添加元素并返回新长度参数:要添加的新元素
// 删除 var a = [1, 3, 5, 7, 9] a.shift() // [1, 3, 5, 7] // 添加 a.unshift(0) // [0, 1, 3, 5, 7] reverse() 颠倒数组中元素的顺序参数: 无
let a = [1,2,3] a.reverse() console.log(a) // [3,2,1]下面是 ES6 新增的两个方法
fill(item, start, end) 用指定元素填充数组参数:
item(必需): 要填充数组的值
start(可选): 填充的开始位置,默认值为0
end(可选):填充的结束位置,默认是为this.length
['a', 'b', 'c'].fill(7) // [7, 7, 7] ['a', 'b', 'c'].fill(7, 1, 2) // ['a', 7, 'c'] copyWithin(target, start, end) 指定位置的成员复制到其他位置并返回替换后的新数组。参数:
target(必需):从该位置开始替换数据。如果为负值,表示倒数。
start(可选):从该位置开始读取数据,用哪些数据来替换,默认为 0。如果为负值,表示倒数。