0 汇总
- every() 检测数值元素的每个元素是否都符合条件。 返回bool 全部满足才是true
- some() 检测数组中的元素是否满足指定条件 返回bool 只要有一个满足就是true
- filter() 返回符合条件item组成的新数组。
- find() 返回符合条件的第一个 元素item。
- findIndex() 返回符合条件的第一个元素 索引index。
- forEach() 改变原数组 没返回值
- map() 不改变原数组 返回新数组
- slice() 返回截取的元素新数组 arr.slice(1,3);
1.find() 工作中应用案例
需求 有一个组件是级联关系（楼层-区域） 都是下拉 楼层的ID 用来作为区域下拉请求的参数 数据结构如下
id: 33
label: "T1-交通中心"
value: "T1_T
选择区域时候 需要用楼层的 value 来遍历楼层的数据源 找到对应的id请求区域数据 这时候用find 能直接找到对应的 item
之后 item.id 就是目标参数
1.arr 去重
工具：
//1. 求数组中最大值
function arrMax(arr) {
let max = arr[0]
for (let index = 0; index < arr.length; index++) {
if (arr[index] > max) {
max = arr[index]
}
}
return max
}
// 2. 数组去重
function arrUnique(arr) {
let endArr = []
for (let i = 0; i < arr.length; i++) {
let item = arr[i]
// 如果不包含 item 就添加item 或者用indexOf === -1
if (!endArr.includes(item)) {
endArr.push(item)
}
}
return endArr
}
// 方式2 代码最少 （用了Set()）
function arrUnique2(arr) {
return Array.from(new Set(arr))
}
1.将数组[2, 0, 6, 1, 77, 0, 52, 0, 25, 7]去重
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
console.log(arrUnique2(arr));
2.arr 转化为字符串 */
let arr10 = arr.join('-') // 例子：arr1.join('-')
console.log(arr10);
3.arr 反转
var arr2 = ['pink', 'red', 'blue'];
arr2.reverse();
console.log(arr2);
4. 数组排序（冒泡排序）
var arr1 = [13, 4, 77, 1, 7];
arr1.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
console.log(arr1);
// 冒泡排序
var arr = [4, 1, 2, 3, 5];
for (var i = 0; i <= arr.length - 1; i++) { // 外层循环管趟数
for (var j = 0; j <= arr.length - i - 1; j++) { // 里面的循环管 每一趟的交换次数
// 内部交换2个变量的值 前一个和后面一个数组元素相比较
if (arr[j] < arr[j + 1]) {
var temp = arr[j];
arr[j] = arr[j + 1];
arr[j + 1] = temp;
}
}
}
console.log(arr);
/* 5. 数组解构 */
let ary = [1, 2, 3];
let [a, b, c, d, e] = ary;
console.log(a) 1
console.log(b) 2
console.log(c) 3
console.log(d) undefined
console.log(e) undefined
// 数组操作：
1.push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
2.unshift() 在数组的开头 添加一个或者多个数组元素 (用法和push一样)
** 注意：push，unshift 完毕之后，返回新数组的长度 原数组也会发生变化 **
let arr = [1,2,3]
let changdu = arr.push(4, 'pink')
console.log(changdu) // 5 返回新数组长度
console.log(arr) // [1, 2, 3, 4, "pink"]
---------------------------------------------------------------------------
3. pop() 删除数组最后一个元素
4. shift() 删除数组第一个元素
** 注意：一次只能删除一个元素；pop() 没有参数； 返回删除的那个元素； 原数组也会发生变化 **
---------------------------------------------------------------------------
5.splice(index, 1)
删除指定的元素：that.imgList.splice(index, 1);
/*-------------forEach----------------------------*/
var eachArr = [1, 2, 3];
eachArr.forEach((value, index, array) => {
console.log('元素' + value);
console.log('索引' + index);
console.log('数组本身' + array);
})
- arr 的方法 findIndex() filter() includes() / indexOf()
<script type="text/javascript">
// arr 的方法 findIndex() filter() includes()
// 0. find 返回满足条件的第一个item 数据
var arr0 = [{ id: 1, name: '张三' }, { id: 2, name: '李四' }];
let target = arr0.find(item => item.id > 0);
console.log(target) // 返回的是一个item 对象
// 1.findIndex() 返回满足条件的第一个item索引
// 参数必须是函数
let ary = [10, 20, 50];
let index = ary.findIndex(item => item > 15);
console.log(index) // 返回的是 1
// 2. filter 数组过滤 返回满足条件的新数组 不影响原数组
let arr2 = ary.filter(item => item > 15)
console.log(arr2); // 返回的是 [20,50]
// 等价代码
let arr3 = []
for (let i = 0; i < ary.length; i++) {
if (ary[i] > 15) {
arr3.push(ary[i])
}
}
console.log(arr3);
// 3.includes() / indexOf()
includes() 返回 bool 是否包含
indexOf() 返回 满足条件的第一个索引
// includes()
let arr4 = [1, 2, 3]
let bool1 = arr4.includes(2)
console.log(bool1); // true
// indexOf()
let arr5 = [1, 2, 3, 1]
let suoyin = arr5.indexOf(1)
console.log(suoyin); // 0 返回的也是满足条件的第一个索引
</script>
2.map （返回新数组）
对数组每一项进行指定参数函数操作，返回一个新的数组
const arr = [1,2,3]
// map 返回新数组 不影响原来数组
const arr2 = arr.map((item)=>{
return item * 2
})
console.log(arr,'-----',arr2); // [1, 2, 3] "-----" [2, 4, 6]
3.reduce的简单用法
- 我们常用的数组求和，求乘积
var arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24
稍微高级用法
- 需求： 计算数组中每个元素出现的次数
方法1：
var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
var countedNames = names.reduce((obj, name) => {
if (name in obj) {
obj[name]++
} else {
obj[name]=1
}
return obj
}, {})
//reduce的第二个参数就是obj的初始值
console.log(countedNames)
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
方法2：
定义一个方法 获取元素次数
function getEleNums(data) {
var map = {}
for (let i = 0; i < data.length; i++) {
var key = data[i]
if (map[key]) {
map[key] += 1
} else {
map[key] = 1
}
}
return map
}
调用
var data = ['b','a','c','a','b','b','b','c','c','a','c','a','a','a','b','c']
// var data = [1,2,3,1,1,2,3,]
let obj = getEleNums(data)
console.log(obj)
// 遍历 obj
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
const element = obj[key];
console.log(key+'出现'+element+'次');
}
}
b出现5次
a出现6次
c出现5次
4.every()
- 检测数组所有元素是否都符合指定条件
- 如果数组中有一个元素不满足，则返回 false ，且剩余的元素不会再进行检测。
- 如果所有元素都满足条件，则返回 true。
检查数组中是否全部大于18
var ages = [32, 33, 16, 40];
let bool = ages.every((item)=>{
return item > 18
})
console.log(bool);
