Javascript array (array)

Due to the emergence of the three frameworks, the operation of DOM is transformed into the operation of data. The operation of data is mainly reflected in array and object. Today, taking array as an example, the various operations of array are summarized

Welcome to visit happy Garbage collector, a front-end knowledge summary sharing platform, and we grow together and progress together! 🙏 🙏 🙏

concat()

Used to concatenate two or more arrays. This method does not change the existing array, but only returns the new array that was concatenated

• Grammar: Arr. Concat (arr1, arr2,… ,arrn)
• Parameter: arr1 This parameter can be a specific value, an array, an object, a string, a bool, etc. It can be as many as you want
• Return value: Returns a new array. The array is generated by adding all arR1 parameters to the arrayObject. If the argument to concat() is an array, then each element in the array is added, not the array

let arr = [1.2];
let arr2 = [123.456.678];
let obj = { name: 'the king 2'.age: 123 };
let initbool = false;
let newarr = arr.concat([3.4.5].7.8[9.10]);
let newarr2 = arr.concat(3.4.5, arr2, obj, initbool);
console.log(arr); / / [1, 2]
console.log(newarr); //[1, 2, 3, 4, 5, 7, 8, 9, 10]
console.log(newarr2); / / [1, 2, 3, 4, 5, 123, 456, 678, {name: "two", the age: 123}, false]
Copy the code

copyWithin()

(new in ES6) copies the member at the specified location to another location (overwriting the original member) and returns the current array. That is, using this method, you modify the current array.

• Arr. CopyWithin (target, start = 0, end = this.length)

• Parameters: the default value of the number of incoming to other types of values (Boolean, string, array, object, undefined) to type into number (parameters for NaN as the default value)

  • Target: This is the location from which data must be replaced.
  • Start: Reads data from this position. The default value is 0. If it is negative, it is the reciprocal.
  • End: Optional to stop reading data before this location, default is equal to the array length. If it is negative, it is the reciprocal.

• Return value: Returns the current array. That is, using this method, you modify the current array

let arr = [1.2.3.4.5];
let arr1 = [1.2.3.4.5];
let arr2 = [1.2.3.4.5];
let arr3 = [1.2.3.4.5];
let arr4 = [1.2.3.4.5];
let arr5 = [1.2.3.4.5];
let arr6 = [1.2.3.4.5];
let arr7 = [1.2.3.4.5];
let arr8 = [1.2.3.4.5];
let arr9 = [1.2.3.4.5];
let arr10 = [1.2.3.4.5];
let newarr = arr.copyWithin(0.3.4);
arr1.copyWithin(0.3);
arr2.copyWithin(2);
arr3.copyWithin(1.2.4);
arr4.copyWithin(false.3);
arr5.copyWithin(true.3);
arr6.copyWithin(2.NaN);
arr7.copyWithin(2);
arr8.copyWithin(2.- 1);
arr9.copyWithin(2.2 -);
arr10.copyWithin(2.2 -.- 1);
console.log(arr); //[4, 2, 3, 4, 5]
console.log(newarr); //[4, 2, 3, 4, 5]
console.log(arr1); //[4, 5, 3, 4, 5]
console.log(arr2); //[1, 2, 1, 2, 3]
console.log(arr3); //[1, 3, 4, 4, 5]
console.log(arr4); //[4, 5, 3, 4, 5]
console.log(arr5); //[1, 4, 5, 4, 5]
console.log(arr6); //[1, 2, 1, 2, 3]
console.log(arr7); //[1, 2, 1, 2, 3]
console.log(arr8); //[1, 2, 5, 4, 5]
console.log(arr9); //[1, 2, 4, 5, 5]
console.log(arr10); //[1, 2, 4, 4, 5]
Copy the code

entries()

(new in ES6) Returns a new Array Iterator containing the key/value pairs for each index in the Array, unchanged from the original Array

• Grammar: Array. Entries ()
• Parameters:
• Return value: Returns a new Array Iterator containing key/value pairs for each index in the Array

let arr = ['a'.'b'.'c'];
let iterator1 = arr.entries();
console.log(iterator1); //Iterator
console.log(iterator1.next()); //{value: Array(2), done: false}
console.log(iterator1.next().value); //[1, "b"]
console.log(iterator1.next().value); //[2, "c"]
console.log(iterator1.next().value); // undefined
console.log(arr); // ["a", "b", "c"]
Copy the code

every()

Used to check that all elements of an array match the specified condition (provided by a function)

• Arr. Every (function(currentValue,index, Arr), thisValue)
• Parameters:
• Function (currentValue, index,arr) is required. Function, which is executed by each element in the array
  • CurrentValue: must be. The value of the current element
  • Index: optional. The index value of the current element
  • Arr: optional. The array object to which the current element belongs
• ThisValue: optional. Object is used when the callback is executed, passed to the function, and used as the value of “this”. If thisValue is omitted, the value of “this” is” undefined”
• Return value: Boolean. Return true if all elements pass detection, false otherwise

const isBigEnough = (element, index, array) = > {
	return element >= 10;
};
let passed1 = [12.5.8.130.44].every(isBigEnough);
let passed2 = [12.54.18.130.44].every(isBigEnough);
console.log(passed1); // false
console.log(passed2); // true
Copy the code

fill()

(new in ES6) Fills all elements in an array from the start index to the end index with a fixed value

• Syntax: arr. fill(value, start, end)
• Parameters:
• Value: The value used to populate an array element
• Start: indicates the optional start index. The default value is 0
• End: Optional end index. Default value is this.length.
• Return value: The original array after modification.

let arr1 = [1.2.3];
let arr2 = [1.2.3];
let arr3 = [1.2.3];
let arr4 = [1.2.3];
let arr5 = [1.2.3];
let arr6 = [1.2.3];
let arr7 = [1.2.3];
let arr8 = [1.2.3];
let arr9 = [1.2.3];
let newarr = arr1.fill(7);
arr2.fill(4);
arr3.fill(4.1);
arr4.fill(4.1.2);
arr5.fill(4.1.1);
arr6.fill(4.3.3);
arr7.fill(4.- 3.2 -);
arr8.fill(4.NaN.NaN);
arr9.fill(4.3.5); / / [1, 2, 3]
console.log(arr1); / / (7, 7, 7)
console.log(newarr); / / (7, 7, 7)
console.log(arr2); / / (4, 4, 4]
console.log(arr3); / / [1, 4, 4]
console.log(arr4); / / [1, 4, 3)
console.log(arr5); / / [1, 4, 3)
console.log(arr6); / / [1, 2, 3]
console.log(arr7); / / [1, 2, 3]
console.log(arr8); / / [4, 2, 3]
console.log(arr9); / / [1, 2, 3]
Copy the code

filter()

Creates a new array that contains all the elements of the tests implemented through the provided function

• Arr. Filter (callback(Element Index array),thisArg])
• Parameters:
• Callback is a function used to test each element of an array. Call with arguments (Element, index, array). Return true to preserve the element (passed the test), false to discontinue it. It takes three arguments
  • Element: The element currently being processed in the array
  • Index: The optional index of the element being processed in the array
  • Array: An optional array that calls the filter filter
• ThisArg optional. The value used for this when callback is executed.
• Return value: an array of new elements that pass the test, or an empty array if they fail the test

let arr = [1.2.4.5.6.9.10.15];
let newarr = arr.filter(function(x) {
	return x % 2! = =0;
});
console.log(arr); // [1, 2, 4, 5, 6, 9, 10, 15]
console.log(newarr); / / [1, 5, 9, 15]
/ / to heavy
let arr2 = ['apple'.'strawberry'.'banana'.'pear'.'apple'.'orange'.'orange'.'strawberry'];
let arr3 = arr2.filter(function(element, index, self) {
	return self.indexOf(element) === index;
});
console.log(arr3); // ["apple", "strawberry", "banana", "pear", "orange"]
Copy the code

find()

(new in ES6) used to find the target element, return the element found, return undefined

• Arr. Find (callback(Element Index array),thisArg])
• Parameters:
• Callback A function that executes on each item of the array and takes three arguments
  • Element: The element currently traversed
  • Index: Indicates the current traversal index
  • Array: The optional array itself
• ThisArg optional. Specify this for the callback.
• Return value: Returns a value in the array if an element passes the callback test, otherwise undefined.

let arr1 = [1.2.3.4.5.6.7.8];
let arr2 = arr1.find((value, index, arr) = > {
	return value > 4;
});
let arr3 = arr1.find((value, index, arr) = > {
	return value > 14;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); / / 5
console.log(arr3); //undefined
Copy the code

findIndex()

The (new in ES6) method returns the index of the first element in the array that satisfies the provided test function. Otherwise -1 is returned

• Syntax: arr. FindIndex (callback(Element Index array),thisArg)
• Parameters:
• Callback A function that executes on each item of the array and takes three arguments
  • Element: The element currently traversed
  • Index: Indicates the current traversal index
  • Array: The optional array itself
• ThisArg optional. Specify this for the callback.
• Return value: Returns the index of the first element in the array that satisfies the provided test function. Otherwise -1 is returned.

let arr1 = [1.2.3.4.5.6.7.8];
let arr2 = arr1.findIndex((value, index, arr) = > {
	return value > 4;
});
let arr3 = arr1.findIndex((value, index, arr) = > {
	return value > 14;
});
console.log(arr1); // [1, 2, 3, 4, 5, 6, 7, 8]
console.log(arr2); / / 4
console.log(arr3); / / 1
Copy the code

forEach()

Executes the provided function once on each element of the array

• Callback (currentValue index array),thisArg]
• Parameters:
• Callback A function that executes on each item of the array and takes three arguments
  • CurrentValue: The current element being processed in the array
  • Index: Index of the current element being processed in the optional array.
  • Array: The array that the optional forEach() method is operating on.
• ThisArg optional. Specify this for the callback.
• Return value: undefined, which affects the operation of the original array

let arr = [{ a: 1 }, {}];
arr.forEach(function(item, idx) {
	item.b = idx;
});
console.log(arr); // [{a: 1, b: 0}, {b: 1}]
Copy the code

from()

The (new in ES6) from() method is used to return an array from an object with a length attribute or an iterable object. Return true if the object is an array, false otherwise.

• Syntax: array. from(object, mapFunction, thisValue)
• Parameters:
• Object: Required, the object to be converted to an array.
• MapFunction: Optional function to call for each element in the array.
• ThisValue: Optional, map this object in mapFunction.
• Return value: Returns true if the object is an array, false otherwise

let setObj = new Set(['a'.'b'.'c']);
let arr = Array.from(setObj);
console.log(arr); //["a", "b", "c"]
console.log(Array.from([1.2.3], x => x + x)); / / (2, 4, 6]
Copy the code

includes()

The (new in ES6) method is used to determine whether an array contains a specified value, returning true if it does and false otherwise.

• Syntax: arr.includes(searchElement, fromIndex)
• Parameters:
• SearchElement: The element value to find
• FromIndex starts looking for searchElement at this index. If it is negative, the search starts from the index of array.length + fromIndex in ascending order. The default is 0.
• Return value: True if contained, false otherwise; (The includes method uses congruence (===) to determine if an element matches your search)

[1.2.3].includes(2); // true
[1.2.3].includes(4); // false
[1.2.NaN].includes(NaN); // true
let e1 = { name: 'zs'.age: '12' };
let e2 = { name: 'ls'.age: '13' };
let arr1 = [e1, e2];
let arr4 = arr1.includes(e1);
console.log(arr4); //true
Copy the code

indexOf()

Method returns the first index in the array where a given element can be found, or -1 if none exists.

• Syntax: arr.indexof (searchElement[, fromIndex = 0])
• Parameters:
• SearchElement: The element to find
• FromIndex: The location to start the search. If the index value is greater than or equal to the length of the array, it means that it is not searched in the array, and returns -1. If the index value provided in the argument is a negative value, it is treated as an offset at the end of the array, with -1 indicating the search starts from the last element, -2 indicating the search starts from the next-to-last element, and so on. Note: If the index value provided in the argument is a negative value, the lookup order does not change, and the lookup order is still the array queried from front to back. If the offset index is still less than 0, the entire array will be queried. The default value is 0, and the indexOf method uses congruence (===) to determine whether an element matches your search
• Return value: the index position of the first element found in the array; If none is found, -1 is returned

let arr = [{ name: 'zs'.age: '12' }, { name: 'ls'.age: '13' }];
let index = arr.indexOf({ name: 'zs'.age: '12' });
console.log(index); / / 1
let e1 = { name: 'zs'.age: '12' };
let e2 = { name: 'ls'.age: '13' };
let arr1 = [e1, e2];
let index1 = arr1.indexOf(e2);
console.log(index1); / / 1
Copy the code

isArray()

The isArray() method is used to determine whether an object is an array. Return true if the object is an array, false otherwise.

• Grammar: Array. IsArray (obj)
• Parameters:
• Obj: Required, object to be judged.
• Return value: Boolean, true if the object is an array, false otherwise.

console.log(Array.isArray([])); //true
console.log(Array.isArray([1])); //true
console.log(Array.isArray(new Array())); //true
console.log(Array.isArray()); //false
console.log(Array.isArray({})); //false
console.log(Array.isArray(null)); //false
console.log(Array.isArray(undefined)); //false
console.log(Array.isArray(17)); //false
console.log(Array.isArray('Array')); //false
console.log(Array.isArray(true)); //false
console.log(Array.isArray(false)); //false
Copy the code

join()

The concatenate () method concatenates all the elements of an array (or an array-like object) into a string and returns the string.

• Grammar: Arr. Join (separator)
• Parameters:
• The separator: optional. Specifies the delimiter to use. If this parameter is omitted, a comma is used as a delimiter.
• Return value: Returns a string. The string is generated by converting each element of the Arr to a string, then concatenating the strings, inserting the separator string between the two elements.

let elements = ['1'.'2'.'3'];
console.log(elements.join());
console.log(elements.join('+'));
console.log(elements.join(The '-'));
Copy the code

keys()

The keys() method is used to create an iterable containing the array keys from an array. Return true if the object is an array, false otherwise.

• Grammar: arr. Keys ()
• Parameters:
• Return value: an array iterable

let arr = ['a'.'b'.'c'];
let iterator = arr.keys();
console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }
Copy the code

lastIndexOf()

The lastIndexOf() method returns the last occurrence of a specified string value, searching backwards in a specified position within a string. If the string value to retrieve is not present, the method returns -1.

• Grammar: array. LastIndexOf (item, start)
• Parameter: item: required. Specifies the string value to retrieve start: an optional integer argument. Specifies the starting point in a string for retrieval. Its legal values are 0 to stringobject.length-1. If omitted, the retrieval begins at the last character of the string.
• Return value: If the SearchValue exists before the Fromindex position in stringObject, the location of the last searchValue that occurred is returned.

let arr = ['ab'.'cd'.'ef'.'ab'.'cd'];
console.log(arr.lastIndexOf('cd')); / / 4
console.log(arr.lastIndexOf('cd'.2)); / / 1
console.log(arr.lastIndexOf('ab'.- 3)); / / 0
Copy the code

Javascript array (array) common methods collection (2)

Welcome to visit happy scavenger for more front-end knowledge!