目录
1. 数组方法
1.1 forEach
-
作用:读取遍历数组
-
三个参数:
value:每个数组元素
index:每个数组元素的索引号
array: 数组本身
-
可以进行求和
var array = [1, 2, 3, 4, 5];
var Sum = 0;
array.forEach(function (value, index, array) {
console.log('每个数组元素' + value);
console.log('每个数组元素的索引号' + index);
console.log('数组本身' + array);
Sum += value;
})
console.log(Sum);
-
和for 遍历的执行效率的比较
如下,可以复制下面的代码去试试,发现for遍历的时间,比forEach短。所以for 比 forEach遍历的速度会更快
注意 console.time("test")和 console.timeEnd("test"),这是一个测试程序执行时间的一个方法,配套使用,里面的参数可以任意,但是time和timeEnd的必须对应一致。
// 测试运行时间
var array = [1, 2, 3, 4];
var array2 = [1, 2, 3, 4];
console.time('test');
for (let i = 0; i < array.length; i++) {
// some code
}
console.timeEnd('test');
console.time('test');
var sum = 0;
array2.forEach(function (value) {
sum += value;
})
console.timeEnd('test');
// for 会比for each 更好
forEach 能否进行创建新数组?
var arr2 = arr.forEach(function (value, index, array) {
return value > 2;
})
console.log(arr2); // undefined
打印出来是undefined,所以forEach不能够直接创建数组。当然里面可以用if进行值判断,值再push进新数组里面,但是这样是间接啦。
1.2 some遍历 every遍历比较
every遍历
返回布尔值
作用:
-
every用于测试一个数组内的数据 是否 都 满足指定函数的条件
-
如下面的代码写法1,先定义一个函数,array1.every(Test1)括号里面直接写函数名,记得不加括号;只要有一个数没有满足条件,都是false
-
注意写法3,每一个元素都会进行遍历,这个和some方法的写法3不同,见下面some的解释。
// 1. 写法1
var array1 = [1, 30, 39, 29, 10, 13];
function Test1(value) {
return value >= 30;
}
console.log(array1.every(Test1)); // false
// 写法2:
var arr2 = array1.every(function (value, index) {
if (value >= 5) {
console.log('有数据大于5');
return;
}
console.log(index);
})
// 写法3:
var arr3 = ['李', '李', '沈以诚'];
var flag2 = arr3.every(function (e, f) {
console.log(f); // 打印了一个索引就停止了
return e === '李';
})
console.log(flag2);
some遍历
返回布尔值
作用:
1.写法1里面,只要array2有一个元素能被4整除,就是true。
2.写法2里面,因为用了if语句,这里就是普通的遍历,每一个元素都会进行判断。打印如下
打印如下:
0 1 "有数据大于5" 3 4
3.写法3,打印第一个索引就会停止,注意这个写法下some的特性,找到一个数,就会停止遍历后面的
打印0和true
// 写法1:
var array4 = [2, 4, 5, 8, 10];
function Test3(value) {
return value % 4 === 0;
}
console.log(array4.some(Test3)); // true
// 写法2:
var arr3 = array4.some(function (value, index) {
if (value >= 5) {
console.log('有数据大于5');
return;
}
console.log(index);
})
// 写法3:
var arr4 = ['李', '焦迈奇', '沈以诚'];
var flag2 = arr4.some(function (e, f) {
console.log(f); // 打印了一个索引就停止了
return e === '李';
})
console.log(flag2);
some和every的注意点:
倘若 数组为空
every 和 some里面不管什么条件
every都是true
some都是false
var arr = [];
let bool = arr.some(obj => obj.id === 0);
console.log(bool); // false
let bool2 = arr.every(obj => obj.id === 0);
console.log(bool2); // true
1.3 filter遍历
直接返回新数组
作用:进行数据的筛选,每一个值都会筛选一次。
如下面的代码,满足条件的值都会返回到新的数组里面去
var arr = [1, 2, 3, 4];
var newArr2 = newArr.filter(function (value) {
return value >= 4;
})
console.log(newArr2); // [4,6,8]
1.4 map遍历数组
返回一个新数组
如下代码,arr里面的每一个值都会执行里面回调函数的执行体
同时map还能和filter结合玩出新花样
// // 1. map也能进行数组的筛选
var arr = [1, 2, 3, 4];
var newArr = arr.map(function (value) {
return value * 2;
})
console.log(newArr); // [2,4,6,8]
// 2. map和filter的结合
var newArr2 = arr.map(function (value) {
return value * 2;
}).filter(function (value) {
return value % 2 === 0;
})
console.log(newArr2);
2.总结
方法 | 作用 | 返回值 |
---|---|---|
foreach | 遍历读取每一个值进行相应操作 | 不固定 |
some | 一般情况下,根据指定条件,有对应判断的值就输出true【后面的循环就终止】 | true / false |
every | 根据指定条件,遍历每一个值 | true / false |
filter | 数组的筛选 | 新数组 |
map | 数组的筛选 | 新数组 |
结尾:
学习id: 201903090124-39
现在是大三学生,学习到了vue阶段,如有不对的地方,欢迎指正,一起努力呀。如有转载请注明出处