数组全剧集

关于数组Array

本篇文章“有理有据”，参照javaScript文档（https://www.w3school.com.cn/jsref/jsref_obj_array.asp）详细介绍了数组Array（我本人尤其喜欢splice，完美操作数组，相当哇塞！！！）

一、Array属性

属性	描述
constructor	返回创建Array对象原型的函数
length	设置或者返回数组中元素的数量
prototype	向数组添加属性和方法

1、

arr.constructor

2、

arr.length

3、

// 添加新方法
Array.prototype.myUcase = function() {
  for (let i = 0; i < this.length; i++) {
    this[i] = this[i].toUpperCase();
  }
};
arr.myUcase()

二、Array方法

1、concat

方法	描述
concat	连接两个或多个数组，并返回已连接数组的副本

用法

let arr1 = ['1','2','3']
let arr2 = ['4','5','6']
let arr_new = arr1.concat(arr2)
console.log(arr_new,'arr_new')
console.log(arr1,'arr1')
console.log(arr2,'arr2')

运行结果：

总结：
concat() 方法不会更改现有数组，而是返回一个新数组，其中包含已连接数组的值。

2、copyWithin

方法	描述
copyWithin	将数组中的数组元素复制到指定位置或从指定位置复制

语法
array.copyWithin(target, start, end)

参数	描述
target	必须，将元素复制到索引位置
start	可选，开始复制元素的索引位置（默认为0）
end	可选，停止从中复制元素的索引位置（默认为array.length）

用法

const fruits = ["1", "2", "3", "4", "5", "6"]
console.log(fruits.copyWithin(2,3,5))

运行结果：

总结：
copyWithin() 方法将数组元素复制到数组中的另一个位置，覆盖现有值。
copyWithin() 方法永远不会向数组添加更多项。
提示：copyWithin() 方法会覆盖原始数组。

3、entries

方法	描述
entries	返回键/值对数组迭代对象

用法：

const arr = ["value1", "value2", "value3", "value4"];
const f = arr.entries();
for (let x of f) {
  console.log(x)
}
console.log(arr, 'arr')

运行结果：

总结：
entries() 方法返回带有键/值对的 Array Iterator 对象。

对于原始数组中的每一项，新的迭代对象将包含一个以索引为键，以项值为值的数组。
entries() 不会更改原始数组。

4、every

方法	描述
every	检查数组中的每个元素是否通过测试

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

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

let arrs = [{
  id:3,
  name:'value1'
},{
  id:2,
  name:'value2'
},{
  id:1,
  name:'value3'
}]
let bool = arrs.every(function(arrsItem,index,arr){
 console.log(arrsItem,index,arr, '1')
 return arrsItem.id>2
})
console.log(bool, 'bool')
console.log(arrs, 'arrs')

运行结果：

总结：
every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。
every() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
如果没有出现 false，every() 返回 true
every() 不对没有值的数组元素执行函数。
every() 不改变原始数组。

5、fill

方法	描述
fill	用静态值填充数组中的元素。

语法：
array.fill(value, start, end)

参数	描述
value	必须。用于填充数组的值。
start	可选。开始填充数组的索引（默认为 0）。
end	可选。停止填充数组的索引（默认为 array.length）。

用法：

let arr = [1,2,3,4,5]
let arr2 = arr.fill('new',2,4)
console.log(arr2, 'arr2')
console.log(arr, 'arr')

运行结果：

总结：
fill() 方法用静态值填充数组中的指定元素。

您可以指定开始和结束填充的位置。如果未指定，则将填充所有元素。

fill() 会覆盖原始数组。

6、filter

方法	描述
filter	使用数组中通过测试的每个元素创建新数组。

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

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

let arr = [1,2,3,4,5,6]
let arr2 = arr.filter(function(arrItem,index,arr) {
  console.log(arrItem, index, arr)
  return arrItem>2
})
console.log(arr2, 'arr2')
console.log(arr, 'arr')

运行结果：

总结：
filter() 方法创建数组，其中填充了所有通过测试的数组元素（作为函数提供）。
filter() 不会对没有值的数组元素执行该函数。
filter() 不会改变原始数组。

7、find

方法	描述
find	返回数组中第一个通过测试的元素的值。

语法：
array.find(function(currentValue, index, arr), thisValue)

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

let arr1 = [1,2,3,4,5,6]
let findValue = arr1.find(function(arrItem,index,arr){
  console.log(arrItem,index,arr)
  return arrItem>3
})
console.log(findValue, 'findValue')
console.log(arr1, 'arr1')

运行结果：

总结：
find() 方法返回数组中第一个通过测试的元素的值（作为函数提供）。
find() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回 true 值的数组元素，则 find() 返回该数组元素的值（并且不检查剩余值）
否则返回 undefined
find() 不对空数组执行该函数。
find() 不会改变原始数组。

8、findIndex

方法	描述
findIndex	返回数组中通过测试的第一个元素的索引。

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

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

let findValue = arr1.find(function(arrItem,index,arr){
  console.log(arrItem,index,arr)
  return arrItem>3
})
console.log(findValue, 'findValue')
console.log(arr1, 'arr1')

运行结果：

总结：
findIndex() 方法返回数组中通过测试的第一个元素的索引（作为函数提供）。
findIndex() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回 true 值的数组元素，则 findIndex() 返回该数组元素的索引（并且不检查剩余值）
否则返回 -1
findIndex() 不会为没有值的数组元素执行函数。
findIndex() 不会改变原始数组。

9、forEach

方法	属性
forEach	为每个数组元素调用函数。

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

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

箭头函数写法
let arr = [1,2,3,4,5,6]
let s = 0
arr.forEach((arrItem,index,arr) => {
 console.log(arrItem,index,arr)
 s += arrItem;
})
console.log(s, 's')
console.log(arr, 'arr')
普通函数写法
let arr = [1,2,3,4,5,6]
let s = 0
arr.forEach(function (arrItem,index,arr) {
  console.log(arrItem,index,arr)
  s += arrItem
})
console.log(s, 's')
console.log(arr, 'arr')

运行结果

总结：
forEach() 方法按顺序为数组中的每个元素调用一次函数。
对于没有值的数组元素，不执行forEach() 方法。

10、from

方法	描述
from	从对象创建数组。

语法：
Array.from(object, mapFunction, thisValue)

参数	描述
object	需要转为数组的对象
mapFunction	可选。对数组的每个项目调用的 map 函数。
thisValue	可选。执行 mapFunction 时用作 this 的值。

用法：

let str = '12345678'
let arr = Array.from(str,mapFunction(){
   console.log('val')
   }
)
console.log(arr, 'arr')
console.log(str, 'str')

运行结果：

总结：
from() 方法从具有 length 属性或可迭代对象的任何对象返回 Array 对象。

11、includes

方法	描述
includes	检查数组是否包含指定的元素。

语法：
array.includes(element, start)

参数	描述
element	必需。要搜索的元素。
start	可选。默认 0。在数组中的哪个位置开始搜索。

用法：

let arr = [1,2,3,4,5,6]
let bool1 = arr.includes(1)
let bool2 = arr.includes(1,2)
console.log(bool1, bool2 ,'bool')
console.log(arr, 'arr')

运行结果：

总结：
includes() 方法确定数组是否包含指定的元素。
如果数组包含元素，则此方法返回 true，否则返回 false。
includes() 方法区分大小写。

12、indexOf

方法	描述
indexOf	在数组中搜索元素并返回其位置。

用法：

let arr = [1,2,3,4,5,6]
let index1 = arr.indexOf(1)
let index2 = arr.indexOf(1,3)
let index3 = arr.indexOf(5,3)
console.log(index1, 'index1')
console.log(index2, 'index2')
console.log(index3, 'index3')

运行截图

总结
indexOf() 方法在数组中搜索指定项目，并返回其位置。
搜索将从指定位置开始，如果未指定开始位置，则从头开始，并在数组末尾结束搜索。
如果未找到该项目，则 indexOf() 返回 -1。
如果该项目出现多次，则 indexOf() 方法返回第一次出现的位置。
第一项的位置为 0，第二项的位置为 1，依此类推。

13、lastIndexOf

方法	描述
lastIndexOf	同indexOf

用法：同indexOf

let arr = [1,2,3,4,5,6]
let index1 = arr.lastIndexOf(1)
let index2 = arr.lastIndexOf(1,3)
let index3 = arr.lastIndexOf(2,3)
console.log(index1, 'index1')
console.log(index2, 'index2')
console.log(index3, 'index3')

运行结果：

总结：
lastIndexOf() 方法在数组中搜索指定项目，并返回其位置。
搜索将从指定位置开始，如果未指定开始位置，则从末尾开始，并在数组的开头结束搜索。
如果未找到该项目，则 lastIndexOf() 方法返回 -1。
如果要搜索的项目不止一次出现，lastIndexOf() 方法将返回最后一次出现的位置。

14、isArray

方法	描述
isArray	检查对象是否为数组

用法

let arr = [1,2,3,4,5,6]
let bool = Array.isArray(arr)
console.log(bool, 'bool')

运行结果

总结：
isArray() 方法确定对象是否为数组。
如果对象是数组，则此函数返回 true，否则返回 false。

15、join

方法	描述
join	将数组的所有元素连接成一个字符串

用法

let arr = [1,2,3,4,5,6]
let str1 = arr.join()
let str2 = arr.join('/')
console.log(str1, 'str1')
console.log(str2, 'str2')
console.log(arr, 'arr')

运行结果

总结：
join() 方法将数组作为字符串返回。
元素将由指定的分隔符分隔。默认分隔符是逗号 (,)。
join() 方法不会改变原始数组。

16、keys

方法	描述
keys	返回 Array Iteration 对象，包含原始数组的键.

用法：

let arr = [1,2,3,4,5,6]
let key = arr.keys()
for (let x of key) {
  console.log(x, 'x')
}
console.log(key, 'key')
console.log(arr, 'arr')

运行结果：

总结：
keys() 方法返回带有数组键的 Array Iterator 对象。
keys() 方法不改变原数组。

17、map

方法	描述
map	使用为每个数组元素调用函数的结果创建新数组。

语法：
array.map(function(currentValue, index, arr), thisValue)

参数	描述
currentValue	必须，当前元素的值
index	可选，当前元素的数组索引
arr	可选，当前元素所属的数组对象

用法：

let arr = [1,2,3,4,5,6]
let arr_new = arr.map(function(arrItem,index,arr){
 console.log(arrItem,index,arr)
 return arrItem + 4
})
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
map() 方法使用为每个数组元素调用函数的结果创建新数组。
map() 方法按顺序为数组中的每个元素调用一次提供的函数。
map() 对没有值的数组元素不执行函数。
map() 不会改变原始数组。

18、pop

方法	描述
pop	删除数组的最后一个元素，并返回该元素。

用法：

let arr = ['value1','value2','value3','value4','value5','value6']
let arr_new = arr.pop()
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
pop() 方法移除数组的最后一个元素，并返回该元素。
pop() 方法会改变数组的长度。
返回值是移除的元素
改变原始数组，原始数组变成移除之后的数组

19、push

方法	描述
push	将新元素添加到数组的末尾，并返回新的长度。

语法：
array.push(item1, item2, …, itemX)

参数	描述
item1, item2, …, itemX	必需。要添加到数组中的项目。

用法：

let arr = ['value1','value2','value3','value4','value5','value6']
let arr_new = arr.push('value7')
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
push() 方法向数组末尾添加新项目，并返回新长度。
新的项目将被添加到数组的末尾。
返回值是新数组的长度
改变原始数组，原始数组是改变之后的数组

20、shift

方法	描述
shift	删除数组的第一个元素，并返回该元素。

用法：

let arr_new = arr.shift()
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
shift() 方法移除数组的第一项。
shift() 方法会改变数组的长度。
shift 方法的返回值是被移除的项目。
shift() 方法会改变原始数组。

21、unshift

方法	描述
unshift	将新元素添加到数组的开头，并返回新的长度。

语法：
array.unshift(item1, item2, …, itemX)

参数	描述
item1, item2, …, itemX	必需。要添加到数组开头的项。

用法

let arr = ['value1', 'value2','value3', 'value4','value5','value6']
let arr_new = arr.unshift('value7','value8')
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果

总结：
unshift() 方法将新项添加到数组的开头，并返回新的长度。
unshift() 方法会改变数组的长度。

22、reduce

方法	描述
reduce	将数组的值减为单个值（从左到右）。

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

参数	描述
total	必需。initialValue，或函数先前返回的值。
currentValue	必需。当前元素的值。
currentIndex	可选。当前元素的数组索引。
arr	可选。当前元素所属的数组对象
initialValue	可选。作为初始值传递给函数的值。

用法：

let numbers = [175, 50, 25];
function myFunc(total, num, index,arr) {
  console.log(total,num,index,arr)
  return total - num;
}
let str1 = numbers.reduce(myFunc)
console.log(str1, 'str1')
console.log(numbers, 'numbers')
console.log('------------------------------------------')
let str2 = numbers.reduce(myFunc, 0)
console.log(str2, 'str2')
console.log(numbers, 'numbers')

运行截图

总结：
reduce() 方法将数组缩减为单个值。
reduce() 方法为数组的每个值（从左到右）执行提供的函数。
函数的返回值存储在累加器中（结果/总计）。
对没有值的数组元素，不执行 reduce() 方法。
reduce() 方法不会改变原始数组。

23、reduceRight

方法	描述
reduceRight	将数组的值减为单个值（从右到左）。

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

参数	描述
total	必需。initialValue，或函数先前返回的值。
currentValue	必需。当前元素的值。
currentIndex	可选。当前元素的数组索引。
arr	可选。当前元素所属的数组对象
initialValue	可选。作为初始值传递给函数的值。

用法：

let numbers = [175, 50, 25];
function myFunc(total, num, index,arr) {
  console.log(total,num,index,arr)
  return total - num;
}
let str1 = numbers.reduceRight(myFunc)
console.log(str1, 'str1')
console.log(numbers, 'numbers')
console.log('------------------------------------------')
let str2 = numbers.reduceRight(myFunc, 0)
console.log(str2, 'str2')
console.log(numbers, 'numbers')

运行截图：

总结：
reduceRight() 方法将数组缩减为单个值。
reduceRight() 方法为数组的每个值（从右到左）执行提供的函数。
函数的返回值存储在累加器中（结果/总计）。
对没有值的数组元素，不执行 reduceRight() 方法。

24、reverse

方法	描述
reverse	反转数组中的元素

用法：

let arr = ['value1','value2','value3','value4','value5','value6']
let arr_new = arr.reverse()
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
reverse() 方法反转数组中元素的顺序。
reverse() 方法将改变原始数组。

25、slice

方法	描述
slice	选择数组中的一部分并返回新的数组

语法：
array.slice(start, end)

参数	描述
start	可选。整数，指定从哪里开始选择（第一个元素的索引为 0）。使用负数从数组的末尾进行选择。如果省略，则类似于 “0”。
end	可选。整数，指定结束选择的位置。如果省略，将选择从开始位置到数组末尾的所有元素。使用负数从数组末尾进行选择。(不包括)

用法：

let arr = ['value1','value2','value3','value4','value5','value6','value7','value8']
let arr_new1 = arr.slice(1,3)
let arr_new2 = arr.slice(-3,-1)
console.log(arr_new1, 'arr_new1')
console.log(arr_new2, 'arr_new2')
console.log(arr, 'arr')

运行结果：

总结：
slice() 方法以新的数组对象，返回数组中被选中的元素。
slice() 方法选择从给定的 start 参数开始的元素，并在给定的 end 参数处结束，但不包括。
slice() 方法不会改变原始数组。

26、some

方法	描述
some	检查数组中的任何元素是否通过测试。

语法：
array.some(function(currentValue, index, arr), thisValue)

参数	描述
currentValue	必需。当前元素的值。
index	可选。当前元素的数组索引。
arr	可选。当前元素所属的数组对象

用法：

let ages = [3, 10, 18, 20];
function checkAdult(age,index,arr) {
  console.log(age,index,arr)
  return age >= 12;
}
let bool = ages.some(checkAdult)
console.log(bool, 'bool')
console.log(ages, 'ages')

运行结果：

总结：
some() 方法检查数组中的任何元素是否通过测试（作为函数提供）。
some() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回真值的数组元素，some() 返回真（并且不检查剩余值）
否则返回 false
some() 对没有值的数组元素不执行函数。
some() 不改变原始数组。

27、sort

方法	描述
sort	对数组的元素进行排序。

语法
array.sort(compareFunction)
用法：

let arr = [40, 100, 1, 5, 25, 10];
let arr_new = arr.sort(function(a, b){return a-b});
console.log(arr_new, 'arr_new')
console.log(arr, 'arr')

运行结果：

总结：
sort() 方法对数组的项目进行排序。
排序顺序可以是按字母或数字，也可以是升序（向上）或降序（向下）。
默认情况下，sort() 方法将按字母和升序将值作为字符串进行排序。
这适用于字符串（“Apple” 出现在 “Banana” 之前）。但是，如果数字按字符串排序，则 “25” 大于 “100” ，因为 “2” 大于 “1”。
正因为如此，sort() 方法在对数字进行排序时会产生不正确的结果。
sort() 方法会改变原始数组。

28、splice

方法	描述
splice	从数组中添加/删除元素。

语法：
array.splice(index, howmany, item1, …, itemX)

参数	描述
index	必需。整数，指定在什么位置添加/删除项目，使用负值指定从数组末尾开始的位置。
howmany	可选。要删除的项目数。如果设置为 0，则不会删除任何项目。
item1, …, itemX	可选。要添加到数组中的新项目。

用法：

console.log(arr1,'arr改变原数组')
console.log('-----下面例子是在替换数组中的元素（将value3替换成value8）------')
let arr2 = ['value1','value2','value3','value4','value5','value6']
let arr_new2 = arr2.splice(2,1,'value8')
console.log(arr_new2, 'arr_new2,返回删除的元素')
console.log(arr2,'arr2改变原数组')
console.log('-----下面例子是删除数组中的元素（删除value3）------')
let arr3 = ['value1','value2','value3','value4','value5','value6']
let arr_new3 = arr3.splice(2,1)
console.log(arr_new3, 'arr_new3,返回删除的元素')
console.log(arr3,'arr3改变原数组')

运行结果：

总结：
（小王觉得splice太强大，很是喜欢！！！）
splice() 方法向/从数组添加/删除项目，并返回删除的项目。
splice() 方法会改变原始数组。

29、toString

方法	描述
toString	将数组转换成字符串，并返回结果

语法：
array.toString()
用法：

let arr = ['我', '的','作用','是','将数组转换为字符串']
let str = arr.toString()
console.log(str, 'str')
console.log(arr, 'arr')

运行结果：

总结：
toString() 方法返回包含所有数组值的字符串，以逗号分隔。
toString() 方法不会改变原始数组。

30、valueOf

方法	描述
valueOf	返回数组的原始值

语法：
array.valueOf()
用法：

let arr = ["Banana", "Orange", "Apple", "Mango"];
let arr_origin= arr.valueOf()
console.log(arr_origin, 'arr_origin')
console.log(arr, 'arr')

运行结果：

总结：
valueOf() 方法返回数组。
valueOf() 方法是数组对象的默认方法。
valueOf() 方法不会改变原始数组。