Array

2021-02-23  本文已影响0人  考拉狸猫

在 ES6 中新增了很多实用的原生 API，方便开发者对 Array 的操控性更强，如 for...of、from、of、fill、find、findIndex等

二级标题

ES5 中数组遍历方式

let arr = [1, 2, 3, 2, 4]

用for循环

let arr = [1, 2, 3, 2, 4]
for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

注意
forEach 的代码块中不能使用 break、continue，它会抛出异常。

let arr = [1, 2, 3, 2, 4]
arr.forEach(function(elem, index, array) {
    if (arr[i] == 2) {
        continue
    }
    console.log(elem, index)
})

这个语法看起来要简洁很多，不需要通过索引去访问数组项，然而它的缺点也是很明显，不支持 break、continue 等。



let arr = [1, 2, 3, 2, 4]
let result = arr.map(function(value) {
    value += 1
    console.log(value)
    return value
})
console.log(arr, result)

let arr = [1, 2, 3, 2, 4]
let result = arr.filter(function(value) {
    console.log(value)
    return value == 2
})
console.log(arr, result)

let arr = [1, 2, 3, 2, 4]
let result = arr.some(function(value) {
    return value == 4
})
console.log(arr, result)  //arr  1, 2, 3, 2, 4    result  true

let arr = [1, 2, 3, 2, 4]
let result = arr.every(function(value) {
    return value == 2
})
console.log(arr, result)  //arr 1, 2, 3, 2, 4     result false

同样完成刚才的目标，使用 every 遍历就可以做到 break 那样的效果，简单的说 return false 等同于 break，return true 等同于 continue。如果不写，默认是 return false。
注意：every 的代码块中不能使用 break、continue，它会抛出异常。

const arr = [1, 2, 3, 4, 5]
const sum = arr.reduce((pre, item) => {
    return pre + item
}, 0)
console.log(sum) // 15

callback:函数中包含四个参数

以上回调被调用5次，每次的参数详见下表


2021-02-23_150641.jpg

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];
let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

in 操作符
in 操作检查对象中是否有名为 property 的属性。也可以检查对象的原型，以便知道该属性是否为原型链的一部分。

对于一般的对象属性需要用字符串指定属性的名称

var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // returns true
"model" in mycar // returns true

对于数组属性需要指定数字形式的索引值来表示数组的属性名称（固有属性除外，如length）

// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // returns true
3 in trees        // returns true
6 in trees        // returns false
"bay" in trees    // returns false (you must specify the index number,
                  // not the value at that index)
"length" in trees // returns true (length is an Array property)

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

//第二种方式
let arr = [1, 2, 3, 2, 4]
let res = arr.reduce(function(prev, cur) {
    prev.indexOf(cur) == -1 && prev.push(cur)
    return prev
}, [])
console.log(res)

let arr = [[0, 1], [2, 3], [4, 5]]
let newArr = arr.reduce((pre,cur)=>{
    return pre.concat(cur)
},[])
console.log(newArr); // [0, 1, 2, 3, 4, 5]

let arr = [[0, 1], [2, 3], [4,[5,6,7]]]
const newArr = function(arr){
   return arr.reduce((pre,cur)=>pre.concat(Array.isArray(cur)?newArr(cur):cur),[])
}
console.log(newArr(arr)); //[0, 1, 2, 3, 4, 5, 6, 7]

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

let arr = [1, 2, 3, 2, 4]
let max = arr.reduce(function(prev, cur) {
    return Math.max(prev, cur)
})
console.log(max)

let arr = [1, 2, 3, 2, 4]
let sum = arr.reduce(function(prev, cur, index, array) {
    return prev + cur
}, 0)
console.log(sum)

注意
for...in不能用于遍历数组。
for...in代码块中不能有 return，不然会抛出异常
for...in 确实可以遍历数组，而且还支持 continue、break等功能，但是它真的没有瑕疵吗？如果 array 有自定义属性，你发现也会被遍历出来(显然不合理)。这是因为 for...in 是为遍历对象创造的（{a:1, b:2}），不是为数组设计的。

ES6 中数组遍历方式 for...of

for (let val of [1, 2, 3]) {
    console.log(val);
}

for...of是支持 break、continue、return的，所以在功能上非常贴近原生的 for。

Array.from()

伪数组（Array-Like）不能直接使用数组API，比如函数中的 arguments、DOM中的 NodeList等。
要想对这些对象使用数组的 API 就要想办法把它们转化为数组。

let args = [].slice.call(arguments);
let imgs = [].slice.call(document.querySelectorAll('img'));

ES6伪数组（Array-Like）转化成数组

let args = Array.from(arguments);
let imgs = Array.from(document.querySelectorAll('img'));

伪数组具备两个特征，1. 按索引方式储存数据 2. 具有length属性；如：

let arrLike = {
    0: 'a',
    1: 'b',
    2: 'c',
    length: 3
}

Array.from语法Array.from(arrayLike[, mapFn[, thisArg]])
arrayLike 想要转换成数组的伪数组对象或可迭代对象 Y
mapFn 如果指定了该参数，新数组中的每个元素会执行该回调函数 N
thisArg 可选参数，执行回调函数 mapFn 时 this 对象 N

Array.from 还具备 map 的功能
比如想初始化一个长度为 5 的数组，每个数组元素默认为 1

let arr = Array(6).join(' ').split('').map(item => 1)
// [1,1,1,1,1]

用Array.from 实现初始化一个长度为 5 的数组,Array.from 初始化为一个长度固定，元素为指定值的数组。

Array.from({
    length: 5
}, function() {
    return 1
})
//[1, 1, 1, 1, 1]

Array.of()

Array.of() 方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array.of(7); // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7); // [ , , , , , , ]
Array(1, 2, 3); // [1, 2, 3]

语法：Array.of(element0[, element1[, ...[, elementN]]])

Array.prototype.fill()

fill() 方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引

语法：arr.fill(value[, start[, end]])
fill 不具备遍历的功能，它是通过指定要操作的索引范围来进行，通过这道题目可以看出不指定索引会对所有元素进行操作

参数 含义 必选
value 用来填充数组元素的值 Y
start 起始索引，默认值为0 N
end 终止索引，默认值为 this.length N

let array = [1, 2, 3, 4]

array.fill(0, 1, 2)
// [1,0,3,4]

这个操作是将 array 数组的第二个元素（索引为1）到第三个元素（索引为2）内的数填充为 0，不包括第三个元素，所以结果是 [1, 0, 3, 4]

Array(5).fill(1)
// [1,1,1,1,1]

Array.prototype.find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。
语法：arr.find(callback[, thisArg])

参数 含义 必选
callback 在数组每一项上执行的函数，接收 3 个参数，element、index、array Y
thisArg 执行回调时用作 this 的对象 N 
let array = [5, 12, 8, 130, 44];
let found = array.find(function(element) {
    return element > 10;
});
console.log(found);
// 12

Array.prototype.findIndex()

findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。其实这个和 find() 是成对的，不同的是它返回的是索引而不是值。

语法：arr.findIndex(callback[, thisArg])

参数 含义 必选
callback 在数组每一项上执行的函数，接收 3 个参数，element、index、array Y
thisArg 执行回调时用作 this 的对象 N 
let array = [5, 12, 8, 130, 44];
let found = array.find(function(element) {
    return element > 10;
});
console.log(found);
// 1

Array.prototype.copyWithin()

在当前数组内部，将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

语法：arr.copyWithin(target, start = 0, end = this.length)

参数 含义 必选
target 从该位置开始替换数据。如果为负值，表示倒数 Y
start 从该位置开始读取数据，默认为 0。如果为负值，表示从末尾开始计算 N
end 到该位置前停止读取数据，默认等于数组长度。如果为负值，表示从末尾开始计算 N 
let arr = [1, 2, 3, 4, 5]
console.log(arr.copyWithin(1, 3))
// [1, 4, 5, 4, 5]
上一篇 下一篇

猜你喜欢

热点阅读