js - 函数表达式

2018-08-04

遍历数组或对象的时候，一般大家首选 for 循环，但是有些时候 for 循环代码量多显得比较累赘，此时使用简短的函数表达式更为方便简洁。

以下介绍一些常用的函数表达式
let arr = [1, 2, 3, 4], obj = [{id: 1}, {id: 2}, {id: 3}, {id: 4}];

arr.filter(callback(element))

过滤某元素

// 找出 arr 中为偶数的值
let new_arr = arr.filter(item => item % 2 === 0);
console.log(new_arr); // [2, 4]
// 找出对象数组中 id 为偶数的对象
let new_obj = obj.filter(item => item.id % 2 === 0);
console.log(new_obj); // [{id: 2}, {id: 4}]

arr.some(callback(current, index, array))

查找是否符合条件

// 查找数组中是否有偶数
let arr_result = arr.some(item => item % 2 === 0);
console.log(arr_result); // true
let obj_result = obj.filter(item => item.id > 5);
console.log(obj_result); // false

arr.includes(searchElement, fromIndex)

查找是否包含某元素，但是只能用于数组的遍历，注意与 some() 的用法区分

1 2	let arr_result = arr.includes(2); console.log(arr_result); // true

arr.find(callback(current, index, array))

返回第一个符合条件的值

// 返回 arr 中为偶数的第一个值
let new_arr = arr.find(item => item % 2 === 0);
console.log(new_arr); // 2
// 返回对象数组中 id 为偶数的第一个对象
let new_obj = obj.filter(item => item.id % 2 === 0);
console.log(new_obj); // {id: 2}

arr.reduce(callback(accumulator, current, index, array), initialValue)

可以用于累加，accumulator 是上次累加回调值, initialValue 是第一次调用callback的第一个参数值，没设置默认为数组第一个元素

let arr_result = arr.reduce((prev, curr) => prev + curr );
console.log(arr_result); // 10
let obj_result = obj.reduce((prev, curr) => {
	return prev + curr.id
}, 0);
console.log(obj_result); // 10

arr.map(callback(current, index, array))

遍历每个元素

let new_arr = arr.map(item => item * 2);
console.log(new_arr); // [2, 4, 6, 8]
let new_obj = obj.map(item => {
	item.id = item.id * 2;
	return item;
});
console.log(new_obj); // [{id: 2}, {id: 4}, {id: 6}, {id: 8}]

区别 Map() 和 Set()

共同：

用处：都用于清除重复项；

1
2
3

let arr = [2, 2, 4, 4];
let new_arr = new Set(arr);
console.log(new_arr); // [2, 4]

遍历方法：
- keys()：返回一个键名的遍历器
- values()：返回一个键值的遍历器
- entries()：返回一个键值对的遍历器
- forEach()：使用回调函数遍历每个成员
操作方法：
- clear()：清除所有成员，没有返回值
- has(value)：返回一个布尔值，表示该值是否为 Set 的成员
- delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。
不同：
Set() 的操作方法： add(value) 添加某个值，返回 Set 结构本身。
Map() 的操作方法：
- size：返回成员总数。
- set(key, value)：设置 key 所对应的键值，然后返回整个 Map 结构。如果 key 已经有值，则键值会被更新，否则就新生成该键。
- get(key)：读取 key 对应的键值，如果找不到 key，返回 undefined。
Set()参数为具有 Iterator 接口的数组；Map()参数为具有 Iterator 接口且成员都是一个表示键值对的数组
1
2
let arr1 = new Set([1, 2, 2, 3]);
let arr2 = new Map([['id', 1], ['name', 'huang']]);

区别 for … in … 和 for … of … 以及 forEach

for … in … 获取对象的键名。数组的键名为字符串，遍历会查找原型，能使用 break、continue、return
for … of … 获取对象的键值。通常用于遍历数组，普通对象不能直接遍历（要使用生成器包装 function* ），能使用 break、continue、return
forEach 不能使用 break、continue、return

| 阅读量()