3.2.4 ES6 Arrays

❮ Android Tutorial Ratingbar Programmer Joke 19 ❯

3.2.4 ES6 Arrays

Category ES6 Tutorial

Array Creation

Array.of()

Creates an array with all the values from the arguments as elements.

console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4]

// Argument values can be of different types
console.log(Array.of(1, '2', true)); // [1, '2', true]

// Returns an empty array if the argument is empty
console.log(Array.of()); // []

Array.from()

Converts an array-like object or an iterable object to an array.

// Argument is an array, returns an array identical to the original
console.log(Array.from([1, 2])); // [1, 2]

// Argument contains empty slots
console.log(Array.from([1, , 3])); // [1, undefined, 3]

Parameters

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

The return value is the converted array.

arrayLike

The array-like or iterable object to be converted.

console.log(Array.from([1, 2, 3])); // [1, 2, 3]

mapFn

Optional, a map function that processes each element and places the processed element into the array.

console.log(Array.from([1, 2, 3], (n) => n * 2)); // [2, 4, 6]

thisArg

Optional, used to specify the this object for the execution context of the map function.

let map = {
    do: function(n) {
        return n * 2;
    }
}
let arrayLike = [1, 2, 3];
console.log(Array.from(arrayLike, function (n){
    return this.do(n);
}, map)); // [2, 4, 6]

Array-like Objects

An array-like object must have a length property, and element property names must be numeric or convertible to numeric characters.

let arr = Array.from({
  0: '1',
  1: '2',
  2: 3,
  length: 3
});
console.log(arr); // ['1', '2', 3]

// No length property, returns an empty array
let array = Array.from({
  0: '1',
  1: '2',
  2: 3,
});
console.log(array); // []

// Element property names are not numeric and cannot be converted to numeric, returns an array with length as length and element values as undefined
let array1 = Array.from({
  a: 1,
  b: 2,
  length: 2
});
console.log(array1); // [undefined, undefined]

Converting Iterable Objects

Converting maps

let map = new Map();
map.set('key0', 'value0');
map.set('key1', 'value1');
console.log(Array.from(map)); // [['key0', 'value0'],['key1', 'value1']]

Converting sets

let arr = [1, 2, 3];
let set = new Set(arr);
console.log(Array.from(set)); // [1, 2, 3]

Converting strings

let str = 'abc';
console.log(Array.from(str)); // ["a", "b", "c"]

Extended Methods

Finding

find()

Finds an element in the array that meets the condition. If there are multiple elements that meet the condition, the first one is returned.

let arr = Array.of(1, 2, 3, 4);
console.log(arr.find(item => item > 2)); // 3

// Empty slots in the array are treated as undefined
console.log([, 1].find(n => true)); // undefined

findIndex()

Finds the index of an element in the array that meets the condition. If there are multiple elements that meet the condition, the index of the first one is returned.

let arr = Array.of(1, 2, 1, 3);
// Parameter 1: Callback function
// Parameter 2 (optional): Specifies the this value in the callback function
console.log(arr.findIndex(item => item == 2)); // 1

// Empty slots in the array are treated as undefined
console.log([, 1].findIndex(n => true)); // 0

Filling

**fill let view1 = new Int32Array(); console.log(view1.byteLength); // 0 console.log(view1.length); // 0

// Acceptable parameters include typed arrays, iterable objects, arrays, and array-like objects let arr = Array.from({ 0: '1', 1: '2', 2: 3, length: 3 }); let view2 = new Int16Array([1, 2]), view3 = new Int32Array(view2), view4 = new Int16Array(new Set([1, 2, 3])), view5 = new Int16Array([1, 2, 3]), view6 = new Int16Array(arr); console.log(view2.buffer === view3.buffer); // false console.log(view4.byteLength); // 6 console.log(view5.byteLength); // 6 console.log(view6.byteLength); // 6

Important Notes

The length property is read-only. If you attempt to modify this value, in non-strict mode the operation will be ignored, and in strict mode an error will be thrown.

let view = new Int16Array([1, 2]);
view.length = 3;
console.log(view.length); // 2

Typed arrays can be iterated using entries(), keys(), and values().

let view = new Int16Array([1, 2]);
for(let [k, v] of view.entries()){
    console.log(k, v);
}
// 0 1
// 1 2

Methods like find() can also be used for typed arrays, but methods in typed arrays will additionally check if the value types are safe and will also confirm through Symbol.species that the method's return value is a typed array rather than a regular array. The concat() method cannot be used for typed arrays because the result of merging two typed arrays is uncertain; also, methods that can change the size of an array, such as splice(), are not suitable for typed arrays.

let view = new Int16Array([1, 2]);
view.find((n) => n > 1); // 2

All typed arrays contain static of() and from() methods, which have similar effects to the Array.of() and Array.from() methods, respectively. The difference is that the typed array methods return typed arrays, while the regular array methods return regular arrays.

let view = Int16Array.of(1, 2);
console.log(view instanceof Int16Array); // true

Typed arrays are not regular arrays and do not inherit from Array.

let view = new Int16Array([1, 2]);
console.log(Array.isArray(view)); // false

Typed arrays have added set() and subarray() methods. The set() method is used to copy another array into an existing typed array, and the subarray() method is used to extract a part of an existing typed array to form a new typed array.

// set method
// Parameter 1: a typed array or a regular array
// Parameter 2: optional, the offset, the position where the data starts to be inserted, the default is 0
let view = new Int16Array(4);
view.set([1, 2]);
view.set([3, 4], 2);
console.log(view); // [1, 2, 3, 4]

// subarray method
// Parameter 1: optional, the starting position
// Parameter 2: optional, the end position (excluding the end position)
let view = new Int16Array([1, 2, 3, 4]),
    subview1 = view.subarray(),
    subview2 = view.subarray(1),
    subview3 = view.subarray(1, 3);
console.log(subview1); // [1, 2, 3, 4]
console.log(subview2); // [2, 3, 4]
console.log(subview3); // [2, 3]

Extended Operator

Copying Arrays

let arr = [1, 2],
    arr1 = [...arr];
console.log(arr1); // [1, 2]

// Array with empty slots
let arr2 = [1, , 3],
    arr3 = [...arr2];
console.log(arr3); [1, undefined, 3]

Merging Arrays

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

** Click here to share my notes

Cancel

-[1.1 ES6 Tutorial](es6-

❮ Android Tutorial Ratingbar Programmer Joke 19 ❯