js数组处理方法总结slice、join、filter、map、indexOf、reduce、reduceRight等
归纳总结数组的处理方法如下
1.splice()
功能：
1.删除：从数组中删除元素，两个参数，第一个参数（要删除元素的起始位置），第二个参数（要删除的项数）
2.添加：插入元素到数组中，三个参数，第一个参数（起始位置），第二个参数（0），第三个参数（插入的项数）
3.替换：删除、插入元素同时完成
输出：返回一个由删除元素组成的数组。
注意：新建了一个数组，并修改了原数组
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
console.log(arr); //arr = [1,2,3]
// 删除arr = [1,2,3]
arr.splice(1,2);//删除 => 删除起始位置为1，删除项数为2
console.log(arr); //arr = [1]
//插入arr = [1]
arr.splice(1,0,4,5,6); //插入 => 插入元素起始位置为1（参数一），删除0个元素（参数二），在起始位置后插入元素4,5,6
console.log(arr); // [1, 4, 5, 6]
//替换[1, 4, 5, 6]
arr.splice(0,1,4); // 替换 -> 从下标为0开始,项数为1的数组元素替换成4
console.log(arr); // [4,4,5,6]
arr.splice(0,2,8); // 替换 -> 从下标为0开始,项数为2的数组元素替换成8(即4,4整体替换成4)
console.log(arr); // [8,5,6]
2.slice
功能：截取数组生成新数组，原数组不受影响
用法:arrayObj.slice(start,end) （不包括该元素）start为开始位置下标，必选，end为结束位置下标，不必选
下标从0开始计算
- arrayObj - 原始数组;
- start - 必填；设定新数组的起始位置；如果是负数，则表示从数组尾部开始算起（-1
指最后一个元素，-2 指倒数第二个元素，以此类推）。 - end - 可选；设定新数组的结束位置；如果不填写该参数，默认到数组结尾；如果是负数，则表示从数组尾部开始算起（-1 指最后一个元素，-2
指倒数第二个元素，以此类推）。
var list = [1,2,3,7,5,6,7,8,9]
var list1 = list.slice(2,-1);//截取 => 参数一（开始的下标位置为2，值为3）参数二（负数表示从尾部向前倒数第一个，值为8）
console.log('list---'+list);
console.log('list1---'+list1);//[3,4,5,6,7,8]
var list2 = list.slice(1,4); // => 按照下标值计算，包含参数一，不包含参数二
console.log(list2) //[2, 3, 7]
var aa = [1,2,3,4,5,6];
console.log(aa.slice(2)); //[3,4,5,6]
console.log(aa.slice(2,8)); //[3,4,5,6] 超过最大长度，只显示到最后结果
console.log(aa.slice(2,5)); //[3,4,5]
console.log(aa.slice(2,-1)); //[3,4,5] 相对于倒数第一个之前
console.log(aa.slice(2,-2)); //[3,4] 相对于倒数第二个之前
console.log(aa.slice(3)); //[4,5,6] 一个参数从第三个到最后
console.log(aa.slice(-2));//[5,6] 一个参数负值从倒数第二个到最后
3. push()
功能：在数组末尾添加一个或多个元素，并返回新数组长度
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
console.log(arr); //arr = [1,2,3]
4.pop()
功能：从数组末尾删除1个元素(删且只删除1个), 并返回 被删除的元素
//pop（） 从数组末尾删除1个元素(删且只删除1个), 并返回 被删除的元素
var arr = [1,2,3,5,6,'a','b','c']
console.log( arr.pop()) //c
console.log(arr) //[1, 2, 3, 5, 6, 'a', 'b']
5.unshift()
功能：将参数添加到原数组开头，并返回数组的长度。该方法会改变原来的数组，而不会创建新的数组。
//unshift（）
var arr = [1,2,3,5,6,'a','b','c']
console.log( arr.unshift('a')) //9 返回数组的长度
console.log(arr) //['a',1, 2, 3, 5, 6, 'a', 'b']
6. shift()
功能：删除原数组第一项，并返回删除元素的值，如果数组为空则返回undefined。该方法会改变原来的数组，而不会创建新的数组。
//shift()
var arr = [1,2,3,5,6,'a','b','c']
console.log( arr.shift()) //c
console.log(arr) //[1, 2, 3, 5, 6, 'a', 'b']
7.join()
功能：将数组中所有元素都转化为字符串并连接在一起。
// join()
var arr = [1,2,3,5,6,'a','b','c']
console.log(arr) //
console.log( arr.join('')) //12356abc
8. reverse()
功能：将数组中的元素颠倒顺序。
// reverse()
var arr = [1,2,3,5,6,'a','b','c']
console.log(arr) //[1,2,3,5,6,'a','b','c']
console.log( arr.reverse()) //['c', 'b', 'a', 6, 5, 3, 2, 1]
9. concat()
功能：数组拼接的功能 ,用于连接两个或多个数组。返回新数组，原数组不受影响。
// concat() 拼接一个或多个数组,返回新数组，原数组不受影响
var arr1 = ['java','web','php'];
var arr2 = ['a','b','c'];
var arr3 = ['1','2','3']
var newArr = arr1.concat(arr2,arr3);
console.log(newArr);//['java', 'web', 'php', 'a', 'b', 'c', '1', '2', '3']
10.sort()
功能：用于对数组的元素进行排序。参数可以为函数。该方法会改变原来的数组，而不会创建新的数组。
// filter()
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
var newArray = arr.filter((item) => {
return item > 5
})
console.log(arr);// [1,2,3,4,5,6,7,8,9] 不会修改原数组
console.log(newArray);//[6, 7, 8, 9] 返回新数组
//sort
function sortNumber(a, b) {//自己设计的排序函数
return a - b;
}
// 1.不传参数，将不会按照数值大小排序，按照字符编码的顺序进行排序；
var arr = ['General', 'Tom', 'Bob', 'John', 'Army'];
var resArr = arr.sort();
console.log(resArr);//输出 ["Army", "Bob", "General", "John", "Tom"]
var arr2 = [30, 10, 111, 35, 1899, 50, 45];
var resArr2 = arr2.sort();
console.log(resArr2);//输出 [10, 111, 1899, 30, 35, 45, 50]
// 2.传入参数，实现升序，降序；
//--------- => 升序
var arr3 = [30, 10, 111, 35, 1899, 50, 45];
arr3.sort(function (a, b) {
return a - b;
})
console.log(arr3);//输出 [10, 30, 35, 45, 50, 111, 1899]
//----------- =>降序
var arr4 = [30, 10, 111, 35, 1899, 50, 45];
arr4.sort(function (a, b) {
return b - a;
})
console.log(arr4);//输出 [1899, 111, 50, 45, 35, 30, 10]
// 3.根据数组中的对象的某个属性值排序；
var arr5 = [{ id: 10 }, { id: 5 }, { id: 6 }, { id: 9 }, { id: 2 }, { id: 3 }];
arr5.sort(function (a, b) {
return a.id - b.id
})
console.log(arr5);
//输出新的排序
// {id: 2}
// {id: 3}
// {id: 5}
// {id: 6}
// {id: 9}
// {id: 10}
// 4.根据数组中的对象的多个属性值排序，多条件排序；
var arr6 = [{id:10,age:2},{id:5,age:4},{id:6,age:10},{id:9,age:6},{id:2,age:8},{id:10,age:9}];
arr6.sort(function(a,b){
if(a.id === b.id){//如果id相同，按照age的降序
return b.age - a.age
}else{
return a.id - b.id
}
})
console.log(arr6);
//输出新的排序
// {id: 2, age: 8}
// {id: 5, age: 4}
// {id: 6, age: 10}
// {id: 9, age: 6}
// {id: 10, age: 9}
// {id: 10, age: 2}
11.reduce()
功能：
两个参数：函数和递归的初始值。从数组的第一项开始，逐个遍历到最后
* reduce()
* arr.reduce(callback,[initialValue])
* educe 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组。
* callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组）
* initialValue （作为第一次调用 callback 的第一个参数。）
* */
实例解析 initialValue 参数
// 1.无initialValue：例子index是从1开始的，第一次的prev的值是数组的第一个值。数组长度是4，但是reduce函数循环3次。
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
})
console.log(arr, sum);
/*
打印结果：
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
*/
// 2.有initialValue：这个例子index是从0开始的，第一次的prev的值是我们设置的初始值0，数组长度是4，reduce函数循环4次。
var arr = [1, 2, 3, 4];
var sum = arr.reduce(function (prev, cur, index, arr) {
console.log(prev, cur, index);
return prev + cur;
}, 0) //注意这里设置了初始值
console.log(arr, sum);
/*
打印结果：
0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10
*/
// 结论：如果没有提供initialValue，reduce 会从索引1的地方开始执行 callback 方法，跳过第一个索引。如果提供initialValue，从索引0开始。
用法：
// reduce()最简单的用法就是累加和累乘
var arr3 = [1, 3, 4, 6, 7];
var sum3 = arr3.reduce((pre, cur) => pre + cur)
var multiply = arr3.reduce((pre, cur) => pre * cur)
console.log(sum3) // 21
console.log(multiply) // 504
// reduce()的高级用法：
//数组去重
var arr4 = [1, 3, 2, 5, 3, 1, 2, 7, 8];
var newArr = arr4.reduce((pre, cur) => {
if (!pre.includes(cur)) {
return pre.concat(cur)
} else {
return pre
}
}, []);
console.log(newArr, '数组去重') // [1, 3, 2, 5, 7, 8]
// 将二维数组转换成一维数组
var arr5 = [[1, 2], [3, 4], [5, 7]];
var newArr2 = arr5.reduce((pre, cur) => {
return pre.concat(cur)
}, []);
console.log(newArr2, '二维转成一维') // [1, 2, 3, 4, 5, 7
// 将多维数组转换成一维数组
var arr6 = [1, 3, [4, 5, 6, [7, 8, 4]], [7, 0, [2, 4], 9]];
var newArr3 = this.flatArr(arr6);
console.log(newArr3, '多维转一维'); // [1, 3, 4, 5, 6, 7, 8, 4, 7, 0, 2, 4, 9]
function flatArr(arr) {
return arr.reduce((pre, cur) => {
return pre.concat(Array.isArray(cur) ? this.flatArr(cur) : cur)
}, [])
}
// 操作对象数组中的对象属性
const data = [
{
id: 1,
name: '安徽'
},
{
id: 2,
name: '南京'
},
{
id: 3,
name: '上海'
},
{
id: 4,
name: '杭州'
},
{
id: 5,
name: '天津'
},
{
id: 6,
name: '北京'
},
{
id: 7,
name: '山东'
},
{
id: 8,
name: '河南'
},
{
id: 9,
name: '重庆'
},
{
id: 10,
name: '成都'
},
{
id: 11,
name: '合肥'
},
]
const city_list = data.reduce((prev, item, idx) => {
let key =
idx > 8
? `${idx + 1}00`
: `0${idx + 1}00`;
prev[key] = item.name;
return prev;
}, {});
console.log(city_list, '转换后的城市列表')
// 操作对象数组中的对象属性
let person = [
{
name: '小红',
age: 16,
},
{
name: '小黄',
age: 20,
},
{
name: '小黑',
age: 21,
},
]
let sumAge = person.reduce((pre, cur) => {
return pre = pre + cur.age
}, 0);
console.log(sumAge) // 57
// 计算数组中每个元素出现的次数
var arr7 = ['红', '黄', '黑', '黄', '蓝', '红']
var num = arr7.reduce((pre, cur) => {
if (cur in pre) {
pre[cur]++
} else {
pre[cur] = 1
}
return pre
}, {})
console.log(num, 'num对象') //{红: 2, 黄: 2, 黑: 1, 蓝: 1}
12. every()和some()
every() 判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
some() 判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
注释：
some() 对没有值的数组元素不执行函数。
some() 不改变原始数组。
some()用法
一般是需要对数组里面每一项内容进行循环匹配时会用到，有一项满足条件时就会返回true,否则为false，示例代码如下：（当找到大于15的时候，就会返回true）
var ages = [3, 10, 18, 20，50];
function checkAdult(age) {
return age > 15;
}
// ages中有一个大于15的数就会进入判断
if (ages.some(checkAdult)) {
// to do
}
every()
every() 方法检查数组中的所有元素是否都通过了测试（被作为函数提供）。
every() 方法对数组中存在的每个元素执行一次函数：
如果找到函数返回 false 值的数组元素，every() 返回 false（并且不检查剩余值）
如果没有出现 false，every() 返回 true
注释：
every() 不对没有值的数组元素执行函数。
every() 不改变原始数组。
一般是需要对数组里面每一项内容进行循环匹配时会用到，有一项不满足条件时就会返回false,否则为true，示例代码如下：（当找到大于15的时候，就会返回true）
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age < 21;
}
// ages中全部小于21时才会进入判断
if (ages.every(checkAdult)) {
// to do
}
var arr = [1, 2, 3, 4, 5, 6];
arr.every(x=>x>0);//return true;
arr.every(x=>x>5);//return false;
arr.some(x=>x>5);//return true;
13.copyWithin()
copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。该方法会改变数组的内容，但是不会改变数组的长度。
array.copyWithin(target, start, end)
target 必需。复制到指定目标索引位置。
start 必需。元素复制的起始位置。
end 可选。停止复制的索引位置 (默认为 array.length)
// copyWithin()
var arr = ['a','b','c','d']
arr.copyWithin(1,2,3) // ['a', 'c', 'c', 'd']
console.log(arr)
具体参考：https://blog.csdn.net/Menkongkong/article/details/117667895
14.indexOf（）
indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。
用法：
stringObject.indexOf( value, index );
参数：
value：必需，规定需检索的字符串值。可选的整数参数。
index：规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
注释：
indexOf() 方法对大小写敏感！
如果要检索的字符串值没有出现，则该方法返回 -1。
let str = 'orange';
str.indexOf('o'); //0
str.indexOf('n'); //3
str.indexOf('c'); //-1
//
let listArr = 'savc1289';
console.log(listArr.indexOf('a')) //1
var url = 'http://test-app.helease.com.cn:8089?web=1'
var i = url.indexOf('?');
console.log('i----'+i);//35
console.log(url.substr(i+1));//web=1
15.lastIndexOf（）
indexOf和lastIndexOf语法是一样的，但查找的顺序相反，indexOf是从前往后查，而lastIndexOf是从后往前查。
string.lastIndexOf(searchvalue,start)
var str = "abcdcefg";
var index = str.lastIndexOf("c");
console.log(str.indexOf("c"));//2
console.log(index);//4
16.reduceRight（）
数组有两个归并方法：reduce() 与 reduceRight()
这两个方法都会迭代数组的所有项，并在此基础上构建一个最终的返回值
reduce() 方法从数组第一项开始遍历到最后一项
reduceRight() 方法从最后一项遍历到第一项
使用reduce()还是reduceRight()，主要取决于要从哪头开始遍历数组。除此之外，它们完全相同。
接收两个参数
1.对每一项都会运行的归并函数
2.可选的归并起点的初始值
归并函数接收四个参数
1.上一个归并值
2.当前项
3.当前项的索引
4.数组本身
reduceRight与reduce参数一致 只不过他从数组的最右边开始执行
let values = [1, 2, 3, 4, 5];
let sum = values.reduce((prev, cur, index, array) => prev + cur);
// 1+2=3 3+3=6 6+4=10 10+5=15
alert(sum); // 15
var values = [1, 2, 3, 4, 5];
var sum = values.reduceRight((prev, cur, index, array) => prev + cur);
// 1+2=3 3+3=6 6+4=10 10+5=15
alert(sum); // 15
17.find（）
1.find() 方法返回通过测试（函数内判断）的数组的第一个元素的值。
2.如果没有符合条件的元素返回 undefined
3.find() 对于空数组，函数是不会执行的。
4.find() 并没有改变数组的原始值。
5.array.find(function(currentValue, index, arr),thisValue)，其中currentValue为当前项，6.index为当前索引，arr为当前数组
let test = [1, 2, 3, 4, 5];
let a = test.find(item => item > 3);
console.log(a); //4
let b = test.find(item => item == 0);
console.log(b); //undefined
18.findIndex（）
1.findIndex()方法 返回传入一个测试条件（函数）符合条件的数组第一个元素位置
2.findIndex()方法为数组中的每个元素都调用一次函数执行：
当数组中的元素在测试条件时返回true时，findIndex()返回符合条件的元素的索引位置，
之后的值不会再调用执行函数
如果没有符合条件的元素返回-1
注意：findIndex()对于空数组，函数时不会执行的
findIndex()并没有改变数组的原始值
array.findIndex(function(currentValue,index,arr),thisValue)
参数：
currentValue 必需，当前元素
index 可选 当前元素的索引
arr 可选 当前元素所属的数组对象
thisValue 可选 传递给函数的值一般用this值。如果这个参数为空，undefined会传递给this值
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回-1。
19.forEach()
1.forEach()方法用于调用数组的每个元素，并将元素传递给回调函数。
2.forEach()有三个参数，第一个是function()函数，第二个是对象；
3.函数里面有三个参数，第一个是数组的每一项值（必选），第二个是数组下标（可选），第三个是原数组（可选）
4.forEach()第二个参数对象，使第一个参数函数的this指向对象
参数：
参数一是数组的每一项值（必选）
var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item){
// console.log(item);
},obj);//返回值： 1 3 5
参数二是数组下标（可选）
var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item, index, self){
console.log(index);
},obj);//返回值：0 1 2
参数三是原数组（可选）
var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item, index, self){
console.log(self);
},obj);//返回值：[1,3,5] [1,3,5] [1,3,5]
forEach()第二个参数对象
var obj = {
'1' : 'abc',
'3' : 100,
'5' : 'hello'
}
var arr = [1, 3, 5];
arr.forEach(function(item, index, self){
console.log(this);
},obj);//让回调函数中的this指向 arr
//返回值{'1' : 'abc','3' : 100, '5' : 'hello'} {'1' : 'abc','3' : 100, '5' : 'hello'} {'1' : 'abc','3' : 100, '5' : 'hello'}
20.map()
功能：
调用的数组的每一个元素传递给指定的函数，并返回一个新数组 ,不修改原数组。
map() 方法按照原始数组元素顺序依次处理元素。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。
用法:
array.map(function(currentValue, index, arr), thisIndex)—
参数说明：
function(currentValue, index, arr)：必须。为一个函数，数组中的每个元素都会执行这个函数。其中函数参数：
currentValue：必须。表述当前元素的的值(item)
index：可选。当前元素的索引也就是第几个数组元素。
arr：可选。当前元素属于的数组对象
thisValue：可选。对象作为该执行回调时使用，传递给函数，用作"this"的值
//map()
var arrObj = [2,4,6,8];
var newArray = arrObj.map((item) => {
return item * item
})
console.log(arrObj);//[2,4,6,8]map() 不会修改原数组
console.log(newArray);// [4, 16, 36, 64] 返回新数组
21.filter()
功能：过滤功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
可以巧妙的用来去重
注意：filter()不会对空数组进行检测、不会改变原始数组
用法：
Array.filter(function(currentValue, indedx, arr), thisValue)
参数一：函数 function 为必须，数组中的每个元素都会执行这个函数。且如果返回值为 true，则该元素被保留；
函数的第一个参数 currentValue 也为必须，代表当前元素的值。
// filter()
var arr = [1,2,3,4,5,6,7,8,9]
var newArray = arr.filter((item)=>{
return item > 5
})
console.log(arr);// [1,2,3,4,5,6,7,8,9] 不会修改原数组
console.log(newArray);//[6, 7, 8, 9] 返回新数组
会修改原数组方法：
shift、unshift、pop、push、splice、reverse、sort、copyWithin、fill
不会修改原数组方法：
concat、slice、join、filter、map、some、every、forEach、lastIndexOf、indexOf、reduce、reduceRight、find、findIndex