---
title: 数组操作
date: 2018-06-09 16:29:00
updated: 2018-06-10 12:00:00
categories:
- 语言基础
tags:
- nodejs
---
目录
克隆
扁平
连接
拼接
截取
排序
添加
删除
遍历
映射
过滤
某一符合
所有符合
包含
生产
转化
复杂
查找
填充
包含
正文
#克隆
// 方案1-slice-es5
[2,4,434,43].slice()
// 方案2-遍历
Array.prototype.clone = function(){
let a=[];
for(let i=0,l=this.length;i<l;i++) {
a.push(this[i]);
}
return a;
}
// 方案3-concat
Array.prototype.clone=function(){
return [].concat(this);
}
// 方案4-浅复制-es6
Object.assign([],['sdsd',123,123,123])
// 方案5-扩展运算符-es6
[...[1, 2]];
#扁平
// 将一个嵌套多层的数组 array (嵌套可以是任何层数)转换为只有一层的数组
// https://blog.csdn.net/crystal6918/article/details/77130948
// 方案1-递归
function flatten(arr){
var res = [];
for(var i=0,len=arr.length;i<len;i++){
// 若是数组，递归
if(Array.isArray(arr[i])){
res = res.concat(flatten(arr[i]));
}
// 若非数组，添加
else{
res.push(arr[i]);
}
}
return res;
}
// 方案2-简化-es5
function flatten(arr){
return arr.reduce(function(prev,item){
return prev.concat(Array.isArray(item)?flatten(item):item);
},[]);
}
// 方案3-扩展运算符-es6
function flatten(arr){
while(arr.some(item=>Array.isArray(item)){
arr = [].concat(...arr);
}
return arr;
}
// 方案4-数组元素全是数字
function flatten(arr){
return arr.toString().split(',').map(function(item){
return +item;
})
}
#方法-es3
//参考资料 https://segmentfault.com/a/1190000002602408
/*
* 目录
* -连接
* -拼接
* -截取
* -排序(升序|降序)
* -添加(前加|后加)
* -删除(第一|最后|)
* -颠倒
*/
// 功能：将数组元素连接
// 注意：数组本身不发生变化
//无参数时，用‘,’连接
[1, 2, 3, 4, 5].join(); //joinstr: '1,2,3,4,5'
//有参数时
[1, 2, 3, 4, 5].join('-'); //joinStr1: '1-2-3-4-5'
// 功能：数组拼接成新的数组
// 注意：数组本身不发生变化
[1, 2, 3].concat(1, 'xxx'); //newArray: [1, 2, 3, 1, 'xxx']
[1, 2, 3].concat([4, 5]); //newArray1: [1, 2, 3, 4, 5]
// 功能：数组元素截取
// 注意：数组本身不发生变化
// 第一个参数是截取开始位置
// 第二个参数是截取结束位置，但是不包括结束位置。
// 如果只有一个参数，从开始位置截取到剩下所有数据
// 开始位置和结束位置也可以传递负数，负数表示倒着数。例如-3是指倒数第三个元素
[1, 2, 3, 4, 5].slice(1); //newArray: [2,3,4,5]
[1, 2, 3, 4, 5].slice(0, 3); //newArray1: [1,2,3]
[1, 2, 3, 4, 5].slice(0, -1); //newArray2: [1,2,3,4]
[1, 2, 3, 4, 5].slice(-3, -2); //newArray3: [3]
/*
slice();
目的：返回数组的一个片段或子数组.
参数：无or一个参数or俩个参数
> 无参数将原样返回一个新的数组，相当于复制了一遍数组.
> 返回的数组包含第一个参数指定的位置，到第二个参数前面一个位置之间的所有元素.
> 如果只指定一个参数，返回的数组将包含从开始位置到结尾的所有元素.
> 如果参数中出现负数，它表示相对于数组中的最后一个元素的位置的个数.
是否改变原数组: 不改变原数组, 返回一个新的数组.
*/
// 功能：数组插入数据、删除数据
// 注意：操作的是数组本身
// 返回值：截断的数据，是数组
// 如果有一个参数，从开始位置截取剩下所有数据
// 如果有二个参数，第1个参数为开始位置，第二个参数为截取长度
// 如果有三个参数，第1个参数为开始位置，第二个参数为截取长度，第三个参数为插入的数据
[1, 2, 3, 4, 5].splice(1); //array=[1] newArray=[2,3,4,5]
[1, 2, 3, 4, 5].splice(0, 2); //array=[3,4,5] newArray1=[1,2]
[1, 2, 3, 4, 5].splice(0, 1, 6, 7); //array=[6,7,2,3,4,5] newArray2=[1]
// 功能：往数组的尾部添加数据
// 注意：操作的是数组本身
[1, 2, 3].push(4, 5); //array : [1,2,3,4,5]
// 功能：往数组的头部添加数据
// 注意：操作的是数组本身
[3, 4, 5].unshift(1, 2); //array : [1,2,3,4,5]
// 功能：删除数组的最后一个数据
// 返回值：删除的数据
// 注意：操作的是数组本身
[1, 2, 3, 4, 5].pop(); //array : [1,2,3,4] value: 5
// 功能：删除数组的第一一个数据
// 返回值：删除的数据
// 注意：操作的是数组本身
[1, 2, 3, 4, 5].shift(); //array : [2,3,4,5] value: 1
// 功能：将数组元素颠倒
// 注意：操作的是数组本身，数组元素颠倒
[1, 2, 3, 4, 5].reverse(); //array: [5,4,3,2,1]
// 功能：将数组元素排序
// 注意：操作的是数组本身，数组元素顺序改变
//无参数时，按照字母表升顺排序
['a', 'e', 'b', 'd', 'c'].sort(); //['a','b','c','d','e']
//有参数时，参数是函数时，函数有两个参数a、b，分别是数组相邻的两个数据，返回值则决定相邻的两个数据哪个排在在前面
//返回值小于0，则a顺序在前
//返回值大于0，则a顺序在后
//升序排列，用代入的思想可以把a看成5，b看出2。
[5, 2, 1, 4, 3].sort(function(a, b) {
return a - b;
}); //[1,2,3,4,5]
//降序排列
[5, 2, 1, 4, 3].sort(function(a, b) {
return b - a;
}); //[5,4,3,2,1]
/*
toString()和toLocaleString();
目的：：将数组的每个方法转化为字符串，并且输出用逗号分隔的字符串列表.
参数：俩个方法无视参数.
是否改变原数组: 不改变原数组, 返回一个新的字符串.
*/
#方法-es5
//http://www.zhangxinxu.com/wordpress/2013/04/es5新增数组方法/?replytocom=288644
// 对于古董浏览器，如IE6-IE8
/*
* 目录
* -遍历
* -映射
* -过滤
* -某一符合
* -所有符合
* -包含
* -生产
*/
// 遍历数组，执行某一函数
// [].forEach(fn);
if (typeof Array.prototype.forEach != "function") {
Array.prototype.forEach = function (fn, context) {
// 遍历数组
for (var k = 0, length = this.length; k < length; k++) {
// 是函数且数组的键为自身拥有的
if (typeof fn === "function" && Object.prototype.hasOwnProperty.call(this, k)) {
// 用函数处理数组的值
fn.call(context, this[k], k, this);
}
}
};
}
// 映射
// 遍历数组，执行某一函数,并返回一个数组
if (typeof Array.prototype.map != "function") {
Array.prototype.map = function (fn, context) {
var arr = [];
// 是函数
if (typeof fn === "function") {
// 遍历数组
for (var k = 0, length = this.length; k < length; k++) {
// 执行函数并把结果添加的新的数组中；因此，fn需是有返回值的函数
arr.push(fn.call(context, this[k], k, this));
}
}
return arr;
};
}
// 过滤
// 遍历数组，执行某一函数,并返回一个数组
if (typeof Array.prototype.filter != "function") {
Array.prototype.filter = function (fn, context) {
var arr = [];
// 是函数
if (typeof fn === "function") {
// 遍历数组
for (var k = 0, length = this.length; k < length; k++) {
//执行函数且函数执行后的返回值为true则添加元素取值到新的数组中
fn.call(context, this[k], k, this) && arr.push(this[k]);
}
}
return arr;
};
}
// 某一符合
// 遍历数组，执行某一函数,并返回真假
if (typeof Array.prototype.some != "function") {
Array.prototype.some = function (fn, context) {
var passed = false;
// 是函数
if (typeof fn === "function") {
// 遍历数组
for (var k = 0, length = this.length; k < length; k++) {
// 满足跳出遍历的条件则跳出
if (passed === true) break;
// 执行函数且将函数执行后的返回值转换为布尔值并赋值
passed = !!fn.call(context, this[k], k, this);
}
}
return passed;
};
}
// 所有符合
// 遍历数组，执行某一函数,并返回真假
if (typeof Array.prototype.every != "function") {
Array.prototype.every = function (fn, context) {
var passed = true;
// 是函数
if (typeof fn === "function") {
//遍历数组
for (var k = 0, length = this.length; k < length; k++) {
// 满足跳出遍历的条件则跳出
if (passed === false) break;
// 执行函数且将函数执行后的返回值转换为布尔值并赋值
passed = !!fn.call(context, this[k], k, this);
}
}
return passed;
};
}
// 返回一取值在数组中的位置，顺序查找
// 遍历数组，判断数组中是否含有某一取值,并返回位置
if (typeof Array.prototype.indexOf != "function") {
Array.prototype.indexOf = function (searchElement, fromIndex) {
var index = -1;
// 开始位置
fromIndex = fromIndex * 1 || 0;
// 遍历数组
for (var k = 0, length = this.length; k < length; k++) {
// 满足条件则跳出遍历
if (k >= fromIndex && this[k] === searchElement) {
index = k;
break;
}
}
return index;
};
}
// 返回一去值在数组中的位置，逆序查找
// 遍历数组，判断数组中是否含有某一取值,并返回位置
if (typeof Array.prototype.lastIndexOf != "function") {
Array.prototype.lastIndexOf = function (searchElement, fromIndex) {
var index = -1, length = this.length;
// 开始位置
fromIndex = fromIndex * 1 || length - 1;
// 遍历数组
for (var k = length - 1; k > -1; k-=1) {
// 满足条件则跳出遍历
if (k <= fromIndex && this[k] === searchElement) {
index = k;
break;
}
}
return index;
};
}
if (typeof Array.prototype.reduce != "function") {
Array.prototype.reduce = function (callback, initialValue ) {
// 之前值
var previous = initialValue,
// 开始位置
k = 0,
// 结束位置
length = this.length;
// 若没有初始值，则之前值为数组第一项，开始位置为1
if (typeof initialValue === "undefined") {
previous = this[0];
k = 1;
}
// 是函数
if (typeof callback === "function") {
// 遍历数组
for (k; k < length; k++) {
// 键为数组自身拥有的则执行函数，并将函数执行结果作为下一步的之前值；因此函数需是有返回值
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
if (typeof Array.prototype.reduceRight != "function") {
Array.prototype.reduceRight = function (callback, initialValue ) {
var length = this.length,
// 开始位置
k = length - 1,
// 之前值
previous = initialValue;
// 若没有初始值，则之前值为数组最后一项，开始位置为倒数第二个索引
if (typeof initialValue === "undefined") {
previous = this[length - 1];
k--;
}
if (typeof callback === "function") {
for (k; k > -1; k-=1) {
this.hasOwnProperty(k) && (previous = callback(previous, this[k], k, this));
}
}
return previous;
};
}
#方法-es6
// https://www.cnblogs.com/xhy-steve/p/5871182.html
/*
* 目录
* -转化
* -复制
* -查找
* -填充
*/
/*
Array.from();
目的：将类数组对象和可遍历对象转化为数组．
参数：上述对象以及第二个参数。第二个参数类似于数组中的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组.
用法：const toArray = (() => Array.from ? Array.from : obj => [].slice.call(obj) )(); （兼容写法）.
Array.of();
目的：将一组值转化为数组．
参数：无或无限(无时返回一个空数组).
copyWithin();
目的：在数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)．
参数：target(必须): 从该位置开始替换数据.
> start(可选)：从该位置开始读取数据.
> end(可选)：到该位置的前一个位置.
是否修改原数组：修改原数组.
find()和findIndex();
目的：在数组内部, 找到第一个符合条件的数组成员．
参数：回调函数接受三个参数，分别表示当前值，当前位置，原数组.
俩个方法都接受第二个参数用来绑定函数中的this的值.(绑定作用域).
PS： 这两个方法都可以发现NaN，弥补了数组的IndexOf() 方法的不足。
fill();
目的：如其意，填充一个数组．
参数：第一个参数表示被填充的元素.
第二个参数表示填充的起始位置.
第三个参数表示填充的结束位置(指定位置之前一个).
*/
#方法-es7
// https://www.cnblogs.com/xhy-steve/p/5871182.html
/*
includes();
目的：表示某个数组是否包含给定的值，与字符串的includes()方法类似.
参数：第一个参数表示要查找的数，第二个参数表示搜索的起始位置，返回一个布尔值.
意义：推荐使用这个而不是indexOf()因为后者会对NaN造成误判.
*/
