Built-in object Array-1

concat()

Original : MDN-concat()
Function : The concat()method is used to merge two or more arrays. This method does not change the existing array, but returns a new array.
Syntax :newArr = arr1.concat(arr2)
- newArr: New array
- arr1: Old array 1
- arr2: Old array 2
Return value : the new Arrayinstance.
Code :

const newArr = [1, 2, 3].concat(['a', 'b', 'c']);

// [1, 2, 3, 'a', 'b', 'c']

fill()

Original : MDN-fill()
Function : The fill()method fills all elements in an array from the start index to the end index with a fixed value. Does not include the termination index.
Syntax :arr.fill(value, start, end)
- value: The value used to fill the array elements.
- start: Start index, the default value is 0.
- end: Termination index, the default value is this.length.
Return value : the modified array.
Code :

let arr = [1, 2, 3, 4, 5];
arr = new Array(arr.length).fill(0);
// arr - [0, 0, 0, 0, 0];

filter()

Original : MDN-filter()
Function : The filter()method creates a new array that contains all the elements of the test implemented by the provided function.
Syntax :arr.filter(callback)
- callback: A function to test each element of the array. Return trueindicates that the tested element, the retention element falseis not retained. It accepts the following three parameters:
  - element: The element currently being processed in the array
  - index: The index of the element being processed in the array.
  - array: Call the filterarray itself.
Return value : a new array consisting of elements that pass the test. If no array element passes the test, an empty array is returned.
Code :

function isBigEnough(element) {
    
    
  return element >= 10;
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);
// [12, 130, 44]

find()

Original : MDN-find()
Function : The find()method returns the value of the first element in the array that satisfies the provided test function. Otherwise, it returns undefined.
Syntax :arr.find(callback)
- callback: A function executed on each item of the array, receiving 3 parameters:
  - element: The element currently traversed.
  - index: The index currently traversed.
  - array: The array itself.
Return value : The value of the first element in the array that satisfies the provided test function, otherwise it returns undefined.
Code :

var inventory = [
  {
    
    name: 'apples', quantity: 2},
  {
    
    name: 'bananas', quantity: 0},
  {
    
    name: 'cherries', quantity: 5}
];

function findCherries(fruit) {
    
     
  return fruit.name === 'cherries';
}

inventory.find(findCherries));
// { name: 'cherries', quantity: 5 }

findIndex()

Original : MDN-findIndex()
Function : The findIndex()method returns the index of the first element in the array that satisfies the provided test function. Otherwise, it returns -1.
Syntax :arr.findIndex(callback)
- callback: A function executed on each item of the array, receiving 3 parameters:
  - element: The element currently traversed.
  - index: The index currently traversed.
  - array: The array itself.
Return value : Returns the index of the first element in the array that satisfies the provided test function. Otherwise, it returns -1.
Code :

var array1 = [5, 12, 8, 130, 44];

function isLargeNumber(element) {
    
    
  return element > 13;
}

array1.findIndex(isLargeNumber); // 3

forEach()

Original : MDN-forEach()
Function : The forEach()method executes the provided function once for each element of the array.
Syntax :arr.forEach(callback)
- callback: A function executed for each element in the array. The function receives three parameters:
  - currentValue: The element currently being processed in the array
  - index: The index of the current element being processed in the array.
  - array: forEach()The array the method is operating on.
Return value : undefined.
Code :

const items = ['item1', 'item2', 'item3'];
const copy = [];

// 使用 for 遍历
for (let i = 0; i < items.length; i++) {
    
    
  copy.push(items[i]);
}

// 使用 forEach 遍历
items.forEach(function(item){
    
    
  copy.push(item);
});

includes()

Original : MDN-includes()
Function : The includes()method is used to judge whether an array contains a specified value, according to the situation, if it contains, it returns true, otherwise it returns false.
Syntax :arr.includes(valueToFind, fromIndex)
- searchValue: The value of the element to be found.
- formIndex: Optional, where to start searching
Return value : Return a Boolean value.
Code :

[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

indexOf()

Original : MDN-indexOf()
Function : The indexOf()method returns the index of the first occurrence of the specified value in the calling String object.
Syntax :indexOf(searchValue, fromIndex)
- searchValue: Lookup value
- formIndex: Where to start searching
Return value : If found, return the index of the first occurrence; if not found, return -1.
Code :

'I am jsliang'.indexOf('a', 4); // 9
[1, 3, 1, 4].indexOf(1, 1); // 2
'怪盗 jsliang'.indexOf('我'); // -1

Extension : If you need to find the index of the last occurrence of the specified value, you can use it lastIndexOf().

lastIndexOf()

Original : MDN-lastIndexOf()
Function : The lastIndexOf()method returns the last index of the specified element (that is, a valid JavaScript value or variable) in the array, or -1 if it does not exist.
Syntax :lastIndexOf(searchValue, fromIndex)
- searchValue: Lookup value
- formIndex: Reverse search from this location
Return value : the index of the last element in the array, if not found, return -1.
Code :

var array = [2, 5, 9, 2];
var index = array.lastIndexOf(2); // 3

Extension : If you need to find the index of the first occurrence of the specified value, you can use it indexOf().

join()

Original : MDN-join()
Function : The join()method connects all the elements of an array (or an array-like object) into a string and returns this string
Syntax :arr.join(separator)
- separatorIt is a form of merger. For example, ''it is not spliced in any form to a string: ['hello', 'hi'].join('') -> 'hellohi'; for example '-'is in -the form of a string splicing:['hello', 'hi'].join('') -> 'hello-hi'
Return value : a string concatenating all array elements.
Code :

var a = ['Wind', 'Rain', 'Fire'];
var myVar1 = a.join();      // myVar1 的值变为 "Wind,Rain,Fire"
var myVar2 = a.join(', ');  // myVar2的值变为"Wind, Rain, Fire"
var myVar3 = a.join(' + '); // myVar3的值变为"Wind + Rain + Fire"
var myVar4 = a.join('');    // myVar4的值变为"WindRainFire"

map()

Original : MDN-map()
Function : The map()method creates a new array, and the result is the result returned after each element in the array calls a provided function.
Syntax :map((item, index) => {})
- item: Items traversed
- index: The index of the traversed item
Return value : a new array, each element is the result of the callback function.
Code :

[1, 2, 3, 4].map(item => item * 2) // [2, 4, 6, 8]

[{
    
    
  name: 'ZZZ',
  age: 24,
}, {
    
    
  name: 'XXX',
  age: 124
}].map((item, index) => {
    
    
  return `${
      
      index} - ${
      
      item.name}`;
}) // ['0 - ZZZ', '1 - XXX']

reduce()

Original : MDN-reduce()
Function : The reduce()method executes a reducer function (executed in ascending order) provided by you on each element in the array, and aggregates the results into a single return value.
Syntax :arr.reduce((prev, next) => { return prev + next }
- prev: The value of the previous item in the array
- next: The value of the last item in the array
- return: returnThe value out will be regarded as the next timeprev
Return value : the result of the cumulative processing of the function
Code :

[1, 2, 3, 4].reduce((prev, next) => {
    
    
  return prev + next;
}); // 10
['前端', 'pang', 'liang'].reduce((prev, next, index) => {
    
    
  return (index = 0 ? '-js' : '') + prev + 'js' + next;
}); // 前端-jspang-jsliang

Built-in object Array-1

concat()

fill()

filter()

find()

findIndex()

forEach()

includes()

indexOf()

lastIndexOf()

join()

map()

reduce()

Guess you like