Array对象

原创已于 2022-10-06 14:18:14 修改 · 296 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端

于 2022-08-31 01:01:45 首次发布

JavaScript 专栏收录该内容

9 篇文章

订阅专栏

概述

1、数组方法有哪些

根据用途可以从以下八个方面划分。（口诀：增删改查判，排序选择转换。）

类型	方法
增加	concat unshift push
删除	splice shift pop
修改	map foreach fill
查找	find findIndex indexOf lastIndexOf
判断	Array.isArray includes some every
排序	reverse sort
选取	slice filter
转换	toString join

注：所有方法介绍都会重点从（）内容、return值、用途三方面进行介绍。重要性不分前后顺序

2、数组方法需要掌握什么

1）写法

一般写法是直接跟在数组后面如arr.push()，某些是特殊写法比如Array.isArray（）；
括号里面的内容，每种方法不一样，放置数组元素、下标、新元素、长度、回调等等。

2）用途

用于查找。会有return（下标或元素），不会改变原数组。
用于判断。会有return（ture/false），不会改变原数组。
用于赋值。一般会有return，不会改变原数组；
用于操作原数组。一般不会有return，会改变原数组；

一、增加类

增加类都会改变原数组

1、unshift

在数组的开头添加元素，数量可以是一个或者多个，返回值是新数组的长度。

内容：新增元素（一个或多个，任意类型）
返回：新数组长度
用途：给原数组开头添加元素 => 改变原数组

// 添加单个
let arr1 = [1,2,3]
let newarr1 = arr1.unshift(4)
console.log(arr1)     // [4,1,2,3]
console.log(newarr1)  // 4
// 添加多个
let arr2 = [1,2,3]
let newarr2 = arr2.unshift(4,5)
console.log(arr2)     // [4,5,1,2,3]
console.log(newarr2)  // 5

2、push

在数组的末尾添加元素，数量可以是一个或者多个，返回值是新数组的长度。

内容：新增元素（一个或多个，任意类型）
返回：新数组长度
用途：操作原数组 => 改变原数组

// 添加单个
let arr1 = [1,2,3]
let newarr1 = arr1.push(4)
console.log(arr1)     // [1,2,3,4]
console.log(newarr1)  // 4
// 添加多个
let arr2 = [1,2,3]
let newarr2 = arr2.push(4,5)
console.log(arr2)     // [1,2,3,4,5]
console.log(newarr2)  // 5

3、concat

如果不是数组类型，则是在末尾添加元素；如果是数组类型，则是合并数组；其结果都是返回一个新数组。

内容：新增元素（一个或多个，任意类型）
返回：新数组
用途：赋值 => 不改变原数组

// 合并非数组类型
let arr1 = [1,2,3]
let newarr1 = arr1.concat(4)
console.log(arr1)     // [1,2,3]
console.log(newarr1)  // [1,2,3,4]
// 合并数组类型
let arr2 = [1,2,3]
let newarr2 = arr2.concat([1,2])
console.log(arr2)     // [1,2,3]
console.log(newarr2)  // [1,2,3,1,2]

二、删除类

删除类都会改变原数组

1、shift

删除数组开头元素，并返回该元素。

内容：无
返回：删除的元素
用途：操作原数组 => 改变原数组

let arr1 = [1,2,3]
let newarr1 = arr1.shift()
console.log(arr1)     // [2,3]
console.log(newarr1)  // 1

2、pop

删除数组末尾元素，并返回该元素。

内容：无
返回：删除的元素
用途：操作原数组 => 改变原数组

let arr1 = [1,2,3]
let newarr1 = arr1.pop()
console.log(arr1)     // [1,2]
console.log(newarr1)  // 3

3、splice

删除指定位置指定长度的元素，并返回包含被删除元素的数组；

内容：下标、长度（可选）、替换元素1（可选）、替换元素2（可选）……
返回：包含删除元素的数组
用途：操作原数组（有时也可赋值用） => 改变原数组

// 指定下标，但未输入长度   =>   指定下标之后的所有元素都删除
let arr = [1,2,3,4]
let newarr = arr.splice(1)
console.log(arr)     // [1]
console.log(newarr)  // [2,3,4]
// 指定下标，长度为1    =>     指定下标的单个元素
let arr1 = [1,2,3,4]
let newarr1 = arr1.splice(1,1)
console.log(arr1)     // [1,3,4]
console.log(newarr1)  // [2]
// 指定下标，长度为n    =>     指定下标后的多个元素
let arr2 = [1,2,3,4]
let newarr2 = arr2.splice(1,2)
console.log(arr2)     // [1,4]
console.log(newarr2)  // [2,3]
// 指定下标，长度为n，替换单个元素
let arr3 = [1,2,3,4]
let newarr3 = arr3.splice(1,2,6)
console.log(arr3)     // [1,6,4]
console.log(newarr3)  // [2,3]
// 指定下标，长度为n，替换n个元素（从第三位数开始后面的参数都为替换元素）
let arr4 = [1,2,3,4]
let newarr4 = arr4.splice(1,2,6,7)
console.log(arr4)     // [1,6,7,4]
console.log(newarr4)  // [2,3]

三、修改类

1、map

通过遍历数组元素进行一定处理，返回一个新数组。

内容：回调函数（item,index,arr）=>{} 一定要有return，否则undefined
返回：新数组
用途：赋值 => 不改变原数组

let arr1 = [1,2,3]
let newarr1 = arr1.map((item) => item*2);
console.log(arr1)     // [1,2,3]
console.log(newarr1)  // [2,4,6]

2、forEach

通过遍历数组元素来执行某些代码，没有返回值；（类似于for循环）

内容：回调函数（item,index,arr）=>{} 一定要有return，否则undefined
返回：新数组
用途：操作原数组 => 改变原数组，或者利用原数组数据赋值

let arr1 = [1,2,3]
let newarr1 = arr1.forEach((item,index,arr) => {
    // 通过操作数组的元素或下标，来执行某些代码
    console.log(index)   //依次打印012
    console.log(item)   //依次打印123
    console.log(arr)    //依次打印三次[1,2,3]
});
console.log(arr1)     // [1,2,3]
console.log(newarr1)  // undefined

3、fill

同一个元素给原数组元素用内容进行填充替换，并返回原数组

内容：填充内容，起始下标（可选），结束下标（可选）
返回：原数组
用途：操作原数组 => 改变原数组

// 什么也不输，即清空数组，每一项为undefined
let arr = [1,2,3,4,5]
let newarr = arr.fill()
console.log(arr)   //[ undefined, undefined, undefined, undefined, undefined ]
console.log(newarr)  //[ undefined, undefined, undefined, undefined, undefined ]
// 仅输入填充内容
let arr1 = [1,2,3,4,5]
let arr11 = arr1.fill(1)
console.log(arr1)   //[1，1，1，1，1]
console.log(arr11)  //[1，1，1，1，1]
// 填充内容+起始下标
let arr2 = [1,2,3,4,5]
let arr22 = arr2.fill(2,1)
console.log(arr2)   //[1，2，2，2，2]
console.log(arr22)  //[1，2，2，2，2]
// 填充内容+起始下标+结束下标(不包含结束下标)
let arr3 = [1,2,3,4,5]
let arr33 = arr3.fill(3,1,2)
console.log(arr3)   //[1，3，3，4，5]
console.log(arr33)  //[1，3，3，4，5]

四、查找类

查找类都不会改变原数组

1、find

通过遍历数组元素，查找出符合条件的元素；（实际数据不会有多个符合条件的）

内容：回调函数（item,index,arr）=>{} 一定要有return，否则undefined
返回：元素（第一个出现的）

let arr1 = [{a:1},{a:2},{a:3},{a:4},{a:2}]
let newarr1 = arr1.find((item) => item.a==2);
console.log(arr1)     // [{a:1},{a:2},{a:3},{a:4},{a:2}]
console.log(newarr1)  // {a:2}

2、findIndex

通过遍历数组元素，查找出符合条件的元素的下标；（实际数据不会有多个符合条件的）

内容：回调函数（item,index,arr）=>{} 一定要有return，否则undefined
返回：下标（第一个出现的）

let arr1 = [{a:1},{a:2},{a:3},{a:4},{a:2}]
let newarr1 = arr1.findIndex((item) => item.a==2);
console.log(arr1)     // [{a:1},{a:2},{a:3},{a:4},{a:2}]
console.log(newarr1)  // 1

3、indexOf

查找指定元素，返回第一个符合条件的元素的下标，没有返回-1（number类型）

内容：基本数据类型
返回：下标（第一个出现的）

let arr1 = [1,2,3]
let newarr1 = arr1.indexOf(1)
console.log(arr1)     // [1,2,3]
console.log(newarr1)  // 0

4、lastIndexOf

查找指定元素，返回第一个符合条件的元素的最后一个下标，没有返回-1（number类型）

内容：基本数据类型
返回：下标（最后一个出现的）

let arr1 = [1,2,3]
let newarr1 = arr1.indexOf(3)
console.log(arr1)     // [1,2,3]
console.log(newarr1)  // 2

五、判断类

判断类都会返回true/false，且不会改变原数组

1、Array.isArray

判断是否是数组

let arr1 = [1,2,3]
let f = Array.isArray(arr1)
console.log(f)  // true

2、includes

判断是否包含某元素

let arr1 = [1,2,3]
let f = arr1.includes(1)
console.log(f)  // true

3、some

判断数组中是否有一项满足条件

let arr1 = [1,2,3]
let f = arr1.some(item => item>2)
console.log(f)  // true

4、every

判断数组中是否每一项满足条件

let arr1 = [1,2,3]
let f = arr1.every(item => item>0)
console.log(f)  // true

六、排序类

排序类都会改变原数组，且返回原数组

1、sort

对原数组进行升序、降序、或者随机排序，并返回原数组

内容：回调函数（a,b）=> a-b a-b升序，a-b倒叙，Math.random() - 0.5随机排序

let arr1 = [6,2,7,5,4,1]
let arr2 = arr1.sort((a, b) => a-b)
console.log(arr1)   //[ 1, 2, 4, 5, 6, 7 ]
console.log(arr2)   //[ 1, 2, 4, 5, 6, 7 ]

2、reverse

对原数组顺序进行反转

内容：无

let arr1 = [6,2,7,5,4,1]
let arr2 = arr1.reverse()
console.log(arr1)   //[ 1, 4, 5, 7, 2, 6 ]
console.log(arr2)   //[ 1, 4, 5, 7, 2, 6 ]

七、选取类

选取类都会返回新数组，且不会改变原数组

1、slice

通过开始下标和结束下标，抽取数组的一部分，返回一个新数组

内容：开始下标（可选），结束下标（不包含结束下标，可选）

let arr = [1,2,3,4,5,6]
// 不输开始下标，不输结束下标
let arr1 = arr.slice()
console.log(arr1)   //[1,2,3,4,5,6]
// 输开始下标，不输结束下标
let arr2 = arr.slice(1)
console.log(arr2)   //[2,3,4,5,6]
// 输开始下标，输结束下标
let arr3 = arr.slice(1,5)
console.log(arr3)   //[2,3,4,5]

2、filter

遍历数组，抽取数组符合条件的一部分，形成一个新数组

内容：开始下标（可选），结束下标（不包含，可选）

let arr = [1,2,3,4,5,6]
let arr1 = arr.filter(item => item>4)
console.log(arr)    //[1,2,3,4,5,6]
console.log(arr1)   //[5,6]

八、转换类

转换类都会返回值，且不会改变原数组，

1、toString

用于数组转化为字符串（没有内容，默认带 “，”）
等同于join（）

let arr = [1,2,3,4]
let str= arr.toString()
console.log(str)   //1,2,3,4

2、join

用于数组转化为字符串

let arr = [1,2,3,4]
// 1、什么也不加
let str1= arr.join()
console.log(str1)   //1,2,3,4
// 2、加空字符串
let str2 = arr.join('')
console.log(str2)   //1234
// 3、加字符串分割
let str3 = arr.join(';')
console.log(str3)   //1;2;3;4

如文章有问题，感谢各位读者批评指正！