数组常用的方法（详细版）

数组中长用到的方法

push()：：向数组后面添加元素

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

unshift()：用于在数组的开头添加/插入一个或多个元素。 并且它返回数组的新长度。

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

pop()： 删除数组中的最后一个数据

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

shift() ：删除数组中的第 0 个数据 (数组前)

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

concat() ：对数组进行拼接

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

splice()： 对数组进行截取

 语法1： 数组.splice(开始的索引， 截取多少个)
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
          
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(1, 1)
  
  console.log(arr)  打印结果： ["hello", "你好", "世界"] //直接改变原始数组
  console.log(res)  打印结果： ["world"] //截取出来的内容
  
  
 语法2： 数组.splice(只传一个参数)
 			当第二个参数不传递的时候，就是从哪个索引开始截取的到数组的末尾
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
          
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(2)
  
  console.log(arr)  打印结果： ['hello', 'world'] //直接改变原始数组
  console.log(res)  打印结果： ['你好', '世界'] //截取出来的内容
    
    
 语法3： 数组.splice(开始的索引， 截取多少个，值1，值2)
 			从第三个参数开始，都是替换掉截取的位置
          	直接改变原始数组
          	返回值： 以数组的形式返回截取出来的内容
          			（不管截取多少个内容，都是以数组的形式返回）
  var arr = ['hello', 'world', '你好', '世界']
  var res = arr.splice(2,1,'新值1','新值2')
  
  console.log(arr)  打印结果： ["hello", "world", "新值1", "新值2", "世界"] //直接改变原始数组
  console.log(res)  打印结果： ['你好'] //截取出来的内容

slice()： 截取数组中的值

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

 sort()： 数组排序

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


 语法2： 数组.sort() //常用语法
 			排序方式是按照数字大小来排列
          	直接改变原始数组
          	返回值： 排序好的数组（顺序排列 小-->大）
          
  var arr = [1, 3, 7, 9, 101, 5]
  var res = arr.sort(function (a, b) {
      return a - b
    })
  
  console.log(arr)  打印结果： [1, 3, 5, 7, 9, 101] //直接改变原始数组
  console.log(res)  打印结果： [1, 3, 5, 7, 9, 101] //排序好的数组

reverse() ：反转数组

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

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

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

总结

数组的常用方法改不改变原始数组很关键

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

indexOf()和lastIndexOf

数组名.indexOf():某个元素从左到右第一次出现的下标,找不到返回-1

数组名.lastIndexOf：某个元素从左到右最后一次出现的下标

var nums = [1,5,1,16,56,6,5,66]
var index = nums.indexOf(5)
console.log(index)//1

index = nums.lastIndexOf(5)
console.log(index)//6

二维数组转一维数组

nums[
    [1,2,3],
    [4,5,6],
    [7,8,9]
]
var arrs = nums.reduce(function(nums2,i){
    return nums2.concat(i)
},[])
console.log(arrs.toString())// [1,2,3,4,5,6,7,8,9]

reduce()方法用于累加累计求总和

1.当有初始值的情况

有初始值，他会将初始值赋值给累加器，当前执行的数组元素就会==从第一项开始==

var arr = [10, 20, 30, 40, 50];
    var cc = arr.reduce((add, val) => {
      return add + val
 
    }, 10);
    console.log(cc);//160
//执行过程
10 + 10 = 20
20 + 20 = 40
40 + 30 = 70
70 + 40 = 110
110 + 50 =160

//解析：
解析： 第一次进行return  ，10（初始值）+10(数组中的第一项),通过reurun返回给add累加器，完成第一次的累加，  这是第一次进行遍历，这时候累加器的值是20，然后通过与数组中的第二项进行相加，20+20 然后通过return 返回给累加器，相当于赋值给累加器，一致这样循环下去。直到数组中的所有项加完为止。

其中add是（累加器的值） val是（数值中项的值）

核心思路:每次进行累加后就会把值赋值给add（累加器），注意return的结果。

2. 当没有初始值的情况

没有初始值，他会将数组中的第一项赋值给累加器，从数组中的第二项开始加。

var arr = [10, 20, 30, 40, 50];
    var cc = arr.reduce((add, val) => {
      return add + val
 
    });
    console.log(cc); //150
//执行过程
10 + 20 = 30
30 + 30 = 60
60 + 40 = 100
100 + 50 = 150

//解析
解析：可以看出数组中没有初始值，那么把数组中的第一项作为初始值赋值给累加器，从第二项开始进行相加，  通过return第一次返回给累加器的值是: 10（第一项当作累加器的初始值）+20(数组中的第二项)=30， 那么第二次相加，累加器的初始值为30+30数组中的第三型=60（通过return返回给累加器的值），第三次：累加器的值：60  第四项的值:40      return 给累加器的值为：60+40=100，第四次： 累加器的值为：100 第五项的值为50   100+50=150  知道数组的数据遍历完为止。

小案例计算商品的价格：

var arr = [{
        name: '苹果',
        price: 5,
      },
      {
        name: '橘子',
        price: 3,
      },
      {
        name: '香蕉',
        price: 6,
      },
      {
        name: '菠萝',
        price: 10,
      }
    ]
var total = arr.reduce((sum, obj) => {
      sum = sum + obj.price
      return sum
    }, 0)
    console.log(total); //24

思路: 先判断数组中有没有初始值， 为0，赋值给累加器为0，obj代表是数组中的每一项，开始第一次的遍历sum（5）=sum(0)+obj.price(5)(数组中的第一项的price值)， 然后通过return把5返回给 累加器，结束第一次遍历， 开始第二次的遍历，sum（8）=5+3（数组中的第二项obj.price的值3），然后return给sum 完成第二次的累加，开始第三次遍历，sum（14）=8+6（数组中的第三项obj.price的值6），继续通过return返回给sum，开始第四次遍历sum（14）=14+10（数组中的第三项obj.price的值10）直到数组遍历完，返回的是一个数值。 console.log(total); //24

        let ary = [{
            price: 100,
            count: 1
        }, {
            price: 200,
            count: 2
        }, {
            price: 300,
            count: 3
        }]


        let res = ary.reduce((a, b) => {
            return a + b.price * b.count	
        }, 0) //0是a的默认值
        console.log(res); //1400
			//执行过程：            
            //100 + 200*2 = 500
            //500 + 300*3 = 1400

find()方法和findIndex()方法

• find()是用于找出第一个符合条件的数组成员，如果没有找到返回undefined
• findIndex()用于找出第一个符合条件的数组成员的位置(索引)，如果没有找到返回==-1==（负1）

        let ary1 = [{
            id: 1,
            name: '张三'
        }, {
            id: 2,
            name: '李四'
        }];
        let res1 = ary1.find((item) => {
            return item.id == 2
        })
        console.log(res1); //{id: 2, name: '李四'}
        let res2 = ary1.findIndex((item, index) => {
            return item.id == 3
        })
        console.log(res2); //-1

includes()方法

判断某个数组是否包含给定的值，返回布尔值

        let ary2 = [1, 2, 3, 4, 5]
        let res3 = ary2.includes(2)
        console.log(res3); //true
        let res4 = ary2.includes(6)
        console.log(res4); //false

构造函数方法：Array.from()

将伪数组或可遍历对象转换为真正的数组

        let btns = document.querySelectorAll('button')
        let res5 = Array.from(btns)
        console.log(res5); // [button, button, button, button, button] 结果把伪数组转化为了真正的数组

        let arrayLike = {
            '0': 'a',
            '1': 'b',
            '2': 'c',
            length: 3
        };
        let res6 = Array.from(arrayLike)
        console.log(res6); //['a', 'b', 'c']

forEach()方法

• 循环遍历数组
• foreach方法主要有三个参数，分别是数组内容、数组索引、整个数组

        let ary4 = [11, 33, 44, 55]
        ary4.forEach((item, index, array) => {
            console.log(item);
        })

map()方法

map方法的作用不难理解，“映射”嘛，也就是原数组被“映射”成对应新数组。

循环遍历数组中的每一项

map()有返回值，可以return出来

        let ary4 = [11, 33, 44, 55]
		let res11 = ary4.map(item => item * 2)
        console.log(res11); //[22, 66, 88, 110]

forEach与map的区别

• 相同点

  • 都是循环遍历数组中的每一项
  • 每一次执行匿名函数都支持三个参数，数组中的当前项item，当前项的索引index，原始数组input
  • 匿名函数中的this都是指window
  • 只能遍历数组

• 不同点

  • forEach()没有返回值 写return 无效

  var array = [10,34,57,43,76];  
  var res = array.forEach(function (item,index,input) {  
         input[index] = item*10;  
  })  
  console.log(res);//--> undefined;  
  console.log(array);//--> 通过数组索引改变了原数组；[100,340,570,430,760]
  

  • map()有返回值，可以return出来

          var array = [10, 34, 57, 43, 76];
          var res13 = array.map(function(item, index, input) {
              return item * 10;
          })
          console.log(res13); //[100, 340, 570, 430, 760]
          console.log(array); //[10, 34, 57, 43, 76]
  

filter()：方法 返回的一个新数组，需要定义一个变量去接收

• 注意点：
• 返回的是满足条件的数组
• 必须要加return，循环数组的长度（数组有多长就循环几次）

  let ary4 = [11, 33, 44, 55]
   let res8 = ary4.filter((item) => {
              return item >= 33
          })
          console.log(res8); //[33, 44, 55]

some()：方法是查找数组中是否有满足条件的元素

• 如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
• 返回的是布尔值

        let ary4 = [11, 33, 44, 55]
        let res9 = ary4.some((item) => {
            return item > 66
        })
        console.log(res9); //false

every()：方法 都满足条件才返回true，如果有一个不满足就返回false

        let res10 = ary4.every(item => item > 10) //箭头函数省略了小括号()和{}
        console.log(res10); //true

filter和some的区别

1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
2. some 也是查找满足条件的元素是否存在  返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环