ES5 common methods for manipulating array objects

First of all, hello, this is Sunsei! A front end pupil. When I first touch the methods of manipulating arrays, I feel that there are many methods, different syntax, many parameters, and different effects of each method. So many and so many that it’s hard to tell apart, but you know what? There is a way to relax a lot of oh, “whole”!

JS common built-in objects and methods: Array object method -Array String object method -String mathematical object method -Math Date object method -DateCopy the code

Array Object

conversion

String to array

“String”. The split (” char “);

Effect: The string is divided into an array of characters according to the requirements of certain parameters. If there is no parameter, it is directly converted into an array of characters. Parameter: 1; Return value: an array divided by arguments (symbols) without arguments

"string".split("");// represents the null character to the array
//["s","t","r","i","n","g"]
Copy the code

Array.from(“string”);

Effect: String directly converted to character array parameter: one; Return value: array of characters

Array to string

arr.join(“”);

Effect: convert an array of characters into a string according to certain parameter characters. Return value: string concatenated by argument (symbol,)

The query

Arr. IndexOf (” a “)

Arr1.indexof (“a”) return value: -1 if not found, subscript if found

Arr1.indexof (” a”,5) arr1.indexof (” a”,5)

Return value: -1 if not found, subscript if found

Arr. LastIndexOf (” a “)

Arr1.indexof (“a”) return value: if not found, return -1, if found, return subscript

Arr1.indexof (” a”,5) arr1.indexof (” a”,5)

Return value: -1 if not found, subscript if found

arr.includes(“str”)

Effect: Check to find an element in the array parameter: 1 return value: Boolean. Returns false if not found, true if found

add

Arr. Push (” string “, 1);

Effect: At the end of the array, add one or more parameters: one or more numbers and strings are allowed, and the parameter is mandatory. Return value: change the original array, and return the changed length of the array

arr.unshift(“string”,1); At the beginning of the array, add a string element.

Effect: At the beginning of the array, add one or more parameters: one or more numbers and strings are allowed, and the parameter is mandatory. Return value: Modify the original array, modify the original array, and return the modified length of the array

delete

arr.pop(“string”);

Effect: At the end of the array, delete the element arguments: one or more numbers and strings are allowed, the argument must be entered, return the value: Modify the original array, modify the original array, return the changed length of the array

arr.shift(“string”);

Return value: change the original array, change the original array, return the changed array length

Joining together

arr.concat();

Effect: Concatenate an array with arguments in order. Arguments can be characters, numbers, or array arguments: 1; Return value: an array of characters plus the parameter elements

Parameters: 2 return values: an array with two parameters

Parameters: 3 or more return values: an array of concatenated parameters

cutting

Arr. Slice (start, end;

Effect: Crop an array from the start index to the end index, without the end index, without changing the array. Parameter: 1; Slice (2); Start at 2 and cut to the end. Return value: array of all the following elements starting with the argument (including the argument subscript elements)

Parameters: 2; Slice (2,4); The array of all elements starting with 1 and ending with 2 (without the elements with 2)

Arr. Splice ();

Note: arr.splice () can remove, crop, add, or replace elements in an array,

Arr. splice (length);

Effect: Deletes the array of parameter length elements; It’s going to change the array. Parameter: 1 return value: the array of the first three elements deleted,

[1.2.3.4].splice(3)/ / [4]
Copy the code

Arr. splice (star, Length);

Effect: Crop an array of parameter length elements starting at the starting index; It’s going to change the array.

Parameters: 2; The first value starts with the subscript, and the second value is the number to delete, that is, the length. Return value: a deleted array of elements the length of the deleted starting coordinate, excluding the starting coordinate element.

var arr=[1.2.3.4]
arr.splice(1.2)/ / [2, 3]
arr/ / [1, 4]
Copy the code

Arr. splice (star, length, string…) ;

Effect: Replace the array of parameter length elements from the starting subscript with the argument after the second argument; It’s going to change the array.

Parameters: multiple; The first value is the starting coordinate, the second value is the number of replacement, and the following values are all the new elements to replace. Return value: an array of replaced elements

var arr=[1.2.3.4]
arr.splice(1.2."a"."b"."c")//["a","b","c"]
console.log(arr);//[1,"a","b","c",4]
var arr=[1.2.3.4]
arr.splice(1.1."a"."b")
console.log(arr);/ / (1, "a", "b", 3, 4]
// Delete the second parameter first, then add the number of parameters
Copy the code

Arr. splice (star, 0, string…) ;

Effect: The argument after the second argument is added to an array of parameter length elements starting from the starting subscript; It’s going to change the array.

Parameters: multiple; Arr. splice (2,0,” a”,”b”,”c”); Return value: an array of added elements

Self-summary (start index, operate a few,’ element 1′,’ element 2′); You can add, delete and change (recommended)

The sorting

Positive sequence

arr.sort();

Effect: Sort the elements in an array by number; Character, by encoding Parameter: None Return value: sorted array

reverse

arr.reverse();

Effect: Sort the elements of an array in reverse order. Character, by encoding Parameter: None Return value: sorted array

traverse

arr.foeEach( ()=>{} );

Effect: Used to iterate over an array,

Arguments: Take three arguments, value, index, self,

Return value: The return value is undefined

var array1 = ['a'.'b'.'c'];

array1.forEach(value,key,self) =>{
  	console.log(value+2);//a2 b2 c2
    console.log(key+2);/ / 2, 3, 4
    console.log(self.push(2));//['a', 'b', 'c',2]
});
Copy the code
arr.map( ()=>{} );

Effect: Used to traverse an array, each item running a given function

Arguments: Take three arguments, value, index, self,

Return value: The return value is the result of processing.

var array1 = [1.4.9.16];
const map1 = array1.map((value,key,self) = > value * 2); // *2 for each item in the array
console.log(map1);// [2, 8, 18, 32]
Copy the code
arr.filter();

Effect: Filters an array of qualified values,

Parameters: function,

Return value: An array object whose return value satisfies the condition.

let list = [1.2.3];

let res = list.filter(item= > item > 1);
console.log(res) / / [2, 3]

Copy the code
arr.every(); And the arr. Some (); methods

Effect: Both are used to check whether all elements of the array meet the specified criteria,

Parameters: function,

Return value: the value returned is Boolean. This method returns true if all value elements in the array meet the condition, otherwise false,

every

All functions return true if each callback returns true, and terminate execution when false is encountered, returning false.

// every
et list = [1.2.3];

let res = list.every(item= > item > 0)
console.log(res) // true

let res1 = list.every(item= > item > 1)
console.log(res1) // false
Copy the code

some

There is a function that terminates execution and returns true if it returns true, and false otherwise.

//some
let list = [1.2.3];

let res = list.some(item= > item > 0)
console.log(res) // true
Copy the code
arr.reduce();

Effect: This method receives a function as an accumulator, and each value in the array (from left to right) begins to shrink, eventually calculating to a single value.

Parameters: We usually only use the first two, reduce the first parameter callback function, the second parameter is the initial value

The return value:

let list = [1.2.3];

let res = list.reduce(( prev, cur ) = > prev += cur, 0)
console.log(res) / / 6
Copy the code

conclusion

What changes the value of the original array

Splice, reverse, sort, push, pop, shift, unshift, fill

  • When I use a method that changes the array,
  • If there is a problem with using the for loop when iterating through groups (such as case-empty),
  • It is recommended that ES5 provide a way of traversing groups
/ / to empty
for(var i=0; i<arr.length; i++){if(arr[i]==""){
        arr.splice(i-1.1);
        //i--;}}// There is a problem that adjacent null characters cannot be removed
Copy the code

Because you’re modifying the array, when you iterate through the array, the array changes, and if you don’t change the count during the iterate, the iterate will be incomplete

The solution:

Index minus one, in this case I –;

ES6 series array methods

  • includes
  • find
  • findIndex
  • flat
  • fill
  • Array.from
  • Array.of

The last sentence

This is shen Xi’s learning experience! If it is not right, it is also expected to be right. I hope you will be generous with your advice. See you later.