[JavaScript Fundamentals] Do you really understand today's Js arrays? It's enough to read this (Go)

[JavaScript Fundamentals] Do you really understand today's Js arrays? It's enough to read this (Go)

🌶 Blog Description

🎆🎆🎆 Part of the information involved in the article comes from the Internet, of course, there are also my own personal summaries and opinions. The purpose of sharing is to build a community and consolidate myself.

💗💗💗 If the cited information is infringing, please contact me to delete it!

💐💐💐 Fortunately I am here, thank you for coming!

🥒 Description

Arrays have been used a lot, it should be too common. When I was looping ♻️, did I say it was not very professional (a bit not very smart)!

All right, so to speak?

When traversing the array, even if you want to operate on the array (is there a built-in method?), you can think about it, don't write a lot of it yourself (I used to be!!!), especially when adding After es6 syntax.

Familiar with the operation of arrays is a basic task. When brushing LeetCode, because you are not familiar with arrays and cannot implement your own ideas, it is simply a pity! So learn arrays, from now on! ! !

But then again, you may not remember everything after reading this article, you must use it more, practice more, and summarize more! Then there are more bugs (this method is very clever, and it will be done!)

🥬 What is an array?

Surely that's a bunch of numbers combined? That's a bit inaccurate!

Array: Boy! Notice! is quite inaccurate!

Me: a combination of a bunch of elements!

array: . . .

see the explanation of Baidu Encyclopedia

Array (Array) is an ordered sequence of elements. If a finite set of variables of the same type is named, then the name is the array name.

The individual variables that make up an array are called the components of the array, also called the elements of the array, and are sometimes called subscript variables.

The numerical numbers used to distinguish individual elements of an array are called subscripts. Array is a form in which several elements of the same type are organized in an ordered form for the convenience of processing in programming. These ordered collections of homogeneous data elements are called arrays.

An array is a collection used to store multiple data of the same type.

🥜 Array properties

• constructor returns the prototype function that creates the array object.

  [].length = 2
  // 2

• length sets or returns the number of array elements.

  [1,3].length
  // 2

• prototype allows you to add properties or methods to array objects.

  // 添加属性
  Array.prototype.myToUser = 'hahah'
  // 'hahah'
  [].myToUser
  // 'hahah'
  
  // 添加方法
  Array.prototype.toOne = function() {
    for (i = 0; i < this.length; i++) {
      this[i]='one';
    }
  }
  var arr = ["red","hi","good","hello"];
  arr.toOne()
  // arr ['one', 'one', 'one', 'one']

I know that xdm is estimated that only length used the most, don't ask me how I know 🐶!

But now that I have read the article, let’s also understand the other two properties at the same time!

🥔 Array methods

Higher order function correlation

How many of these advanced array operations are familiar to you?

filter()

The method creates a new array with elements in the new array by checking all elements in the specified array that meet the criteria.

Note

filter() does not check for empty arrays.

filter() does not alter the original array.

Syntax

array.filter(function(currentValue,index,arr), thisValue)

Example

const arr = [1,2,3,4]

arr.filter(item => item > 2)
// 注意是返回值！
(2) [3, 4]

forEach()

The method is used to call each element of the array and pass the element to the callback function.

Note

forEach() will not execute the callback function for an empty array.

syntax

array.forEach(function(currentValue, index, arr), thisValue)

Example

const arr = [1,2,3,4]
let sum = 0
arr.forEach(item => sum += item)
// arr 10

every()

The method is used to check whether all elements of an array meet the specified conditions.

Note

The every() method detects all elements in an array using the specified function:

• If an element in the array is detected to be unsatisfied, the entire expression returns false , and the remaining elements are not checked.
• Returns true if all elements satisfy the condition.

every() does not check for empty arrays.

every() doesn't mutate the original array.

syntax

array.every(function(currentValue,index,arr), thisValue)

example

const arr = [1,2,3,4]
arr.every(item => item > 1)
// false
arr.every(item => item > 0)
// true

find()

The method returns the value of the first element of the array that passes the test (in-function judgment).

Note

The find() method calls a function execution once for each element in the array:

• When the elements in the array return true when testing the conditions, find() returns the elements that meet the conditions, and the execution function will not be called for subsequent values.
• Returns undefined if there are no matching elements

The find() function will not execute for an empty array.

find() doesn't change the original value of the array.

syntax

array.find(function(currentValue, index, arr),thisValue)

example

const arr = [1,2,3,4]
arr.find(item => item > 1)
// 2

findIndex()

The method returns the position of the first element of the array passed in for a test condition (function).

Note

The findIndex() method calls a function execution once for each element in the array:

• When an element in the array returns true when testing the condition, findIndex() returns the index position of the element that meets the condition, and the execution function will not be called for the following value.
• Returns -1 if no element matches the condition

Note: findIndex() function will not execute for empty arrays.

Note: findIndex() does not change the original value of the array.

Syntax

array.findIndex(function(currentValue, index, arr),thisValue)

example

const arr = [1,2,3,4]
arr.findIndex(item => item > 1)
// 1
arr.findIndex(item => item === 7)
// -1

some()

The method returns the value of the first element of the array that passes the test (in-function judgment).

Note

The method is used to check whether the elements in the array satisfy the specified condition (provided by the function).

The some() method executes each element of the array in turn:

• If one element satisfies the condition, the expression returns true , and the remaining elements will not be checked.
• Returns false if there are no elements that satisfy the condition.

Note: some() does not check for empty arrays.

Note: some() does not alter the original array.

Syntax

array.some(function(currentValue, index, arr),thisValue)

Example

const arr = [1,2,3,4]
arr.some(item => item > 1)
// true
arr.some(item => item > 5)
// false

map()

The method returns a new array, the elements in the array are the values processed by the calling function of the original array elements.

Note

The map() method processes the elements sequentially in the original array element order.

map() does not detect empty arrays.

map() doesn't mutate the original array.

Syntax

array.map(function(currentValue,index,arr), thisValue)

Example

const arr = [1,2,3,4]
const arr2 = arr.map(item => item + 1)
// arr2
// (4) [2, 3, 4, 5]

sort()

method is used to sort the elements of an array.

The sort order can be alphanumeric and in ascending or descending order.

The default sort order is ascending alphabetical order.

Note

"40" will come before "5" when the numbers are in alphabetical order.

To use numeric sorting, you must pass a function as an argument to call.

This method mutates the original array!

Syntax

array.sort(sortfunction)

example

var arr = [1,3,5,3,2];
arr.sort(function(a,b){return a-b});
// arr [1, 2, 3, 3, 5]

Manipulating arrays

pop()

The method is used to remove the last element of the array and return the removed element.

Note

This method changes the length of the array!

Syntax

array.pop()

Example

const arr = [1,2,3,4]
arr.pop()
// 4
// arr [1, 2, 3]

push()

The method adds one or more elements to the end of the array and returns the new length.

Note

The new element will be added at the end of the array.

This method changes the length of the array!

Syntax

array.push(item1, item2, ..., itemX)

example

const arr = [1,2,3,4]
arr.push(5)
// 5
// arr [1, 2, 3, 4, 5]

shift()

The method is used to remove the first element of an array from it and returns the value of the first element.

Note

This method changes the length of the array!

Syntax

array.shift()

Example

const arr = [1,2,3,4]
arr.shift()
// 1
// arr 2, 3, 4]

unshift()

The method adds one or more elements to the beginning of the array and returns the new length.

note

This method will change the number of arrays.

Syntax

array.unshift(item1,item2, ..., itemX)

Example

const arr = [1,2,3,4]
arr.unshift(3)
// 5
// arr [3, 1, 2, 3, 4]

find array correlation

indexOf()

The method returns a specified element position in an array.

This method will retrieve the array from beginning to end to see if it contains the corresponding element. The position to start searching is at the start of the array or at the beginning of the array (when the start parameter is not specified).

If an item is found, the position of the first occurrence of the item is returned. The index of the starting position is 0.

Returns -1 if the specified element is not found in the array.

Syntax

array.indexOf(item,start)

Example

const arr = [1,2,3,4]
arr.indexOf(3)
// 2

lastIndexOf()

The method returns the position of the last occurrence of a specified element in the array, searching forward from the end of the string.

If the element to be retrieved does not appear, the method returns -1.

This method will retrieve the specified element item from the array end-to-end. The position to start searching is at the start of the array or at the end of the array (when the start parameter is not specified).

If an item is found, return the position of the first occurrence of the item in the array retrieved from the tail forward. The index start position of the array starts from 0.

Returns -1 if the specified element is not found in the array.

Syntax

array.lastIndexOf(item,start)

Example

const arr = [1,2,3,4]
arr.lastIndexOf(1)
// 0

includes()

The method is used to determine whether an array contains a specified value, and returns true if it is, otherwise false.

syntax

arr.includes(searchElement, fromIndex)

example

const arr = [1,2,3,4]
arr.includes(1)
// true
arr.includes(1,2)
// false

String correlation

join()

The method is used to convert all elements in an array to a string.

Elements are separated by the specified delimiter.

Syntax

array.join(separator)

example

const arr = [1,2,3,4]
arr.join(",")
// '1,2,3,4'

toString()

The method converts an array to a string and returns the result.

Note

Elements in the array are separated by commas.

syntax

array.toString()

example

const arr = [1,2,3,4]
arr.toString()
// '1,2,3,4'

Calculate array correlation

reduce()

The method receives a function as an accumulator, and each value in the array is reduced (from left to right) to eventually evaluate to a value.

reduce() can be used as a higher-order function to compose functions.

Note

reduce() will not execute the callback function for an empty array.

syntax

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

example

const arr = [1,2,3,4]
arr.reduce((a, b) => a + b)
// 10

reduceRight()

The function of the method reduce() , the difference is that reduceRight() accumulates the array items in the array from the end of the array forward.

Note

reduce() will not execute the callback function for an empty array.

Syntax

array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)

Example

const arr = [1,2,3,4]
arr.reduceRight((a, b) => a + b)
// 10

return iterable object

entries()

The method returns an array iterator object that contains the key/value pairs of the array.

The index value of the array in the iteration object is used as the key, and the array element is used as the value.

Syntax

array.entries()

example

const arr = [1,2,3,4]
arr.entries()
// Array Iterator {}
// [0, 1]
// [1, 2]
// [2, 3]
// [3, 4]

keys()

method is used to create an iterable object containing the array keys from an array.

Returns true if the object is an array, false otherwise.

Syntax

array.keys()

example

const arr = [1,2,3,4]
arr.keys()
// Array Iterator {}

Basic operation

from()

The method is used to return an array with an object or iterable that has a length property.

Returns true if the object is an array, false otherwise.

syntax

Array.from(object, mapFunction, thisValue)

example

const arr = [1,2,3,4]
Array.from(arr, item => item * 10);
// [10, 20, 30, 40]

reverse()

method is used to reverse the order of elements in an array.

syntax

array.reverse()

example

const arr = [1,2,3,4]
arr.reverse()
// [4, 3, 2, 1]

slice()

The method returns the selected element from an existing array.

The slice() method extracts a portion of a string and returns the extracted portion as a new string.

Note

The slice() method does not alter the original array.

syntax

array.slice(start, end)

example

const arr = [1,2,3,4]
arr.slice(0, 1)
// [1]

copyWithin()

The method is used to copy an element from a specified position of the array to another specified position of the array.

Syntax

array.copyWithin(target, start, end)

example

const arr = [1,2,3,4]
arr.copyWithin(2, 0, 2)
// [1, 2, 1, 2]

valueOf()

The method returns the original value of the Array object.

Note

This primitive value is inherited by all objects derived from the Array object.

The valueOf() method is usually called automatically behind the scenes by JavaScript and does not appear explicitly in the code.

The valueOf() method does not change the original array.

Elements in the array are separated by commas.

Syntax

array.valueOf()

Example

const arr = [1,2,3,4]
arr.valueOf()
// [1, 2, 3, 4]

splice()

Methods are used to add or remove elements from an array.

Note

This method mutates the original array.

syntax

array.splice(index,howmany,item1,.....,itemX)

Example

const arr = [1,2,3,4]
arr.splice(2, 1)
// [3]
// arr [1, 2, 4]

const arr = [1,2,3,4]
arr.splice(2, 1, 4)
// [3]
// arr [1, 2, 4, 4]

concat()

method is used to concatenate two or more arrays.

This method does not change the existing array, but just returns a copy of the concatenated array.

Syntax

arr.concat(arr1,arr2,...,arrN)

Case

const arr = []
const arr1 = [1, 2]
const arr2 = [3, 4]

arr.concat(arr1, arr2)
// 注意是返回值！
(4) [1, 2, 3, 4]

isArray()

The method is used to determine whether an object is an array.

Syntax

Array.isArray(obj)

Note

It's not used like this, it is a method provided by the Array object, and the object that needs to be detected is passed in.

example

const arr = []
Array.isArray(arr)
// true

fill()

method is used to replace an element of an array with a fixed value.

Syntax

array.fill(value, start, end)

Example

var arr = ["good", "yes", "no", "hello"];
arr.fill("one", 2, 4);

// 改变了原数组
(4) ['good', 'yes', 'one', 'one']

🥦 Summary

To sum it up, it really took me a lot of time. Not only did I learn a lot from you, but I also learned a lot of pragmatic foundations.

Tinker, check for leaks, and slowly pile up into a fortress! You and I are both senior, even if not, in the future!

🫑 Thanks

❤️‍🔥❤️‍🔥❤️‍🔥 The universal network!

🥪🥪🥪 and hard-working self, personal blog , GitHub test , GitHub

🍿🍿🍿 official account [guizimo], small program [small return blog]

👍👍👍 If you feel that it is helpful to you, please give me a thumbs up, and continue to pay attention!