JS中常的数组API整理及案例

API 专业名词 应用程序接口（函数/方法）
Array.prototype 中所有的方法都在数组中可以访问到

Array.prototype.push()
语法：arr.push(element1,…,elementN);
描述：该方法用于在数组的尾部添加 1到多个元素
参数：element 需要添加到数组尾部的元素(any)
返回值：返回添加内容后的新长度
tip：直接修改原数组
var arr = [2 , 3 , 4];
var oldlength = arr.length
var len = arr.push (22,11,11,11);
console.log(arr);
if (oldlength !=len){
console.log(‘添加成功’);
}

Array.prototype.pop();
语法： arr.pop()
描述： 该方法用于删除数组中的最后一个元素
返回值：返回被删除的元素，如果数组为空，返回undefined
tip：直接修改原数组
var arr = [1,3];
var del = arr.pop();
console.log(arr); // Array(1) 0: 1
console.log(del); // 3
使用push和pop可以实现类似与栈的效果（LIFO）

Array.prototype.concat();
语法：arr.concat(value1,[…,valueN]; //语法中出现中括号表示这个参数可选
参数：value需要添加到新数组的元素
返回值：添加元素后的新数组
tip：该方法不修改原数组
var arr = [2 , 3];
var arr2 = arr. concat(5 , 6);
console.log(arr);
console.log(arr2);

数组扁平化
var arr = [1 , 2 , 3 , 4];
arr.push([11,22],[33,44]);
console.log(arr2); // length:8

Array.prototype.join();
语法： arr.join();
arr.join(subString);
描述：该方法用于将数组内所有的元素都进行toString()操作，并进行拼接
参数：substring 用于拼接字符串的连接符号
返回值：新的字符串，包含了数组所有元素toString的结果
默认情况使用英文逗号进行拼接
var arr = [ true , 123 , ‘aaa’, null , {}]; // ‘true’ ‘123’ ‘aaa’ ‘[Object Object]’
var str = arr.join(‘---------’);
console.log(str); // true---------123---------aaa------------------[object Object]

Array.prototype.reverse();
语法：arr.reverse();
描述：该方法颠倒数组中所有元素（修改的是排列顺序）
tip：直接修改原数组
var arr = [1 , 2 ,3 ];
arr.reverse();
console.log(arr); //Array(3) 0: 3 1: 2 2: 1

Array.prototype.shift();
语法： arr.shift();
描述： 该方法用于删除并返回数组中的第一个元素，并将后面的元素向前移一位，将数组的长度-1
返回值：返回被删除的元素
tip：该方法直接修改原数组
var arr = [1 ,2 ,3 ,4 ,5];
console.log(arr.shift()); // 返回 1
console.log(arr); // Array(4) 0: 2 1: 3 2: 4 3: 5

Array.prototype.slice()
语法：arr.slice(start[,end]);
描述：slice函数用于截取数组指定索引的片段
参数：start开始的索引
end 结束索引 如果没有end参数 则从start开始到数组结尾结束
end 允许是负数 -1表示最后一个 -2表示倒数第二个 以此类推
返回值：截取到的新数组片段（包含start到end的部分）
包括开始下标 不包括结束下标
var arr = [5423 ,67 ,671 ,66 ,134 ,77 ,34];
var sli = arr.slice(1 , -3);
console.log(sli); // Array(3) 0: 67 1: 671 2: 66 length:3
console.log(arr); //Array(7) 0: 5423 1:67 2: 671 3: 66 4: 134 5: 77 6: 34
var arr = [];
console.log(arr.slice(0,3)); //如果没有截取到内容 则返回空数组 Array(0)

Array.prototype.sort()
语法： arr.sort([callback]);
描述： 对数组内的元素按照特定的规则进行排序
参数： callback 用于排序规则的回调函数
tip ： 该方法直接操作原数组
var arr = [15 ,812 ,5 ,151 ,113 ,63 ,12 ,85 ,3];
var arr2 = [‘abc’ , ‘aaac’ ,’ab’ ,’bac’ ,’bb’];
console.log(arr.sort()); // (9) [113, 12 ,15 ,151 ,3 ,5 ,63 ,812 ,85]
console.log(arr2.sort()); //(5) [“aaac”, “ab” ,”abc”, “bac”,”bb”]
arr.sort(function(a,b){
//return a-b //从小到大排列
return b-a; //从大到小排列
})
arr.sort ((a,b)=> a-b); //简写 箭头函数
console.log(arr);

Array.prototype.toString()
语法：arr.toString();
描述：将数组内所有的元素都进行toString()然后用，连接
返回值：拼接好的字符串
推荐使用join()
var arr = [62 ,true ,111, ‘aaa’];
console.log(arr.toString(‘-’)); // 62,true,111,aaa

Array.prototype.unshift()
语法：arr.unshitf(value[,value2,…valueN]);
描述：该方法用于在数组的头部插入一条或多条数据
将参数的值依次插入输入，将数组原来的值向后移动
参数：value 要插入到数组头部的值
tip：该方法直接操作原数组
var arr = [1 , 2 , 3];
arr.unshitf(3,2,1);
console.log(arr); // Array(6) 0: 3 1: 2 2: 1 3: 1 4: 2 5: 3 length : 6
队列 先进先出 unshift()和shitf()都是操作数组的头部
Array.prototype.splice()
语法：arr.splice(start[deleteCount[,val,…]]);
描述：可以用于删除指定索引值的数组元素
可以用于数组的元素替换
可以在指定的索引位置插入新的元素 并将之前的元素向后移动
参数：start 开始索引
deleteCount 要删除的数量 如果没有这个参数 删除到数组结尾
val 要插入到start位置的元素
返回值：返回被删除的数组片段（Array）
tip: 该方法直接操作原数组
var arr = [ 1 , 2 , 3 , 4 , 5 , 6 , 7];
var delElm = arr.splice(2 , 0 , ’ok’ , ‘12’ , ‘abc’); // 2是start开始的元素即 3 ；0是删除的长度
console.log(arr); // Array(10) 0: 1 1: 2 2: “ok” 3: “12” 4: ”abc” 5: 3 6: 4 7: 5
8: 6 9: 7 length : 10
console.log(delElm); //被删除的数组 Array(0)

//ES5的数组方法
Array.prototype.indexOf()
语法：arr.indexOf(value[,start])
描述：该方法用于检索数组中的value值，如果找到返回下标 没有找到 返回-1
参数：value 在数组中需要检索的值
start 开始索引
返回值：返回找到元素所对应的索引值 或 -1
var beasts = [ ‘ant’ , ‘bison’ , ‘camel’ , ‘duck’ , ‘bison’];
console.log(beasts.indexOf(‘bison’)); // 1
console.log(beasts.indexOf(‘bison’,2)); // 4
console.log(beasts.indexOf(‘giraffe’)); // -1 没找到则return -1

Array.prototype.forEach()
来自ES5
语法：arr.forEach(callback)
描述：该函数用于遍历数组 并将数组的每一个元素和索引值传入到回调函数中
回调函数：
value 数组中的每一个元素
index 元素所对应的索引值
var arr =[ 651, 764, 654 ,116 ,88];
//传统for语句遍历数组
for(var i = 0; i < arr.length; i++){
console.log(arr[i]); // 651, 764, 654, 116, 88
}

arr.forEach(function(value,index){
console.log(value / 2); //325.5, 382, 327, 58, 44
});

function forEach(arr, callback){
for(var i = 0 ; i < arr.length; i++){
callback(arr[i],i);
}
}
forEach(arr, function(val , i)){
console.log(val /2); //325.5, 382, 327, 58, 44
});

Array.prototype.filter()
语法：arr.filter(callback)
描述：该方法用于过滤数组
callback参数：
value 数组内的每一个元素
index 元素所对应的索引值
var arr = [651, 764 ,654 ,116 ,88]
var arr2 = arr.filter(function(value, index){
return value%2 == 0; //返回数组中的偶数元素项
});
console.log(arr2);
// 1.遍历数组
// 2. 使用逻辑表达式进行检测
// 3. 将所有为true的结果保存在一个新的数组中
// 4.返回新的数组

var arr = [{
‘username’ : ‘zhangsan’,
‘age’:16
}，{
‘username’ : ‘lisi’,
‘age’:18
}，{
‘username’ : ‘wangwu’,
‘age’:16
}，{
‘username’ : ‘zhaoliu’,
‘age’:25
}，{
‘username’ : ‘fengqi’,
‘age’:22
}];

var arr2 = arr.filter(function(val){
return val.age >= 18;
});
console.log(arr2); // Array(3) 0: {username: “lisi” , age: 18}
1:{username:”zhaoliu” , age: 25}
2:{username:”fengqi”, age: 22}
length: 3

Array.prototype.map()
语法：arr.map(callback);
描述：函数map用于遍历并操作数组元素
返回值：新的数组

var arr = [1, 2 ,3 ,4 ,5];
var arr2 = arr.map(function(val,i){
return val*2;
// 1.遍历数组
// 2.操作数组元素
// 3.返回新数组
// 将所有的return生成一个新数组
});
console.log(arr2); // Array(5) 0: 2 1: 4 2: 6 3: 8 4: 10 length: 5

Array.prototype.reduce()
语法： arr.reduce.(callback);
callback 参数
pre 上一个
next 下一个

var arr = [1, 2 ,3 ,4 ,5];
var result = arr.reduce(function(pre,next){
//reduce 在执行第一次回调函数的时候
//会将数组的第一个元素传入到pre
//将数组的第二个元素传入到next
//后面每一次执行pre都是上次一的return值
//最后一次执行结果是整个reduce的返回值
console.log(pre,’-----’,next); // 1 “-----” 2
return pre*next; // 2 “-----” 3
}); // 6 “-----” 4
console.log(result); // 24 ”-----” 5
// 120

Array.prototype.every()
语法：arr. every(callback)
描述：使用一个逻辑表达式 检测数组中的每一个元素，如果全部通过检测 则返回true

var arr = [1 , 65 , 77, 17 , 33];
var res = arr.every(function(val,i){
return val%2 ; //全部为奇数 返回 true
})
console.log(res); //true

Array.prototype.some()
语法：arr.some(callback);
描述：使用一个逻辑表达式 检测数组中的每一个元素，如果有一个通过检测 则返回true
var arr = [1 , 62 , 77 , 17 ,33];
var res = arr.some(function(val,i){
return val % 2 ==0; //有一个是偶数 返回true
})
console.log(res); // true