“Live up to the time, the creation of non-stop, this article is participating in 2021 year-end summary essay competition”

preface

The front end also has a period of time, just entered the line of time, the guide told me to be free to write more blog, helpful to later. But they are a vegetable chicken, every time everywhere to search for a variety of knowledge points to learn, the total can not feel that others write good move over. So I want to wait until I can have a little knowledge of the time, can analyze a little problem of their own time to start again. This is the first article, but also a bit of a try, not necessarily right, but also a bit of notes to share their own, when there is a mistake, trouble big guy to point out, progress together ~

Create an Array and print its prototype. You can see that Array comes with a lot of methods.

let arr = [1.2.3];
console.log(arr.__proto__);
// Let's pick some common ones:
// concat / entries / every / fill / filter / find / findIndex / flat / from / join / reducer / soft / splice
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Concat () : Creates and returns a new array, each argument in the order of its elements (if the argument is an array) or the argument itself (if the argument is not an array). It does not recurse into nested array parameters.

Grammar:var newArray = oldArray1.concat(oldArray2,[value1,value2])
let arr1 = [1[2]].let arr2 = [[5], [6]].let arr3 = [3.4,arr2];
let newArr = arr1.concat(arr3)
arr2[1] = 7
console.log(newArr)
/ / the result in [1, [2], 3, 4, [5], 7]
// Since the second value of arr2 is changed to 7, the generated array will be changed along with the reference data to which it points.
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Entries (): Returns a set of iterable objects and adds the property of iteration completion.

Keys (): returns a set of iterable keys and adds attributes for iteration completion.

Values (): Returns a set of iterable values and adds attributes for iteration completion.

About iterators: [* I recommend a good article about iterators and homemade iterators (juejin.cn/post/702910…).

// Just to mention entries, the other two are similar
const array1 = ['a'.'b'.'c'];
const iterator1 = array1.entries();
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
console.log(iterator1.next());
// result in:
// > Object { value: Array [0, "a"], done: false } 
// > Object { value: Array [1, "b"], done: false } 
// > Object { value: Array [2, "c"], done: false } 
// > Object { value: undefined, done: true }
// A list of iterable objects is returned, with a "done" field in addition to value to determine whether the iteration is complete
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Every (): receives a callback, callback(element,index,array), for each element of the array, iterating through the array until it returns a value that does not match the callback, returns false and terminates the function. Often used to check if an array has an invalid value

Some (): same as above, returns true for a value that matches the callback function

function isBelow40(currentValue, index, array) {
  console.log(currentValue,index,array);
  return currentValue < 40;
}

const array1 = [1.30.55.29.13];

console.log(array1.every(isBelow40));
// result in :
// > 1 0 Array [1, 30, 55, 29, 13] 
// > 30 1 Array [1, 30, 55, 29, 13] 
// > 55 2 Array [1, 30, 55, 29, 13] 
// > false
// If 55 is removed, true is returned
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Fill (): The method fills all elements in an array from the start index to the end index with a fixed value. Does not include terminating indexes. fill(value,start,end)

let arr = [1.2.3];
console.log(arr.fill(4.1.2))
// result in :[1, 4, 3]

console.log(arr.fill(4))
//start defaults to 0, end defaults to length: result in :[4, 4, 4]

console.log(arr.fill(4, -3.2))
// start < 0; End > 0; result in :[4, 4, 3]

console.log([1.2.3.5.5.6.7.8.8.8].fill(4, -5, -2))
// If start < end <0, replace result in :[1, 2, 3, 5, 5, 4, 4, 8, 8]

console.log(arr.fill(4.NaN.NaN))
// Could not find the fragment to replace
Array(3).fill({});    
// result in :[{}, {}, {}]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Filter (): Receives a callback function, callback(Element,index,array), for each element of the array, passes once, filters out the elements that match the callback function and returns a new array, or returns an empty array if none of the elements pass the test

Every () = every() = every() = every(); To facilitate comparison
function isBelow40(currentValue, index, array) {
  return currentValue < 40;
}

const array1 = [1.30.55.29.13];

console.log(array1.filter(isBelow40));
// result in : [1, 30, 29, 13]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Find ()/findIndex() : receives a callback, callback(Element,index,array), that iterates through each element of the array until it finds the first element/(findIndex returns the index of that element). Otherwise return undefined

Every () = every() = every() = every(); To facilitate comparison
function isBelow40(currentValue, index, array) {
  return currentValue > 40;
  // The conditions are slightly modified
}

const array1 = [1.30.55.29.13];

console.log(array1.find(isBelow40));
// result in : 55
console.log(array1.findIndex(isBelow40));
// result in : 2
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Flat ():flat(depth). Depth is 1 by default and can be a positive integer /Infinity

For the realization of flat, please refer to the following: Realization of handwriting Flat

var arr2 = [1.2[3.4[5.6]]];
arr2.flat();
// result in: [1, 2, 3, 4, [5, 6]]

var arr3 = [1.2[3.4[5.6]]];
arr3.flat(2);
// result in: [1, 2, 3, 4, 5, 6]

// Use Infinity to expand nested arrays of any depth
var arr4 = [1.2[3.4[5.6[7.8[9.10]]]]];
arr4.flat(Infinity);
// result in: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

MapFlat (): Maps each element and flattens it to a depth of 1, returning a new array

var arr1 = [1.2[3.4], [[5]]];

console.log(arr1.map(x= > [x * 2]));
// result in:[ [2], [4], [NaN], [10]]

console.log(arr1.flatMap(x= > [x * 2]));
// result in:[2, 4, NaN, 10]
[3,4] does not execute the callback function correctly, as the map flattens first and then flattens

console.log(arr1.flatMap(x= > [[x * 2]]));
// result in:[ [2], [4], [NaN], [10]]
/ / the depth of 1
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

ForEach (callback(currentValue,index,arr)): Iterates through each element and returns undefined

Map (callback(currentValue,index, ARR)): Iterates over each element and returns a new array

The comparison and performance of forEach/map/for/for in/for of will not be discussed here

CurrentValue: The current element being processed in the array (required)index: Index of the current element being processed in the array (optional)arr:`forEach()`Method is operating on an array (optional)const array1 = ['a'.'b'.'c'];

array1.forEach(element= > console.log(element));
// result in:a ,b ,c
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Array.from(): A simple and practical use is to convert an arrayLike to a real Array.

// Class array, can be generated by Set,Map, etc
const set = new Set(['foo'.'bar'.'baz'.'foo']);
console.log(set)
const setAfter = Array.from(set);
console.log(setAfter)
// result in: If you look at print, you can see the essential difference between arrayLike and Array
// The first is key-value pairs
// Have size instead of length
// The built-in functions are also completely different from Array
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Includes (): checks whether an array contains a value, returning true/false,

IndexOf (): Checks if the array contains a value, returns index/-1,

const array1 = [1.2.3];

console.log(array1.includes(2)); 
// result in ：true
console.log(array1.indexOf(2));
// result in ：1
console.log(array1.indexOf(5));
// result in ：-1
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Join (): concatenates the elements of an array/class array and returns a string

Separator: Defaults to ', '
const elements = ['yan'.'shao'.'lian'];
cosnt element = [single]

console.log(element.join())
// result in: single, because there is only one element, will not use the concatenation symbol
console.log(elements.join());
// result in: "yan,shao,lian", default separator = ', '
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Pop (): Removes the last element from the array and returns the value of that element

Push (): Adds the last element from the array and returns the length of the array

Shift (): Removes the first element from the array and returns the value of that element

Unshift (): Adds an element to the front of the array and returns the length of the array

const name = ['yan'.'shao'.'lian'];

console.log(name.pop(),name);
// result in :"lian", ["yan", "shao"]
console.log(name.push('newLian'),name)
// result in 3 , ["yan", "shao", "newLian"]
console.log(name.shift(),name);
// result in :"yan", [ "shao" ,"newLian"]
console.log(name.push('newYan'),name)
// result in 3 , ["newYan", "shao", "newLian"]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Reducer (): Go through the number group and return the summary result

// params: an Accumulator
// :CurrentValue CurrentValue
// :initialData (optional). If there is no value, the default index=0 is initialData
const array1 = [1.2.3.4];
const reducer = (previousValue, currentValue) = > 
{
  console.log(previousValue,currentValue)
  return previousValue + currentValue;
}

console.log(array1.reduce(reducer,100));
// result in: => 100, 1 => 101, 2 => 103, 3 => 106, 4 => 110
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Soft (): Sorts array elements and returns a new array

// params:compareFunction(element1,element2) requires a collation when return true is in reverse order/when return false is in positive order
const array1 = [1.30.4.21.100000];

array1.sort( (m,n) = > {
  console.log(m,n)
  console.log(array1);
  return m-n
});
console.log(array1);
// result in: result in: result in: result in: result in
//> 30 1 > Array [1, 30, 4, 21, 100000] 
//> 4 30 > Array [1, 30, 4, 21, 100000] 
//> 4 30 > Array [1, 30, 4, 21, 100000] 
//> 4 1 > Array [1, 30, 4, 21, 100000] 
//> 21 4 > Array [1, 30, 4, 21, 100000] 
//> 21 30 > Array [1, 30, 4, 21, 100000] 
//> 100000 21 > Array [1, 30, 4, 21, 100000] 
//> 100000 30 > Array [1, 30, 4, 21, 100000] 
//> Array [1, 4, 21, 30, 100000]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

Splice (): Replaces, inserts, and deletes the current array

// params:start, add from the subscript start
// 1.start>0 and greater than the array length, add from the back
/ / 2. Start < 0 will move back to reverse, when | start | > array length, the default starting from 0
// :deleteCount, the number of items to delete
// :addItem Item to add/replace (optional)
const numbers = [1.2.3.4];
numbers.splice(1.1.'new2');
console.log(numbers);
// result in: [1, "new2", 3, 4]
numbers.splice(-10.0.'zero');
console.log(numbers);
// result in: ["zero", 1, "new2", 3, 4]
Copy the code

$· · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · · ·$

conclusion

Here is almost the end, Array methods are sorted out, are some basic, transferred from MDN, integrated with their own daily development and use of experience for a summary. Convenient for beginners to view and use ha

Portals for other interesting articles:

• An article on all the methods to master Object prototypes
• Introduction to Vue3, let you know the difference between Vue2 and Vue3 (1)
• Strange prototype chain cold knowledge (need to have a certain prototype chain foundation to see oh)
• Vue Photo Amplifier, Album Set: VUE-Photo-Preview
• Hand touch teaches you to write a responsive page from 0 using Echart