javaScript数组方法记录——持续补充

javaScript数组方法记录

将平时用到的或者可能用到的记录一下，有助于加深记忆，查找起来也方便

concat()

concat（）方法用于 连接 两个或者多个 数组，会返回合并数组之后的数据，不会改变原来的数组

   let a = ['张三', '李四', '赵五']
   let b = ['AA', 'BB', 'CC']
   let b = ['AA', 'BB', 'CC']
   console.log(a.concat(b))    // ["张三", "李四", "赵五", "AA", "BB", "CC"]
   console.log(a)  // ["张三", "李四", "赵五"]

join()

join()方法用于将数组的内容拼接为字符串，不会修改原数组

 let a = ['张三', '李四', '赵五']
 console.log(a.join('110')) // '张三110李四110赵五'
 console.log(a) // ['张三', '李四', '赵五']

pop()

pop()方法用于删除数组的最后一位，并返回删除的这条数据，会修改原数组

 let a = ['张三', '李四', '赵五']
 console.log(a.pop()) // '赵五'
 console.log(a) // ['张三', '李四']

shift()

shift()方法用于删除数组的第一条数据，并且返回删除后数组的长度，会修改原数组

 let a = ['张三', '李四', '赵五']
 console.log(a.shift()) // '张三'
 console.log(a) // ['李四', '赵五']

unshift()

unshift()方法用于在数组的首位新增一个或多数据，并且返回操作后数组的长度，会修改原数组

 let a = ['张三', '李四', '赵五']
 console.log(a.shift()) // 4
 console.log(a) // ["110", "张三", "李四", "赵五"]

reverse()

reverse()方法用于颠倒数组中元素的顺序，返回操作之后的数组，会修改原数组

 let a = ['张三', '李四', '赵五']
 console.log(a.reverse()) // ["赵五", "李四", "张三"]
 console.log(a) // ["赵五", "李四", "张三"]

slice()

slice()方法用于从已有的数组中返回选定的元素，不会修改原数组
语法：

array.slice(start, end)
start: 该参数表示数组下标，可选。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，
end: 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

 let a = ['张三', '李四', '赵五', '王麻子']
  console.log(a.slice(1,3)) // ["李四", "赵五"]
  console.log(a.slice(-1,3)) // []
  console.log(a.slice(-2,-1)) // ["赵五"] // 倒数第二个元素开始，倒数第一个元素结束
  console.log(a) // ['张三', '李四', '赵五', '王麻子']

sort()

sort()方法用于对数组元素重新进行排序，返回操作之后的数组，会修改原数组
语法：

array.sort(sortfunction)
sortfunction: 可选，必须是函数，用于规定排序规则

 let a= [40,100,1,5,25,10];
 a.sort((a,b) => a-b) // [1, 5, 10, 25, 40, 100]
 console.log(a) // [1, 5, 10, 25, 40, 100]

splice()

splice()方法用于删除数组指定位置数据，并替换，返回删除的数据，会修改原数组
返回值：

如果仅删除一个元素，则返回一个元素的数组。 如果未删除任何元素，则返回空数组。

语法：

array.splice(index,howmany,item1,…,itemX)
index: 必须，该参数是开始删除的数组元素的下标，必须是数字。
howmany： 可选。规定应该删除多少元素。必须是数字，但可以是 “0”。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
item1, …, itemX： 可选。要替换到数组的新元素

 let a= ['张三', '李四', '赵五', '王麻子']
 console.log(a.splice(1)) // ["李四", "赵五", "王麻子"]
 console.log(a) // ["张三"]
 a = ['张三', '李四', '赵五', '王麻子']
 console.log(a.splice(1,2,'赵黑', '沈白')) // ["李四", "赵五"]
 console.log(a) //["张三", "赵黑", "沈白", "王麻子"]

toString()

toString()方法可把数组转换为字符串，并返回结果，返回的结果用逗号隔开，不会修改原数组

 let a= ['张三', '李四', '赵五', '王麻子']
 console.log(a.toString()) // '张三,李四,赵五,王麻子'
 console.log(a) // ["张三", "李四", "赵五", "王麻子"]

valueOf()

valueOf()方法返回 Array 对象的原始值。
参考文章.

indexOf()

indexOf()方法用于检索某个元素在数组中的位置，如果存在返回此元素在数组中第一次出现的下表，如果没有返回-1，不会修改原数组
indexOf()的使用有两个缺陷

• 一是不够语义化，它的含义是找到参数第一次出现的位置，所以要去比较是否等于-1，表达起来不够直观
• 而是它内部使用严格（===），会导致对NaN的误判

 let a= ['张三', '李四', '赵五', '王麻子']
 console.log(a.indexOf('赵五')) //  2
 console.log(a.indexOf('李黑')) // -1
 console.log(a) // ['张三', '李四', '赵五', '王麻子']

lastIndexOf()

lastIndexOf()方法的作用类似于indexOf(),只不过lastIndexOf（）方法用于从数组中反向检索元素，不会修改原数组

 let a= ['张三', '李四', '赵五','赵五' '王麻子']
 console.log(a.lastIndexOf('赵五')) // 3 最后一次出现的位置
 console.log(a.indexOf('赵五'))  // 2 第一次出现的位置
 console.log(a.indexOf('李黑')) // -1  元素不存在
 console.log([NaN].indexOf(NaN))  // 缺陷, 对NaN的误判

forEach()

forEach()方法用于遍历数组的每一项元素，没有返回值
语法：

array.forEach(function(currentValue, index, arr), thisValue)
function(currentValue, index, arr): 必须，该参数是一个回调函数
thisValue： 可选。为this赋值，如果没传，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 // 下面需要注意一下普通函数和箭头函数this的指向问题
***************普通函数***********************
 let a= ['张三', '李四', '赵五', '王麻子']
 let b = ['李黑', '吴白']
 a.forEach(function(item){
 // 普通函数的this在声明时指向window，在调用时指向调用它的对象，如果直接调用，也指向window
 // 这里的普通函数内this调用时，this的指向已经被forEach函数的第二个参数赋值为数组b
 // 所以这里的this.push()就i相当于b.push()
	this.push(item) // 
 },b)
 console.log(a) // ["张三", "李四", "赵五", "王麻子"]
 console.log(b) // ["李黑", "吴白", "张三", "李四", "赵五", "王麻子"]
 
***************箭头函数***********************
 let a= ['张三', '李四', '赵五', '王麻子']
 let b = ['李黑', '吴白']
 a.forEach(item => {
 // 箭头函数的this在声明时指向window，在调用时始终指向声明时所在的上下文this
 // 所以此处箭头函数内部的this指向任然是window
  console.log(item) // Window {parent: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
 },b)
 console.log(a) // ['张三', '李四', '赵五', '王麻子']
 console.log(b) // ['李黑', '吴白']

map()

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值, 不会修改原数组
注意： map() 不会对空数组进行检测。
语法：

array.map(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr): 必须，该参数是一个回调函数
thisValue： 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 ********箭头函数和普通函数内this的指向区别看向上一个方法********
 let a= ['张三', '李四', '赵五', '王麻子']
 let b = a.map((item, index) => `${item}第${index+1}个脱单`)
 console.log(b) // ["张三第1个脱单", "李四第2个脱单", "赵五第3个脱单", "王麻子第4个脱单"]

filter()

filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。 不会修改原数组
返回值： 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
语法：

array.filter(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr): 必须，该参数是一个回调函数
thisValue： 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 ********箭头函数和普通函数内this的指向区别看向上面的forEach方法********
 // 数组去重
 let a= ['张三', '李四', '李四','赵五',  '赵五', '王麻子']
 let b = a.filter((item,index,arr)=>{
   return arr.indexOf(item) === index  // 判断当前元素在数组中首次出现的位置是不是当前位置，返回符合条件的
 }) 
 console.log(b) // ["张三", "李四", "赵五", "王麻子"]

every()

every() 方法用于检索数组元素是否都符合某个条件。 不会修改原数组
返回值：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
语法：

array.every(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr): 必须，该参数是一个回调函数
thisValue： 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 ********箭头函数和普通函数内this的指向区别看向上面的forEach方法********
 // 判断数组中是否包含重复元素
 let a= ['张三', '李四',  '赵五', '王麻子']
 let b = a.every((item,index,arr)=>{
   return arr.indexOf(item) === index  // 判断当前元素在数组中首次出现的位置是不是当前位置
 }) 
 console.log(b) // true

some()

some() 方法用于检索数组是否存在符合某个条件的元素。 不会修改原数组
返回值：如果数组中检测到有一个元素满足，则整个表达式返回 true ，且剩余的元素不会再进行检测。如果所有元素都不满足条件，则返回 false。
语法：

array.some(function(currentValue,index,arr), thisValue)
function(currentValue, index, arr): 必须，该参数是一个回调函数
thisValue： 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 ********箭头函数和普通函数内this的指向区别看向上面的forEach方法********
 // 判断数组中是否包含重复元素
 let a= ['张三', '李四',  '赵五', '王麻子']
 let b = a.every((item,index,arr)=>{
   return arr.indexOf(item) === index  // 判断当前元素在数组中首次出现的位置是不是当前位置
 }) 
 console.log(b) // true

every()方法和some()方法的区别：

• every（）所有元素符合条件才会返回true，some（）方法只要存在一个元素满足条件就返回true
• every（）只要有一个元素不满足条件就会返回false，some（）方法所有元素不满足条件才会返回false

reduce()

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值
语法：

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
function(total,currentValue, index,arr): 必须，该参数是一个回调函数
initialValue： 可选。传递给函数的初始值
total： 必需。初始值, 或者计算结束后的返回值。
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 let a= ['张三', '李四',  '赵五', '王麻子']
 let b = a.reduce((value,item,index,arr)=>{
   return value + item
 }, '开始') 
 console.log(b) // '开始张三李四赵五王麻子'

reduceRight()

reduceRight() 方法接收一个函数作为累加器，数组中的每个值（从右到左）开始缩减，最终计算为一个值，用法同reduce（）方法

entries(),keys() 和 values()

ES6 提供三个新的方法——entries()，keys()和values()——用于遍历数组。它们都返回一个遍历器对象（详见阮一峰Es6教程《Iterator》一章），可以用for…of循环进行遍历，唯一的区别是keys()是对键名的遍历、values()是对键值的遍历，entries()是对键值对的遍历。

 let a= ['张三', '李四',  '赵五', '王麻子']

// keys()
 a.keys()   // Array Iterator {}
 typeof(a.keys())  //   'object'
 for(let item of a.keys()){
  console.log(item)   // 0   1    2    3
 } 

// values()
 a.values()   // Array Iterator {}
 typeof(a.values())  //   'object'
 for(let item of a.values()){
  console.log(item)   // 张三   李四   赵五   王麻子
 } 

 // entries()
 a.entries()   // Array Iterator {}
 typeof(a.entries())  //   'object'
 for(let item of a.entries()){
  console.log(item)   // [0, "张三"]   [1, "李四"]  [2, "赵五"]  [3, "王   麻子"]
 } 

includes()

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。
语法：

arr.includes(searchElement, fromIndex)
searchElement: 必须，需要判断的元素
fromIndex: 可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

• 相比于indexOf 可以判断NaN

 let a= ['张三', '李四',  '赵五', '王麻子']
 a.includes('张三')  // true
 a.includes('李白')  // false
 a.includes('张三', 1) // false
 [NaN].includes(NaN) // true

fill()

fill() 方法用于将一个固定值替换数组的元素，返回替换数据之后的数组，会修改原数组
语法：

array.fill(value, start, end)
value: 必须，填充的元素
start: 可选。在目标数组中开始填充的起始位置
end: 可选。在目标数组中开始填充的结束位置
注意：
如果后面两个参数没有传，就会将目标数组中数据全部替换

 let a= ['张三', '李四',  '赵五', '王麻子']
 a.fill('李白') //  ["李白", "李白", "李白", "李白"]
 console.log(a) // ["李白", "李白", "李白", "李白"]
 
 a = ['张三', '李四',  '赵五', '王麻子']
 a.fill('李白', 2)  // ["张三", "李四", "李白", "李白"]

find()

find() 方法就是在目标数组中找到符合条件的第一个数据，返回符合条件的数据，不会修改原数组
语法：

array.find(function(currentValue, index, arr),thisValue)
thisValue： 可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。(注意区分函数和箭头函数内this的指向)
currentValue： 必须。当前元素
index： 可选。当前元素在数组中的下标
currentValue： 可选。当前数组

 let a= ['张三', '李四',  '赵五', {id: 112, name: '孙'}]
 let b = a.find(item => {
   return item.id === 112
 })
 console.log(a)  // ['张三', '李四',  '赵五', {id: 112, name: '孙'}]
 console.log(b) // {id: 112, name: '孙'}

findIndex()

findIndex() 方法就是在目标数组中找到符合条件的第一个数据，返回符合条件的数据在数组中的索引，不会修改原数组
用法同find（）

form()

form() ES6为Array增加了from函数用来将其他对象转换成数组。
这里的对象包括（数组、类数组对象、或者是字符串、map 、set 等可迭代对象）
语法：

Array.from(object, mapFunction, thisValue)
object： 必须，要转换为数组的对象。
mapFunction： 可选，数组中每个元素要调用的函数。
thisValue： 可选，映射函数(mapFunction)中的 this 对象。

// 类数组
// 拥有length属性，其它属性（索引）为非负整数（对象中的索引会被当做字符串来处理）
//不具有数组所具有的方法,类数组是一个普通对象，而真实的数组是Array类型
let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}
Array.from(arrayLike) //  ["a", "b", "c"]

// 转化es6的 Set 数据类型
// 只要是部署了 Iterator 接口的数据结构，Array.from都能将其转为数组。
// 字符串和 Set 结构都具有 Iterator 接口，因此可以被Array.from转为真正的数组。
let a = new Set(['a','b'])
Array.from(a) // ["a", "b"]
Array.from('hello')  //  ['h', 'e', 'l', 'l', 'o']

// 第二个参数可以用来处理数据
Array.from([1, 2, 3], (x) => x * x)  // [1, 4, 9]

Array.of()

Array.of()方法用于将一组数值转换为数组

// 创建数组
// 这个方法的主要目的是为了弥补数组构造函数Array()的的不足。因为参数个数的不同会导致Array()的行为有一些差异
// Array.of可以直接将传入的值直接创建为数组
let a = new Array(3) // [ , , ]
new Array(3,4)  // [3, 3]
console.log(a.length) // 3
Array.of(3) // [3]
Array.of(3,4) // [3,4]

copyWithin()

copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。会修改原数组
语法：

array.copyWithin(target, start, end)
target: 必需。复制到当前数组指定索引位置。
start: 可选。选择拷贝元素在数组的起始位索引。
end 可选，选择拷贝元素在数组的结束索引 (默认为 array.length)。如果为负值，表示倒数。

 let a= ['张三', '李四',  '赵五', '王麻子']
 a.copyWithin(1,2,3) //["张三", "赵五", "赵五", "王麻子"]

isArray()

isArray() 方法用于判断指定的目标是否是数组，如果是返回true，否则返回false
语法：

 // 相比于typeOf方法，对数组类型的数据判断更加准确
 let a= ['张三', '李四',  '赵五', '王麻子']
 Array.isArray(a) // true
 Array.isArray({}) // false
 Array.isArray([]) // true
 typeOf([]) // 'object'

flat()

flat() 方法可以将嵌套的数组拉平变成一维数组，该方法返回一个新的数组，不会修改原数组

• flat()方法默认只会拉平一层，如果想要“拉平”多层的嵌套数组，可以将flat()方法的参数写成一个整数，表示想要拉平的层数，默认为1。
• 如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数
• 如果数组有空位，flat()方法会跳过空位
  语法：

[1, 2, [3, [4, 5]]].flat()
// [1, 2, 3, [4, 5]]

[1, 2, [3, [4, 5]]].flat(2)
// [1, 2, 3, 4, 5]

[1, [2, [3]]].flat(Infinity)
// [1, 2, 3]

[1, 2, , 4, 5].flat()
// [1, 2, 4, 5]

flatMap()

flatMap()方法对原数组的每个成员执行一个函数（相当于执行Array.prototype.map()），然后对返回值组成的数组执行flat()方法。该方法返回一个新数组，不改变原数组。

• flatMap()只能展开一层数组。
• flatMap()方法的第一个参数是一个遍历函数，该函数可以接受三个参数，分别是当前数组成员、当前数组成员的位置（从零开始）、原数组。
• flatMap()方法还可以有第二个参数，用来绑定遍历函数里面的this。
  语法：

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2])
// [2, 4, 3, 6, 4, 8]

// 只能展开一层
// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap(x => [[x * 2]])
// [[2], [4], [6], [8]]

for of

es6新出了for … of 循环

它可以遍历js中部署了【Symbol.iterator】属性的数据结构，数组默认部署了此属性，object默认没有此属性，所以不能用for of 直接遍历对象

• for of 循环读取健值

let arr = ['a', 'b', 'c', 'd'];
for (let a of arr) {
  console.log(a); // a b c d
}

at() 提案

引用阮一峰老是es6里的文案
长久以来，JavaScript 不支持数组的负索引，如果要引用数组的最后一个成员，不能写成arr[-1]，只能使用arr[arr.length - 1]。

这是因为方括号运算符[]在 JavaScript 语言里面，不仅用于数组，还用于对象。对于对象来说，方括号里面就是键名，比如obj[1]引用的是键名为字符串1的键，同理obj[-1]引用的是键名为字符串-1的键。由于 JavaScript 的数组是特殊的对象，所以方括号里面的负数无法再有其他语义了，也就是说，不可能添加新语法来支持负索引。

为了解决这个问题，现在有一个提案，为数组实例增加了at()方法，接受一个整数作为参数，返回对应位置的成员，支持负索引。这个方法不仅可用于数组，也可用于字符串和类型数组（TypedArray）。