数组的常用方法

不影响原数组

1. slice
   数组.slice(开始下标, 结束下标) 参数的特点
   • 包前不包后(包括开始下标, 不包括结束下标)
   • 两个参数都可以省略不写
   • 参数可以支持负数，相当于 数组.length + 负数

作用：复制出指定范围的内容
返回值：复制到的内容

const arr = [1, 2, 3, 4, 5, 6, 7]
const res = arr.slice(2, 5)
console.log(arr)      // [1, 2, 3, 4, 5, 6, 7]
console.log(res)      // [3, 4, 5]

const res1 = arr.slice(3, -1)    // arr.length + (-1)
console.log(res1)                // [4, 5, 6]

2. concat
   数组.concat(数据1, 数据2, 数据3, 数据4...)
   作用：将传入的数据，合并到指定的数组中，然后返回出来
   返回值：合并后的数组

const arr = [1, 2, 3]
const res = arr.concat(4, 5, 6)
console.log(res)       // [1, 2, 3, 4, 5, 6]

3. join

数组.join("连接符") 链接符如果不传递默认按照逗号链接
作用：根据传入的连接符，将数组内所有的元素都凝结成一个完整的字符串
返回值：拼接好的字符串

const arr = [1, 2, 3]
const res = arr.join("$")
console.log(res)      // 1$2$3

4. indexOf

数组.indexOf(要查询的数组, 从哪里开始查询[下标]) 第二个参数不写，默认为 0
作用：按照从左到右(按照下标的从小到大)的顺序检查数组中是否包含指定数据 返回值：查询到返回从左到右数据第一次出现的下标，查询不到返回 -1

const arr = [1, 2, 3]
console.log(arr.indexOf(1))      // 不传递第二个参数，默认从下标[0]开始
console.log(arr.indexOf(1, 3))   // 从 下标[3] 开始在数组中查询数组 1

5. laseIndexOf

数组.lastIndexOf(要查询的数组, 从哪里开始查询[下标]) 第二个参数不写，默认为 0
作用：按照从右到左(按照下标从大到小)的顺序检查数组中是否包含指定数据
返回值：查询到返回从左到右数据第一次出现的下标，查询不到返回 -1

const arr = [1, 2, 3]
console.log(arr.lastIndexOf(1))      // 不传递第二个参数，默认从下标[0]开始
console.log(arr.lastIndexOf(1, 3))   // 从 下标[3] 开始在数组中查询数组 1

改变原数组

1. push
   数组.push(参数)
   作用：向数组的末尾新增一条数据
   返回值：新增数据后数据的最新长度(不常用)

const arr = [1, 2, 3]
const res = arr.push("一个新的数据")
console.log(arr)      // [1, 2, 3, "一个新的数据"]
console.log(res)      // 4

2.pop
数组.pop()
作用：删除数组末尾的最后一个元素
返回值：被删除的数据(不常用)

const arr = [1, 2, 3]
const res = arr.pop()
console.log(arr)      // [1, 2]
console.log(res)      // 3

3. unshift
   数组.unshift(参数)
   作用：像数组开头新增一条数据
   返回值：新增数据后数据的最新长度(不常用)

const arr = [1, 2, 3]
const res = arr.pop("一个新的数据")
console.log(arr)      // ["一个新的数据", 1, 2, 3]
console.log(res)      // 4

4. shift
   数组.shift()
   作用：删除数组开头的第一个元素
   返回值：被删除的数据(不常用)

const arr = [1, 2, 3]
const res = arr.shift()
console.log(arr)      // [2, 3]
console.log(res)      // 1

5. reverse
   数组.reverse()
   作用：反转数组
   返回值：反转后的数组(不常用)

const arr = [1, 2, 3]
const res = arr.reverse()
console.log(arr)      // [3, 2, 1]
console.log(res)      // [3, 2, 1]

6. sort
   数组.sort()
   作用：将数组中所有的元素成员，转换为字符串然后一位一位的对比 返回值：排序后的数组

const arr = [1, 2, 3, 10, 100, 20]
const res = arr.reverse()
console.log(arr)      // [1, 10, 100, 2, 20, 3]
console.log(res)      // [1, 10, 100, 2, 20, 3]

数组.sort(function (a, b) {return a - b})
作用：将数组内的数据按照数字的从小到大排列
返回值：排序后的数组

const arr = [1, 2, 3, 10, 100, 20]   
const res = arr.reverse(function (a, b) {return a - b})
console.log(arr)      // [1, 2, 3, 10, 100, 20]   
console.log(res)      // [1, 2, 3, 10, 100, 20]   

数组.sort(function (a, b) {return b - a})
作用：将数组内的数据按照数字的从大到小排列
返回值：排序后的数组

const arr = [1, 2, 3, 10, 100, 20]   
const res = arr.reverse(function (a, b) {return b - a})
console.log(arr)      // [100, 20, 10, 3, 2, 1]   
console.log(res)      // [100, 20, 10, 3, 2, 1]    

7. splice
   数组.splice(开始位置/下标, 多少个)
   作用：类似于剪切的功能
   返回值：剪切的数据

const arr = [1, 2, 3, 4, 5, 6, 7]
const res = arr.splice(2, 3)
console.log(arr)       // [1, 2, 6, 7]
console.log(res)       // [3, 4, 5]

数组.splice(开始位置/下标, 多少个)
作用：首先会按照两个参数指明的位置去剪切出来一部分数据，然后将第二个参数以后的(从第三个开始)所有书，放在刚才剪切的位置
返回值：剪切的数据

const arr = [1, 2, 3]
const res = arr.splice(0, 1, 4, 5, 6)   
console.log(arr)      // [4, 5, 6, 2, 3]
console.log(res)      // [1]

数组遍历的方法

1. forEach
   数组.forEach(function (item, index, origin) {遍历数组后执行的代码)

• item: 数组中每一个元素
• index: 每一个元素对应的下标
• origin: 原数组(不常用)
  作用：根据数组的元素内容，循环遍历数组，拿到数组的每一项
  返回值：无

const arr = [1, 2, 3]   
const res = arr.forEach(function(item, index, origin) {
    console.log(item)     // 1, 2, 3
    console.log(index)    // 0, 1, 2
    console.log(origin)   // [1, 2, 3]
})
consloe.log(res)          // undefined

2. map
   数组.map(function(item, index, origin) {遍历数组后执行的代码})

• item: 数组中每一个元素
• index: 每一个元素对应的下标
• origin: 原数组(不常用)
  作用：根据原数组映射出来一个新数组
  返回值：是一个映射出来的新数组(需要在函数内部书写 return)
  语义：映射数组

const arr = [1, 2, 3]   
const res = arr.map(function(item, index, origin) {
    return 2 * item
})
console.log(arr)     // [1, 2, 3]
console.log(res)     // [2, 4, 6]

3. filter
   数组.filter(function (item, index, origin) {})
   作用：过滤数组
   返回值：过滤出来的内容组成一个新的数组

const arr = [1, 2, 3]   
const res = arr.filter((item) => item % 2 === 0)
console.log(arr)     // [1, 2, 3]
console.log(res)     // [2]

4. find
   数组.find(function (item, index, origin) {})
   作用：去数组中查找内容
   返回值：查找到的数据，如果找不到那么返回undefined

const arr = [1, 2, 3, 4]
const res = arr.find((item) => item % 2 === 0)
console.log(arr)     // [1, 2, 3, 4]
console.log(res)     // 2

5. findIndex
   数组.find(function (item, index, origin) {})
   作用：去数组中查找内容
   返回值：查找到的数据，如果找不到那么返回-1

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var res = arr.findIndex(function (item) {
    return item < 0
})
console.log(res)    // -1

6. every
   数组.every(function (item, index, origin) {})
   作用：判断数组中是否全部符合条件
   返回值：符合条件_true; 否则为_false

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var res = arr.every(function (item) {
    return item % 2 === 0
})
console.log(res)    // false

7. some
   数组.some(function (item, index, origin) {})
   作用：判断数组中是否符合条件(有一个符合条件的就行)
   返回值：符合条件_true; 否则为_false

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var res = arr.some(function (item) {
    return item % 2 === 0
})
console.log(res)    // true

8. reduce
   数组.reduce(function (prev, item, index, origin) {}, init)

• item, index, origin 和之前的含义一样
• prev:

如果是第一次执行 => 如果传递了 init, 那么 prev 就是 init 的值, item为数组[0];否则 prev 为 数组[0]的值, item 顺延为 数组[1] 的值
如果是第一次后续的执行 => 那么 prev 的值就是上一次遍历 return 的结果

• init: 随意传递一个值即可, 只要符合需求

作用：累加器
返回值：累加后的结果

const arr = [1, 2, 3, 4, 5]
const res = arr.reduce(function(prev, item) {
    return prev + item
}, "")
console.log(res)     // 12345