js 数组相关操作

插入

• unshift: 向数组的开头插入元素，并返回新的数组长度

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.unshift(8));  //9
console.log(arr);  //[8, 0, 1, 2, 3, 4, 5, 6, 7]

• push: 向数组的结尾插入元素，并返回新的数组长度

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.push(8));  //9
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6, 7, 8]

移除

• shift: 删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.shift());  //0
console.log(arr);  //[1, 2, 3, 4, 5, 6, 7]

• pop: 删除原数组最后一项，并返回删除元素的值；如果数组为空则返回undefined

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.pop());  //7
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6]

合并

• concat: 返回一个将元素合并后的新数组，原数组保持不变

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.concat(8, 9, 10));  //[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6, 7]

搜索

• indexOf: 返回元素索引，不存在返回-1，索引从0开始

var arr = [1, 3, 5, 2, 6, 4, 10, 8];
console.log(arr.indexOf(2)); //3
console.log(arr); //[1, 3, 5, 2, 6, 4, 10, 8]

截取

• slice: 返回从原数组中指定开始索引(包含)到结束索引(不包含)之间的元素组成的新数组，原数组保持不变，索引从0开始

arr.slice(start, end); start 起始位置（截取位置并包含）。end 结束位置（截取位置并不包含）。

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.slice(1, 5));  //[1, 2, 3, 4]
console.log(arr);  //[0, 1, 2, 3, 4, 5, 6, 7]

• splice: 返回剪接的元素数组，原数组发生改变 ，索引从0开始

arr.splice(start, n, index, index1, ..., indexx) start 是起始位置，n 是删除元素的个数，index 是要添加的元素，如果不需要添加元素，第一个参数必填，后面两个选填；如果需要添加元素，三个元素都是必填。

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.splice(1, 5)); //[1, 2, 3, 4, 5]
console.log(arr); //[0, 6, 7]

var arr = [0, 1, 2, 3, 4, 5, 6, 7];
console.log(arr.splice(1, 5, 'add')); //[1, 2, 3, 4, 5]
console.log(arr); //[0, "add", 6, 7]

排序

• sort: 对数组进行排序；a - b 为正序；b - a 为倒序

var arr = [1, 3, 5, 2, 6, 4, 10, 8];
console.log(arr.sort(function (a, b) {
  return a - b
}));    //[1, 2, 3, 4, 5, 6, 8, 10]
console.log(arr); //[1, 2, 3, 4, 5, 6, 8, 10]

var arr = [1, 3, 5, 2, 6, 4, 10, 8];
console.log(arr.sort(function (a, b) {
  return b - a
})); //[10, 8, 6, 5, 4, 3, 2, 1]
  console.log(arr); //[10, 8, 6, 5, 4, 3, 2, 1]

倒序

• reverse: 返回倒序后的原数组，原数组同样进行倒序了

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.reverse()); //[7, 6, 5, 4, 3, 2, 1]
console.log(arr); //[7, 6, 5, 4, 3, 2, 1]

转换字符串

• join: 返回数组元素组起的一个字符串，原数组保持不变（省略的话则用默认用逗号为分隔符 ）

var arr = [1, 2, 3, 4, 5, 6, 7];
console.log(arr.join()); //1,2,3,4,5,6,7
console.log(arr.join('-')); //1-2-3-4-5-6-7
console.log(arr); //[1, 2, 3, 4, 5, 6, 7]

筛选符合条件项

• filter: 创建一个新的数组，新数组中的元素是指定数组中符合条件的所有元素（空数组会报错）

array.filter(function(currentValue, index, arr), thisValue);

1. function(currentValue, index, arr): 回调函数，必填，用来制定检索规则；
   a. currentValue: 必选，当前元素
   b. index: 可选，当前元素索引值
   c. arr: 可选，当前元素所属的数组对象
2. thisValue: 可选，用来指定回调函数中 this 所指向的对象

let arr = [1, 2, 3, 4, 5, 6];
let obj = {
    num: 3
}
let arrFilter = arr.filter(function(v, i, arr) {
    console.log(this); //{num: 3}
    console.log(v); //1 ~ 6
    console.log(i); //0 ~ 5
    console.log(arr); //[1, 2, 3, 4, 5, 6]
    return v > this.num;
}, obj); //[4, 5, 6]

查找符合条件项

• find: 返回通过测试的数组的第一个元素的值（空数组会报错，没有符合条件的元素返回 undefined）

array.find(function(currentValue, index, arr), thisValue)

1. function(currentValue, index, arr): 回调函数，必填，用来制定检索规则；
   a. currentValue: 必选，当前元素
   b. index: 可选，当前元素索引值
   c. arr: 可选，当前元素所属的数组对象
2. thisValue: 可选，用来指定回调函数中 this 所指向的对象

let arr = [1, 2, 3, 4, 5, 6];
let obj = {
    num: 3
}
let arrFind = arr.find(function(v, i, arr) {
    console.log(this); //{num: 3}
    console.log(v); //1 ~ 4 —— 因为发现满足条件项后便会终止 find() 方法，所以是1 ~ 4
    console.log(i); //0 ~ 3 —— 因为发现满足条件项后便会终止 find() 方法，所以是0 ~ 3
    console.log(arr); //[1, 2, 3, 4, 5, 6]
    return v > this.num;
}, obj); //4

数组处理

• map(): 返回一个由原始数组元素调用函数处理后组成的新数组
  array.map(function(currentValue,index,arr), thisValue)
  1. function(currentValue, index, arr): 回调函数，必填，用来对数据进行处理；
     a. currentValue: 必选，当前元素
     b. index: 可选，当前元素索引值
     c. arr: 可选，当前元素所属的数组对象
  2. thisValue: 可选，用来指定回调函数中 this 所指向的对象

let arr = [1, 2, 3, 4, 5, 6];
let obj = {
    num: 3
}
let arrFilter = arr.map(function(v, i, arr) {
    console.log(this); //{num: 3}
    console.log(v); //1 ~ 6
    console.log(i); //0 ~ 5
    console.log(arr); //[1, 2, 3, 4, 5, 6]
    return v + this.num;
}, obj); //[4, 5, 6, 7, 8, 9]

数组遍历

• forEach(): 返回一个由原始数组元素调用函数处理后组成的新数组（）
  array.forEach(function(currentValue, index, arr), thisValue)
  1. function(currentValue, index, arr): 回调函数，必填，用来制定检索规则；
     a. currentValue: 必选，当前元素
     b. index: 可选，当前元素索引值
     c. arr: 可选，当前元素所属的数组对象
  2. thisValue: 可选，用来指定回调函数中 this 所指向的对象

let arr = [1, 2, 3, 4, 5, 6];
let obj = {
    num: 3
}
arr.forEach(function(v, i, arr) {
    console.log(v); //1 ~ 6
    console.log(i); //0 ~ 5
    console.log(arr); //[1, 2, 3, 4, 5, 6]
    this.num += v;
}, obj);
console.log(obj); //{num: 24}