山东大学程序设计能力提升平台 js进阶使用方法

2021SC@SDUSC

1.forEach()

forEach()对数组中每一个元素进行迭代.

arr.forEach(callback(currentValue [, index [, array]])[, thisArg])

• 参数:
  currentValue:数组中正在处理的当前元素。
  index (可选):数组中正在处理的当前元素的索引。
  array (可选):forEach() 方法正在操作的数组。
  thisArg(可选):没看懂什么意思

• 特点
  1.返回值是undefined;
  2.不会在迭代之前创建数组的副本,修改的是数组本身;
  3.无法跳出循环;

摘自MDN,很有用:

注意： 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。
若你需要提前终止循环，你可以使用：
一个简单的 for 循环
for…of / for…in 循环
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()
这些数组方法则可以对数组元素判断，以便确定是否需要继续遍历：
every()
some()
find()
findIndex()

2.every()

every()方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

arr.every(callback(element[, index[, array]])[, thisArg])

示例:

function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

// or匿名函数:

[12, 5, 8, 130, 44].every(x => x >= 10); // false

3.some()

some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。
如果用一个空数组进行测试，在任何情况下它返回的都是false。

arr.some(callback(element[, index[, array]])[, thisArg])

4.filter()

filter()方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

示例:

arr = [1, 2, 3, 4, 5, 6]
let newArr = arr.filter(ele = > { ele > 3 })
//return [4, 5, 6]

5.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

arr.find(callback(element[, index[, array]])[, thisArg])

示例:

// 用对象的属性查找数组里的对象
var inventory = [
    {name: 'apples', quantity: 2},
    {name: 'bananas', quantity: 0},
    {name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    return fruit.name === 'cherries';
}

console.log(inventory.find(findCherries)); // { name: 'cherries', quantity: 5 }

6.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。

arr.findIndex(callback(element[, index[, array]])[, thisArg])

示例:

const array1 = [5, 12, 8, 130, 44];
array1.log(array1.findIndex(ele) => {ele > 13}); //3

7.Array.from()

Array.from() 方法从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

Array.from(arrayLike[, mapFn[, thisArg]])

• 参数:
  arrayLike:想要转换成数组的伪数组对象或可迭代对象。
  mapFn (可选):如果指定了该参数，新数组中的每个元素会执行该回调函数。
  thisArg (可选):执行回调函数 mapFn 时 this 对象。
• 示例:

1.基本用法

console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]

console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]

2.从map对象生成数组

const map = new Map([[1, 2], [2, 4], [4, 8]]);
Array.from(map);
// [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
Array.from(mapper.values());
// ['a', 'b'];

Array.from(mapper.keys());
// ['1', '2'];

3.从类数组对象（arguments）生成数组

function f() {
 return Array.from(arguments);
}

f(1, 2, 3);

// [ 1, 2, 3 ]

8.reduce()

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

• 参数:
  callback:执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
  accumulator:累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。
  currentValue:数组中正在处理的元素。
  index 可选:数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
  array可选:调用reduce()的数组
  initialValue可选:作为第一次调用 callback函数时的第一个参数的值。 如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。
• 示例(计算数组中每个元素出现的次数):

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) {
 if (name in allNames) {
   allNames[name]++;
 }
 else {
   allNames[name] = 1;
 }
 return allNames;
}, {});
// countedNames is:
// { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }