JavaScript之数组方法

之前就想过整理数组方法的，但是一直没有时间，现在趁有时间整理下

• 首先来说创建数组的方式，目前好像是两种，一种是构造函数，一种是直接赋值空数组

// 构造函数
var arr = new Array(); // 创建一个空数组

// 赋值空数组
var arr = []; // 创建空数组

数组方法也有很多，咱们一步一步来吧。首先数组方法分为原型方法(原生方法)和从Object对象继承的方法。

• 首先讲isArray()，这个方法主要是为了判断某变量是否为js数组，返回值是一个布尔类型，为true则是js数组，为false则不是，咱们看看下面例子：

var arr = [1,2,3];
Array.isArray(arr);
// true

• toString(),这个方法是把数组转换为数组值（逗号分隔）的字符串。如：

var arr = [1,2,3];
arr.toString();
// "1,2,3"

• join()这个方法也可将所有数组元素结合为一个字符串。它的行为类似 toString()，但是我们还可以规定分隔符，如果我们不规定，它则默认的是逗号( ，)，如：

var arr = [1,2,3];
// 不规定分隔符
arr.join();
// "1,2,3"
// 规定分隔符
arr.jion('-');
// "1-2-3"
// 方法不改变原数组，比如继续看arr
arr  // [1,2,3]

• push()和pop()
push() ：可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。
  pop() ：数组末尾移除最后一项，减少数组的 length 值，然后返回移除的项。
  咱们先来看push()

var arr = [1,2,3];
arr.push(4,5,6);      // 6      这个6就是返回的数组长度
console.log(arr)
// [1,2,3,4,5,6]        // 已改变了原数组

接着看pop()

// 这次我们不用数字来做操作,方便大家区分
var arr = ['a', 'b', 'c', 'd', 'e', 'f'];
arr.pop();  // 返回值' f ',这个' f '就是被删除的值
console.log(arr); // 得出以下结果
['a', 'b', 'c', 'd', 'e']

• shift() 和 unshift()
shift() ：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
  unshift() : 将参数添加到原数组开头，并返回数组的长度 。

// 首先我们来看shift()
var arr = ['a','b','c'];
arr.shift(); // 'a'         // 返回删除元素
console.log(arr)
['b','c']               // 已改变原数组
// 如果数组为空，返回undefined
var arr = [];
arr.shift();    //   undefined

接下来我们看看unshift()
var arr = ['a','b','c'];
arr.unshift('1');  //  4       // 返回添加后数组长度
console.log(arr)
['1','a','b','c']        // 已改变原数组

• sort()
sort() ：按升序排列数组项——即最小的值位于最前面，最大的值排在最后面。
  在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：

var arr = ['d','a','c','b'];
arr.sort();
console.log(arr)
['a','b','c','d']      // 原数组被改变

// 接着看
var arr = [13, 24, 51, 3];
arr.sort();
console.log(arr);
[13, 24, 3, 51]      // 原数组被改变

// 所以遇到这样的情况，使用的时候最好是封装成一个函数
// 升序排序函数
function sortNumber(a,b){
　　return a - b
}
var arr =  [13, 24, 51, 3];
arr.sort(sortNumber);
console.log(arr)
[3, 13, 24, 51]        // 升序

// 降序排序函数
function NumDescSort(a,b){  
     return b - a;  
} 
var arr =  [13, 24, 51, 3];
arr.sort(NumDescSort)
console.log(arr)
[51, 24, 13, 3] 

• reverse()
reverse() ：反转数组项的顺序。

var arr = [13, 24, 51, 3];
console.log(arr.reverse()); //[3, 51, 24, 13]
console.log(arr); //[3, 51, 24, 13](原数组改变)

• concat()
concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。

var arr = [1,3,5,7];
var arr1 = arr.concat(9,[11,13]);
console.log(arr1); 
[1, 3, 5, 7, 9, 11, 13]
console.log(arr); 　　　　
 [1, 3, 5, 7]            //  原数组未被修改

• slice()
slice() ：可从已有的数组中返回选定的元素。
  语法：arrayObject.slice(start,end)

参数	描述
start	必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end	可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。

返回值
返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
如果 end 未被规定，那么 slice() 方法会选取从 start 到数组结尾的所有元素。

var arr = [1,3,5,7,9,11];
var arr1 = arr.slice(1);  // 默认从第0个开始，截取到下标为1(不包括该元素)
console.log(arr1); 
[3, 5, 7, 9, 11]
var arr2 = arr.slice(1,4); // 从第1个开始，截取到下标为4(不包括该元素)
console.log(arr2);
[3, 5, 7]
var arr3 = arr.slice(1,-2); // 从第1个开始，截取到下标为-2，也就是下标为4(不包括该元素)，
// 和slice(1,4)相同
console.log(arr3); 
[3, 5, 7]
var arr4 = arr.slice(-4,-1);
// 从第-4开始，反过来从-1开始数，-4的位置在下标2，到-1，也就是下标5，
// 可以理解为slice(2,5)，第2截取到第5(不包括该元素)
console.log(arr4);
[5, 7, 9]
console.log(arr);
[1, 3, 5, 7, 9, 11]   //  原数组没变

// 如果还不清楚截取位置，还可以往下看
var arr = [1,3,5,7,9,11];
arr.slice(0,1)   // 返回[1]
arr.slice(0,2)     // 返回[1,3]
arr.slice(0,3)    // 返回[1,3,5]
arr.slice(0,-1)    // 返回[1,3,5,7,9]
arr.slice(0,-2)    // 返回[1,3,5,7]

• splice()
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
  注释：该方法会改变原始数组。
  语法： arrayObject.splice(index,howmany,item1,.....,itemX)

参数	描述
index	必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。
item1, ..., itemX	可选。向数组添加的新项目。

返回值： 包含被删除项目的新数组，如果有的话
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。
如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。

var arr = [1,3,5,7,9,11];
// 从第0个元素开始，删除2个元素
var arrRemoved = arr.splice(0,2);   // 返回值[1,3]
console.log(arr);
// [5, 7, 9, 11]
// 从第2个位置开始，删除0个元素，添加元素4，添加元素6
var arrRemoved2 = arr.splice(2,0,4,6);  // 删除0个元素，返回值[]
console.log(arr); 
// [5, 7, 4, 6, 9, 11]
// 从第1个元素开始，删除1个元素，添加元素2，添加元素4
var arrRemoved3 = arr.splice(1,1,2,4); // 返回值[7]
console.log(arr); 
//  [5, 2, 4, 4, 6, 9, 11]

• indexOf()和 lastIndexOf()
indexOf() ：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
  lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
  这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); 
// 2
console.log(arr.lastIndexOf(5));
// 5
console.log(arr.indexOf(5,2));
// 2
console.log(arr.lastIndexOf(5,4));
// 2
console.log(arr.indexOf("5"));
// -1
// indexOf方法就是，如果查找到有，那么返回该元素位置，如果没有，则返回-1，所以我们一般写判断都是
// if(arr.indexOf('5') != -1)  或者if(arr.indexOf('5') > -1)

• map()
map() ：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
  下面代码利用map方法实现数组中每个数求平方。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.map(function(item){
return item*item;
});
console.log(arr2); //[1, 4, 9, 16, 25]

// 我们也可以拿来做接口映射，比如
let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

• forEach()
  forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a){
    console.log(x + '|' + index + '|' + (a === arr));
});
// 输出为：
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

• filter()
filter() ：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var arr2 = arr.filter(function(x, index) {
    return index % 3 === 0 || x >= 8;
}); 
console.log(arr2); 
// [1, 4, 7, 8, 9, 10]

• every()
every() ：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.every(function(x) {
    return x < 10;
}); 
console.log(arr2);
// true
var arr3 = arr.every(function(x) {
    return x < 3;
}); 
console.log(arr3); 
// false

• some()
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。

var arr = [1, 2, 3, 4, 5];
var arr2 = arr.some(function(x) {
    return x < 3;
}); 
console.log(arr2);
// true
var arr3 = arr.some(function(x) {
    return x < 1;
}); 
console.log(arr3);
// false

• reduce()和 reduceRight()
  先说说reduce()
reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。
  reduce() 可以作为一个高阶函数，用于函数的 compose。
  注意: reduce() 对于空数组是不会执行回调函数的。
  然后是reduceRight()
reduceRight() 方法的功能和 reduce()功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
  注意: reduce() 对于空数组是不会执行回调函数的。

// es6中reduce()方法
// 从左往右开始
// 参数：
// prev：它是上一次调用回调时返回的结果，每次调用的结果都会给prev
// cur：当前的元素
// index：当前的索引
// arr：循环的数组
// 返回值：
// ----------函数累计处理的结果
var a = [1,2,3,4,5,6,7,8,9,10]
var str = a.reduce(function(prev,cur,index,arr){
    return prev + cur ;
})
str // 55;

// ------------将二维数组转换成一维
str //  (10) [0,1, 2, 3, 4, 5, 6, 7, 8, 9]
// 数组去重
var arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
var str = arr.sort().reduce((prev, cur)=>{
    if(prev.length===0 || prev[prev.length-1]!==cur){
        prev.push(cur);
    }
    return prev;
}, []);
str // (5) [1, 2, 3, 4, 5]
// es6中reduceRight()方法
// 从右往左开始
// 方法是一样的
// -------------函数累计处理的结果
var a = [1,2,3,4,5,6,7,8,9,10]
var str = a.reduceRight(function(prev,cur,index,arr){
    return prev + cur ;
})
str // 55;
// 方法是一样的，只不过是方法名改变下，但是结果是不会变的

• 现在有些例子,类似于数组去重
  通过使用Set对象和...运算符能够使用数组里的唯一值去创建一个新的数组

var arr = [1,2,2,3,4,4,3,5,6,5,6,7,7,8,8,9,9,10,10,1];
var arr1 = [...new Set(arr)];
console.log(arr1);
// [1,2,3,4,5,6,7,8,9,10]     // 打印结果

到这里了，如果对你有帮助，帮忙点个赞呗~~