本文主要是介绍【JavaScript】高阶数组实例方法 (ES5),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
forEach
arr.forEach(callback[, thisObj])
用于遍历数组:
callback
:(item, index, arr) => undefined
item
-当前元素、index
-当前下标、arr
-当前数组thisObj
:callback
的this
指向(箭头函数不生效thisObj
配置项)
- 返回值:
undefined
const arr = ['a', 'b', 'c'];
const result = arr.forEach(function (item, index, arr) {console.log(item, index, arr);return item; // 这里的 return 语句相当于没写
});
console.log(result); // undefined
通过参数 thisObj
可以设置回调函数的 this
指向:
const arr = ['a', 'b', 'c'];
arr.forEach(function () {console.log(this); // 此时 this 指向 [ 'a', 'b', 'c' ]
}, arr);
使用箭头函数作为回调函数时,即使配置了 thisObj
参数,也不会生效:
const arr = ['a', 'b', 'c', 'd'];
arr.forEach(() => {console.log(this); // this 取父级的 this
}, arr);
map
arr.map(callback[, thisObj])
可基于原数组 获取新数组:
callback
:(item, index, arr) => newItem
item
-当前元素、index
-当前下标、arr
-当前数组thisObj
:callback
的this
指向(箭头函数不生效thisObj
配置项)
- 返回值:
callback
的返回值组成的新数组
const arr = [1, 2, 3];
const newArr = arr.map(item => item * 2);
console.log(newArr); // [ 2, 4, 6 ]
如果回调函数 callback
没有 return 语句,则 map 返回长度为 arr.length
、且数据项全为 undefined
的新数组:
const arr = [1, 2, 3];
const newArr = arr.map(() => {}); // 回调函数没有返回值
console.log(newArr); // [undefined, undefined, undefined]
作用 ①:浅拷贝数组
const arr = [1, 2, 3, , 4]; // map 会将空位记为 empty
const newArr = arr.map(item => item); // 复制数组
console.log(newArr); // [1, 2, 3, empty, 4]
注意:这种拷贝方法只是浅拷贝
const arr = [{ title: 'aa', read: 100 },{ title: 'bb', read: 10 },
];
const newArr = arr.map(item => item);
newArr[0].read = 300;
console.log(arr[0].read); // 300
作用 ②:调整数据结构
const arr = [{ title: 'aa', read: 100 },{ title: 'bb', read: 20 },
];
console.log(arr); // [ { title: 'aa', read: 100 }, { title: 'bb', read: 20 } ]const newArr = arr.map(item => {const obj = {}; // 创建空对象obj.shop = `名称:${item.title}`;obj.price = `¥${item.read}元`;return obj;
});console.log(newArr);
// [ { shop: '名称:aa', price: '¥100元' }, { shop: '名称:bb', price: '¥20元' } ]
filter
filter(callback[, thisObj])
用于过滤数组:
callback
:(item, index, arr) => boolean
item
-当前元素、index
-当前下标、arr
-当前数组thisObj
:callback
的this
指向(箭头函数不生效thisObj
配置项)
- 返回值:
callback
返回true
的对应item
组成的新数组
作用 ①:浅拷贝数组
const arr = [1, 2, 3];
const newArr = arr.filter(() => true);
console.log('newArr', newArr); // newArr [1, 2, 3]
注意:这里也是浅拷贝
作用 ②:数组去重
const arr = [2, 1, 3, 5, 2, 3, 1];
const newArr = arr.filter((item, index) => arr.indexOf(item) == index);
console.log('newArr', newArr); // newArr [2, 1, 3, 5]
some & every
arr.some(callback[, thisObj])
& arr.every(callback[, thisObj])
用于检查数组:
callback
:(item, index, arr) => boolean
item
-当前元素、index
-当前下标、arr
-当前数组thisObj
:callback
的this
指向(箭头函数不生效thisObj
配置项)
- 返回值:boolean
- some:有一个
callback
返回true
,则返回true
;否则返回false
- every:所有
callback
都返回true
,才返回true
;否则返回false
- some:有一个
作用 ①:查看数组是否含有指定值
const arr = ['a', 'b', 'c', 'd'];
const result = arr.some(item => item == 'c'); // 只要有一个 item == "c" 则返回 true
console.log(result); // true
作用 ②:查看数组所有数据项是否都满足指定条件
// 判断数组里面是否都为奇数
const arr = [1, 3, 7, 9, 5];
const result = arr.every(item => item % 2 == 1);
console.log(result); // true
reduce & reduceRight
arr.reduce(callback[, firstPrev])
& arr.reduceRight(callback[, firstPrev])
一般用作统计数据:
callback
:(prev, item, index, arr) => xxx
prev
-上一个回调函数的返回值、item
-当前元素、index
-当前索引、arr
-当前数组firstPrev
:用于设置第 1 个prev
值
- reduce 从左往右遍历;reduceRight 从右往左遍历
- 返回值:最后一个
callback
的返回值
作用 ①:累加运算
如果不设置 firstPrev
,则第一个 prev
为数组的第 1 项、第一个 item
为数组的第 2 项:
const arr = [1, 2, 3];
const result = arr.reduce((prev, cur, index, arr) => {console.log('prev:' + prev, 'cur:' + cur, 'index:' + index, 'arr:' + arr);// prev:1 cur:2 index:1 arr:1,2,3// prev:3 cur:3 index:2 arr:1,2,3return prev + cur;
});
console.log('result', result);
// result 6
可以通过参数 firstPrev
设置第 1 个 prev
值。此时第一个 item
为数组的第 1 项:
const result = arr.reduce((prev, cur, index, arr) => {console.log('prev:' + prev, 'cur:' + cur, 'index:' + index, 'arr:' + arr);// prev:0 cur:1 index:0 arr:1,2,3// prev:1 cur:2 index:1 arr:1,2,3// prev:3 cur:3 index:2 arr:1,2,3return prev + cur;
}, 0); // 设置参数 firstPrev 为 0
console.log('result', result);
// result 6
作用 ②:数组去重
const arr = [1, 2, 2, 3, 3];
const res = arr.reduce((prev, cur) => {if (!prev.includes(cur)) {prev.push(cur); // 将值 push 到新数组中}return prev;
}, []);
console.log('res', res); // res [1, 2, 3]
相关知识:
- 【JavaScript】数组简介
- 【JavaScript】数组实例方法 (ES5)
- 【JavaScript】数组方法 (ES6)
这篇关于【JavaScript】高阶数组实例方法 (ES5)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!