1. The concept of arrays

  • Arrays hold groups of related data together and provide easy access.
  • An array is a collection of data, each of which is called an element. An array can hold any type of element. Arrays are an elegant way to store a set of data under the name of a single variable.

2. Create an array

There are two ways to create arrays in JS:

2.1. Create an array with new

Var Array name = new Array(); var arr = new Array(); // Create a new empty arrayCopy the code

Notice Array (), capital A

2.2. Create arrays using array literals

Var Array name = []; / / 2. Use an array literal way to create an array of with the initial value of the var array name = [' white ', 'black', 'rhubarb', 'rich'].Copy the code
  • Array literals are square brackets []
  • Declaring an array and assigning a value to it is called array initialization
  • This is the literal approach that we’re going to use the most in the future

2.3. The types of array elements

Arrays can hold any type of data, such as strings, numbers, booleans, etc.

Var arrStus = [' white ',12,true,28.9]; var arrStus = [' white ',12,true,28.9];Copy the code

3. Get the elements of the array

Index (subscript) : The ordinal number used to access an array element (array subscripts start at 0).

An array can be accessed, set, or modified by an index, or retrieved by an “array name [index]”.

Var arrStus = [1,2,3]; // Get the second element in the array alert(arrStus[1]);Copy the code

Note: If the array is accessed without an element corresponding to the index value, the value is undefined

4. Go through the numbers

4.1. Array traversal

Access each element in the array once from beginning to end (similar to a student roll call) and iterate through each item in the array through the for loop index

var arr = ['red','green', 'blue'];
for(var i = 0; i < arr.length; i++){
    console.log(arrStus[i]);
}
Copy the code

4.2. Array length

Array length: Indicates the number of elements in the array by default

Array name.length is used to access the number of elements in the array (array length).

Var arrStus = [1, 2, 3]; alert(arrStus.length); / / 3Copy the code

Note:

  • The length of the array is the number of elements in the array, not to be confused with the array index.

  • When the number of elements in our array changes, the length property changes with it

    • The length property of the array can be modified:

  • If the length attribute is greater than the number of elements in the array, a blank element appears at the end of the array.

    • If the length attribute is set to a value less than the number of elements in the array, the array elements exceeding that value are removed

5. Add an element to the array

5.1 Adding an array element by Changing the Length

  • You can modify the length to expand the array
  • The length attribute is read-write
var arr = ['red', 'green', 'blue', 'pink']; 
arr.length = 7; 
console.log(arr); 

console.log(arr[4]); 
console.log(arr[5]); 
console.log(arr[6]); 
Copy the code

Where the index number is 4, 5, and 6 space is not given a value, that is, the declaration variable is not given a value, the default value is undefined.

5.2 Adding an Array Element by modifying an Array index

New elements can be inserted at the end of arrays in the following ways:

Array [array.length] = new data;Copy the code
  • If the index value is the index of an existing element, the value of the previous element is overwritten.
  • If the index value is not yet present, an element is added and a blank space is created if it is not contiguous with the index value of the last element before the array.

6. New methods in ES5

6.1. The array method forEach traverses the array

array.forEach(function(currentValue, index, arr)) 
Copy the code
  • CurrentValue: The value of the current item in the array
  • Index: index of the current item in the array
  • Arr: The array object itself
ForEach (function(value, index, array) {// forEach(function(value, index, array) {// forEach(function(value, index, array) {// forEach(function(value, index, array)})Copy the code

6.2. The array method filter filters an array

array.filter(function(currentValue, index, arr)) 
Copy the code
  • The filter() method creates a new array whose elements are filtered by checking all the elements in the specified array
  • Notice that it just returns a new array
  • CurrentValue: The value of the current item in the array
  • Index: index of the current item in the array
  • Arr: The array object itself
var arr = [12, 66, 4, 88, 3, 7]; Var newArr = arr.filter(function(value, index,array) {var newArr = arr.filter(function(value, index,array) {var newArr = arr.filter(function(value, index,array) {return value >= 20; }); console.log(newArr); //[66,88] // The return value is a new arrayCopy the code

6.3. The array method some

array.some(function(currentValue, index, arr)) 
Copy the code
  • The some() method checks whether an element in an array satisfies a specified condition. The common point is to find if there are elements in the array that meet the criteria
  • Note that it returns a Boolean value, true if the element is found, false if not.
  • If the first element that satisfies the condition is found, the loop is terminated. No further search.
  • CurrentValue: The value of the current item in the array
  • Index: index of the current item in the array
  • Arr: The array object itself
Var arr = [10, 30, 4]; Var flag = arr.some(function(value,index,array) {return value < 3; }); console.log(flag); //false returns a Boolean value that terminates the loop as soon as one element is foundCopy the code

6.4. Some is different from forEach

  • If you are looking for a unique element in an array, use some. If you return true in some, it is more efficient to terminate the iteration
  • A return does not terminate an iteration in forEach

6.5. Array forEach, some, filter differences

  • ForEach is typically applied to traversal arrays and does not return a value
  • Some is usually used to query the only element in an array. Some is more appropriate. If return true is encountered, the iteration is terminated and the return value is Boolean
  • Filter is generally used to filter data. A return does not terminate the iteration. The return value is a new array

6.6. The map

6.7. every

7. Built-in object extension for ES6 (Array extension method)

7.1. Extend operators (expand syntax)

The extension operator converts an array or object into a comma-separated sequence of arguments

 let ary = [1.2.3]; . ary/ / 1, 2, 3
 console.log(... ary);// 1, 2, 3, equivalent to the following code
 console.log(1.2.3);
Copy the code

7.1.1. Extension operators can be applied to merge arrays

/ / method
 let ary1 = [1.2.3];
 let ary2 = [3.4.5];
 let ary3 = [...ary1, ...ary2];
 / / method 2ary1.push(... ary2);Copy the code

7.1.2. Convert a class array or traversable object to a true array

let oDivs = document.getElementsByTagName('div'); 
oDivs = [...oDivs];
Copy the code

7.2. Constructor method: array.from ()

Converts a pseudo-array or traversable object into a real array

// Define a collection
let arrayLike = {
    '0': 'a'.'1': 'b'.'2': 'c'.length: 3
}; 
// convert to array
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
Copy the code

The map method can also take a second argument, similar to the map method of arrays, that processes each element and puts the processed value into the returned array

 let arrayLike = { 
     "0": 1."1": 2."length": 2
 }
 let newAry = Array.from(arrayLike, item= > item *2)/ / (2, 4]

Copy the code

Note: If it is an object, then the attribute needs to be indexed

7.3. Instance method: find()

Used to find the first eligible array member, returns undefined if none is found

let ary = [{
     id: 1.name: 'Joe'
 }, { 
     id: 2.name: 'bill'
 }]; 
 let target = ary.find((item, index) = > item.id == 2);// Select a value from the array where id = 2, note that only the first value is matched

Copy the code

7.4. Instance method: findIndex()

Used to find the location of the first eligible array member, or -1 if none is found

let ary = [1.5.10.15];
let index = ary.findIndex((value, index) = > value > 9); 
console.log(index); / / 2
Copy the code

7.5. Instance methods: includes()

Checks whether an array contains a given value, returning a Boolean value.

[1.2.3].includes(2) // true 
[1.2.3].includes(4) // false

Copy the code