js数组常用方法

目录

目录

创建数组

 数组常用方法

0.Array.isArray() 用于确定传递的值是否是一个 Array。

1.Array.of() 返回一个由参数组成的数组

2.Array.from() 将数组对象转换为数组 不改变原对象 返回新数组

3.pop() 删除数组最后一个元素（改变原数组） 返回被删除的元素

4.shift() 删除数组的第一个元素 (改变原数组) 返回被删除的元素

5.push() 向末尾添加元素（改变原数组） 返回添加后的length

6.unshift() 向数组开头添加元素（改变原数组） 返回添加后数组的length

7.reverse() 反转数组 改变原数组

8.splice() 添加/删除/替换 当前数组改变

9. sort() 数组排序 (改变原数组) 参数为规定排序的比较函数(非必填)

10.copyWithin() 数组的指定位置复制[改变原数组、ES6]

11.fill()数组的填充 [改变原数组、ES6]

 12.slice() 拷贝数组元素 [不改变原数组]

 13.join()将数组转换为字符串[不改变原数组]

 14.concat() 连接合并多个数组，返回新数组。[不改变原数组]

15.toString() 方法可把数组转换为字符串，并返回结果。[不改变原数组]

16.indexOf() 查找数组中某元素的第一个索引值。[不改变原数组] 如果没有就返回-1

17.lastIndexOf() 逆向查找指定元素在数组中的第一个位置。[不改变原数组]

18.includes() 查找数组是否包含某个元素。[不改变原数组,]

数组中遍历方法整理

1.forEach 按升序依次遍历数组中的值

2.some()检测数组中是否存在满足条件的元素

3.every()检测数组中的元素是否全部满足条件

4.filter()过滤原数组，返回新数组 

5.map() 对数组中的每一个元素都进行处理，返回新的数组

6.keys() 遍历键名 / values() 遍历键值/ entries() 遍历键值对

7.reduce()数组的累加器，合并成为一个值。

8.find() / findIndex() 根据条件找到数组成员 [ES6]

9.flat()深度遍历展开数组

例子 多层数组去重 再排序

例子  数组打乱 

创建数组

• var arr = [1, 2, 3] //123
• var arr1 = new Array()//[]
• var arr2 = Array(1, 2, 3)//1,2,3
• var arr3 = Array(3)//[,,]

 数组常用方法

0.Array.isArray() 用于确定传递的值是否是一个 Array。

Array.isArray([1, 2, 3]);  
// true
Array.isArray({foo: 123}); 
// false
Array.isArray("foobar");   
// false
Array.isArray(undefined);  
// false

1.Array.of() 返回一个由参数组成的数组

 let arr4 = Array.of(1, 2, 3)//123

2.Array.from() 将数组对象转换为数组 不改变原对象 返回新数组

let a = { 0: '1', 1: '2', 2: '3', 'length': 3 };//对象
    let arr5 = Array.from(a)
    console.log(arr5)

    let b = Array.from('hello')//字符串
    console.log(b)

    let arrset = Array.from(new Set('func'))
    console.log(arrset)

    let arrMap = Array.from(new Map().set([1, 2], [3, 4], [5, 6]))
    console.log(arrMap)
    //类似map方法
    let thearr = Array.from([1, 2, 3], x => x * 2)
    console.log(thearr)

3.pop() 删除数组最后一个元素（改变原数组） 返回被删除的元素

  {
        let arr = [1, 2, 3]
        let deleteitem = arr.pop()//3
        console.log(arr)//[1,2]
    }

4.shift() 删除数组的第一个元素 (改变原数组) 返回被删除的元素

{
        let arr = [1, 2, 3]
        let deleteitem = arr.shift()//1
        console.log(arr)//2,3
    }

5.push() 向末尾添加元素（改变原数组） 返回添加后的length

 {
        let arr = [1, 2, 3]
        let thelength = arr.push(4)//4
        console.log(arr)//1,2,3,4
    }

6.unshift() 向数组开头添加元素（改变原数组） 返回添加后数组的length

 {
        let arr = [1, 2, 3]
        let thelength = arr.unshift(4)//4
        console.log(arr)//4,1,2,3
    }

7.reverse() 反转数组 改变原数组

{
        let arr = [1, 2, 3]
        arr.reverse()
        console.log(arr)//321
    }

8.splice() 添加/删除/替换 当前数组改变

表达式 arr.splice(index, num, item1, item2, ...);

 参数说明

1. 第一个参数为 一个整数，用来指定添加/删除元素的位置，可以用负数来从尾部开始数 必填参数
2. 第二个参数为 删除元素的数量，若不想删除可以设置为0 可选参数
3. 再后面的参数为 向数组添加的元素 可选参数

如果是删除操作,那么会把删除的元素放在一个新数组中返回。

1.操作的元素会包括开始的元素

2.如果数组的元素不够，会一直删除到数组的最后一位

 //删除元素
    let arrsplice = [1, 2, 3, 4, 5, 6]
    let before = arrsplice.splice(0, 3)// 删除 arrsplice 的前三个元素
    console.log(before)
    console.log(arrsplice)//删除后arraplice 为删除后的样子
    let after = arrsplice.splice(-1, 1)//删除最后一位
    console.log(after)

    //添加元素
    {
        let arr = [1, 2, 3, 4, 5]
        let addFromStart = arr.splice(0, 0, 7)//没有删除 并向第一位添加一个数值
        console.log(arr)//712345
        console.log(addFromStart)//[]

        let addFromEnd = arr.splice(-1, 0, 6)//从最后以为开始向前添加元素，
        console.log(arr)//7123465
        console.log(addFromEnd)//[]
    }

    //删除并添加 /替换
    {
        let arr = [1, 2, 3, 4, 5, 6, 7]
        let addAndeDelete = arr.splice(0, 1, 100)//[1]
        console.log(arr)//[100,2,3,4,5,6,7]
    }

9. sort() 数组排序 (改变原数组) 参数为规定排序的比较函数(非必填)

{
        // 默认情况下，不传参数的话，默认按字母升序，若为非字符串,则先调用toString()将元素转化为字符串的 Unicode ,再进行字符串比较
        let arr = ["A", "C", "B", "E", "D"];
        arr.sort();
        console.log(arr); //["A","B","C","E","D"]
    }
    {   //数组的升序与降序排序
        let arr = [1, 0, 5, 4, 9, 45, 78, 6, 14, 2];
        arr.sort((a, b) => a - b)
        console.log(arr)//[0, 1, 2, 4, 5, 6, 9, 14, 45, 78]
    }
    { //按年龄排序，若年龄相同，就女士(sex属性为0) 排在男士(sex属性为1)之前
        let arr = [{ age: 18, sex: 0 }, { age: 19, sex: 0 }, { age: 20, sex: 0 }, { age: 18, sex: 1 }, { age: 19, sex: 1 }];
        arr.sort((a, b) => {
            if (a.age === b.age) { //若年龄相同就按性别排，女士优先
                return a.sex - b.sex;
            } else { //年龄不相同就默认按年龄排升序
                return a.age - b.age;
            }
        })
        console.log(arr)
    }

10.copyWithin() 数组的指定位置复制[改变原数组、ES6]

语法：arr.copyWithin(index, start, end)

第一个参数：复制到指定目标索引位置。

第二个参数：元素复制的起始位置 (可选)

第三个参数：停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。(可选)

 {
        let arr = [1, 2, 3, 4, 5, 6];
        let a = arr.copyWithin(2, 0, 3);
        console.log(arr)// [1, 2, 1, 2, 3, 6]
    }

11.fill()数组的填充 [改变原数组、ES6]

语法：arr.fill(value, start, end)

value    必需。填充的值。

start    可选。开始填充位置。

end  可选。停止填充位置 (默认为 array.length)

{
        let arr = new Array(3)
        arr.fill('填充')
        console.log(arr)//["填充", "填充", "填充"]
        arr.fill('位置', 0, 1)
        console.log(arr)// ["位置", "填充", "填充"]
    }

 12.slice() 拷贝数组元素 [不改变原数组]

两个参数为 复制索引开始 和复制索引结束

{
        let a = [1, 2, 3, 4]
        let b = a.slice(0, 2)
        console.log(b)//1,2
    }

 13.join()将数组转换为字符串[不改变原数组]

可选参数为指定分隔符

{
        let arr = [1, 2, 3, 4]
        let b = arr.join('-')
        console.log(b)//1-2-3-4
        console.log(typeof b)//string
    }

 14.concat() 连接合并多个数组，返回新数组。[不改变原数组]

{
        let a1 = [1, 2]
        let a2 = [4, 5]
        let a3 = [6, 7]
        let a4 = a1.concat(a2, a3)
        console.log(a4)// [1, 2, 4, 5, 6, 7]
    }

15.toString() 方法可把数组转换为字符串，并返回结果。[不改变原数组]

  {
        let arr = ['xiao', 'hao', 'wen', 24]
        let b = arr.toString()
        console.log(b)//xiao,hao,wen,24
    }

16.indexOf() 查找数组中某元素的第一个索引值。[不改变原数组] 如果没有就返回-1

第一个参数为查找的值 第二个参数为查找的起始位

 {
        let arr = [1, 2, 3, 4, 5, 6]
        console.log(arr.indexOf(3))//2 
        console.log(arr.indexOf(3, 3))//-1
        console.log(arr.indexOf(8))//-1
    }

17.lastIndexOf() 逆向查找指定元素在数组中的第一个位置。[不改变原数组]

第一个参数为查找的值 第二个参数为逆向查找的起始位

 {
        let arr = [1, 1, 3, 4, 5, 1];
        console.log(arr.lastIndexOf(1))//5
        console.log(arr.lastIndexOf(1, -2))//1
    }

18.includes() 查找数组是否包含某个元素。[不改变原数组,]

第一个参数为要查找的值 必填

 第二个为查找的起始位置

 返回值 true或false

{
        let arr = [1, NaN, 100, '42'];
        console.log(arr.includes(1)); //true
        console.log(arr.includes(NaN)); //true
        console.log(arr.includes(1, 3)); //false

    }

数组中遍历方法整理

1.forEach 按升序依次遍历数组中的值

语法 arr.forEach(function(value, index, arr), this);

 

value(必须): 当前遍历时的数组值。

index(可选): 当前遍历时的索引值。

arr(可选): 数组对象本身。

this(可选): 执行回调函数时的。

    {
        let arr = [ 1,2,3,4,5,6]
        arr.forEach((value,index)=>{
            console.log(value)//值
            console.log(index)//下标
        })
    }

2.some()检测数组中是否存在满足条件的元素

语法 arr.some(function(value, index, arr), this);

参数值同froEach一样

返回值：布尔类型 ture / false

  {
        let arr = [1,2,3,4,5]
        let result = arr.some(value=>value>6)//false
        let result1 = arr.some(value=>value>2)//true
        console.log(result,result1)
    }

3.every()检测数组中的元素是否全部满足条件

  {
        let arr = [1,2,3,4,5]
        let result = arr.map(item=> item*2)
        console.log(result)//[2, 4, 6, 8, 10]
    }

    // find()

4.filter()过滤原数组，返回新数组 

 {
        let arr = [1,2,3,4,5]
        let result = arr.filter(item=> item>2)
        console.log(result)//[3, 4, 5]
    }

5.map() 对数组中的每一个元素都进行处理，返回新的数组

    {
        let arr = [1,2,3,4,5]
        let result = arr.map(item=> item*2)
        console.log(result)//[2, 4, 6, 8, 10]
    }

6.keys() 遍历键名 / values() 遍历键值/ entries() 遍历键值对

   {
        for(let i of ['a','b','c'].keys()){
            console.log(i)//keys()遍历下标 0 1 2
        }
        for(let item of ['a','b','c'].values()){
            console.log(item)//values()遍历值 a b c
        }
        for (let [i,item] of ['a','b','c'].entries()){
            console.log(i,item)//entries()遍历下标以及内容 
        }
    }

7.reduce()数组的累加器，合并成为一个值。

语法 arr.reduce((total, value, index, arr), init)

参数 total(必须)：初始值，之后为上一次回调的返回值。

 value(必须): 数组元素的值。

 index(可选): 索引值。

arr(可选): 数组对象。

 init(可选): 初始值。

返回值 ：累加后的值

{
        let arr = [1,2,3,4,5]
        let sum = arr.reduce((total,value)=>total +value)
        console.log(sum)//15
    }

reduce小案例 找出数组中元素有几个

{ 
  let arr = ['肖','肖','肖','肖','肖','肖','皓','文']
  let arr2 = arr.reduce((prev,cur,idx,arr)=>{
    if(cur in prev){
      prev[cur]++
    }else{
      prev[cur] = 1
     
    }
    return prev
    
  },{})
  Object.keys(arr2).forEach(item=>{
    console.log(item,arr2[item])
  })
}

8.find() / findIndex() 根据条件找到数组成员 [ES6]

语法arr.find(function(value, index, arr), this);

参数值同froEach一样

返回值： find()返回第一个符合条件的数组成员，若不存在返回undefined。 findIndex()返回符合条件的数组成员的索引。

{
        let arr= [1,2,3,4,5]
        let result = arr.find(item=>item>3)
        console.log(result)//4 第一个值
        let result1 = arr.findIndex(item=>item>3)
        console.log(result1)//3 第一个值的下标
    }

9.flat()深度遍历展开数组

参数: depth(可选): 提取嵌套数组的结构深度，默认为1。

返回值：展开后的新数组。

flat方法会移除数组中的空白项

若不清楚有多少层嵌套，可以直接用 Infinity 设置，就可全部展开

Infinity 正无穷大的数值。

{
        let arr = [1,2,[3,[4,[5]]],6]
        let one = arr.flat()
        console.log(one)//[1, 2, 3, Array(2), 6]

        let inf = arr.flat(Infinity)
        console.log(inf)//[1, 2, 3, 4, 5, 6]
    }

例子 多层数组去重 再排序

{
        let arr = [1,3,2,4,8,6,[5,1,3,5,9,10,5,[1,5,3,6,7,8,11,7,66]]]
        let newarr = Array.from(new Set(arr.flat(Infinity))).sort((a,b)=>a-b)
        console.log(newarr)//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 66]
    }

例子  数组打乱 

实现原理是  循环数组  在每次遍历中产生一个0 ~ length - 1的数，该数代表本次循环要随机交换的位置。将本次循环当前位置的数和随机位置的数进行交换。

var  arr  = [1,2,3,4,5,6,7,8,9]

for(let i =0;i<arr.length;i++){
    let sum = parseInt(Math.random()*(arr.length-1))
    let copyarr = arr[i];
         arr[i] = arr[sum]
         arr[sum] = copyarr
}
console.log(arr)