提高效率的Array方法

作者: bkbtp 分类: 前端 发布时间: 2018-04-04 16:26

熟练运用以下方法,提高工作效率,fighting!

forEach

最基本的一个,就是遍历,循环。

forEach方法中的callback支持3个参数,第1个是遍历的数组内容;第2个是对应的数组索引,第3个是数组本身。

基本语法:

array.forEach(callback,[ thisObject])
[].forEach(function(value, index, array) {
  // ...
});

数组求和demo:

let sum = 0;

[1, 2, 3, 4].forEach((item, index, array) => {
  console.log(array[index] == item); // true
  sum += item;
});

console.log(sum); // 10

map

map即映射,原数组被“映射”成对应新数组;callback参数与forEach类似。

基本语法:

array.map(callback,[ thisObject])
[].map(function(value, index, array) {
  // ...
});

数值项求平方demo:

let data = [1, 2, 3, 4];

let arrayOfSquares = data.map(item => {
  return item * item;
});

console.log(arrayOfSquares); // [1, 4, 9, 16]

注意:map方法的callback必须要有return值

利用map方法可方便获得对象数组中的特定属性值进行后续操作,比如:

let users = [
  {name: "张三", age: 10},
  {name: "李四", age: 12},
  {name: "王五", age: 11}
];

let array = users.map(item => { 
  return item.name + item.age + '岁'; 
});

console.log(array.join(", ")); // 张三10岁, 李四12岁, 王五11岁

filter

filter为“过滤”、“筛选”之意;指数组filter后,返回过滤后的新数组,用法与map相似。

基本语法:

array.filter(callback,[ thisObject]);

filter的callback函数需要返回布尔值,留下值弱等于true的项。

demo:

let data = [0, 1, 2, 3];
let arrayFilter = data.filter(item => {
  return item;
});
console.log(arrayFilter); // [1, 2, 3]

some

some指“某些”,即是否“某些项”合乎条件。与下面的every算是好基友,every表示是否“每一项”都要靠谱。

基本语法:

array.some(callback,[ thisObject]);

demo:

var scores = [5, 8, 3, 10];
var current = 7;

function higherThanCurrent(score) {
  return score > current;
}

if (scores.some(higherThanCurrent)) {
  alert("存在大于7的数字");
}

弹出成功;some要求至少有1个值让callback返回true就可以了,并且some只要有true即返回后续不再执行。

every

every表示是否“每一项”都满足条件才返回,语法与some一致。

demo:

var scores = [5, 8, 3, 10];
var current = 7;

function higherThanCurrent(score) {
  return score > current;
}

if (scores.every(higherThanCurrent)) {
  alert("所有数字大于7");
}

弹出失败;every要求所有值让callback返回true才可以。

indexOf

indexOf方法在字符串中自古就有,string.indexOf(searchString, position)。数组这里的indexOf方法与之类似。

基本语法:

array.indexOf(searchElement[, fromIndex])

fromIndex可选,表示从这个位置开始搜索,若缺省或格式不合要求,使用默认值0,使用字符串数值也是可以。

demo:

var data = [2, 5, 7, 3, 5];

console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (从3号位开始搜索)

console.log(data.indexOf(4)); // -1 (未找到)
console.log(data.indexOf("5")); // -1 (未找到,因为5 !== "5")

返回整数索引值,如果没有匹配(严格匹配),返回-1。

lastIndexOf

lastIndexOf 与 indexOf 正好相反,是从字符串的末尾开始查找。

基本语法:

array.lastIndexOf(searchElement[, fromIndex])

fromIndex的默认值是 array.length – 1,而不是0.

demo:

var data = [2, 5, 7, 3, 5];

console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (从后往前,索引值小于3的开始搜索)

console.log(data.lastIndexOf(4)); // -1 (未找到)

reduce

reduce,迭代,递归。

基本语法:

array.reduce(callback[, initialValue])

callback函数接受4个参数:之前值、当前值、索引值以及数组本身。initialValue参数可选,表示初始值。若指定,则当作最初使用的previous值;如果缺省,则使用数组的第一个元素作为previous 初始值,同时current往后排一位,相比有initialValue值少一次迭代。

demo:

var sum = [1, 2, 3, 4].reduce(function (previous, current, index, array) {
  return previous + current;
});

console.log(sum); // 10
  • 因为initialValue不存在,因此一开始的previous值等于数组的第一个元素
  • 从而current值在第一次调用的时候就是2
  • 最后两个参数为索引值index以及数组本身array
    以下为循环执行过程:
// 初始设置
previous = initialValue = 1, current = 2

// 第一次迭代
previous = (1 + 2) =  3, current = 3

// 第二次迭代
previous = (3 + 3) =  6, current = 4

// 第三次迭代
previous = (6 + 4) =  10, current = undefined (退出)

有了reduce,我们可以轻松实现二维数组的扁平化:

var matrix = [
  [1, 2],
  [3, 4],
  [5, 6]
];

// 二维数组扁平化
var flatten = matrix.reduce(function (previous, current) {
  return previous.concat(current);
});

console.log(flatten); // [1, 2, 3, 4, 5, 6]

reduceRight

reduceRight 与 reduce正好相反,是从数组的末尾开始实现。

demo:

var data = [1, 2, 3, 4];
var specialDiff = data.reduceRight(function (previous, current, index) {
  if (index == 0) {
    return previous + current;
  }
  return previous - current;
});

console.log(specialDiff); // 0

结果0是如何得到的呢?
我们一步一步查看循环执行:

// 初始设置
index = 3, previous = initialValue = 4, current = 3

// 第一次迭代
index = 2, previous = (4- 3) = 1, current = 2

// 第二次迭代
index = 1, previous = (1 - 2) = -1, current = 1

// 第三次迭代
index = 0, previous = (-1 + 1) = 0, current = undefined (退出)

发表评论

电子邮件地址不会被公开。 必填项已用*标注

知识共享许可协议
本作品采用知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议进行许可。