Chapter 10 Improved Array Function
Based on ES5, the ES6 standard continues to improve arrays and adds many new functions to arrays. For example: a new method of creating an array, several practical and convenient methods, and the ability to create a typed array (Typed Array). This chapter explains these new features one by one.
Section 1 Create Array
1. The traditional method of creating an array.
Before ES6, there were two ways to create an array: one was to call the Array constructor, and the other was to use the array self-face value syntax. Because when using the Array constructor to create an array, there are sometimes weird behaviors (such as when a string number is passed in). So the Array.of() and Array.from() methods have been added.
2. Array.Of() creates an array
To create an array using Array.of( ), you only need to pass in the values you want to include in the array. For example:
let items = Array.of(1,2);
console.log(items.length); //2
console.log(items[0]); //1
console.log(items[1]); //2
let items = Array.of(2);
console.log(items.length); //1
console.log(items[0]); //2
let items = Array.of("2");
console.log(items.length);//1
console.log(items[0]);//"2"3. Array.from() creates an array
Array.from() is commonly used to convert accumulated array objects (such as arguments) and iterable objects into arrays. It accepts an iterable object or an array-like object as the first parameter, and finally returns an array. For example:
function makeArray(arrayLike)
{
var result = [];
for (var i=0, len=arrayLike.length; i<len; i++)
{
result.push(arrayLike[i]);
}
return result;
}
function doSomething()
{
var args = makeArray(arguments);
}
Section 2 New methods added for all arrays
1. The find() method and findIndex() method.
The find() and findIndex() methods pass in a specified parameter, and then respectively return the element in the array that meets this condition and the index of the position of the element. For example:
let numbers = [25,30,35,40,45];
console.log(numbers.find(n => n>33)); //35
console.log(numbers.findIndex(n => n>33)); //22. fill() method
The fill() method can fill one or more elements with the specified value. When a value is passed in, the fill() method will overwrite all the values in the array with this value. If you only want to change the value of a certain one or a certain part, you can pass in the two parameters of the start index and the end index not (not including the current value of the end index). for example:
let numbers = [1,2,3,4];
numbers.fill(1);
console.log(numbers.toString()); // 1,1,1,1
let numbers = [1,2,3,4];
numbers.fill(1,2);
console.log(numbers.toString()); //1,2,1,1
numbers.fill(0,1,3);
console.log(numbers.toString()); // 1,0,0,1In the above example, 1 in fill(1,2) is the element to be filled, 2 is the index of the start position of the filling, because there is no number for the end index, then the default value is until the last element of the data, that is numbers.length, so the last two elements of the numnbers array are filled with 1. In fill(0,1,3), the element to be filled is 0, the index of the start position is 1, and the index of the end position is 3, so element 0 will fill the array elements with indices 1 and 2.
3. copyWidth() method
The copyWith() method is similar to the fill() method, but it copies the value of the element from the array. To call this method, you need to pass in two parameters: one is the position where the method starts to fill in the value, and the other is the index position of the value copied by the method. for example:
let numbers = [1,2,3,4];
numbers.copyWith(2,0);
console.log(numbers.toString()); //1,2,1,2If the third parameter is passed to the method, it means the position to stop copying the value (but this parameter does not contain the end index). For example:
let numbers = [1,2,3,4];
numbers.copyWith(2,0);
console.log(numbers.toString()); //1,2,1,2
let numbers = [1,2,3,4];
numbers.copyWith(2,0,1);
console.log(numbers.toString()); //1,2,1,4
Section 3 training arrays
1. What is a stereotyped array?
The so-called fixed array refers to the conversion of any number into an array containing digital bits. It is a special array used to process numeric data and can provide JavaScript with fast bitwise operations.
2. Corresponding concepts
Since I don’t usually use it a lot, I can look back when you encounter specific problems.
1) Web GL: Web Graphics Library, a 3D graphics protocol or graphics standard.
2) The stereotyped array supports the storage and operation of the following 8 different numeric types:
Signed 8-bit integer (int8)
Unsigned 8-bit integer (uint8)
Signed 16-bit integer (int16)
Unsigned 16-bit integer (uint16)
Signed 32-bit integer (int32)
Unsigned 32-bit integer (uint32)
32-bit floating point number (float32)
64-bit floating point number (float64)
3) Array buffer: a memory address that can contain a specific number of bytes. You can create an array buffer through the ArrayBuffer constructor. E.g:
1 let buffer = new ArrayBuffer(10); //分配10字节4) The view is the interface used to manipulate the memory. The DataView type is a general array buffer view, which supports all 8 numeric data types.
Section 4 The similarities between stereotyped arrays and ordinary arrays
1. General method
Most of the methods in the array can be used in the stereotyped array.
2. The same iterator
The spread operator can convert iterable objects into ordinary arrays, and can also convert stereotyped arrays into ordinary arrays.
3. of( ), from() methods
Fixed arrays can also use the of() and from() methods like ordinary arrays, but the returned array is also fixed.
Section 5 The difference between stereotyped arrays and ordinary arrays
1. Behavioral differences
When operating a normal array, the size of the array can be changed, but the fixed array always keeps the same size.
2. The missing method
These methods are only available in ordinary arrays, but not in fixed arrays. Think about it why? Because these methods are basically for changing the size of the array, and in the first item we just said, the stereotyped array always keeps the same size, so these methods are not included in the stereotyped array. List these methods:
concat( )
pop( )
push( )
shift( )
unshift( )
splice( )
It can be seen that in the above method, in addition to concat( ), several others can change the size of the array.
3. Additional methods
There are two methods for stereotyped arrays, but not for ordinary arrays: set() and subarray( ). The following are introduced separately:
1) set( ): Copy other arrays to an existing training array. The set() method accepts two parameters: one is an array (either a fixed array or an ordinary array); the other is an optional offset, that is, the position to start inserting data, if nothing is passed, then the default offset Is 0. The legal data is copied from the array passed in as a parameter to the target array. For example:
let ints = new Int16Array(4);
ints.set([25,50]);
ints.set([75,100]);
console.log(ints.toString()); //25,50,75,1002) subarray( ): Extract a part of the existing stereotyped array as a new stereotyped array. It accepts two parameters: one is the optional start position, the other is the optional end position (does not contain the current position data), and finally returns a new training array. You can also omit these two parameters to clone a new training array. For example:
let ints = new Int16Array([25, 50, 75, 100]);
subints1 = ints.subarray();
subints2 = ints.subarray(2);
subints3 = ints.subarray(1, 3);
console.log(subints1.toString()); // 25, 50, 75, 100
console.log(subints2.toString()); // 75, 100
console.log(subints1.toString()); // 50, 75
(End of this section)