前端开发中有哪些常用的数组操作方法？

javascript数组

简介

JavaScript 数组用于在单一变量中存储多个值。

JavaScript数组是无类型的，数组元素可以是任意类型，并且同一个数组中元素类型也可以不同。

实例

var cars = ["Saab", "Volvo", "BMW"];

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW"; 

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

数组常用方法

• • 一、操作方法

  • • indexOf()

  • • includes()

  • • find()

  • • splice()

  • • pop()

  • • shift()

  • • splice()

  • • slice()

  • • push()

  • • unshift()

  • • splice

  • • concat()

  • • 增

  • • 删

  • • 改

  • • 查

• • 二、排序方法

  • • reverse()

  • • sort()

• • 三、转换方法

  • • join()

• • 四、迭代方法

  • • some()

  • • every()

  • • forEach()

  • • filter()

  • • map()

更多详细内容，请查看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

React中常用数组方法

在react中，或者说在前端对于数组的操作中，常用的几个比较复杂的数组操作方法基本有如下几类：

• • 遍历

• • 过滤

• • 筛选

forEach()

遍历每⼀个对象

foreach会从头到尾对数组里的每个元素遍历一遍 ，不会生成新数组，也不改变原数组

回调函数接收三个值，分别是 数组的元素，索引和当前数组

let arr = ["a","b","c","d"]
arr.forEach((el,index,array) => {
    if(el == "b" ) return
    console.log(el,index,array)
})

let ids = [];
dataSource.forEach(x => {
    ids.push(x.id);
}) 

filter()

filter为过滤的意思，也就是说它会把满足条件的元素拿出来形成一个**新的数组**

过滤数据

const dataSource= [
    {id:'00011', name: '燃气具1'},
    {id:'00012', name: '净水器1'},
    {id:'00013', name: '大家电1'},
    {id:'00014', name: '厨房小店1'},
    {id:'00015', name: '生活电器1'},
    {id:'00016', name: '配件1'}
];
const newData = dataSource.filter(v => v.id!=='00011)

过滤数组中不存在的字段，并进行拼接

addressName: [
    provinceName,
    cityName,
    detailaddr,
    contPerson,
    tel,
]
.filter(Boolean)  //过滤掉为null的字段
.join('/'),   //每个字段之间用  /  进行拼接

显示效果：  河南/洛阳/131.....

巧妙的运用filter去除数组中重复的元素：

let phone = ['苹果','锤子','三星','华为','锤子','苹果','小米','锤子']
let result = phone.filter((el,index,arr) => {
  return arr.indexOf(el) == index
})
console.log(result)

map()

和foreach类似，map也会把数组的每一项都遍历一遍，

他会**返回一个新数组**，但是原数组保持不变，

值得注意的是，map不会对空数组进行检测

checkAll = () => {
    const {todos} = this.state
    const newTodo = todos.map((todo) => { 
        return {...todo, done: true}
    })

    this.setState({todos: newTodo})
}

filter VS map

相同点：filter 和 map 都是对数组的操作，均返回一个新的数组,filter()不会改变原始数组,map()同样不会改变原数组

不同点：

• • filter是满足条件的留下，是对原数组的过滤；

• • map则是对原数组的加工 [返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组]，映射成一对一映射的新数组

some()

遍历数组的每一项，若其中一项为 true，则返回true；

let arr = [1, 2, 3];
let result = arr.some((item, index, arr) => {
    return item < 2;
})
console.log(result) // true

every()

测试一个数组内的所有元素是否都能通过某个指定函数的测试。

如果所有数组项都满足条件则返回true。

它返回一个布尔值。

let arr = [1, 2, 3];
let result = arr.every((item, index, arr) => {
    return item < 2;
})
console.log(result) // false

const isFlag = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isFlag)); // true

find()

找到满足条件的数据:找到返回true,否则undefined

var ages = [3, 10, 18, 20];
 
function checkAdult(age) {
    return age >= 18;
}
 
function myFunction() {
    document.getElementById("demo").innerHTML = ages.find(checkAdult);
} 

myFunction() // 18

includes()

用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

const arr = ['a','b','c','d']
console.log(arr.includes('a'),arr.includes('e')); 
//   结果 true，false

split()

用于把一个字符串分割成字符串数组。

var b = "f-ff-gg-ll-kkk";
var c = b.split("-",3);
console.log(c);
//["f", "ff", "gg"]

总结与扩展

map()
    - 可以根据原有数组返回一个新数组
    - 需要一个回调函数作为参数，回调函数的返回值会成为新数组中的元素
    - 回调函数中有三个参数：
        第一个参数：当前元素
        第二个参数：当前元素的索引
        第三个参数：当前数组

filter()
    - 可以从一个数组中获得符和条件的元素
    - 会根据回调函数的结果来决定是否保留元素，true保留，false不保留

find()
    - 可以从一个数组中获得符和条件的第一个元素

以上数组方法是在开发过程中经常使用的几个而已，肯定还有其他部分，这里不一一列举。