原生JS forEach()和map()遍历
关于for循环
1理论上这个方法是没有返回值的,仅仅是遍历数组中的每一项,不对原来数组进行修改;但是可以自己通过数组的索引来修改原来的数组;
2参数:item数组中的当前项, index当前项的索引, array原始数组;
关于map循环
1区别map的回调函数中支持return返回值;return的是啥,相当于把数组中的这一项变为啥(并不影响原来的数组,只是相当于把原数组克隆一份,把克隆的这一份的数组中的对应项改变了);
2参数:value数组中的当前项,index当前项的索引,array原始数组;
共同点
-
1.都是循环遍历数组中的每一项。
-
2.forEach() 和 map() 里面每一次执行匿名函数都支持3个参数:数组中的当前项item,当前项的索引index,原始数组input。
-
3.匿名函数中的this都是指Window。
-
4.只能遍历数组。
不同点
- map循环有返回值 forEach无返回值
let arr = [12, 23, 24, 42, 1];
/**
* @param item 数组当前项
* @param index 索引
* @param input 原数组
*/
let res = arr.forEach(function (item, index, input) {
console.log(item == input[index]); //打印true
input[index] = item * 10;
console.log(input)
});
console.log(res);//--> undefined(因为forEach循环没有return);
console.log(arr);//--> 通过数组索引改变了原数组 打印结果[ 120, 230, 240, 420, 10 ] ;
关于map循环 一定是把原数组复制一份,在进行遍历。
let ary = [12, 23, 24, 42, 1];
let res = ary.map(function (item, index, input) {
input[index] = item * 100;
console.log('==', input);
return item * 10;
});
console.log("map返回结果的值",res);//-->[120,230,240,420,10]; 原数组拷贝了一份,并进行了修改 修改input时候 并不会影响的map的结果
console.log("通过修改input改变的原数组的值",ary);//-->[ 1200, 2300, 2400, 4200, 100 ];
//当map循环没有return时候,会默认返回underfind
res 但因结果 [undefined,undefined,undefined,undefined,undefined]
some 和every的区别和用法
相同点:
- 1.每一项的遍历数组
- 2.三个参数相同
- 3.返回的值都是布尔值
不同点:
- 1.some 循环比较 有个一个比较结果为true,some返回true
- 2.every 循环比较 所有有一个比较结果为false, every返回false
let ary = [12, 23, 24, 42, 9];
let res1 = ary.every(function (item, index, input) {
return item > 10;
});
let res2 = ary.some(function (item, index, input) {
return item > 10;
});
console.log('every的返回结果',res1);//false
console.log('some的返回结果',res2);//true
数据操作常用的方法
- push(item) 在数组队尾插入元素item
- pop() 在数组队尾删除元素
- shift() 在数组队头删除
- unshift(item)在数组队头插入item
检索数组的方法indexOf
indeoOf检索数组,如果找到值返回值对应的坐标,若未找到值返回-1 array.indexOf(item,start)
- item代表 查找的元素。
- start代表 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。
let arr = [10, 20, 30, 40];
let number = arr.indexOf(11);
console.log(number);//未找到返回-1,模式从坐标0开始找
let arr = [10, 20, 30, 40];
let number = arr.indexOf(30,1);从数组第一个元素之后找值为30的坐标。
console.log(number);//打印结果2 ,
splice() 方法
向/从数组中添加/删除项目,然后返回被删除的项目。
arrayObject.splice(index,howmany,item1,.....,itemX)
- 1.index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。
- 2.howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。
- 3.item1, ..., itemX 可选。向数组添加的新项目。
let arr = [1, 2, 3, 4];
arr.splice(2, 0, 5); //从数组第二个元素开始 删除0 个元素 插入元素5
console.log(arr);// 打印结果 [1,2,5,3,4]
let arr = [1, 2, 3, 4];
arr.splice(2, 2, 5); //从数组第二个元素开始 删除2个元素 个元素 插入元素5
console.log(arr);// 打印结果 [1,2,5]
let arr = [1, 2, 3, 4];
arr.splice(0, 2, 5); //从数组头元素开始 删除2个元素 个元素 插入元素5
console.log(arr);// 打印结果 [5,3,4]
filter方法
创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
filter() 不会对空数组进行检测
filter() 不会改变原始数组。
// filter只会把符合条件的返回回来
let arr = [10, 20, 30, 40];
let numbers = arr.filter(function (item, index, input) {
return item > 18;
});
console.log(numbers); //打印结果 [ 20, 30, 40 ]
数组sort排序
//数组从大往小排序
var list = [{a:1,b:6},{a:4,b:5},{a:2,b:8}]
list.sort(function (a,b) {
return b.a - a.a //数组从大到小排
retrun a.a - b.a //数组从小往大排
})
console.log(list)
//[ { a: 4, b: 5 }, { a: 2, b: 8 }, { a: 1, b: 6 } ]
reduce的使用,主要用作聚合
reduce作用
- 将数组转换为字符串或者数字
- 将数组转换为对象
- 展开更大的数组
- 在一次遍历中进行两次计算
- 将映射和过滤函数组合
- 按顺序运行异步函数