JS 数组Array的创建及成员的增删改查

[TOC]

## 1. 数组创建与添加

### 1.1. 数组创建

可以通过示例化来创建一个数组

```JS
var arr = new Array()
```

### 1.2. 添加数组成员 push

```JS
// 延用上面的数组
arr.push("吕布")
arr.push("张辽")
arr.push("高顺")
console.log(arr) // 输出：[ '吕布', '张辽', '高顺' ]
```

## 2. 判断成员是否存在数组中

### 2.1. includes

通过 Array.includes() 函数判断成员是否存在在数组中，JS中的 includes 函数与其它语言的 Contains 函数类似，是包含的意思

```JS
// 延用上面的数组
console.log(arr.includes('张文远'))  // 输出：false
console.log(arr.includes('张辽'))    // 输出：true
```

> Tips：使用 includes 时需要注意，includes 本身是不会进行类型的隐式转换，判断时需要注意成员的类型，例如:<mark>var arr = ["182","180"] ;var num = 180</mark>，如果要使结果判断为 true 需要自行对 num 进行转换，<mark>arr.includes(num.toString())</mark>，没有转换 num 输出的结果将会是 false

### 2.2. indexOf

通过 Array.indexOf() 函数判断成员是否存在在数组中，如果输出的值大于等于 `0` 说明存在，等于 `-1` 说明不存在，在数组中使用 indexOf() 函数获取的是成员在数组中的索引下标，与字符串的 indexOf() 有所不同，字符串获取是首次出现匹配字符串的位置

```JS
// 延用上面的数组
arr.push("张辽")  // 测试有相同结果时，indexOf() 返回的结果
console.log(arr.indexOf('张文远'))  // 输出：-1
console.log(arr.indexOf('张辽'))    // 输出：1
```

> **Tips：**
+ indexOf() 函数无论是在字符串和数组中使用，都是获取到首次匹配到的位置
+ indexOff() 函数使用===进行比较，要求值和类型完全一致，1和"1"是不一样的，indexOf(1)找不到"1"这项
+ 元素11和12是独立的数值，与元素1没有关系，因此indexOf(1)时，不会找到11和12这两项

### 2.3. some

通过 Array.some() 函数判断成员是否存在在数组中，some 返回的是布尔值，存在返回 true，不存在返回 false，some 使用的是 Lambda 表达式的方式去匹配成员

```JS
// 延用上面的数组
console.log(arr.some(item=>item == '张文远'))  // 输出：false
console.log(arr.some(item=>item == '张辽'))    // 输出：true
```

### 2.4. find

通过 Array.find() 函数判断成员是否存在在数组中，find 返回的是数组中匹配到的成员数据，如果没有匹配到则返回undefined，因此只要判断 find 的结果是不是 undefined 即可，find 使用的是 Lambda 表达式的方式去匹配成员

```JS
// 延用上面的数组
console.log(arr.find(item=>item == '张辽' || item== '高顺'))  // 输出：张辽
console.log(arr.find(item=>item == '张文远') !== undefined)   // 输出：false
console.log(arr.find(item=>item == '张辽') !== undefined)     // 输出：true
```

> Tips：根据 find 返回的是首个匹配到数组成员

### 2.5. filter

通过 Array.filter() 函数判断成员是否存在在数组中，filter 返回的是一个数组，如果匹配到多个结果，那么返回的数组中就有多个成员，如果没有匹配到则返回一个空数组 []，filter 也是使用的 Lambda 表达式的方式去匹配成员

```JS
// 延用上面的数组
console.log(arr.filter(item=>item == '张文远'))  // 输出：[]
console.log(arr.filter(item=>item == '张辽'))    // 输出：[ '张辽', '张辽' ]
arr = arr.filter(item => item != "张辽")         // 输出：[ '吕布', '高顺' ]
console.log(arr)
```

> Tips：根据 filter 返回结果是数组，因此只需要判断数组的长度即可，如果数组长度等于0说明不存在匹配的结果，filter 是筛选出符合 Lambda 表达式的结果，通过重新赋值也可达到批量删除数组成员的效果

### 2.6. 遍历数组

通过遍历数组逐个成员匹配，这种方式就不举例了

## 3. 删除数组成员

### 3.1. 删除数组成员 splice

通过 Array.splice 函数可以将数组中的成员删除，执行 splice 函数后数组成员真实删除，splice 函数有两个参数

+ **第一个参数：**是开始删除的索引位置

+ **第二个参数：**是要删除的成员数量

+ **返回：**一个新的数组，新数组记录的则是被删除的成员

```JS
// 延用上面的数组
console.log(arr)                // 输出：[ '吕布', '张辽', '高顺', '张辽' ]
var newArr = arr.splice(2,2)
console.log(newArr)             // 输出：[ '高顺', '张辽' ]
console.log(arr)                // 输出：[ '吕布', '张辽' ]
```

### 3.2. 删除数组成员 slice

通过 Array.prototype.slice 函数删除，这种删除方式其实并不是正真的对数组进行删除操作，而是通过复制筛选出一个新的数组，Array.prototype.slice 本身是一个复制数组的函数，通过两个参数来确定要复制的内容

+ **第一个参数：** satrt 提取起始处的索引（从 0 开始），包含起始位置

- 参数为正式则从左往右开始计算，如果为负数，则从数组末尾（从右开始算）开始计算

- 如果参数小于数组长度的最大负数时（-array.length）或者省略了 start，则参数等于 0

- 如果参数大于数组的长度，则不取任何成员

+ **第二个参数：** end 提取结束位置索引，不包含

- 参数为正式则从左往右开始计算，如果为负数，则从数组末尾（从右开始算）开始计算

- 如果参数小于数组长度的最大负数时（-array.length），则参数相等于 0

- 如果参数大于数组的长度或者省略了 end，则取数组长度为结束位置

- 如果 end 小于等于 start 则不取任何成员

+ **返回：**一个浅拷贝数组，也就是一个新的数组

```JS
// 延用上面的数组
var newArr = arr.slice(1,2)  // 从数组索引为1的位置开始取到索引为2的位置，1包含，2不包含
console.log(newArr)   // 输出：[ '张辽' ]
console.log(arr)      // 输出：[ '吕布', '张辽', '高顺', '张辽' ]
```

> Tips：slice 数组用途非常广泛，关于 slice 函数的详细使用方式可以点击这里查看[《Array.prototype.slice()》](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice)

### 3.3. 删除数组首个成员 shift

通过 Array.shift 函数可以删除数组的第一个成员，shift 返回的是被删除成员的字符串

```JS
// 延用上面的数组
var newArr = arr.shift()
console.log(newArr)         // 输出：吕布
console.log(arr)            // 输出：[ '张辽', '高顺', '张辽' ]
```

### 3.4. 删除数组最后的成员 pop

通过 Array.pop 函数可以删除数组的最后一个成员，它与 shift 函数是对应的，因此 pop 返回的也是被删除成员的字符串

```JS
// 延用上面的数组
var newArr = arr.pop()
console.log(newArr)         // 输出：张辽
console.log(arr)            // 输出：[ '吕布', '张辽', '高顺' ]
```

### 3.5. 通过缩短数组长度删除成员

```JS
// 延用上面的数组
arr.length = arr.length-2
console.log(arr)          // 输出：[ '吕布', '张辽' ]
```

> Tips：通过变短字符串的长度，从而达到删除的目的，但这种方式只能删除后面连续的成员

### 3.6. 遍历删除数组成员

通过定义一个新的数组变量，然后遍历将符合的成员加入到新数组变量中，以这种方式来剔除不需要的成员，这种方式就不做示例演示了

> 这里需要注意的是如果是 forEach 方式遍历是无序的，不能使用 splice 和遍历的index来进行删除，这有删除错误的风险