Array

A variable can only save one data. When a series of data needs to be saved, an array is needed:

array   Is a container that can store a set or a series of related data.

Why use arrays?
Solve the problem of storage and use of a large amount of relevant data.

Create an array and assign values

Create array

Instantiate constructor

var arr = new Array();

Implicit creation (internal call to new Array())

var arr = [];

Array assignment

Create an array and assign values

var arr = new Array("a","b","c");   // ['a','b','c']

var arr = ["a","b","c"];

Assignment after array creation
The array stores ordered data, so it can be assigned according to the serial number of the data location, which is called subscript
Syntax:

Array name[subscript]

Example

var arr = [];
arr[0]="a";
arr[1]="b";
arr[2]="c";
// The above operation is equivalent to var arr = ["a","b","c"];

Assignment characteristics

• The subscript of the array is from   0   Start the calculation. arr[0] is the first value of the arr array
• Array can store data of any data type. An array can contain object elements, functions and arrays

Access to arrays

Accessing data through array subscripts

• Access data: directly obtain the value of the corresponding position of the array through the subscript
• Modify data: directly assign the data to the corresponding position of the corresponding array

// Access the first value of the arr array
var one = arr[0];
// Modify the first value of arr number to 'x';
arr[0] = "x"

Length of array

The length of the array is the number of data stored in the array. There is a length attribute on the array to access the length of the array

var arr = [1,2,3,4,5];
arr.length   // 5

Index of the last data in the array:   length-1
Access the last element of the array: arr[length-1]

Traversal of array

Get in turn by loop   0 to length-1   To traverse the array and access all array data

for loop traversal

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

// console output 
> 1
> 2
> 3

for...in loop

var arr = [1,2,3];
for(var i in arr){
  // i is the array subscript
  // arr[i] is array data
}

But it's best not to use the for in loop to traverse the array. It's used to traverse the object. If you add a method to the array prototype, it will also traverse it

[ES6]for...of loop

The for...of loop can use arrays, Set and Map structures, some array like objects (such as arguments object, DOM NodeList object), and strings.

let arr = [3, 5, 7];
arr.foo = 'hello';

for (let i in arr) {
  // The i value is the key name
  console.log(i); // "0", "1", "2", "foo"
}

for (let i of arr) {
  // The i value is a key value and returns only properties with a numeric index
  console.log(i);   //  "3", "5", "7"
}

Two dimensional array

Every child element in an array is an array

var arr = [[1,2,3],[4,5],[6]]

Traversing a two-dimensional array

for(var i =0; i<arr.length;i++){
  for(var j =0; j<arr.length;j++){
    console.log(arr[i][j])
  }
}

Array extension

[ES6] deconstruction assignment of array

Extracting values from an array and assigning values to variables is called array deconstruction assignment.

var [one, two, three] = [1,2,3];
console.log(one); // 1
console.log(two); // 2
console.log(three); // 3

To prevent an object with a value of undefined from being taken out of the array, you can also set the default value for this object.

var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7

Purpose 1: do not use the third variable to exchange the values of two variables.

var a = 1, b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

Purpose 2: function parameters receive array parameters
When a function argument is an array, the argument data can be parsed by deconstruction

function f([x, y]) {
  // x:1    y:2
  return x + y;
}
var add = f([1,2]);
console.log(add); // 3

Purpose 3: parse an array returned from a function
When the return value of a function is an array, deconstruction makes it more convenient to process when the return value is an array

function f() {
  return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2

[ES6] extended operator

The spread operator is three points. It's like a function rest   The inverse operation of parameters converts an array into a comma separated sequence of parameters.

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

purpose

1. Function call parameter passing

// The array parameter items is converted into numbers to push
function push(array, ...items) {
array.push(...items);
}

// Add the data in the array
function add(x, y) {
return x + y;
}
let numbers = [4, 38];
add(...numbers) // 42

// Find the most important value of the array
Math.max(...[numbers])    // 38
Math.min(...[numbers])    // 4

2. Array copy

const a1 = [1, 2];
// Writing method I
const a2 = [...a1];
// Writing method 2
const [...a2] = a1;

3. Array merging

let arr1 = [1,2,3], arr2 = [4,5,6];
let newarr = [...arr1, ...arr2]

However, this method is a shallow copy, which should be paid attention to when using.