Javascript - Array prototype method inquiry

A, prototype array Explorement

1, does not change the original array

1. concat()

This stitching method is an array, the two arrays may be spliced ​​or more arrays and returns a new array containing two or more arrays of the array contents, does not change the original array

Write method which can theoretically n parameters,

const arr = [1,2];
var str = 'Hello';
var newArr = [3,4,5];
const ComArr = arr.concat(str, newArr)
console.log(ComArr)

// 打印结果
[1, 2, "Hello", 3, 4, 5]

2.find()

This method is to find the array to traverse the inside of a value satisfying the condition, and returns the value returned, the process has two parameters:

The first is the callback function array will be executed each item This function takes three parameters, the first of every item in the array, and the second is an array index each item in the table, and the third is to go through the original array

The second is a callback thisobject pointed to

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(item => item > 3)
console.log(result)

// 打印结果
5

Change this

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印结果
5

Tips to this method as long as the value found to meet the conditions, it will return immediately and stop the follow-up operation, if not found returnsundefined

3.findIndex()

This approach with the above method can be said to be the same, the only difference is that this method returns is not the first to meet the conditions of value, but the value of the subscript position where the index , if not found returns -1

const obj = {
  filt: function (val) {
    return val > 3
  }
}
const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const result = arr.find(function (item) {return this.filt(item)}, obj)
console.log(result)

// 打印结果,注意这个是索引值
3

4.flat()

This method eliminates the recursion depth copy themselves, which may be an array of all items that go through and added to the number of layers of the first group returns a new array, this method has only one parameter, the parameter value may be a default is 1, how much value, it means a few deep recursion, can also be a fixed term (Infinity), represents an arbitrary depth of recursive

const arr = [1, 2, 3, 5, 4, [3, 2, 1]]
const newArr = arr.flat()
console.log(newArr)

// 打印结果
[1, 2, 3, 5, 4, 3, 2, 1]

Tips This method may also be removed inside the null array

5.flatMap()

Do not say, are interested can you know flatMap

6.includes()

This method is useful to be useful to say that useless useless, because there are many ways you can achieve an array of other purposes

This method is used to detect the presence or absence of a data array which exists is returned true, there is no return false, this method has two parameters, the first is the data we're looking for, and the second is the starting position of the query ( index), not in accordance with the length+indexmethod continues, default 0

Tips array of objects can not use this method

Tips This method is a generic method

Tips to find data is case sensitive

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.includes(5))
console.log(arr2.includes('王翠花'))
console.log(arr3.includes({age: 23}))

// 打印结果
true
true
false

7.indexOf()

With this method includesis the same, but this method is the index of the element specified search returned no -1 is returned, this method has two parameters, the first is to query the data, and the second is to find a starting location index

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.indexOf(5))
console.log(arr2.indexOf('王翠花'))
console.log(arr3.indexOf({age: 23}))

// 打印结果
3
1
-1

8.lastIndexOf()

This method can be seen as indexOfa same manner as in the opposite direction to find a method, indexOfit is to look to the last item in the array from the first one, and the lastIndexOfmethod is to find a last item in the array from the array to the first

This method has two parameters, the first is to query the data, and the second is to find a starting position index

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.lastIndexOf(5))
console.log(arr2.lastIndexOf('王翠花'))
console.log(arr3.lastIndexOf({age: 23}))

// 打印结果
3
1
-1

Tips Although this look is the last item, start from the back, but the index is still the first item from the start, rather than start from the last count

9.join()

The method is specified by dividing the divided symbol array in which each spliced ​​into a string and a return, without writing any symbol, the default is a comma,

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr3 = [{name: '李狗蛋'}, {gender: '男'}, {age: 23}];
console.log(arr1.join())
console.log(arr2.join(''))
console.log(arr3.join('+'))

// 打印结果
1,2,3,5,4,3,2,1
李狗蛋王翠花李二丫
[object Object]+[object Object]+[object Object]

10.keys()

This method does not know what eggs with? It returns a Array Iteratorobject that can not see anything, but can the same for...inor for...ofmethod to print its keyvalue, the array index value is found

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
for(var key of arr2.keys()) {
  console.log(key)
}

// 打印结果
0
1
2

11.slice()

An array of shallow copy, the copies of the specified range to obtain an array element and returns a new array, but does not change the original array

This method has two parameters, the first index value to obtain a copy start (inclusive), the default is 0, the second is the end index value obtained copies (not included), a default length of the array

If the parameter is a negative number indicates the array is copied from the rear forward

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.slice(1, 2)
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
["王翠花"]

12.toString()

An array of all of the elements specified, returns to extract a string separated by commas, and joinmethods as

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.toString()
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋,王翠花,李二丫

13.values()

This method returns an array containing one element for each of the Array Iteratorobjects

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.values()
console.log(arr2)
console.log(arr4.next().value)
console.log(arr4.next().value)
console.log(arr4.next().value)

// 打印结果
["李狗蛋", "王翠花", "李二丫"]
李狗蛋
王翠花
李二丫

2, change the original array

1.copyWithin()

This array is copied Alternatively, somewhat similar splice()method, which receives three parameters, the first parameter is the start position of the replacement, the second parameter is the index to start copying the data, including the third parameter is end data replication index, excluding that, not until the last item

const arr = [1, 2, 3, 4, 5];
const newArr = arr.copyWithin(0, 3, 5);
console.log(newArr)

// 打印结果
[4, 5, 3, 4, 5]

This code is the index of the array 3 from the inside (inclusive) to the end of index 5 (not included) intermediate copy all of the data, and then assigned to the position 0 of the array index starts

Tips

1, this method can only change the contents of the array itself, can not change other arrays

2, the original array will change, but the length will not change

3, three parameters must be an integer, if it is negative, the last item in the array from start to move forward

4. If the start and end parameters are not, then copy the entire contents of the array, the excess is finally cleared

2.fill()

This approach with the above copyWithinsimilar, also replaced, but not with their own data array to replace, but to pass a user's own data, to replace the specified range of data

This method takes three parameters, the first parameter is the incoming user data, the second parameter is the index to start the replacement of data, including the default is 0, the end of the third parameter is the index of replacement data, not this includes not until the last one, the default is the array length

const arr = [1, 2, 3, 5, 4, 3, 2, 1]
const newArr = arr.fill('?', 5, arr.length)
console.log(newArr)

// 打印结果
[1, 2, 3, 5, 4, "?", "?", "?"]

Tips

1. The original array will change, but the length does not change

General Method 2. This method is, this method does not require thisan array of objects (not understood)

3. If the start and end parameter is negative, not start from the back, but in order to: length + start, length + end alternative way to calculate the range

3.pop()

This method is to remove the last of the array element, and returns that element value, while the original array will reduce the element, it will change the original array

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.pop()
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花"]
李二丫

4.push()

This method with the popmethod by contrast, is added after the last item in the array of an element or multiple elements, the original array will add new elements, but after the new length of the array returned by this method, instead of an array

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.push('二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "王翠花", "李二丫", "二狗子"]
4

5.shift()

The first method is to delete an array element, and returns that element value, while the original array will reduce the element

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.shift()
console.log(arr2)
console.log(arr4)

// 打印结果
["王翠花", "李二丫"]
李狗蛋

6.unshift()

This method with the shiftmethod of contrast, is added in front of the first array of an element or plurality of elements, the original array adds new elements, but after the new length of the array returned by this method, instead of an array

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.unshift('二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["二狗子", "李狗蛋", "王翠花", "李二丫"]
4

7.reverse()

This method is to reverse the order of the array's worth, which is the last of the original element becomes the first element, and so on, returns an array of new, changing the original array

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.reverse()
console.log(arr2)
console.log(arr4)

// 打印结果
["李二丫", "王翠花", "李狗蛋"]
["李二丫", "王翠花", "李狗蛋"]

8.sort()

Array sort, through in-place algorithm based on the character code obtained unicode sort, which have a relatively function parameter, if users have passed their ranking function, this function places sort function has two parameters, a first is an element, the second element is two, the two are compared, it will change the original array

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
const arr4 = arr1.sort()
console.log(arr1)
console.log(arr4)

// 打印结果
[1, 2, 3, Array(3), 4, 5]
[1, 2, 3, Array(3), 4, 5]

customize

const arr1 = [1, 2, 3, 5, 4, [3, 2, 1]]
function Compare(a, b) {
  return a-b
}
const arr4 = arr1.sort(Compare)
console.log(arr1)
console.log(arr4)

// 打印结果
[1, 2, 3, 4, 5, Array(3)]
[1, 2, 3, 4, 5, Array(3)]

9.splice()

This method can either delete the contents of the array, the array can be replaced with content, it will always return an array

delete

To remove, which has only two parameters, the first parameter is to delete start position (including), the second parameter will be the number of deleted data, returns data obtained have to delete an array composition obtained, corresponding the original array reduce data have been deleted back

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1,1)
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "李二丫"]
["王翠花"]

Tips

If the number is zero deleted, an empty array is returned

replace

In fact, not only it can be used to replace, may be used to increase the data, and is added to obtain an arbitrary position, such as the ratio of the original method: unshift, pushmore flexible

For replacement, this method has at least three parameters, the first parameter is a position to start to delete, the second parameter is the number to be deleted, the third to n-th data is used to replace, the start position removed from It began to replace, return the new array is composed of data being replaced

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 1, '二狗子')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "二狗子", "李二丫"]
["王翠花"]

Tips

1. The number is deleted regardless of how much data is replaced with the number, the number will be replaced

2. If you delete the number is 0, then is added, the data you want to delete the original location of the data to be replaced instead of the original data homeopathic moved back and returns an empty array, because there is no delete anything, there is no data

const arr2 = ['李狗蛋', '王翠花', '李二丫'];
const arr4 = arr2.splice(1, 0, '二狗子', '三狗子', '死狗仔')
console.log(arr2)
console.log(arr4)

// 打印结果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]

Guess you like

Origin www.cnblogs.com/zjh-study/p/10959531.html