JS - 数组常用操作方法

一. 定义数组

1. 简写方式

   var arr = [1, 2, 3];
   console.log(arr); // [1, 2, 3]
   

2. 指定数组

   var arr1 = new Array();
   arr1[0] = 1;
   arr1[1] = 2;
   arr1[2] = 3;
   console.log(arr1); // [1, 2, 3]
   

二. 检测是否数组

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

三. 常用方法

菜鸟教程：https://www.runoob.com/jsref/jsref-obj-array.html
W3school：https://www.w3school.com.cn/jsref/jsref_obj_array.asp

1. 数组元素拼接为字符串

1.1 join(separator) —— 将数组的元素组起一个字符串

• 将数组的元素组起一个字符串，元素是通过指定的分隔符进行分隔的。
• 语法格式：array.join(separator)
  separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

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

1.2 toString() —— 把数组转换为一个字符串，并返回结果

• 返回值与没有参数的 join() 方法返回的字符串相同。
• 语法格式：array.toString(radix)
  radix：可选。规定表示数字的基数，使 2 ~ 36 之间的整数。若省略该参数，则使用基数 10。如果该参数是 10 以外的其他值，则 ECMAScript 标准允许实现返回任意值。

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

2. forEach() —— 循环数组

• forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数。
• forEach() 对于空数组是不会执行回调函数的。

var arr = [1, 2, 3, 4, 5, 6, 7];
arr.forEach((item) => {
 console.log(item);
});

3. 添加、删除数组元素

3.1 shift() —— 删除原数组第一项，并返回删除元素的值

• 如果数组为空则返回 undefined
• 该方法会改变原数组的长度。
• 语法格式：array.shift()

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

3.2 pop() —— 删除原数组最后一项，并返回删除元素的值

• pop() 方法将删除 array 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。
• 如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
• 语法格式：array.pop()

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

3.3 unshift() —— 向数组的开头添加一个或多个元素，并返回新的长度

• unshift() 方法不创建新的创建，而是直接修改原有的数组。
• 语法格式：array.unshift(newelement1,newelement2,....,newelementX)
  newelement1：必需。向数组添加的第一个元素。
  newelement2：可选。向数组添加的第二个元素。
  newelementX：可选。可添加若干个元素。

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

3.4 push() —— 向数组的末尾添加一个或多个元素，并返回新的长度

• 语法格式：array.push(newelement1,newelement2,....,newelementX)
  newelement1：必需。向数组添加的第一个元素。
  newelement2：可选。向数组添加的第二个元素。
  newelementX：可选。可添加若干个元素。

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

3.5 splice() —— 从数组中添加/删除元素，然后返回被删除的元素

• 语法格式：array.splice(index,howmany,item1,.....,itemX)
  index：必需。整数，规定添加/删除元素的位置，使用负数可从数组结尾处规定位置。下标从 0 开始
  howmany：必需。要删除的元素数量。如果设置为 0，则不会删除元素。
  item1, …, itemX：可选。向数组添加的新元素。

var arr = [1, 2, 3, 4, 5, 6, 7];
var res = arr.splice(-3, 2, "a", "b", "c");
console.log(arr); // [1, 2, 3, 4, "a", "b", "c", 7]
console.log(res); // [5, 6]

4. slice(start,end) —— 截取数组，返回从原数组中指定开始下标到结束下标之间的元素组成的新数组

• 语法格式：array.slice(start,end)
  start：必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。
  end：可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。（不包含end下标的元素）

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

5. concat() —— 连接两个或多个数组

• 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
• 语法格式：array.concat(arrayX,arrayX,......,arrayX)
  arrayX：必需。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

1. 返回一个新数组，是将参数添加到原数组中构成的

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

2. 合并两个或多个数组，并返回合并后的新数组，原数组没有变化

   var arr = [1, 2, 3];
   var arr1 = ["a", "b"];
   var arr2 = [4, "c"];
   var res = arr.concat(arr1, arr2);
   console.log(arr); // [1, 2, 3]
   console.log(arr1); // ["a", "b"]
   console.log(arr2); // [4, "c"]
   console.log(res); // [1, 2, 3, "a", "b", 4, "c"]
   

6. 数组排序

6.1 reverse() —— 将数组中的元素位置进行颠倒排列

• 该方法会改变原来的数组，而不会创建新的数组。
• 语法格式：array.reverse()

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

6.2 sort(sortby) —— 按指定的参数对数组进行排序

• 语法格式：array.sort(sortby)
  sortby：可选。规定排序顺序。必须是函数
• 如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序

1. 无参

   var arr1 = ["ba", "ad", "sd", "cd", "fj", "aa"];
   var res1 = arr1.sort();
   console.log(arr1);// ["aa", "ad", "ba", "cd", "fj", "sd"]
   console.log(res1);// ["aa", "ad", "ba", "cd", "fj", "sd"]
   

2. 有参

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

7. 查询数组元素的下标、值

7.1 includes() —— 检测数组中是否包含某个元素

• 如果找到匹配的字符串则返回 true，否则返回 false。
• 语法格式：array.includes(searchvalue, start)
  searchvalue：必需，要查找的字符串。
  start：可选，设置从那个位置开始查找，默认为 0。

var arr = [10, 12, 9, 8];
var res = arr.includes(9);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //true

7.2 indexOf() —— 返回某个指定的字符串值在字符串中首次出现的位置

• 如果元素不存在，返回-1
• 语法格式：array.indexOf(searchvalue,fromindex)
  searchvalue：必需。规定需检索的字符串值。
  fromindex：可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。

var arr = [10, 12, 9, 8];
var res = arr.indexOf(9);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //2

7.3 find() —— 返回通过测试（函数内判断）的数组的第一个元素的值

• find() 方法为数组中的每个元素都调用一次函数执行：
  当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。
  如果没有符合条件的元素返回 undefined
• find() 对于空数组，函数是不会执行的。
• find() 并没有改变数组的原始值。
• 语法格式：array.find(function(currentValue, index, arr),thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue： 可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

var arr = [10, 12, 9, 8];
function callback(item) {
 return item > 9;
}
var res = arr.find(callback);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //10

7.4 findIndex() —— 返回传入一个测试条件（函数）符合条件的数组第一个元素位置下标

• findIndex() 方法为数组中的每个元素都调用一次函数执行：
  当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数。
  如果没有符合条件的元素返回 -1
• findIndex() 对于空数组，函数是不会执行的。
• findIndex() 并没有改变数组的原始值。
• 语法格式：array.findIndex(function(currentValue, index, arr), thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue：可选。 传递给函数的值一般用 “this” 值。如果这个参数为空， “undefined” 会传递给 “this” 值

var arr = [10, 12, 9, 8];
function callback(item) {
 return item > 9;
}
var res = arr.findIndex(callback);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //0

8. 数组元素的处理

8.1 filter() —— 过滤。返回一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素

• filter() 不会对空数组进行检测。
• filter() 不会改变原始数组。
• 语法格式：array.filter(function(currentValue,index,arr), thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
function callback(item) {
  return item > 9;
}
var res = arr.filter(callback);
console.log(arr); // [10, 12, 9, 8]
console.log(res); // [10, 12]

8.2 map() —— 返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

• map() 方法按照原始数组元素顺序依次处理元素。
• map() 不会对空数组进行检测。
• map() 不会改变原始数组。
• 语法格式：array.map(function(currentValue,index,arr), thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue，或者传入 null、undefined，那么回调函数的 this 为全局对象。

var arr = [10, 12, 9, 8];
function callback(item) {
 return item * 2;
}
var res = arr.map(callback);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //[20, 24, 18, 16]

8.3 reduce() —— 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值

• reduce() 对于空数组是不会执行回调函数的。
• 语法格式：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
  total：必需。初始值, 或者计算结束后的返回值。
  currentValue：必需。当前元素
  currentIndex：可选。当前元素的索引
  arr：可选。当前元素所属的数组对象。
  initialValue：可选。传递给函数的初始值

var arr = [10, 12, 9, 8];
function gitSum(total, num) {
 return total + num;
}
var res = arr.reduce(gitSum, 0);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //39

9. 检测数组所有元素是否都符合指定条件

every()和some()的区别：

• every()方法，遍历数组每一项，若全部为true，则返回true；
• some()方法，遍历数组的每一项，若其中一项为 true，则返回true；

9.1 every() —— 用于检测数组所有元素是否都符合指定条件（通过函数提供）

• every() 指定函数检测数组中的所有元素：
  如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；
  如果所有元素都满足条件，则返回 true。
• every() 不会对空数组进行检测。
• every() 不会改变原始数组。
• 语法格式：array.every(function(currentValue,index,arr), thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
function callback(item) {
 return item > 5;
}
var res = arr.every(callback);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //true

9.2 some() —— 方法用于检测数组中的元素是否满足指定条件（函数提供）

• some() 方法会依次执行数组的每个元素：
  如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
  如果没有满足条件的元素，则返回false。
• some() 不会对空数组进行检测。
• some() 不会改变原始数组。
• 语法格式：array.some(function(currentValue,index,arr),thisValue)
  currentValue：必须。当前元素的值
  index：可选。当前元素的索引值
  arr：可选。当前元素属于的数组对象
  thisValue：可选。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略了 thisValue ，“this” 的值为 “undefined”

var arr = [10, 12, 9, 8];
function callback(item) {
 return item > 9;
}
var res = arr.some(callback);
console.log(arr); //[10, 12, 9, 8]
console.log(res); //true