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 this
object 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+index
method 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 includes
is 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 indexOf
a same manner as in the opposite direction to find a method, indexOf
it is to look to the last item in the array from the first one, and the lastIndexOf
method 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 Iterator
object that can not see anything, but can the same for...in
or for...of
method to print its key
value, 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 join
methods 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 Iterator
objects
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 copyWithin
similar, 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 this
an 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 pop
method 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 shift
method 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
, push
more 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)
// 打印结果
["李狗蛋", "二狗子", "三狗子", "死狗仔", "王翠花", "李二丫"]
[]