JavaScript数组的方法大全（最新）

JavaScript数组方法大全

趁着有时间，总结了下数组所有的属性和方法，记录博客，便于后续使用

at()
- at方法，用于获取数组中，对应索引位置的值，不能修改。
- 语法：array.at(count);
- 参数：count，数组的索引值
- 返回值：返回该索引在数组中对应的值，如果count大于等于数组的长度时，返回undefined
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const len = arr.at(1)
console.log(len);// 2
```
concat()

- concat方法用于连接两个或多个数组
- 语法：array.concat(arr1,arr2,arr...);
- 参数: arr1, ...arrx，可选。该参数可以是具体的值，也可以是数组对象。可以是任意多个。参数为空时，将拷贝调用该方法的数组作为副本返回。
- 返回值：Array，返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.concat();
const arr2 = arr.concat(['我是lanny',12],['嘿嘿'],'啦啦啦');
console.log(arr1);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
console.log(arr2);//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, '我是lanny', 12, '嘿嘿', '啦啦啦'];
```
constructor
- constructor属性，返回数组的构造函数，其返回值是对函数的引用，而不是函数的名称，对于 JavaScript 数组，constructor 属性返回function Array() { [native code] }，对于 JavaScript 对象，constructor 属性返回：function Object() { [native code] }
- 语法：array.constructor
- 可以通过如下形式，对数据的类型进行判断
- const arr = [1,2,3]
- console.log(arr.constructor === Array);// true
copyWithin
- copyWithin用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
- 语法：array.copyWithin(target, start, end)
- 参数：target-必需。复制到指定目标索引位置。start-可选。元素复制的起始位置。end-可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。
- 注意，该方法会改变原数组
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
arr.copyWithin(0,4,9);
console.log(arr);// [5, 6, 7, 8, 9, 6, 7, 8, 9, 10]
```
entries()
- entries方法返回一个数组的迭代对象，该对象包含数组的键值对 (key/value)。迭代对象中数组的索引值作为 key，数组元素作为 value.
- 语法：array.entries()
- 返回值：Array Iterator一个数组的迭代对象。
- ```
const arr = ['lanny','jhon','alex','emily'].entries();
for (const [key,value] of arr) {
      console.log(key,value)
}
//0 'lanny'
//1 'jhon'
//2 'alex'
//3 'emily'
```
every()
- every方法用于检测数组所有元素是否都符合指定条件, 指定函数检测数组中的所有元素：如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。如果所有元素都满足条件，则返回 true。
- 语法：array.every(function(currentValue, index,arr),thisValue);
- 注意： every() 不会对空数组进行检测。every() 不会改变原始数组。
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：boolean，true或者false。
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const condition = arr.every(function(currentValue,index,arr){
     console.log(this);//arr
     return typeof currentValue === 'number'
 },arr)
 console.log(condition) // true
```
fill()
- fill方法用于将一个固定值替换数组的元素。
- 语法：array.fill(value,start,end);
- 参数：value-必需。填充的值。start-可选。开始填充位置。end-可选。停止填充位置 (默认为 array.length)。
- 返回值：Array，返回新替换的值作为数组的唯一项。
- 注意：该方法会改变原数组
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const arr1 = arr.fill('嘟嘟',0,1);
console.log(arr);//['嘟嘟', 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr1);//['嘟嘟']
```
filter()
- filter方法用于过滤，返回指定函数中要求的条件，filter() 不会改变原始数组、不会对空数组进行检测。
- 语法：array.filter(function(currentValue,index,arr), thisValue);
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：Array，返回一个新数组，满足所执行的函数条件
- ```
const arr = [1,2,3,"啦啦",6,7,"小L",9,10];
const arr1 = arr.filter((item)=>typeof item === 'string');
console.log(arr1);//["啦啦", "小L"]
```
find()
- find方法返回通过测试（函数内判断）的数组的第一个元素的值。find() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。如果没有符合条件的元素返回 undefined。注意: find() 对于空数组，函数是不会执行的、 find() 并没有改变数组的原始值。
- 语法：array.find(function(currentValue,index,arr), thisValue);
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：any，任意类型，满足函数条件的第一个对应值，如果都不满足，返回undefined。
- ```
const arr = [1,2,3,4,5,"嘟嘟",7,"嘿嘿",9,10];
const value = arr.find((item)=>typeof item === 'number'));//2
console.log(value);// 1
```
findIndex()
- findIndex方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。注意: findIndex() 对于空数组，函数是不会执行的、findIndex() 并没有改变数组的原始值。
- 语法：array.findIndex(function(currentValue, index, arr), thisValue);
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：number，索引值，返回符合条件的元素的索引位置，之后的值不会再调用执行函数。如果没有符合条件的元素返回 -1。
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const index = arr.findIndex((item=>item === 9);
console.log(index);//8  注意，是索引位置
```
findLast()
- 该方法与find方法相同，唯一区别是，遍历调用函数查找时，是倒序查找，从数组末尾，向前查找的
- ```
const arr = [1,2,3,4,5,6,7,8,9,10];
const last = arr.findLast((item)=>typeof item === 'number');
console.log(last);//10
```

findLastIndex()

该方法与findIndex方法相同，唯一区别是，遍历调用函数查找时，是倒序查找，从数组末尾，向前查找的.

const arr = [1,2,3,4,5,6,7,8,9,10];
const lastIndex = arr.findLastIndex((item)=>typeof item === 'number');
console.log(lastIndex);//9 注意，是索引位置

flat()
- 该方法用于将嵌套的多维数组，转换成一维数组，该方法会自动删除，空的索引值,且不会改变原数组。
- 语法：array.flat(hierarchy)
- 参数值：hierarchy-数组的嵌套层级，number，或者 Infinity-不管嵌套多少层
- 返回值：Array，转换之后的一维数组。
- ```
const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]];
const arr1 = arr.flat(Infinity);
console.log(arr1);//['a', 0, 5, 18, 29, '嘿嘿', {key:'002'}]
```
flatMap()
- 先对数组中每个元素进行处理，再对数组执行 flat() 方法。
- 语法：array.flatMap(function(currentValue,index,arr),thisValue)；
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：Array，返回处理之后的数组。
- ```
const arr = ['a',,[0,5,[18,29],['嘿嘿',{key:'002'}]]]
const arrFlat = arr.flatMap(item=>{
    if(typeof item === 'string'){
        return item + '已处理'
    }else{
        return item
    }
})
console.log(arrFlat);// ['a已处理', 0, 5, [18,29], ['嘿嘿',{key:'002']]
```
forEach()
- forEach().方法用于调用数组的每个元素，并将元素传递给回调函数，即遍历数组，在函数中进行操作。forEach() 对于空数组是不会执行回调函数的。该方法没有返回值，即undefined
- 语法：array.forEach(callbackFn(currentValue, index, arr), thisValue);
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：无，undefined。
- ```
const arr = [1,"嘟嘟",3,4,5,6,7,8,9,10];
arr.forEach((item,index)=>{
    if(typeof item === 'number'){
        arr[index] = item * 2
    }
})
console.log(arr);// [2, '嘟嘟', 6, 8, 10, 12, 14, 16, 18, 20]
```
indexOf()
- indexOf方法可返回数组中某个指定的元素位置。该方法将从头到尾地检索数组，看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时）。如果找到一个 item，则返回 item 的第一次出现的位置。开始位置的索引为 0。如果在数组中没找到指定元素则返回 -1。
- 语法：array.indexOf(item,start);
- 参数：item必须。查找的元素。start可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
- 返回值：number，索引值，元素在数组中的位置，如果没有搜索到则返回 -1。
```
const arr = ["嘟嘟",2,3,4,5,6,7,8,9,10];
const index = arr.indexOf('嘟嘟')
console.log(index);// 0
```
lastIndexOf()
- lastIndexOf()方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找。如果要检索的元素没有出现，则该方法返回 -1。该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时）。如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。如果在数组中没找到指定元素则返回 -1。
- 语法：array.lastIndexOf(item,start)；
- 参数：item必需。规定需检索的字符串值。start可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的最后一个字符处开始检索。
- 返回值：number，索引值，元素在数组中的位置，如果没有搜索到则返回 -1。
- ```
const arr = [0,1,2,4,1,5];
const index = arr.lastIndexOf(1);
console.log(index);//4 索引位置，倒数
```
join()
- join()方法用于把数组中的所有元素转换一个字符串。元素是通过指定的分隔符进行分隔的，该方法不会改变原数组。
- 语法：array.join(separator);
- 参数：separator可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。
- 返回值：String返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arr1 = arr.join('');
console.log(arr1);// "1234嘟嘟678910"
```
keys()
- keys()方法用于从数组创建一个包含数组键的可迭代对象.如果对象是数组返回 true，否则返回 false。
- 语法：array.keys()
- 返回值：一个数组可迭代对象。
- ```
const arr = ['lanny','jhon','alex','emily'];
for (const item of arr.keys()) {
    console.log(item)// 数组的索引值,依次打印 0/1/2/3
}
```
includes()
- includes()方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false
- 语法：array.includes(searchElement, fromIndex);
- 参数：searchElement必须。需要查找的元素值。fromIndex可选。从该索引处开始查找 searchElement。如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0，如果fromIndex大于等于数组长度，则返回 false，该数组不会被搜索。
- 返回值：布尔值。如果找到指定值返回 true，否则返回 false。
- ```
const arr = ['嘟嘟', 4, 6, 8, 10, 12, 14, 16, 18, 20];
console.log(arr.includes('嘟嘟'));// true
```
length
- length属性，返回数组的长度
- 语法：array.length;
- 返回值：number，返回数组的长度，空数组，返回0.
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
console.log(arr.length); // 10
```
map()
- map方法返回一个新数组，数组中的每个元素为原始数据调用函数处理后的值。方案按照原始数组顺序依次处理。map不会对空数组进行检测，map不会改变原数组。
- 语法：array.map(function(currentValue, index, arr), thisValve);
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- 返回值：Array，返回处理后的新数组。
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const newArr = arr.map(item=>{
    if(!isNaN(item) && item <= 5){
        return item * 10
    }
    return item
})
console.log(newArr);// [10, 20, 30, 40, '嘟嘟', 6, 7, 8, 9, 10]
```
pop()
- pop方法用于删除数组的最后一个元素并返回被删除的元素。
- 语法：array.pop()
- 注意：该方法会改变原数组。
- 返回值：返回被删除的数组项。
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const delArr = arr.pop();
console.log(delArr);// 10
console.log(arr);// ['嘟嘟',2,3,4,5,6,7,8,9]
```
push()
- push方法可向数组的末尾添加一个或多个元素。
- 注意：该方法会改变原数组。
- 语法：array.push(item1,item2,item...)；
- 参数：item1,item2,item...，必须，需要添加到数组的元素。最少一项。
- 返回值：number，返回数组的新长度。
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const len = arr.push('嘿嘿','小明',12);
console.log(len);// 13
console.log(arr);// [1, 2, 3, 4, '嘟嘟', 6, 7, 8, 9, 10, '嘿嘿', '小明', 12]
```
reduce()
- reduce方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。可以作为一个高阶函数，用于函数的compose，对于空数组是不会执行回调函数的。
- 语法：array.reduce(function(total, currentValue, currentIndex, arr),initialValue);
- 参数：
  - function(total,currentValue, index,arr)
    - total，必须，执行函数后，上一轮计算之后的值。
    - currentValue，必须，当前遍历到的元素项。
    - currentIndex，可选，当前遍历到的元素项索引。
    - arr，可选，当前元素所属的数组对象。
  - initialValue 可选，传递给函数的初始值，即累加器的初始值。
- ```
const sum = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reduce(function(total, currentValue, currentIndex, arr){
    return total + currentValue
},100)
console.log(sum); // 155（含初始值100）
```
reduceRight()
- reduceRight方法的功能和reduce功能是一样的，不同的是reduceRight从数组的末尾向前将数组中的数组项做累加。
- 注意：对于空数组是不会执行回调函数的
- 语法：array.reduceRight(function(total, currentValue, currentIndex, arr),initialValue);
- 参数：同reduce一致。
- ```
const sumRight = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10].reduceRight(function(total, currentValue, currentIndex, arr){
    return total + currentValue
},0)
console.log(sumRight); // 55（含初始值0）
```
reverse()
- 用于颠倒数组中元素的顺序，根据当前的顺序进行倒序，该方法不会改变原数组。
- 语法：array.reverse()；
- 返回值：Array，颠倒顺序后的数组
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arr1 = arr.reverse();
console.log(arr1);//  [10, 9, 8, 7, 6, '嘟嘟', 4, 3, 2, 1]
```
slice()
- slice方法可以从已有的数组中，返回选定的字段，用于提取一个数组中自己所需要的部分
- 语法：array.slice(start,end)
- 注意：slice方法不会改变原数组
- 参数：
  - start可选。规定从何处开始选取。如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）。
  - end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数，则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。
- 返回值：Array，返回一个新的数组，包含从start（包含该元素）到end（不包含该元素）的arrayObject中的元素
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arrSlice = arr.slice(2,6);
console.log(arrSlice);// [3, 4, '嘟嘟', 6]
```
shift()
- shift方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
- 语法：array.shift()；
- 注意：此方法会改变原数组。
- 提示：移除数组末尾的元素可以使用pop()方法。
- ```
const arr = [1,2,3,4,5];
const remove = arr.shift();
console.log(arr);// [2, 3, 4, 5]
console.log(remove);// 1
```
some()
- some() 用于检测数组中的元素是否满足指定条件（函数提供）。函数方法会依次执行数组的每个元素：如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测;如果没有满足条件的元素，则返回false。
- 注意： some() 不会对空数组进行检测; some() 不会改变原始数组。
- 语法：array.some(function(currentValue,index,arr),thisValue)
- 参数：
  - function(currentValue, index,arr)
    - 必须。函数，数组中的每个元素都会执行这个函数。
    - currentValue：必须。每次遍历循环时，当前元素的值。
    - index-可选。当前元素的索引值。
    - arr-可选。当前元素属于的数组对象。
  - thisValue 可选。对象作为该执行回调时使用，传递给函数，用作 "this" 的值。如果省略了 thisValue ，"this" 的值为 "undefined"。
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arrSome = arr.some((item)=>typeof item === 'string');
console.log(arrSome);// true
```
sort()
- sort()方法用于对数组的元素进行排序。排序顺序可以是字母或数字，并按升序或降序。
- 默认排序顺序为按字母升序。注意：当数字是按字母顺序排列时"40"将排在"5"前面。使用数字排序，你必须通过一个函数作为参数来调用。函数指定数字是按照升序还是降序排列。
- 注意：该方法会改变原数组
- 语法：array.sort(sortFunction)
- 参数：sortFunction 可选。规定排序顺序。必须是函数。
- 返回值：Array，对数组的引用，请注意，数组在原数组上进行排序，不生成副本。
- ```
// 按数字升序
const arr = [1,54,0,49,22,88,4,103];
arr.sort((a,b)=>{
    return a-b
})
console.log(arr);// [0, 1, 4, 22, 49, 54, 88, 103]
```
- ```
// 按数字降序
const arr = [1,54,0,49,22,88,4,103];
arr.sort((a,b)=>{
    return b-a
})
console.log(arr);// [103, 88, 54, 49, 22, 4, 1, 0]
```
- ```
// 按字母升序
const arr = [1,54,0,49,22,88,4,103];
arr.sort();
console.log(arr);// [0, 1, 103, 22, 4, 49, 54, 88]
```
- ```
// 按字母降序
const arr = [1,54,0,49,22,88,4,103];
arr.sort();
arr.reverse();
console.log(arr);// [88, 54, 49, 4, 22, 103, 1, 0]
```
splice()
- 方法用于添加、删除、替换数组中的元素。
- 注意：这种方法会改变原始数组。
- 语法：array.splice(index,howmany,item1,.....,itemX)
- 参数：
  - index必需。规定从何处添加/删除元素。该参数是开始插入和（或）删除的数组元素的下标，必须是数字。
  - howmany 可选。规定应该删除多少元素。必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素。
  - item1, ..., itemX 可选。要添加到数组的新元素
- 返回值：Array，如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。
- ```
// 指定位置插入元素
const arr = ['小明','是','学生'];
arr.splice(2,0,'一个','优秀的');
console.log(arr);// ['小明', '是', '一个', '优秀的', '学生']
```
- ```
// 删除指定位置的元素
const arr = ['小明','是','学生'];
arr.splice(2,1);
console.log(arr);// ['小明', '是']
```
- ```
// 删除指定位置的元素，并在该位置插入新的值
const arr = ['小明','是','学生'];
arr.splice(2,1,'我们学校最','优秀',"的","老师");
console.log(arr);//  ['小明', '是', '我们学校最', '优秀', '的', '老师']
```
toLocaleString()
- 该方法用于将数组转为字符串
- 语法：array.toLocaleString()
- 参数：无
- 返回值：string
- ```
const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
console.log(arr.toLocaleString());// "1,2,3,4,嘟嘟,6,7,8,9,10"
```

toReversed()

克隆一个数组，并且进行反转,该方法不会改变原数组
语法：array.toReversed()

const arr = [1,2,3,4,'嘟嘟',6,7,8,9,10];
const arrToReversed = arr.toReversed();
console.log(arr);//[1, 2, 3, 4, '嘟嘟', 6, 7, 8, 9, 10]
console.log(arrToReversed);//[10, 9, 8, 7, 6, '嘟嘟', 4, 3, 2, 1]

toSorted()

toSorted()是 sort() 的非破坏性版本，这意味着它不会改变原始数组。默认情况下，将采用一个数组并对其进行字母排序
语法：array.toSorted(sortFunction)
参数：sortFunction 可选。规定排序顺序。必须是函数。

const arr = [5,1,9,11,22,10,79];

// 按字母升序--默认
const arrST = arr11.toSorted();
console.log(arrST);// [1, 10, 11, 22, 5, 79, 9]

// 按字母排序--降序
const arrSR = arr11.toSorted().reverse();
console.log(arrSR);// [9, 79, 5, 22, 11, 10, 1]

// 按数字升序
const arrNT = arr11.toSorted((a,b)=> a-b );
console.log(arrNT);// [1, 5, 9, 10, 11, 22, 79]

// 按数字降序
const arrNR = arr11.toSorted((a,b)=> b-a );
console.log(arrNR);// [79, 22, 11, 10, 9, 5, 1]

toSpliced()
- toSpliced是 splice() 的非破坏性版本，这意味着它不会改变原始数组
- 语法：array.toSpliced(start,deleteCount,...items)
- 参数：
  - start,开始的位置；
  - deleteCount，需要删除的数量；
  - items，插入的项目
- 返回值：Array，返回修改/添加/删除后的数组
- ```
const arr = ['小红','是','校花'];
const arrSld = arr.toSpliced(2,1,'方圆十里','远近闻名','的','村花');
console.log(arrSld);//['小红', '是', '方圆十里', '远近闻名', '的', '村花']
console.log(arr);// ['小红','是','校花'];
```
toString()
- 该方法可把数组转换为字符串，并返回结果。不会改变原数组
- 语法：array.toString();
- 返回值：string，数组的所有值用逗号隔开
- ```
const arr = ['小红', '是', '方圆十里', '远近闻名', '的', '校花'];
console.log(arr.toString());//"小红,是,方圆十里,远近闻名,的,校花"
```
unshift()
- 该方法可向数组的开头添加一个或更多元素，并返回新的长度。
- 注意：该方法将改变数组的数目。将新项添加到数组末尾，请使用 push() 方法。
- 语法：array.unshift(item1,item2, ..., itemX)
- 参数：
  - tem1,item2, ..., itemX 可选。向数组起始位置添加一个或者多个元素。
- 返回值：返回数组的新长度
- ```
const arr = [1,2,3,4];
const alen = arr14.unshift(0);
console.log(alen);// 6
console.log(arr);// [0, 9, 1, 2, 3, 4]
```
values()
- 该方法创建一个新的数组迭代器对象,该对象带有在每个数组索引处指定的值。我们可以通过循环或迭代器方法来迭代数组元素。
- 语法：array.values()；
- 返回值：Array Iterator，一个可以迭代的数组对象
- ```
const arr = ['lanny','jhon','alex','emily'].values();
for (const iterator of arr) {
    console.log(iterator);//依次输出 lanny  jhon alex emily
}
```
with()
- 更改现有数组中的一个元素。该方法不会改变原数组，而是在原数组的基础上，copy一个副本，修改副本的对应项，作为返回值。
- 参数：
  - count,需要修改的索引位置
  - newValue,新的值
- 返回值：Array，被修改后的副本数组
- ```
const arr = [1,2,'a',6,'b'];
const x = arr.with(2,'哈哈哈');
console.log(x);// [1, 2, '哈哈哈', 6, 'b']
console.log(arr);// [1, 2, 'a', 6, 'b']
```
Symbol.iterator()
- 方法返回一个迭代器对象，用于遍历数组的所有值。
- 语法：array[Symbol.iterator]()
- 返回值：Array Iterator，与values()返回的是一样的
- ```
const arr = ['lanny','jhon','alex','emily'][Symbol.iterator]();
for (const iterator of arr) {
    console.log(iterator);//依次输出 lanny  jhon alex emily
}
```

Symbol.unscopables()

可以在任何对象上定义 @@unscopables symbol (Symbol.unscopables)，用于排除属性名称并与 with 环境绑定在一起作为词法变量公开。
请注意，如果使用 Strict mode，语句将不可用，并且可能也不需要 symbol。在 unscopables 对象上设置属性为 true，将使其 unscopable并且因此该属性也将不会在词法环境变量中出现。如果设置属性为 false ，则将使其可 scopable 并且该属性会出现在词法环境变量中。
简单来说，通过设置Symbol.unscopables的属性值，使得with环境下，是否可以访问对应的属性值

// 以下代码在ES5及以下版本中正常工作。但是，在ECMAScript 2015及更高版本中，Array.prototype.keys()引入了该方法。
// 这意味着内部with环境“键”现在将是方法而不是变量。
// 这unscopable就是引入s符号的时候。内置unscopables设置的实现是Array.prototype[@@unscopables]为了防止某些Array方法被限制在with语句中。
var keys = [];
    with (Array.prototype) {
      keys.push('something');
    }
    const keyList = Object.keys(Array.prototype[Symbol.unscopables]); 

    console.log(keyList);// ['at', 'copyWithin', 'entries', 'fill', 'find', 'findIndex', 'flat', 'flatMap', 'includes', 'keys', 'values', 'findLast', 'findLastIndex', 'toReversed', 'toSorted', 'toSpliced']

    // 给自己的对象设置 unscopables 。
    let obj = { 
      foo: 1, 
      bar: 2 
    };

    obj[Symbol.unscopables] = { 
      foo: false, 
      bar: true 
    };

    with (obj) {
      console.log(foo); // 1
      console.log(bar); // ReferenceError: bar is not defined
    }
 //参考文献 ：http://www.verydoc.net/javascript/00005125.html

posted @ 2023-02-20 17:14 Lanny-Chung 阅读(164) 评论(0) 编辑收藏举报

刷新页面返回顶部

Lanny-Chung

非魔非劫，不住不空。 无尘无垢，莫撄莫从。 勿嗔勿爱，难始难终。 拈花向君，如是一梦。

JavaScript数组的方法大全（最新）

JavaScript数组方法大全

at()

concat()

constructor

copyWithin

entries()

every()

fill()

filter()

find()

findIndex()

findLast()

findLastIndex()

flat()

flatMap()

forEach()

indexOf()

lastIndexOf()

join()

keys()

includes()

length

map()

pop()

push()

reduce()

reduceRight()

reverse()

slice()

shift()

some()

sort()

splice()

toLocaleString()

toReversed()

toSorted()

toSpliced()

toString()

unshift()

values()

with()

Symbol.iterator()

Symbol.unscopables()

公告

非魔非劫，不住不空。无尘无垢，莫撄莫从。勿嗔勿爱，难始难终。拈花向君，如是一梦。