Array.from()#

Converts array-like or iterable objects into true arrays.

Convertible Categories#

DOM Collections#

let ps = document.querySelectAll("p"); //通过Array.from 转换后可以使用forEach方法
Array.from(ps).forEach(function (p, index) {
  "use strict";
  console.log(p, index);
});

arguments Object#

function foo() {
  "use strict";
  var args = Array.from(arguments); //可以替代以前下面这种方式来转换
  var argvs = Array.prototype.slice.call(arguments);
  console.log(argvs, args);
}
foo(1, 2, 3, 4); //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]

Objects with a length Property#

var obj = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
};
var obj1 = {
  0: "a",
  1: "b",
  2: "c",
};
console.log(Array.from(obj)); //['a','b','c']
console.log(Array.from(obj1)); //[] 没有length属性，无法转换

Note that the property values of the object must be numbers; otherwise, the converted array will contain undefined for those elements.

let obj2 = {
  a: 1,
  b: 2,
  c: 3,
  length: 3,
};
console.log(Array.from(obj2)); //[ undefined, undefined, undefined ]

Array.from() also accepts a second argument, similar to the map method#

console.log(Array.from(obj, (x) => x + "1")); //[ 'a1', 'b1', 'c1' ]  类似于map方法

Array.of()#

Converts a set of values into an array.

Array.of(3, 12, 2, 3, 24, 2); //[ 3, 12, 2, 3, 24, 2 ]    将一组值转换为数组
Array.of(3, "12", [2], 3, 24, 2); //[ 3, '12', [ 2 ], 3, 24, 2 ]

The purpose of this method is to address the shortcomings of the Array() constructor, which produces different results depending on the number of arguments.

Array(8); // [ , , , , , , ,  ]
Array(3, 11); // [3, 11]

find() and findIndex()#

The find method of array instances is used to find the first array member that satisfies a given condition. Its parameter is a callback function, which is executed for each array member in turn until it finds the first member for which the callback returns true, and then returns that member. If no member satisfies the condition, undefined is returned.

var found = [1, 2, 3, 4, -1].find((n) => n < 0); //find 找出第一个返回值为true的成员
var founded = [1, 2, 3, 4, -1].find(function (b) {
  return b > 3;
});
console.log("result:", found, founded); //result: -1 4

findIndex returns the index of the first value that satisfies the condition. If no such value is found, it returns -1.

var foundIndex = [1, 2, 324, 5, 34].findIndex(function (value, index, arr) {
  "use strict";
  return value > 100;
});
console.log(foundIndex); //2

Both of these methods can detect NaN, which indexOf cannot.

console.log([2, 3, 4, NaN].indexOf(NaN)); //-1
console.log([1, 2, NaN].find((value) => Object.is(NaN, value))); //NaN
console.log([1, 2, 3, 4, NaN].findIndex((value) => Object.is(NaN, value))); //4

Array.fill()#

Fills an array with a given value.

[1, 2, 3, 4].fill("a"); //[ 'a', 'a', 'a', 'a' ]
new Array(6).fill(3); //[ 3, 3, 3, 3, 3, 3 ]

fill() can also accept second and third arguments to specify the start and end positions for filling.

[1, 2, 3, 4]
  .fill(8, 1, 2) //[1,8,3,4]
  [(1, 2, 3, 4)].fill(8, 1, 3); //[ 1, 8, 8, 4 ]

entries(), keys(), and values()#

These three methods are all used to iterate over arrays. They can be used with for...of loops: keys() iterates over keys, values() iterates over values, and entries() iterates over key-value pairs.

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

Personally, I feel their significance is limited, as they offer similar functionality to the older forEach method. One difference is that if you don’t use for...of for iteration, you can use next to manually iterate.

let word = ["h", "e", "l", "l", "o"];
let entries = word.entries();
console.log(entries.next().value);
[0, "h"];
console.log(entries.next().value);
[1, "e"];

Other Methods#

These are all features to be implemented in ES7.

includes()#

Checks if an array contains a given value, returning a boolean.

Array Comprehensions#

I feel like this is becoming more and more similar to python.

var a1 = [1, 2, 3, 4];
var a2 = [for (i of a1) i * 2];
a2 // [2, 4, 6, 8]

An if statement can also be appended after for...of to set loop conditions.

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];

[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]

[for (year of years) if (year > 2000) if(year < 2010) year];
// [ 2006]

[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006]

Array.observe(), Array.unobserve()#

Used to listen for and respond to changes in arrays by specifying a callback function. I’m quite looking forward to this method; it will be very useful.

Copyright#

All code in this article is derived from or inspired by:

Ruan YiFeng - ECMAScript 6 入门, This article also follows the Attribution-NonCommercial License.