javascript数组
简介
JavaScript 数组用于在单一变量中存储多个值。
JavaScript数组是无类型的，数组元素可以是任意类型，并且同一个数组中元素类型也可以不同。
实例
var cars = ["Saab", "Volvo", "BMW"];
什么是数组？
数组是一种特殊的变量，它能够一次存放一个以上的值。
如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？
解决方法就是数组！
数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。
数组常用方法
-
一、操作方法
-
增
- push()
- unshift()
- splice
- concat()
-
删
- pop()
- shift()
- splice()
- slice()
-
改
- splice()
-
查
- indexOf()
- includes()
- find()
-
-
二、排序方法
- 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()
- 可以从一个数组中获得符和条件的第一个元素
以上数组方法是在开发过程中经常使用的几个而已，肯定还有其他部分，这里不一一列举。
参考文档
- https://www.w3school.com.cn/js/js_arrays.asp
- https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array
- https://blog.csdn.net/qq_50059788/article/details/115126140
- https://www.cnblogs.com/qisi007/p/9973887.html
