JS数组常用方法

**数组常用方法**

==>js 自带的一些操作数组的方法

==>数组方法的使用格式，必须是数组.xxx()

==>数组和伪数组的区别

->length 和索引都一样，循环遍历都一样，长得也一样

->唯独数组常用方法，伪数组用不了

==>push()

->语法：数组.push(数据 1，数据 2，数组 3...)

->作用：把所有的参数按照顺序加到数组的末尾位置

->返回值：追加以后数组的长度

->直接操作原始数组

->可以追加数组

var arr=[1,2,3,4,5]

//arr[5]=123

//arr[6]=[10,20] 变成二维数组

var res=arr.push(123,[10,20])

==>pop()

->语法：数组.pop()

->作用：删除数组的最后一个数据

->返回值：被删除的数据

->直接操作数组

var arr=[1,2,3,4,5]

var res=arr.pop()

//res 得到的是被删除的数据

==>unshift()

->语法：数组.unshift(数据 1，数据 2，数组 3...)

->作用：从数组的最前面插入一些数据

->返回值：插入后的数组长度

->直接操作数组

var arr=[1,2,3,4,5]

var res=arr.unshift(123)

**面试题**

**push 和 unshift 的区别**

对性能的消耗不一样，push 方法在末尾追加和前面的数据没有关系

unshift 是从前面追加，原先数据每一个往后顺延需要消耗性能，因为对每一个数据都有操作

==>shift()

->语法：数组.shift()

->作用：删除数组的最前面的数据

->返回值：被删除的数据

->直接操作数组

var arr=[1,2,3,4,5]

var res=arr.shift()

res：被删除的数据

==>reverse()

->语法：数组.shift()

->作用：反转数组

->返回值：反转后的数组

->直接操作数组

var arr=[1,2,3,4,5]

arr.shift()

==>sort()

==>语法：

-->1.arr.sort()

->按照每一个数据中的每一个数据的 ASCII 码进行排序

var arr=[1,2,3,4,5,10,11]

arr.sort()

console.log(arr) //1,10,11,2,3,4,5 按位排序

-->2. 升序排列 arr.sort(function(a,b){

return a-b;

})

var arr=[1,2,3,4,5,10,11]

arr.sort(function(a,b){

return a-b;

})

console.log(arr) //1，2，3，4，5，10，11

-->2. 降序排列 arr.sort(function(a,b){

return b-a;

})

var arr=[1,2,3,4,5,10,11]

arr.sort(function(a,b){

return b-a;

})

console.log(arr) //11，10，5，4，3，2，1

==>splice()

->语法：

1、数组.splice(开始索引，多少个)

->从开始索引，截取多少个

->第二个参数可以不写，直接到末尾

var arr=[1,2,3,4,5,10,11]

var res=arr.splice(1,2)

console.log(res)//2,3

console.log(arr)//1,4,5,10,11

2、数组.splice(开始索引，多少个，替换数据 1，替换数据 2...)

->把替换数据按照顺序插入到截取的位置

->**注意**：从那个索引开始删除，替换数据的第一个就插入哪个位置

var arr=[1,2,3,4,5,10,11]

var res=arr.splice(1,2，12)

console.log(res)//2,3

console.log(arr)//1,12，4,5,10,11

-->作用：

->1、截取数组

->2、替换新内容

-->返回值：一定是一个数组

->如果截取多个数组，数组里面有多个

->如果截取一个数组，数组里面只有一个

->如果一个都不截取，就是一个空数组

->直接操作原始数组

==>concat ()

->语法：数组.concat(数组 1，数据 2，...)

->作用：

1、如果参数是数组，就把数组拆开，里面每一项追加到原数组后面

2、如果参数数据，直接追加

->返回值：追加好的数组

->不改变原始数组

var arr=[1,2,3,4,5,10,11]

var res=arr.cocat(12，[20,21])

console.log(res)//1,2,3,4,5,10,11,12，20,21

console.log(arr)//1,2,3,4,5,10,11

==>concat ()

->语法：

1、数组.slice(开始索引，结束索引) //包前不包后

->第一个参数可以不写，表示从头

->第二个参数可以不写，表示到尾

var arr=[1,2,3,4,5,10,11]

var res=arr.slice(1,2)

console.log(res)//2

console.log(arr)//1,2,3,4,5,10,11

2、数组.slice(开始索引，结束索引) //包前不包后

->参数可以写一个负整数

->写一个负整数以后，表示 length+负整数 //-1 表示最后一个

var arr=[1,2,3,4]

var res=arr.slice(1,-1)

console.log(res)//1,2,3,4

console.log(arr)//1,2,3,4

->作用：获取数组里的某些数据

-->返回值：一个数组

->如果获取多个数组，数组里面有多个

->如果获取一个数组，数组里面只有一个

->如果一个都不获取，就是一个空数组

->不改变原始数组

==>join()

->语法：数组.join('连接符号') //连接符号默认值是逗号

->作用：把数组里面的每一个数据使用连接符号连接在一起

->返回值：是一个连接好的内容，是一个 string 类型

->直接操作数组

var arr=[1,2,3,4]

var res=arr.join('-')

console.log(res)//1-2-3-4

console.log(arr)//1,2,3,4

==>indexOf()

->语法：

1、数组.indexOf(数据)

var arr=[1,2,3,4]

var res=arr.indexOf(1)

console.log(res)//0

2、数组.indexOf(数据，开始索引)

var arr=[1,2,3,4]

var res=arr.indexOf(4，1)

console.log(res)//3

->作用：正向查看数组里面指定这个数据的索引

->返回值：

1、如果有这个数据，是第一个满足条件的数据的索引

2、如果没有这个数据，那么是-1

->直接操作数组

==>lastIndexOf()

->语法：

1、数组.lastIndexOf(数据)

var arr=[1,2,3,4]

var res=arr.lastIndexOf(1)

console.log(res)//3

2、数组.lastIndexOf(数据，开始索引)

var arr=[1,2,3,4]

var res=arr.lastIndexOf(4，0)

console.log(res)//0

->作用：反向查看数组里面指定这个数据的索引

->返回值：

1、如果有这个数据，是第一个满足条件的数据的索引

2、如果没有这个数据，那么是-1

3、注意：虽然是从后向前查找，但是索引还是正常索引

->直接操作数组

==>forEach()

->语法：数组.forEach(function (item,index,arr){ })

->item：数组的每一项

->index:数组的每一项的索引

->arr:原始数组

->作用：取代 for 循环，遍历数组

->返回值：没有返回值

var arr=[1,2,3,4]

var res=arr.forEach(function (item,index,arr){

//数组里有多少数据执行多少次

//函数每一次执行的时候，item 分别是数组里面的每一项

//函数每一次执行的时候，index 分别是数组里面的每一项的索引

//函数每一次执行的时候，arr 每一次都是原始数组

console.log(item,index,arr)

})

==>map()

->语法：数组.map(function (item,index,arr){ })

->item：数组的每一项

->index:数组的每一项的索引

->arr:原始数组

->作用：映射数组

->返回值：是一个新的数组

->里面是对原始数组没一个数组的操作

->返回数组值，一定和原始数组长度一样

==>不改变原始数组

var arr=[10,100,1000]

var res= arr.map(function (item,index,arr){

return item\*1.3

})

console.log(res) //13,130,1300

**map 底层封装**

1、准备一个新的数组

2、遍历原始数组，分别执行函数

3、把每一次函数执行的返回值放在新数组里面

4、把新数组当作 map 的返回值给出来

var arr=[10,100,1000];

function myMap(fn){

//fn 就是调用 myMap 的时候传递函数

只要写 fn()就是在调用书写 myMap 的时候传递的那个参数

var newArr=[];

//this 就是调用 myMap 的那个函数

//遍历调用 myMap 的数组

for(var i=0;i<this.length;i++){

//这里的代码会根据数组的长度来执行

//在 for 循环里面，this[i]就是数组的每一项

//在 for 循环里面，i 就是数组每一项的索引

var res=fn(this[i],i,this)

newArr.push(res)

}

return newArr

}

//当循环结束，newArr 就是里面有三个数据，分别是对原始数组每一个数据的操作

Array.prototype.myMap=myMap

var res=arr.myMap(function(item,index,arr){

return item\*1.3 //对原始数组每一个数据的操作  

})

console.log(res)

==>filter()

->语法：数组.filter(function (item,index,arr){ })

->item：数组的每一项

->index:数组的每一项的索引

->arr:原始数组

->作用：过滤原始数组中的数据，把满足条件的放在新数组里面

->返回值：新数组，里面是所有原始数组中满足条件的项

==>不改变原始数组

var arr=[10,20,30,40,50]

var res=arr.filter(function(item,index,arr){

return item>20

})

console.log(res)

//去重

var arr=[1,2,3,1,2,3]

var res=arr.filter(function(item,index){

return arr.indexOf(item)==index

})

console.log(res)

_底层原理_

1、准备一个新的数组

2、循环遍历原始数组

->数组有多少项，函数执行多少次

->每一回，如果返回值是 true，就把这一项放在新数组里面

->如果返回值是 true，就把这一项不放在新数组里面

3、把新数组当作 filter 的返回值给出来

函数第一次执行

==>item==10,return item>20,return false

==>10 这个函数不放在新数组里面

函数第三次执行

==>item==30,return item>20,return true

==>30 这个函数放在新数组里面

函数第五次执行

==>item==50,return item>20,return true

==>50 这个函数放在新数组里面

==>every()

->语法：数组.every(function (item,index,arr){ })

->item：数组的每一项

->index:数组的每一项的索引

->arr:原始数组

->作用：判断原始数组里面是不是每一个都满足条件

-->返回值：是一个布尔值

->如果原始数组中每一个都满足条件，返回 true

->如果原始数组中每一个都不满足条件，返回 false

==>不改变原始数组

_底层原理_

1、假设一个变量为 true，表示所有数据都满足条件

2、循环遍历数组

==>执行传递进来的函数

==>如果函数返回的是 true，循环继续

==>返回的是 false，那么假设改成 false，结束循环

3、循环结束以后，假设当作 every 的返回值

var flag=true

函数第一次执行

item===10,return item<40,return true

什么也不做，循环继续

函数第二次执行

item===20,return item<40,return true

什么也不做，循环继续

函数第三次执行

item===30,return item<40,return true

什么也不做，循环继续

函数第四次执行

item===40,return item<40,return false

吧 flag 赋值为 false

break 结束循环

var arr=[10,20,30,40,50]

var res=arr.every(function(item,index,arr){

return item<40

})

console.log(res)

==>some()

->语法：数组.some(function (item,index,arr){ })

->item：数组的每一项

->index:数组的每一项的索引

->arr:原始数组

->作用：判断数组里面是不是有某一个满足条件

-->返回值：是一个布尔值

->如果数组中有任意一个满足条件，返回 true

->如果数组中所有数据都不满足条件，返回 false

==>不改变原始数组

_底层原理_

1、假设一个变量为 false，表示所有数据都满足条件

2、循环遍历数组

==>执行传递进来的函数

==>如果函数返回的是 false，循环继续

==>返回的是 true，改变假设变量 ，结束循环

3、循环结束以后，把假设变量当作 some 的返回值

var flag=false

函数第一次执行

item===10,return item>10,return false

什么也不做，循环继续

函数第二次执行

item===20,return item>20,return true

把 flag 赋值为 true

break 结束循环

循环结束后，把 false 的值当作 some 方法返回值

var arr=[10,20,30,40,50]

var res=arr.some(function(item,index,arr){

return item>10

})

console.log(res)

==>copyWithin()

->语法：数组.copyWithin (目标位置，开始索引，结束索引)

->目标位置：替换内容时，从哪一个位置开始替换

->开始索引：数组哪一个索引位置开始当作替换内容，默认值为 0；

->结束索引：数组哪一个索引位置结束当作替换内容，默认是末尾

->包前不包后

->作用：使用数组里面的内容替换数组里面的内容

-->返回值：一个新的数组

->替换后的数组

==>不改变原始数组

var arr=[100,200,300,400,500]

var res=arr.copyWithin(0,1,2)

//第一个参数表示不管用什么替换都从 0 位置开始替换

//第二个参数 1，表示原始数组索引[1]位置开始替换

//第三个参数 2，表示原始数组索引[2]位置结束查找，包前不包后

console.log(res)//200，200，300，400，500

==>fill()

->语法：数组.fill(要填充的数据，开始索引，结束索引)

->要填充的数据：数据填充数组里面的每一位

->开始索引：从哪一个索引开始填充，默认值是 0

->结束索引：填充到哪一个索引位置，默认值是末尾

->前提：数组要有 length

->包前不包后

->作用：使用指定的数据填充数组

-->返回值：填充好的数组

->

var arr=new Array(30)

var res=arr.fill("123")

console.log(arr)

console.log(res)

==>includes()

->语法：数组.includes(数据)

->作用：查看数组是不是有某一个数据

-->返回值：一个布尔值

->有这个数据，返回 true

->没有这个数据，返回 false

var arr =[10,20,30,40,50]

var res=arr.includes(40)

console.log(res)//true

==>flat()

->语法：数组.flat(数字)

->表示扁平化多少层，默认是 1

-> 参数可以填写为 Infinity (无限)

->作用：拍平数组

-->返回值：拍平后的数组

var arr =[10,[20,30],40,50]

var res=arr.flat(Infinity)

console.log(res)//[10,20,30,40,50]

==>flatMap()

->语法：数组.flatMap(function (item,index,arr {}))

->表示扁平化多少层，默认是 1

->作用：拍平数组,只能拍一层

-->返回值：一个新的数组

->一边拍平，一边映射

var arr =[[10,20,30],[40,50]]

var res=arr.flatMap(function (item,index,arr) {

return item.filter(function (item){

return item%2===0

})

})

console.log(res)//[10,20,30,40,50]

==>find()

->语法：数组.find(function (item){})

->作用：根据条件找到数组里面满足条件的数据

-->返回值：找到的那个**数据**

var arr =[10,20,30,40,50]

var res=arr.find(function(item){

return item>20

})

console.log(res)//数据 30

==>findIndex()

->语法：数组.findIndex(function (item){})

->作用：根据条件找到数组里面满足条件的数据

-->返回值：找到的那个**数据的索引**

var arr =[10,[20,30],40,50]

var res=arr.findIndex(function(item){

return item>20

})

console.log(res)//索引 2