JavaScript数组操作方法详解-优快云博客

本文链接：https://blog.youkuaiyun.com/wangyangzxc123/article/details/120874760

arr.join()

不会改变原数组, 将数组转换成字符串格式.默认以逗号分割, 可以修改

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

const arrd = arr.join()

// 默认以逗号分割 可以修改分割的方式
console.log(arrd) // 1,2,3,4,5

const arrd = arr.join('-')

console.log(arrd) // 1-2-3-4-5

arr.every()

every口诀: 查找数组里"不符合"条件, 直接原地返回false

arr.every(obj => obj.c === true)

arr.push()

从后面添加元素,返回值为添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.push(5))   // 6
console.log(arr) // [1,2,3,4,5,5]

arr.pop()

从后面删除元素.只能是一个.返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.pop())     // 5
console.log(arr)  //[1,2,3,4]

arr.shift()

从前面删除元素.只能删除一个, 返回值是删除的元素

let arr = [1,2,3,4,5]
console.log(arr.shift())  // 1
console.log(arr)   // [2,3,4,5]

arr.unshift()

从前面添加元素, 返回值是添加完后的数组的长度

let arr = [1,2,3,4,5]
console.log(arr.unshift(2))    // 6
console.log(arr)  //[2,1,2,3,4,5]

arr.splice(i,n)

删除从i(索引值)开始之后的那个元素。返回值是删除的元素

参数： i 索引值 n 个数

let arr = [1,2,3,4,5]
//console.log(arr.splice(2,2))     //[3,4]
//console.log(arr)    // [1,2,5]

使用splice还可以这样

arr.splice(0,0,'x')

参数1 代表从索引几开始,

参数2 代表覆盖几个

参数3 代表用什么覆盖参数2的个数

let arr = [1, 2, 3, 4, 5, 6]
arr.splice(0, 0, 'x')
console.log(arr);

// ['x', 1, 2, 3, 4, 5, 6]

---------------------------
let arr = [1, 2, 3, 4, 5, 6]
arr.splice(0, 1, 'x')
console.log(arr);

//  [ 'x', 2, 3, 4, 5, 6 ]

---------------------------

let arr = [1, 2, 3, 4, 5, 6]
arr.splice(1, 2, 'x')
console.log(arr);

//[ 1, 'x', 4, 5, 6 ]

arr.indexOf()

查找某个元素的索引值，若有重复的，则返回第一个查到的索引值若不存在，则返回 -1

let arr = [1,2,3,4,5,2]
let arr1 = arr.indexOf(2)
console.log(arr1)  // 1
let arr2 = arr.indexOf(9)
console.log(arr2)  // -1

arr.forEach(callback)

遍历数组,无return 即使有return，也不会返回任何值，并且会影响原来的数组

　　callback的参数： value --当前索引的值

　　　　　　　　　　index --索引

　　　　　　　　　　array --原数组

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    //  value:1    index:0     array:1,2,3,4,5
    //  value:2    index:1     array:1,2,3,4,5
    //  value:3    index:2     array:1,2,3,4,5
    //  value:4    index:3     array:1,2,3,4,5
    //  value:5    index:4     array:1,2,3,4,5

let arr = [1,2,3,4,5]
arr.forEach( (value,index,array)=>{
        value = value * 2
        console.log(`value:${value}    index:${index}     array:${array}`)
    })   
    console.log(arr)
    // value:2    index:0     array:1,2,3,4,5
    // value:4    index:1     array:1,2,3,4,5
    // value:6    index:2     array:1,2,3,4,5
    // value:8    index:3     array:1,2,3,4,5
    // value:10   index:4     array:1,2,3,4,5
    // [1, 2, 3, 4, 5]

var arr = [1,2,3,4]; 
var res = arr.forEach((item,index,arr)=>{     
 arr[index] = item * 2; 
 return arr 
})
console.log(arr); // [2,4,6,8]
console.log(res); // undefined

arr.some()

依据判断条件，数组的元素是否有一个满足，若有一个满足则返回ture

　　　　callback的参数： value --当前索引的值

　　　　　　　　　　 index --索引

let arr = [1,2,3,4,5]
let arr1 = arr.some( (value, index) =>value<3)
console.log(arr1) // true
let arr2 = arr.some( (value, index) =>value>6)
console.log(arr2) // false

arr.filter()

筛选过滤选择满足条件的. 会一直循环直到找到结果

      var array = [12, 66, 4, 88, 34, 54];
      var newArr = array.filter(function (value, index) {
        return value >= 20;
      });
      console.log(newArr); 
      //[ 66, 88, 34, 54 ]

方法2: 取反不满足当前需求的

     var arr = [
       {id:1,name:'zs',age:11},
       {id:2,name:'ww',age:13},
       {id:3,name:'ls',age:14},
       {id:4,name:'ss',age:14}
     ]
     let a = arr.filter(obj=>obj.id ===1)
     console.log(a);//返回一个对象{id:1,name:'zs',age:11}
     let b = arr.filter(obj=>obj.id !==1)
     console.log(b);//取反返回除去id =1的所有对象

Vue

替换更新$set()


    //参数  第一个需要更新的对象   需要更新的位置   需要更新的值
 
    this.$set(this.arr,0,100)

arr.reverse()

翻转数组

      var array = [12, 66, 4, 88, 34, 54];
      array.reverse()
      console.log(array);

      // [ 54, 34, 88, 4, 66, 12 ]

当我们需要翻转对象的时候可以这样

    var arr = 'hello'
   console.log(arr.split('').reverse().join(''))

vue reduce(参数1,参数2) 新值(累加器),旧值

一般用于计算

<tr style="background-color: #EEE">
     <td>统计:</td>
     <td colspan="2">总价钱为: {{ allPrice }}</td>
     <td colspan="2">平均价: {{ svgPrice }}</td>
</tr>

<script>
// 目标: 总价和均价显示
// 1. 末尾补tr - 显示总价和均价
export default {
  // ...源代码省略
  // 2. 计算属性
  computed: {
      allPrice(){
          // 3. 求总价
          return this.list.reduce((sum, obj) => sum += obj.price, 0)
      },
      avgPrice(){
          // 4. 求均价 - 保留2位小数
          return (this.allPrice / this.list.length).toFixed(2)
      }
  }
}
</script>

map,

遍历原数组,生成新的数组,将数据的每一个元素拿出来处理完毕以后再放回去

[1,2,3].map(obj => obj > 10 ? obj : '0'+ obj)


//  [ '01', '02', '03' ]

数组去重用new Set(...arr).直接去重

var b = [1, 2, 3, 2, 32, 1, 3, 4, 5, 7, 4]
const a = new Set(b)
console.log(a);

//  Set(7) { 1, 2, 3, 32, 4, 5, 7 }

数组实现最大值查找 Math.max(...arr)

var arr = [1, 2, 3, 2, 32, 1, 3, 4, 5, 7, 4]
console.log(Math.max(...arr))

// 32

find()

用于找到第一个符合条件的数组成员.如果没有就返回undefined

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

arr.find((obj)=>obj>2) //3

findlindex()

用于查找第一个符合条件的成为索引(index)位置,如果没有就返回-1

const arr = [1, 5, 10, 15]

const b = arr.findIndex(function (value, index, arr) {
  return value > 9;
})

console.log(b);

// 2

sort 排序

// 对数字进行排序，简写
const arr = [3, 2, 4, 1, 5]
arr.sort((a, b) => a - b)
console.log(arr) // [1, 2, 3, 4, 5]

arr.sort((a, b) => b - a)
console.log(arr)  // [5, 4, 3, 2, 1]

// 对字母进行排序，简写
const b = ['b', 'c', 'a', 'e', 'd']
b.sort()
console.log(b) // ['a', 'b', 'c', 'd', 'e']

includes .是否包含,返回true false

var a = [1, 2, 3]
var b = 3
var c = a.includes(b)
console.log(c);// true


var a = [1, 2, 3]
var b = [1]
var c = a.includes(b)
console.log(c);// false


var a = [1, 2, 3]
var b = [1,2]
var c = a.includes(b)
console.log(c);// false


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

arr.includes(1, -1); //false

arr.includes(2, -4); //true

当fromIndex 参数负值，则按升序从 array.length + fromIndex 的索引开始 搜索

arr.length = 4

第一题: arr.includes(1, 4 + (-1) ) => arr.includes(1,3) 从索引3开始,所以没有找到元素返回false

第二题: arr.includes(2, 4 + (-4)) => arr.includes(2,0) 也就是从索引0开始,找到元素返回true

slice 截取数组对象的具体某个值

var a = ['asd', 'dds', 'fsda']
a.filter((item) => {
  console.log(item.slice(0, 1))
})


//  a,  d,  f,

concat() 合并数组的方法

或者使用扩展运算

var a = [1, 3, 4, 2, 3, 4, 5]
var b = [3, 2, 3, 5, 6, 7, 8, 3, 4]
// var c = [...a, ...b]
c = a.concat(b)
console.log(c)