【js】数组方法汇总 javascript数组

一、创建数组

字面量
new Array()
Array.of()
Array.from()

1.字面量

let arr1 = [1,2,3]

隐式创建

2.new Array()

let arr = new Array(1); //[undefined] arr[1] = 5 console.log(arr); //[undefined,5] let arr2 = new Array(1,2) //[1,2]

Array()只有一个数字时，表示数组的长度
new Array()不能创建只有一个数字的数组

3.Array.of()

let arr = Array.of(1) //[1] let arr2 = Array.of({ a: 1 }, 2, ["f"])//[{ a: 1 }, 2, ["f"]]

相较于new Array(),Array.of()能创建一个单一元素的数组

4.Array.from() 参数：伪数组或可迭代对象 mapFn thisAry

let a = { 0: "a", 2: 1, length: 3 } let arr1 = Array.from(a) //["a", undefined, 1] let b = "123" let arr2 = Array.from(b)//["1", "2", "3"]

可以将伪数组对象以及可迭代对象转换成数组
下标为数字且有length属性的对象
Set、Map

二、判断数组

instanceof
arr.__proto__
constructor
toString
isArray

let arr = [1, 2, 3] arr instanceof Array //true arr.__proto__ === Array.prototype//true arr.constructor === Array //true Object.prototype.toString.call(arr) == "[object Array]"//true Array.isArray(arr) //true

三、数组方法

改变原数组
不改变原数组

1.改变原数组 push() pop() unshift() shift()

let arr = [1, 2, 3] let a = arr.push([4], [5]) //5 console.log(arr); //[1,2,3,[4],[5]] let b = arr.pop() //[5] console.log(arr) //[1,2,3,[4]]

push与pop是在尾部操作，unshift与shift是在头部操作
push操作返回的是操作后的长度，pop返回弹出的元素
unshift的单个插入和统一插入的顺序不同

sort() reverse()

let arr = ["coser", "Alice", "bob", 5, 66] let a = arr.sort() //[5, 66, "Alice", "bob", "coser"] console.log(arr); //[5, 66, "Alice", "bob", "coser"]

sort对数组进行排序，默认按首字母排序
sort返回排序好的数组

let arr = [37, 12, 1, 5, 66] let a = arr.sort((n1, n2) => n1 - n2) //[1, 5, 12, 37, 66] console.log(arr); //[1, 5, 12, 37, 66]

sort中加比较函数可以整体排序
reverse将数组反序，并返回反序的数组

splice(start,n,param1,param2...)

let arr = [1, 2, 3] let a = arr.splice(0, 2, 'a') //[1,2] console.log(arr); //["a",3]

有后面的参数时为替换，返回被删除的元素数组
无参数时删除一段元素
start可以为负数

copyWithin() fill()
参数：target start end

let arr = [1, 2, 3, 4, 5] let a = arr.copyWithin(1, 2, 4)//[1,3,4,4,5] console.log(arr); [1,3,4,4,5]

第一位为起始粘贴的位置，后两位为对原数组的复制
将复制的值从target开始进行粘贴

let arr = [1, 2, 3, 4, 5] let a = arr.fill(1, 2, 4) //[1,2,1,1,5] console.log(arr); //[1,2,1,1,5]

将第一个参数替换选中的范围
类似于splice，功能单一

forEach(callback)
callback参数：value index arr

let arr = [1, 2, 3] arr.forEach((value) => { value = https://www.it610.com/article/value + 1; }) //undefined console.log(arr); //[1,2,3]

修改数组内的原始类型原数组不发生改变
forEach无返回值

let arr = [1, 2, 3] arr.forEach((value, index, arr) => { arr[index] += 1 }) console.log(arr); //[2, 3, 4]

let arr = [ { name: "张三", age: 17 }, { name: "李四", age: 20 }] arr.forEach((value, index, arr) => { if (value.age < 18) { arr.splice(index, 1) } }) console.log(arr); //[{name:"李四",age:20}]

修改引用类型会修改原数组

2.不改变原数组 reduce(callback,initialValue) reduceRight()
callback:Accumulator CurrentValue CurrentIndex SourceArray
initialValue:作为callback的第一个参数值，没有则将数组第一项作为初始值

let arr = [1, 2, 2, 3, 3, 3, 5, 7, 9, 2] let a = arr.reduce((acc, val) => { if (val in acc) acc[val]++ else acc[val] = 1 return acc }, {}) console.log(a); //{1: 1, 2: 3, 3: 3, 5: 1, 7: 1, 9: 1}

对数组进行计数
由累加值的特性，可以对数组进行很多处理，去重，扁平化等等
reduceRight的操作与reduce相同，它是从右开始遍历操作

join()

let arr = [1, 2, 3] let a = arr.join("-")//"1-2-3" console.log(arr); //[1, 2, 3]

join将数组以某字符为分隔,将数组的每个元素拼接成一个字符串，并返回该字符串
split转数组是以原字符串的字符为分隔，转成数组后该字符串消失，join会添加

concat()

let arr = [1, 2, 3] let a = arr.concat([4, [5]], [6])//[1,2,3,4,[5],6] console.log(arr); //[1,2,3]

【【js】数组方法汇总】相对于push，concat会打平一层数组

slice(start,end)

let arr = [1, 2, 3] let a = arr.slice(-2, -1)//[2] console.log(arr); //[1,2,3]

与字符串的操作类似

indexOf() lastIndexOf() includes()

let arr = [1, 2, 3] let a = arr.indexOf(3, 2) //2

与字符串类似，第二个参数为起始位置
成功返回索引,否则返回-1
lastIndexOf()反向查找
includes与字符串类似，存在返回true

find(callback) findIndex(callback)

let arr = [1, 2, 3, "5", 89] let a = arr.find((value, index, arr) => { return value > 3 }) // "5" console.log(arr); //[1, 2, 3, "5", 89]

find返回第一个符合条件的值，findIndex返回第一个符合条件的索引

filter(callback) map(callback)

let arr = [1, 2, 3, "5", 89] let a = arr.filter((value, index, arr) => { return value > 3 }) //["5",89] console.log(arr); //[1, 2, 3, "5", 89]

过滤出所有符合条件的元素，返回一个新数组

let arr = [1, 2, 3, "5", 89] let a = arr.map((value, index, arr) => { return value = https://www.it610.com/article/1 + value })//[2, 3, 4,"15", 90] console.log(arr); //[1, 2, 3, "5", 89]

相较于forEach，map不改变原数组，有自己的返回值

every(callback) some(callback)

let arr = [1, 2, 3, "5", 89] let a = arr.every((value, index, arr) => { return arr[index] > 0 })//true

every遍历数组里的元素，全部满足条件则返回true
some只要有一个满足条件则返回true

keys() values() entries()

let arr = [1, 2, 3, "5", 89] let a = arr.keys() for (let key of a) { console.log(key); }//0 1 2 3 4

获取全部索引

let arr = [1, 2, 3, "5", 89] let a = arr.values() for (let key of a) { console.log(key); } //1 2 3 "5" 89

获取全部值

let arr = [1, 2, 3, "5", 89] let a = arr.entries() for (let key of a) { console.log(key); }//[0, 1] [1, 2] [2, 3] [3, "5"] [4, 89]

获取全部键值对

flat(depth) flatMap(callback)

let arr = [1, 2, 3, [4, [5]]] let a = arr.flat(3) console.log(arr);

数组的扁平化
替换方案

let arr1 = ["it's Sunny in", "", "California"] arr1.map(x => x.split(" ")); // [["it's","Sunny","in"],[""],["California"]] arr1.flatMap(x => x.split(" ")); // ["it's","Sunny","in", "", "California"]