一、数组的常用方法

1. push

• 语法：数组.push(数据)
• 作用：向数组末尾添加数据
• 返回值：追加数据后，数组最新的长度

var arr = [1, 2, 3]
console.log(arr.push(500))   //返回值为数组长度：4
console.log(arr)             //打印原数组为：[1,2,3,500]

2. pop

• 语法：数组.pop()
• 作用：删除数组后最后一个数据
• 返回值：被删除的数据

var arr = [1, 2, 3]
console.log(arr.pop())      //返回值为被删除的数据：3
console.log(arr)            //打印原数组为：[1,2,]

3.unshift

• 语法：数组.unshift(数据)
• 作用：将数据添加到数组的最前面
• 返回值：将数据添加到最前面后的数组的最新长度

var arr = [1, 2, 3]
console.log(arr.unshift(500))       //返回值为数组长度：4
console.log(arr)                    //打印原数组为：[500，1,2,3]

4. shift

• 语法：数组.shift()
• 作用：删除数组第一条数据
• 返回值：被删除的数据

var arr = [1, 2, 3]
console.log(arr.shift())       //返回值为被删除的数据：1
console.log(arr)               //打印原数组为：[2，3]

5. reverse

• 语法：数组.reverse()
• 作用：反转数组
• 返回值：反转后的新数组

var arr = [1, 2, 3]
console.log(arr)              //反转后的数组为:[3,2,1]

6.sort

• 语法1：数组.sort()
• 语法2：数组.sort(function(a,b){return(a-b)}) （从小到大排列）
• 语法3：数组.sort(function(a,b){return(b-a)}) （从大到小排列）
• 作用：排序
• 返回值：排序好的新数组

var arr1 = [1,100,100001,1002,300,100000002]
console.log(arr1.sort())     
//语法1，按照数位从左往右从小到大排序(如果有字符串，纯数字的参与比较，不是纯数字的，按照顺序放在数组最后)

var arr2 = [1,200,300,5,80,123]
var res2 = arr2.sort(function(a,b){return(a - b)})
console.log(arr2) 
//语法2：从小到大排列，打印的数组为：[1, 5, 80, 123, 200, 300]

var arr3 = [1,200,300,5,80,123]
ar res3 = arr3.sort(function(a,b){return(b - a)})
console.log(arr3) 
//语法3：从大到小排列，打印的数组为：[300, 200, 123, 80, 5, 1]

7.splice

• 语法1：数组.splice(开始索引，多少个)
• 作用：截取数组部分内容
• 返回值：截取出来的部分内容组成的数组
• 语法2：数组.splice(开始索引，多少个，插入的数据1，插入的数据2...)
• 作用：截取数组部分内容，并插入新的数据
• 返回值：截取出来的部分内容组成的数组

var arr1 = [1,2,3,4,5,6,7,8,9]
var res1 = arr1.splice(3,4)
console.log(res1)    //语法1：从下标3开始截取，截取4个，返回值为：[4,5,6,7]
console.log(arr1)    //原数组为：[1,2,3,8,9]

var res2 = arr1.splice(3,4,100)
console.log(res2)    //语法2：从下标3开始截取，截取4个，返回值为：[4,5,6,7]
console.log(arr1)    //原数组插入了100，为：[1,2,3,100,8,9]

注意：以上7种方法会改变原数组 8.slice

• 语法：数组.slice(开始索引，结束索引)
• 作用：截取数组部分内容
• 返回值：截取出来的部分内容组成的新数组
• 参数：
  • • 包前不包后
  • • 不写开始索引，默认为0
  • • 不写结束索引，结束索引相当于写了数组的长度
  • • 参数支持写负数，表示倒数第几个(即length + 负整数)

var arr = [1,2,3,4,5,6,7,8,9]
console.log(arr.slice(3,4))  
//返回值为：[4]

console.log(arr.slice() )         
//开始索引不写，默认为0，结束索引也没写，相当于arr.length,那么打印的时候就全打印了

console.log(arr.slice(3,-2))  
//相当于从索引3的位置开始，结束位置相当于length+负数。即索引7的位置，即arr.slice(3,7)

面试问题：splice和slice的区别？

回答：

• 参数不同：
  • • splice的作用是截取数组部分片段，并决定是否插入数据；在参数的书写上，参数可以有多个数据，第一个参数代表开始索引的位置，第二个参数表示需要截取数据的数量，接下来的参数表示要添加的数据，可以没有，也可以有多个。
  • • 而slice的作用是截取部分数据片段； 在参数的书写上，第一个参数是开始索引的位置，默认值为0，第二个参数是结束索引的位置，默认值为数组长度； 参数采取“包前不包后”原则，即只保留开始索引位置的数字，不保留结束索引位置的数字；参数也可以取值为负数，表示倒数第几个数字。
• spice会改变原数组，而slice不会改变原数组。

9.concat

• 语法：原始数组.contact(数组1，数组2，....，数据1，数据2....)
• 作用：进行数据拼接，把数组数据之类的小括号里的内容，拼接在原始数组中
• 返回值：拼接好的数组

var arr = [1,2,3]
var res = arr.concat([100,200,400],[0,1000],'abc','100000')
console.log(res)
//返回值：[1, 2, 3, 100, 200, 400, 0, 1000, 'abc', '100000']

10.join

• 语法：数组.join('连接符')
• 作用：使用“连接符”把数组内的每一个数据连接成一个字符串(不写连接符，默认使用的是逗号)
• 返回值：连接好的字符串

var arr = [1,2,3]
var str = arr.join('-')
console.log(str)        //返回值为：1-2-3

11.indexOf

• 语法1：数组.indexOf(要检查的数据)
• 作用：从左到右检查该数据第一次在该数组内出现的索引
• 返回值：找到数据的情况下，会将该数据第一次出现的下标返回 ；没找到的情况下，会直接返回-1
• 语法2：数组.indexOf(要检查的数据，开始索引的位置)
• 作用：在开始索引的位置，按照从左到右的顺序，检查该数据第一次在该数组出现的索引位置
• 返回值：找到数据的情况下，会将该数据第一次出现的下标返回 ；没找到的情况下，会直接返回-1

var arr = [1,2,6,2,0,3,4,5,6,7]
var num = arr.indexOf(6)       //开始索引的值如果没写，默认值为0
var num1 = arr.indexOf(6,5)    //表示从索引5的位置开始从左向右寻找6的索引位置
console.log(num)               //返回值为：2
console.log(num1)              //打印值为：8

12.lastIndexOf

• 语法1：数组.lastIndexOf(要检查的数据)
• 作用：按照从右向左(从后往前)的顺序，检查该数据在该数组内第一次出现的位置的索引
• 语法2：数组.lastIndexOf(要检查的数据，开始索引)
• 作用：在开始索引的位置，按照从右向左(从后往前)的顺序，检查该数据在该数组内第一次出现的位置的索引
• 返回值：找到数据的情况下，会将该数据第一次出现的下标返回 ；没找到的情况下，会直接返回-1

var arr = [1,2,6,2,0,3,4,5,6,7]
var num = arr.lastIndexOf(6)       //开始索引的值如果没写，默认值为0
var num1 = arr.lastIndexOf(6,5)    //表示从索引5的位置开始从右向左寻找6的索引位置
console.log(num)               //返回值为：8
console.log(num1)              //打印值为：2

二、遍历数组的常用方法

1. forEach

• 语法：数组.forEach(function(item,index,origin){ })
  • • item:数组的每一项的值
  • • index:数组每一项对应的下标
  • • origin：原始数组(了解即可，一般不用)
• 作用：遍历数组
• 返回值：永远没有返回值(undefined)

var arr = [1,2,3,4,5,6,7,8,9]
arr.forEach(function(item,index,origin)
    console.log(item,index)
      }) 

2. map

• 语法：数组.map(function(item,index,origin){})
• 作用：映射数组
• 返回值：返回一个和原始数组长度相同的数组，但是内部数据可以经过映射加工(就是在函数内以return的形式书写)

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var res = arr.map(function (item, index, origin) {
   console.log(item, index)
   return item * 10
})
console.log(res)      //返回值为放大十倍的数组：[10,20,30,40,50,60,70,80,90]

面试题：数组常用的遍历方法中，foreach和map有什么区别？

回答：

• forEach的作用是用来遍历数组，map的作用是映射数组。
• forEach没有返回值，而map有返回值。

3. filter

• 语法：数组.filter(function(item,index,origin){})
• 作用：过滤数组(留下想要的)
• 返回值：返回一个新数组，内部存储的是原始数组过滤出来的部分内容
• 过滤条件：过滤条件以return形式书写

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var res = arr.filter(function (item, index, origin) {
    return item > 6
})
console.log(res)  //返回值：[7,8,9]

4. find

• 语法：数组.find(function (item, index, origin){})
• 作用：在数组内查找满足条件的第一项
• 返回值：找到的数据,如果找不到，返回undefined
• 查找条件以return的形式书写

ar arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var res1 = arr.find(function(item,index,origin){
      return item > 6
 })
console.log(res1)    //返回值为：7

var res2 = arr.find(function(item,index,origin){
        return item > 10
 })
console.log(res2)   //找不到满足条件的数值，返回值为：undefined

5. findIndex

• 语法：数组.findIndex(function (item, index, origin){})
• 作用：在数组内查找满足条件的第一项的索引
• 返回值：找到的数据的索引，如果找不到，返回-1
• 查找条件以return的形式书写

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var res = arr.findIndex(function(item,index,origin){
    return item > 6
})
console.log(res)     //返回值：6

 var res1 = arr.findIndex(function(item,index,origin){
    return item > 60
})
console.log(res1)   //找不到，返回-1

6.some

• 语法：数组.some(function (item, index, origin){})
• 作用：判断数组内是否有满足条件的值(最少一个)
• 返回值：true/false
• 判断条件以return的形式书写

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

7.every

• 语法：数组.every(function (item, index, origin){})
• 作用：判断数组内是否每一个都满足条件
• 返回值：true/false
• 判断条件以return的形式书写

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var res = arr.some(function (item, index, origin) {
   return item > 7      
})
console.log(res)  //false

8.reduce

• 语法：数组.reduce(function (prev,item, index, origin){}init)
  • • prev:表示初始值，或上一次运算的结果
• 作用：用来实现叠加效果
• 返回值：最终叠加的结果
• 叠加条件以return的形式书写

注意： prev第一次的值，如果传递了init的值，就用init的值；如果没有传递init的值，那么就是数组[0]的值；

如果传递了init的值，那么循环次数就是数组的长度，如果没有传init，循环次数就是数组的长度-1次。

var arr = [100,200,300,400]
var res = arr.reduce(function(prev,item,index,origin){
    return prev + item
},0)
console.log(res)    //返回值为：1000

分析：
  第一次循环：
        prev===0(因为使用reduce的方法传递了第二个参数init)；
        item===100(因为init给值了，所以item的值从索引0开始，即100)；
        在第一轮代码执行的时候，运行了prev+item，这个结果会传递给第二轮prev的值(100)
  第二轮循环：
        prev===100;
        item===200(索引1位置的值);
        return prev+item(300)，传递给第三轮的prev
  第三轮循环：
        prev===300;
        item===300(索引2位置上的值);
        return prev+item(600),传递给第四轮的prev
 第四轮循环：
        prev===600;
        item===400(索引3位置上的值);
        return prev+item(1000),传递给第五轮的prev
  因为后续没有元素了，所以循环到此为止，然后将最后一轮求出来的prev值(1000)return出去,外部接收这个值，打印1000              

var arr1 = [100,200,300,400]
var res1 = arr1.reduce(function(prev,item,index,origin){
   return prev + item
})
console.log(res1)   //返回值：1000

分析：
 第一次循环：
        prev===100(因为没有给init值，所以第一个prev的值就是数组中索引0位置的值，即100)；
        item===200(因为没有传递init的值，所以第一个prev的值是索引0位置的值，那么第一个item就是索引1位置的值，即200)；
        在第一轮代码执行的时候，运行了prev+item，这个结果会传递给第二轮prev的值(300)
  第二轮循环：
        prev===300;
        item===300(索引2位置的值);
        return prev+item(600)，传递给第三轮的prev
  第三轮循环：
        prev===600;
        item===400(索引3位置上的值);
        return prev+item(1000),传递给第四轮的prev
  因为后续没有元素了，所以循环到此为止，然后将最后一轮求出来的prev值(1000)return出去,外部接收这个值，打印1000