JS数组详解

脑图

1 声明方式

---

1.1 构造函数

---

主要使用new Array来新建一个数组

1.1.1 新建一个空数组

---

直接调用new Array不传递参数

var arr = new Array()
console.log(arr) // []
// 动态的添加元素
arr[1]= 1
console.log(arr) // [empty, 1]

1.1.2 新建一个有元素的数组

---

在构造函数中传递数组元素

/* 直接在构造函数中传递相应的数组元素 */
var arr = new Array("SunWuKong","ZhuBaJie","TangSeng")
console.log(arr) // ["SunWuKong", "ZhuBaJie", "TangSeng"]

1.1.3 新建一个具有长度的数组

---

直接在构造函数中传递数组的长度

var arr = new Array(10)
console.log(arr.length) // 10

1.2 字面量

---

直接使用var arr = [数组元素]来创建一个数组

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
console.log(arr) // ["SunWuKong", "ZhuBaJie", "TangSeng"]

2 读取元素

---

使用arr[index]来读取数组内相应的下标的元素，使用arr.length来读取数组的长度

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
console.log(arr.length) // 3
var arrItem = arr[1]
console.log(arrItem) // ZhuBaJie

3 数组的方法

---

详情点击

3.1 监测(isArray)

---

isArray来监测一个对象是否为数组(变量指向数组)，是ES5的方法,如果是数组则返回true,不是返回false

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
var obj = {}
console.log(Array.isArray(arr))//true
console.log(Array.isArray(obj))// false

3.2 遍历的方法

---

3.2.1 使用for循环遍历

---

可以使用for循环对数组进行遍历，也是兼容性比较好的一个方法

例题

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
for(var i = 0 ; i < arr.length; i++){
    console.log(arr[i])
}

输出

3.2.2 find/findIndex

---

返回符合条件的第一个元素/下标，参数为一个回调函数，回调函数的参数

• 第一个参数：需要遍历的数组的元素项
• 其他两个参数式可选的，详情点击

var ages = [12,56,18,20,17]
var age = ages.find(item => item > 18)
var ageIndex = ages.findIndex(item => item > 18)
console.log(age) // 56 数组中最靠前的元素
console.log(ageIndex)
age = ages.find(function(item,index){
    console.log(index) // 遍历的元素下标
    return item > 12
})
console.log(age)

输出

常与箭头函数一起使用，如果不与箭头函数一起使用的话要加上return关键字

3.2.3 reduce

---

遍历累加，参数有一个为回调函数，对于数组中的每一元素都会执行此回调，回调函数的第一个参数为每一此执行后的返回值，api一共有两个参数

• 第一个参数：执行的回调函数
  • 初始的值pre，调用回调函数的累加返回值
  • 当前执行的元素item
  • 当前执行的元素下标index
  • 当前的数组arr
• 第二个参数：为pre指定初始的数据

最终返回pre

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
	return pre + item
}, 0)

const obj = arr.reduce((pre,item) => {
	 pre[item] = item
	 return pre // 不要写成return pre[item] = item
},{})

console.log(sum) // 15
console.log(obj)

输出

3.2.4 其他遍历的方法

---

其他遍历的方法主要式ES5的遍历方法，详情点击

3.3 增删改

---

主要对数组中的元素进行增删该、提取的操作

3.3.1 arr.splice()

---

splice可以完成对数组的添加、删除、替换的操作，一共接受三个参数

• 第一个参数：必须是数字，从何处添加/删除数组元素
• 第二个参数：可选，删除几个元素，如果不传，则从第一个参数往后全部删除
• 第三个参数：可选， 需要添加的新元素

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
/* 添加元素 */
arr.splice(3,0,"ShaWuJing")
console.log(arr) // ["SunWuKong", "ZhuBaJie", "TangSeng", "ShaWuJing"]
/* 替换元素:先删除在新增 */
arr.splice(0,1,"MeiHouWang")
console.log(arr) // ["MeiHouWang", "SunWuKong", "ZhuBaJie", "TangSeng", "ShaWuJing"]
/* 删除元素 */
arr.splice(0,1)
console.log(arr) // ["ZhuBaJie", "TangSeng", "ShaWuJing"]

需要注意的是第一个参数为数组的下标，他是改变原数组的

3.3.2 arr.push()与arr.unshift()

---

• push和接下来的pop属于栈的方法，只能对于数组的尾部的元素进行增删，push属于像数组的尾部添加元素
  • 可以接受多个参数，表示像数组添加多个元素
  • 返回新的数组长度
  • 在原数组基础上修改
• unshift有换挡/移位的意思，不换挡不移位，也就是添加
  • 可以接受多个参数，表示像数组添加多个元素
  • 返回新的数组长度
  • 在原数组基础上修改

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
/* 向数组末添加元素 */
console.log(arr.push("MeiHouWang","ShaWuJing")) // 5
console.log(arr) //["SunWuKong", "ZhuBaJie", "TangSeng", "MeiHouWang", "ShaWuJing"]
/* 向数组首添加元素 */
console.log(arr.unshift("BaiGuJing","YuTuJing"))//7
console.log(arr) // ["BaiGuJing", "YuTuJing", "SunWuKong", "ZhuBaJie", "TangSeng", "MeiHouWang", "ShaWuJing"]

3.3.3 arr.pop()与arr.shift()

---

主要用来删除数组中的元素

• pop删除数组的尾元素
  • 无参数
  • 返回被删除的元素
  • 直接操作数组
• shift删除数组的首位元素

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]

/* 删除尾元素，如果arr为空的话，他pop出的元素是undefined */
console.log(arr.pop()) 
console.log(arr)

/* 删除首元素 */
console.log(arr.shift())
console.log(arr)

输出

3.3.4 arr.slice

---

提取数组中元素

• 有两个参数
  • 第一个参数：从何处开始截取，如果传递负数则从尾部开始算起，倒数第一个元素为-1
  • 第二个参数：可选，选取结束的数组下标，如果没有指定则截取到尾，提取并不包括此下标

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
console.log(arr.slice(1,2)) // ["ZhuBaJie"]
console.log(arr.slice(1)) // ["ZhuBaJie", "TangSeng"]

输出

3.4 其他方法

---

3.4.1 arr.sort()

---

对于数组中的元素进行排序，参数是一个回调函数，这个回调函数是可选

• 有回调函数代表数字排序
• 没有回调函数代表字母排序
• 不传递参数按照升序排列

字母排序

• 字母会按照ACILL码，进行排序，先比较第一个字母，第一个字母打者在前
• 在原数组的基础上进行排序，也就是修改原数组

数字排序

• 必须传递回调函数
• 返回值决定是按升序还是降序

/* 字母排序 */
var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
console.log(arr.sort()) // 返回排序后的数组
console.log(arr) // 修改原数组

arr = [50,4,25,69]
console.log(arr.sort()) // [25, 4, 50, 69]

/* 数字排序，需要传递回调函数 */

/* 升序 */
var arr1 = arr.sort(function(a,b){
	return a-b
})
console.log(arr1)

/* 降序 */
var arr2 = arr.sort(function(a,b){
	return b-a
})
console.log(arr2)

输出

3.4.2 arr.jion()

---

将数组链接成字符串，参数为一个连接符，

• 将参数省略，则连接符为,
• 不改变原素组

实例

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
var arr1 = arr.join()
console.log(typeof arr1) // string
console.log(arr1)//SunWuKong,ZhuBaJie,TangSeng
console.log(arr)//["SunWuKong", "ZhuBaJie", "TangSeng"]
console.log(arr.join("&"))//SunWuKong&ZhuBaJie&TangSeng

输出

3.4.3 arr.reverse()

---

将数组中的元素进行反转

• 返回反转后的数组
• 改变原数组

var arr = ["SunWuKong","ZhuBaJie","TangSeng"]
console.log(arr.reverse()) //["TangSeng", "ZhuBaJie", "SunWuKong"]
console.log(arr) // ["TangSeng", "ZhuBaJie", "SunWuKong"] 修改原数组

输出