数组方法不混淆

多且易乱的数组方法

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.from('foo') // ["f", "o", "o"] let m = new Map([[1, 2], [2, 4], [4, 8]]) Array.from(m) // [[1, 2], [2, 4], [4, 8]] Array.from([1, 2, 3], x => x + x) // [2, 4, 6]

没有规则,直接生成

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。如果为负值,表示倒数。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zywwwy.html