前端必学的数组常见方法

    push()
    pop()
    unshift()
    shift()
    concat()---不改变原始数组
    splice()
    slice()------不改变原始数组
    sort()
    reverse()
    join()------不改变原始数组

1. join() 把数组链接成一个字符串

 语法： 数组.join('分隔符') 参数可以不写，不写是以 , 链接
          	不改变原始数组
          	返回值： 就是用指定字符链接好的字符串
  let arr = [1, 2, 3, 4]
  let res = arr.join('-')
  
  console.log(arr)  打印结果： [1, 2, 3, 4] //不改变原始数组
  console.log(res)  打印结果： 1-2-3-4 //链接好的字符串

增：返回新数组长度

2.arr.push(元素) ：在数组 末尾 新增元素

 语法： 数组.push(你要添加的数据)
          	直接改变原始数组
          	添加的数据是放在数组的最后一个
      		返回值：添加过后数组的长度
      		
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.push(6)
  
  console.log(arr)  打印结果： [1, 2, 3, 4, 5, 6] //直接改变原始数组
  console.log(res)  打印结果： 6 //添加过后数组的长度

arr.unshift() ：在数组 开头 新增元素

语法： 数组.unshift(你要添加的数据)
          	直接改变原始数组
          	添加在数组的最前面
          	返回值： 改变后数组的长度
          
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.unshift('hello')
  
  console.log(arr)  打印结果： ["hello", 1, 2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果： 6 //改变后数组的长度

删 ：返回删除的元素

arr.pop() : 删除数组 最后一个元素

语法： 数组.pop()
           	直接改变原始数组
           	删除数组中的最后一个
         	返回值： 被删除的那一个数据
         	
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.pop()
  
  console.log(arr)  打印结果： [1, 2, 3, 4] //直接改变原始数组
  console.log(res)  打印结果： 5 //被删除的那一个数据

 arr.shift() : 删除数组 第一个元素  

 语法： 数组.shift()
          	直接改变原始数组
          	删除数组中的第 0 个数据
          	返回值： 被删除的那一条数据
          
  let arr = [1, 2, 3, 4, 5] //示例数组
  let res = arr.shift()
  
  console.log(arr)  打印结果： [2, 3, 4, 5] //直接改变原始数组
  console.log(res)  打印结果： 1 //被删除的那一条数据

arr.splice(起始下标,删除数量，插元素)

插元素是总删除的位置插入 

语法： 数组.splice(开始的索引， 截取多少个，值1，值2)
 			从第三个参数开始，都是替换掉截取的位置
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
  let arr = ['张三', '李四', '王五', '赵六']
  let res = arr.splice(2,1,'新值1','新值2')
  
  console.log(arr)  打印结果： ["张三", "李四", "新值1", "新值2", "赵六"] //直接改变原始数组
  console.log(res)  打印结果： ['王五'] //截取出来的内容

查 返回查询到的元素数组

arr.slice(起始下标，结束下标)：查询指定范围

 语法1： 数组.slice(开始的索引，结束的索引) 它是包前不包后
          	不改变原始数组
          	返回值： 以数组的形式返回截取的内容
            当第二个参数不传递的时候，就是从哪个索引开始截取的到数组的末尾
  let arr = ['h', 'e', 'l', 'y', 'o', 'w', 'x']
  let res = arr.slice(1, 5)
  
  console.log(arr)  打印结果： ['h', 'e', 'l', 'y', 'o', 'w', 'x'] //不改变原始数组
  console.log(res)  打印结果： ["e", "l", "y", "o"] //截取出来的内容

arr.concat(数组)：连接数组

语法： 数组.concat(你要拼接的内容)，理论上可以无限传递参数
          	不改变原始数组
          	返回值： 拼接过后的数组
          
  let arr = ['hello']
  let res = arr.concat(['你', '好'], ['欢', '迎','您'])
  
  console.log(arr)  打印结果： ['hello'] //不改变原始数组
  console.log(res)  打印结果： ["hello", "你", "好", "欢", "迎","您"] //拼接过后的数组

arr.reverse() :反转字符串

语法： 数组.reverse()
          	直接改变原始数组
          	返回值： 反转后的数组
          
  let arr = ["您","迎", "欢", "好", "你"]
  let res = arr.reverse()
  
  console.log(arr)  打印结果： ["你", "好", "欢", "迎","您"] //直接改变原始数组
  console.log(res)  打印结果： ["你", "好", "欢", "迎","您"] //反转后的数组

数组排序

语法1： 数组.sort()
 			排序方式是按照一位一位来看的（先排第一个数据的第一个数字，以此类推）
          	直接改变原始数组
          	返回值： 排序好的数组
          
  let arr = [1, 3, 7, 9, 101, 5]
  let res = arr.sort()
  
  console.log(arr)  打印结果： [1, 101, 3, 5, 7, 9] //直接改变原始数组
  console.log(res)  打印结果： [1, 101, 3, 5, 7, 9] //排序好的数组


 语法2： 数组.sort() //常用语法
 			排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值： 排序好的数组（顺序排列 小-->大）

  let arr = [1, 3, 7, 9, 101, 5]
  let res = arr.sort(function (a, b) {
      // a和b这两个形参是数组中相邻的元素
      return a - b
    })
  
  console.log(arr)  打印结果： [1, 3, 5, 7, 9, 101] //直接改变原始数组
  console.log(res)  打印结果： [1, 3, 5, 7, 9, 101] //排序好的数组

ES5新增的遍历数组方法

1. forEach( )

该方法等同于for循环,没有返回值 return

arr.forEach(function(item,index,arr){
//里面的function是一个回调函数,
//item: 数组中的每一项;
//index:item 对应的下标索引值
//arr: 就是调用该方法的数组本身
})

 2.map( )  映射,该方法使用和forEach大致相同,但是该方法有返回值,返回一个新数组,新数组的长度和原数组长度相等

  let arr = [10, 20, 30, 40, 50]
        const res = arr.map(item => item * 2)
        console.log(res);//[20, 40, 60, 80, 100]

3. filter( )

filter方法: 有返回值, 过滤出符合条件的元素

  let arr = [{ name: '商品1', select: false },
        { name: '商品2', select: false },
        { name: '商品3', select: true },
        { name: '商品4', select: false },
        { name: '商品5', select: true },
        ]
        // 筛选选中的商品(true代表选中)
        const res = arr.filter(item => item.select)
        console.log(res);
        // [ 0: { name: '商品3', select: true }
        //   1: { name: '商品5', select: true } ]
        // 筛选删除的商品(false代表选中)
        arr = arr.filter(item => !item.select)
        console.log(arr);
        //  [ 0: { name: '商品1', select: false }
        //    1: { name: '商品2', select: false } 
        //    2: { name: '商品4', select: false }  ]

4.reduce()

 // 难点： reduce函数的使用  ---- 工作里面 react框架里面 有很多这个函数使用
    // reduce的参数？  有两个参数， 第一个参数是 数组， 第二参数是 初始值（可以不写）
    //      返回值：
    const arr = [10, 20, 30, 40]

    // reduce的第一个参数是函数， 内部函数的参数 有三个 sum 累加器  item 当前数组项  index
    const res = arr.reduce(function (sum, item, index) {
      // 函数循环3次的原因，因为没有给reduce第二个参数，所有 累加器sum的初始值就是 数组第一项
      console.log(sum, item, index);
      sum = sum + item
      return sum; //这个return必须写上，返回的值就是sum
    }, 0)//0是初始值 如果没有初始值将会把数组的第一项设初始值 会少循环(遍历)一次
         //最好给个初始值，如果数组为空没有初始值会之间报错
    console.log('最终的结果：', res);//最终的结果： 100

简：对数组进行遍历

map(): 该方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值、原数组不变

forEach(): 用于循环调用数组中的每个元素，并将元素传回给回调函数、原数组不变

every(): 对数组中每一项进行判断，若每一项都返回true、则返回true,有一个为false，则返回false，并停止遍历，原数组不变

some(): 对数组每一项进行判断，如果有一个元素满足条件，则返回true , 并停止遍历，如果没有满足条件的元素，则返回false，原数组不变

（2）查找数组中元素

filter(): 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素、原数组不变

find(): 当数组中的元素在测试条件时返回 true 时, 返回符合条件的元素，之后的值不会再调用执行函数，如果没有符合条件的元素返回 undefined、原数组不变

findIndex(): 当数组中的元素返回 true 时, 该方法会返回符合条件的元素的索引位置，之后的值不会再调用执行函数，如果没有符合条件的元素返回 -1、原数组不变

（3）

slice : 当有两个参数 如 slice('起始位置的下标','到哪里结束') 如果只有一个参数 返回的是从该指定位置到数组末尾的所有项，不改变原数组