forEach方法
迭代(遍历) 数组
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
// forEach 迭代(遍历) 数组
var arr = [1, 2, 3];
var sum = 0;
arr.forEach(function(value, index, array) {
console.log('每个数组元素' + value);
console.log('每个数组元素的索引号' + index);
console.log('数组本身' + array);
sum += value;
console.log(sum);
</script>
</body>
</html>
filter
查找满足条件的元素 返回的是一个数组
而且是把所有满足条件的元素返回回来
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测。
注意: filter() 不会改变原始数组。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
// filter 筛选数组
var arr = [12, 66, 4, 88, 3, 7];
var newArr = arr.filter(function(value, index) {
// return value >= 20;
return value % 2 === 0;
console.log(newArr);
</script>
</body>
</html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let arr= [
{id:1,name: "a", age: 12},
{id:2,name: "b", age: 15},
{id:3,name: "c", age: 16},
{id:4,name: "d", age: 17},
{id:5,name: "e", age: 14},
{id:5,name: "f", age: 10},
{id:5,name: "g", age: 19}
let newarr=arr.filter(function(item){
return item.age>15
console.log(newarr)
// [{id: 3, name: 'c', age: 16}
// {id: 4, name: 'd', age: 17}
// {id: 5, name: 'g', age: 19}]
</script>
</body>
</html>
find() 方法返回通过测试(函数内判断)的数组的第一个元素的值。
find() 方法为数组中的每个元素都调用一次函数执行:
当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的。
注意: find() 并没有改变数组的原始值。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let arr = [1, 2, 3];
let arr1 = arr.find(function (item) {
return item >= 2
console.log( arr1); // 2
</script>
</body>
</html>
some
查找满足条件的元素是否存在 返回的是一个布尔值
如果查找到第一个满足条件的元素就终止循环
some() 方法会依次执行数组的每个元素:
如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素,则返回false
注意: some() 不会对空数组进行检测。
注意: some() 不会改变原始数组。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
// some 查找数组中是否有满足条件的元素
// var arr = [10, 30, 4];
// var flag = arr.some(function(value) {
// // return value >= 20;
// return value < 3;
// });
// console.log(flag);
var arr1 = ['red', 'pink', 'blue'];
var flag1 = arr1.some(function(value) {
return value == 'pink';
console.log(flag1);
// 1. filter 也是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来
// 2. some 也是查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环
</script>
</body>
</html>
Map和Set
Map类型是键值对的有序列表,键和值是任意类型
Set 是唯一值的集合。
每个值在 Set 中只能出现一次。
一个 Set 可以容纳任何数据类型的任何值。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<script>
// 集合:表示无重复值的有序列表
let set = new Set();
console.log(set);
// 添加元素
set.add(2);
set.add('4');
set.add('4');
// set.add(['hello','world',3]);
// 删除元素
set.delete(2);
// 校验某个值是否在set中
console.log(set.has('4')); // true
console.log(set.size); // 1
/* set.forEach((val,key)=>{
console.log(val);
console.log(key);
}) */
// 将set转换成数组
let set2 = new Set([1, 2, 3, 3, 3, 4]);
// 扩展运算符
let arr = [...set2]
console.log(arr); // 1, 2, 3, 4
// 1.set中对象的引用无法被释放
// let set3 = new Set(),obj = {};
// set3.add(obj);
// // 释放当前的资源
// obj = null;
// console.log(set3);
let set4 = new WeakSet(),
obj = {};
set4.add(obj);
// 释放当前的资源
obj = null;
console.log(set4);
// WeakSet
// 1.不能传入非对象类型的参数
// 2.不可迭代
// 3.没有forEach()
// 4.没有size属性
// Map类型是键值对的有序列表,键和值是任意类型
/* let map = new Map();
map.set('name','张三');
map.set('age',20);
console.log(map.get('name'));
console.log(map);
map.has('name');//true
map.delete('name');
map.clear();
console.log(map);
map.set(['a',[1,2,3]],'hello');
console.log(map); */
let m = new Map([
['a', 1],
['c', 2]
console.log(m);
</script>
</body>
</html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let first = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
let second = new Map([
[1, 'uno'],
[2, 'dos']
// Map对象同数组进行合并时,如果有重复的键值,则后面的会覆盖前面的。
let merged = new Map([...first, ...second, [1, 'eins']]);
console.log(merged.get(1)); // eins
console.log(merged.get(2)); // dos
console.log(merged.get(3)); // three
let arr = [2,3,5,6,7,8]
let arr1 = arr.map(function(item){
return item >5;
console.log(arr1)//[false,false,false,true,true,true]
</script>
</body>
</html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
var num = [1, 2, 3]
console.log(numbers.reduce(getSum)); // 125
console.log(num.reduce(getSum)); // 6
</script>
</body>
</html>
every
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
如果所有元素都满足条件,则返回 true。
注意: every() 不会对空数组进行检测。
注意: every() 不会改变原始数组。
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<script>
let arr = [2, 4, 6, 8];
let flag = arr.every(function(item) {
return item > 6