数组的常见操作

最新推荐文章于 2023-04-28 15:36:26 发布

DepressedPrince

最新推荐文章于 2023-04-28 15:36:26 发布

阅读量236

点赞数

分类专栏：前端基础

前端基础专栏收录该内容

23 篇文章 0 订阅

订阅专栏

１、数组的创建

var arrayObj = new Array() 或者 var arrayObj = [];　//创建一个数组
var arrayObj = new Array([size]);　//创建一个数组并指定长度，注意不是上限，是长度
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);　//创建一个可变参数的数组实例
var arrayObj = [,,,] //JS在定义数组时允许使用尾随逗号，因此[,,,]的结果是一个长度为3，未初始化的空数组。注意：三个‘，’间隔，按理来说应该有4个元素，但是最后一个逗号，若后面无有效元素，则不计数。
var arrayObj = Array.of([element0[, element1[, ...[, elementN]]]]); //创建一个可变参数的数组实例
var arrayObj = Array.from(arrayLike[, mapFunc[, thisArg]]); // 从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例。第二个参数为每个元素都需要执行的回调函数

要说明的是，虽然第二种方法创建数组指定了长度，但实际上所有情况下数组都是变长的，也就是说即使指定了长度为5，仍然可以将元素存储在规定长度以外的，注意：这时长度会随之改变。

２、数组元素的添加

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组结尾，并返回数组新长度
arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);// 将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度
arrayObj.splice(insertPos,0,[item1[, item2[, . . . [,itemN]]]]);//将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，0代表不移除原来的元素直接插入，返回新的数组，包含移除的的元素，如果第二个参数为0，则返回空数组

３、数组的元素的访问

var testGetArrValue=arrayObj[1]; //获取数组的元素值
arrayObj[1]= "这是新值"; //给数组元素赋予新的值

４、数组元素的删除

arrayObj.pop(); //移除最后一个元素并返回该元素值，数组为空时，返回 undefined
arrayObj.shift(); //移除最前一个元素并返回该元素值，数组中元素自动前移，数组为空时，返回 undefined
arrayObj.splice(deletePos,deleteCount); //删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素
delete arrayObj[index] ;// 删除指定索引的元素，并不会改变数组的长度，原索引处元素的值为 undefined

５、数组的截取和合并

arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素。slice() 方法不会修改原始数组，只会返回一个浅复制了原数组中的截取元素的一个新数组。所以如果数组的元素是对象引用，那么如果被引用的对象发生改变，则新的和原来的数组中的元素也会发生改变。但是如果是向两个数组任一中添加了新元素（无论添加的元素是什么类型还是数组已有元素的类型），则另一个不会受到影响。可以使用负索引，指示距序列末尾的偏移量。slice(-2)提取序列中的最后两个元素。如果 start 未定义，slice 则从索引0开始。如果 start 大于序列的长度，则返回空数组。
arrayObj.concat([item1[, item2[, . . . [,itemN]]]]); //将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组。原始数组的元素将复制到新数组中，执行的是浅拷贝，对于元素是引用类型的就需要注意了。

６、数组的拷贝

arrayObj.slice(0); //返回数组的拷贝数组，注意是一个新的数组，不是指向，但对于数组里的元素执行的则是浅复制
arrayObj.concat(); //返回数组的拷贝数组，注意是一个新的数组，不是指向，但对于数组里的元素执行的则是浅复制

７、数组元素的排序

arrayObj.reverse(); //反转元素（最前的排到最后、最后的排到最前），返回数组地址
arrayObj.sort([compareFunction]); //对数组元素排序，返回排序后的数组地址

8、数组的查找

arr.find(callback[, thisArg])：返回数组中满足 callback 函数的第一个元素的值，若没有找到，则返回 undefined。在第一次调用 callback 函数时会确定元素的索引范围（索引从0到 length - 1，而不仅仅是被赋值的元素，意味着对于稀疏数组来说，该方法的效率要低于那些只遍历有值的索引的方法），因此在 find 方法开始执行之后添加到数组的新元素将不会被 callback 函数访问到。如果数组中一个尚未被callback函数访问到的元素的值被callback函数所改变，那么当callback函数访问到它时，它的值是将是根据它在数组中的索引所访问到的当前值。被删除的元素仍旧会被访问到，值为 undefined。
arr.findIndex(callback[, thisArg])：返回数组中满足 callback 函数的第一个元素的索引，否则返回 -1。遍历的方式以及规则和find 方法类似。
arr.indexOf(searchElement[, fromIndex=0])：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1，查找时采用的是严格相等（===）模式。fromIndex 参数为开始查找的索引值，默认为0。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找，以此类推。注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询数组。如果抵消后的索引值仍小于0，则整个数组都将会被查询。
arr.lastIndexOf(searchElement[, fromIndex=arr.length - 1])：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。默认为数组的长度减 1，即整个数组都被查找。如果该值大于或等于数组的长度，则整个数组会被查找。如果为负值，将其视为从数组末尾向前的偏移。即使该值为负，数组仍然会被从后向前查找。但如果该值为负时，且绝对值大于数组长度，则方法返回 -1，即数组不会被查找。
arr.includes(searchElement[, fromIndex=0])：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。从 fromIndex 索引处开始查找 searchElement。如果为负值，则按升序从 array.length - fromIndex 的索引开始搜索。默认为 0。如果fromIndex 大于等于数组长度，则返回 false 。该数组不会被搜索。

9、数组的遍历

forEach：遍历数组的每个元素，不会修改原数组，总是返回 undefined ，所以不可链式调用。而且没有办法中止或者跳出 forEach 循环，除了抛出一个异常。forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变，则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除或者未初始化的元素项不会被遍历到。用法：

array.forEach(callback(currentValue, index, array){
    //do something
}, this)

// 如果数组在迭代时被修改了，则其他元素会被跳过。详见下面的例子：当到达包含值"two"的项时，整个数组的第一个项被移除了，
// 这导致所有剩下的项上移一个位置。因为元素 "four"现在在数组更前的位置，"three"会被跳过。
var words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four

map: 遍历数组的每个元素，对元素执行传入的回调函数操作，返回新的数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。使用 map 方法处理数组时，数组元素的范围是在 callback 方法第一次调用之前就已经确定了。在 map 方法执行的过程中：原数组中新增加的元素将不会被 callback 访问到；若已经存在的元素被改变或删除了，则它们的传递到 callback 的值是 map 方法遍历到它们的那一时刻的值；而被删除的元素将不会被访问到。用法：

var new_array = arr.map(function callback(element[, index[, array]]){ 
       // Return element for new_array 
}[, thisArg])

filter：为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或等价于 true 的值的元素创建一个新数组，不会改变原数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。filter 遍历的元素范围在第一次调用 callback 之前就已经确定了。在调用 filter 之后被添加到数组中的元素不会被 filter 遍历到。如果已经存在的元素被改变了，则他们传入 callback 的值是 filter 遍历到它们那一刻的值。被删除或从来未被赋值的元素不会被遍历到。用法：
```
var new_array = arr.filter(callback(element[, index[, array]])[, thisArg])
```
reduce：为数组中的每一个元素依次执行callback函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：1）accumulator 累计器；2）currentValue 当前值；3）currentIndex 当前索引；4）array 数组。回调函数第一次执行时，accumulator 和currentValue的取值有两种情况：如果调用reduce()时提供了initialValue，accumulator取值为initialValue，currentValue取数组中的第一个值；如果没有提供 initialValue，那么accumulator取数组中的第一个值，currentValue取数组中的第二个值。用法：

arr.reduce(function (accumulator, currentValue, currentIndex, array){
    // do something...
}[,initialValue])

如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。如果数组为空且没有提供initialValue，会抛出TypeError 。如果数组仅有一个元素（无论位置如何）并且没有提供initialValue，或者有提供initialValue但是数组为空，那么此唯一值将被返回并且callback不会被执行。

every：方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true，不会改变原数组。callback 只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。every 和数学中的"所有"类似，当所有的元素都符合条件才返回true。另外，空数组也是返回true。(空数组中所有元素都符合给定的条件，注：因为空数组没有元素)。用法：

arr.every(callback(element[, index[, array]])[, thisArg])

some：为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some() 将会立即返回 true。否则，some() 返回 false，不会改变原数组。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。对于放在空数组上的任何条件，some() 始终返回false。用法：

arr.some(callback(element[, index[, array]])[, thisArg])

9.数组去重

（1）利用set结构

var unique = Array.from(new set(array));

（2）利用reduce方法

var newArr = array.sort().reduce((init, current) => {
    if(init.length==0 || init[init.length-1]!=current) {
        init.push(current);
    }
    return init;
}, [])

（3）利用filter方法

var newArr = array.filter((item, index, self) => {
    return self.indexOf(item) == index;
})

10. 多维数组降维

const flattenDeep = arr => Array.isArray(arr) ? arr.reduce( (a, b) => [...a, ...flattenDeep(b)] , []) : [arr];

flattenDeep([1, [[2], [3, [4]], 5]]); // [1, 2, 3, 4, 5]

【注意】参考资料：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array