JS常用方法总结--Array数组篇

个人学习笔记

---

 

Array数组：

一、增

1、push() 方法：可向数组的末尾添加一个或多个元素，返回值是新的长度，原数组会修改。

 用法：array.push(item1, item2, ..., itemX)

var arr = [1,2,3,4,5,5,2,3];
var arr2 = arr.push(1,"小明");
console.log(arr);  // [1, 2, 3, 4, 5, 5, 2, 3, 1, "小明"]
console.log(arr2);  // 10

2、unshift() 方法：可向数组的开头添加一个或更多元素，返回值是数组新的长度，原数组会修改。

用法：array.unshift ( item1, item2 , . . . , itemX)

var arr = [1,2,3,4,5,5,2,3];
var arr2 = arr.unshift("张三","李四");
console.log(arr);   // ["张三", "李四", 1, 2, 3, 4, 5, 5, 2, 3]
console.log(arr2);  // 10

3、splice() 方法：用于添加或删除数组中的元素，返回值是删除元素的数组，原数组会修改。

用法：array.splice ( index，[howmany]，[item1，[.....，[itemX]]] )

index（必需）：数组中移除元素操作的起点，从 0 开始，

howmany（可选）：要删除的元素数，如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素，

item1.....itemX （可选）：要添加到数组的新元素

var arr = [1,2,3,4,5,5,2,3];
var arr1 = [1,2,3,4,5,5,2,3];
var arr2 = arr.splice(2,3);
var arr3 = arr1.splice(2,3,"张三","李四","王五","赵六",);
console.log(arr);   // [1, 2, 5, 2, 3]
console.log(arr2);  // [3, 4, 5]
console.log(arr1);  // [1, 2, "张三", "李四", "王五", "赵六", 5, 2, 3]
console.log(arr3);  // [3, 4, 5]

二、删

1、pop() 方法：用于删除数组的最后一个元素并返回删除的元素，返回值是删除的元素，原数组会修改。

用法：array.pop()

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

2、shift() 方法：用于把数组的第一个元素从其中删除，返回值是删除的元素，原数组会修改。

用法：array.shift()

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

三、改

1、copyWithin()方法：将指定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。也就是说，使用这个方法，会修改当前数组。

用法：array.copyWithin ( target,  [start],  [end])

target（必需）：从该位置开始替换数据。

start（可选）：从该位置开始读取数据，默认为 0。如果为负值，表示倒数。

end（可选）：到该位置前(不包含该位置）停止读取数据，默认等于数组长度。如果为负值，表示倒数。

var a = [1,2,3,4,5];
var b = a.copyWithin(0,1,5);
console.log(a);  // [2, 3, 4, 5, 5]
console.log(b);  // [2, 3, 4, 5, 5]

2、fill() 方法：用于将一个固定值替换数组的元素，会修改当前数组.

用法：array.fill ( value, [start], [end] )，

value（必需）：替换的值，

start, end（可选）：开始和结束为止

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

3、map() 方法：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。返回值是新的数组，原数组不会修改。

用法：array.map ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = [1,2,3,4,5,5,2,3];
var arr2 = arr.map(function(value){
  return value * 2;
});
console.log(arr);   // [1, 2, 3, 4, 5, 5, 2, 3]
console.log(arr2);  // [2, 4, 6, 8, 10, 10, 4, 6]

四、查

1、every() 方法：检测数组所有元素是否都符合指定条件（通过函数提供），有一个元素不满足，则整个表达式返回false，所有元素都满足条件，返回值是True。

用法：array.every ( function(currentValue, [index], [arr]),  [thisValue] )

function(currentValue,index,arr)（必需）：数组中的每个元素都会执行这个函数。currentValue（必需）：当前数组中元素的值，index和arr（可选）：索引和元素所属的数组对象

thisValue（可选）：对象作为该执行回调时使用，传递给函数，用作 "this" 的值

var arr = [1,2,3,4,5];
var isPositive = arr.every(function(value){
    return value > 2;
});
console.log(isPositive);  // false

2、some() 方法：用于检测数组中的元素是否满足指定条件（函数提供），有一个元素满足条件，则表达式返回true，如果没有满足条件的元素，则返回false。

用法：array.some ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = ["小明",1,2,3,4,5,5,2,3];
var arr2 = arr.some(function(value){
  return value >= 2;
});
var arr3 = arr.every(function(value){
  return value >= 2;
});
console.log(arr2);  // true
console.log(arr3);  // false

3、includes() 方法：用来判断一个数组是否包含一个指定的值，返回值是布尔值，如果是返回 true，否则false。

 用法：arr.includes ( searchElement, [fromIndex]) 

 searchElement（必需）：要查找的元素

 fromIndex（可选）：从该索引处开始查找searchElement，如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。

var arr = [1,2,3,4,5,5];
// 判断arr数组是否包含了 2
var arr1 = arr.includes(2);
// 从索引3开始，判断arr数组是否包含了 2 
var arr2 = arr.includes(2,3);
// 如果fromIndex 大于等于数组长度 ，则返回 false 。该数组不会被搜索:
var arr3 = arr.includes(2,10);
// 如果 fromIndex 为负值，计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0，则整个数组都会被搜索。
var arr4 = arr.includes(2,-100);
console.log(arr1);  // true
console.log(arr2);  // false    
console.log(arr3);  // false
console.log(arr4);  // true

4、filter() 方法：检查指定数组中符合条件（通过函数提供）的所有元素，返回一个新的数组。

用法：array.filter ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = [1,2,3,4,5];
var arr1 = arr.filter(function(value){
  return value >= 3;
});
console.log(arr1)  // [3, 4, 5]

5、find() 方法：返回符合条件（函数内判断）的数组的第一个元素的值，

 用法：array.find ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = [1,2,3,4,5];
var arr1 = arr.find(function(value){
    return value >= 3;
});
console.log(arr1);  // 3

6、findIndex() 方法：返回符合条件（函数内判断）的数组第一个元素位置。

用法：array.findIndex ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = [1,2,3,4,5];
var arr1 = arr.findIndex(function(value){
    return value >= 3;
});
console.log(arr1);  // 2

7、indexOf() 方法：可返回数组中某个指定的元素位置，返回值是Number，如果没有搜索到则返回 -1。

用法：array.indexOf ( item, [start])

var arr = [1,2,3,4,5,5,2];
// 返回数组中2的元素位置
var arr1 = arr.indexOf(2);
// 从索引3开始，返回数组中2的元素位置
var arr2 = arr.indexOf(2,3);
console.log(arr1);  // 1
console.log(arr2);  // 6

8、lastIndexOf() 方法：可返回数组中某个指定的元素位置，从该字符串的后面向前查找，返回值是Number，如果没有搜索到则返回 -1。

用法：array.indexOf ( item, [start])

var arr = [1,2,3,4,5,5,2];
// 返回数组中2的元素位置
var arr1 = arr.lastIndexOf(2);
// 从索引3开始，从右向左查找，返回原数组中2的元素位置
var arr2 = arr.lastIndexOf(2,3);
console.log(arr1);  // 6
console.log(arr2);  // 1

9、slice() 方法：可从已有的数组中返回选定的元素，返回值是新的数组，原数组不会修改。

用法：array.slice(start, [end])

var arr = ["小明",1,2,3,4,5,5,2,3];
var arr2 = arr.slice(2,5);
console.log(arr);  // ["小明", 1, 2, 3, 4, 5, 5, 2, 3]
console.log(arr2);  // [2, 3, 4]

五、排序

1、reverse() 方法：用于颠倒数组中元素的顺序，返回值是修改后的数组，原数组会修改。

用法：array.reverse()

var arr = [1,2,3,4,5,5,2,3,"小明"];
var arr1 = arr.reverse();
console.log(arr);   // ["小明", 3, 2, 5, 5, 4, 3, 2, 1]
console.log(arr1);  // ["小明", 3, 2, 5, 5, 4, 3, 2, 1

2、sort() 方法：用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序，默认排序顺序为按字母升序，返回值是排序后的原数组，原数组顺序发生变化。

用法：array.sort ( [sortfunction])

sortfunction（可选）：用来规定排序顺序的，必须是函数

var arr = ["小明",1,2,3,4,5,5,2,3];
var arr1 = arr.sort();
console.log(arr);   // [1, 2, 2, 3, 3, 4, 5, 5, "小明"]
console.log(arr1);  // [1, 2, 2, 3, 3, 4, 5, 5, "小明"]

六、转换

1、join() 方法：用于把数组中的所有元素转换一个字符串，返回值是字符串。

用法：array.join ( [separator])

separator（可选）：指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

var arr = [1,2,3,4,5,5,2];
// 如果省略该参数，则使用逗号作为分隔符
var arr1 = arr.join();
// separator 指定要使用的分隔符
var arr2 = arr.join("和");
console.log(arr);   // [1, 2, 3, 4, 5, 5, 2]
console.log(arr1);  // 1,2,3,4,5,5,2
console.log(arr2);  // 1和2和3和4和5和5和2

2、toString() 方法：可把数组转换为字符串，并返回结果，返回值是字符串。

用法：array.toString()

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

3、concat()方法：连接两个或多个数组，返回值是一个新的数组。

用法：array.concat (arrayX, arrayX, ......, arrayX)

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

类似方法：ES6的扩展运算符(…)用于取出参数对象中的所有可遍历属性，

var a = [1,2,3];
var b = [4,5,6];
console.log(a.push(...b));  // [1, 2, 3, 4, 5, 6]

4、from() 方法：将拥有 length 属性的对象或可迭代的对象，返回为一个新的数组。

用法：Array.from ( object, [mapFunction], [thisValue])

object（必需）：要转换为数组的对象

mapFunction（可选）：数组中每个元素要调用的函数

thisValue（可选）：映射函数(mapFunction)中的 this 对象

var arr = [1,2,3,4,5];
var arrStr = "hello";
var arr1 = Array.from(arr,function(x){
    return x * 100
});
var arrStr1 = Array.from(arrStr);
console.log(arr1);    // [100, 200, 300, 400, 500]
console.log(arrStr1);  // ["h", "e", "l", "l", "o"]

5、form()方法 结合 new Set() 可实现去重。

Set是es6新增的数据结构，似于数组，但它的一大特性就是所有元素都是唯一的，没有重复的值，一般称为集合。Set本身是一个构造函数，用来生成 Set 数据结构。

var arr = [1,2,3,4,5,5];
var arr1 = new Set(arr); 
console.log(arr1);  // 返回set数据结构  Set(5) {1, 2, 3, 4, 5}
var arr2 = Array.from(arr1);
console.log(arr2);  // [1, 2, 3, 4, 5]

七、遍历

1、forEach() 方法：循环遍历数组里的每一个元素，没有返回值。

用法：array.forEach ( function(currentValue, [index], [arr]),  [thisValue] )

var arr = [1,2,3,4,5];
arr.forEach(function(value,index,arr) {
    console.log(value);
    // console.log(index);
    // console.log(arr);
});
/* 
1
2
3
4
5
*/

八、是否数组

26、isArray() 方法：用于判断一个对象是否为数组，返回值是布尔值。

用法：Array.isArray(obj)

var arr = [1,2,3,4,5,5,2];
var arr1 = Array.isArray(arr);
console.log(arr1);  // true

九、累加器

27、reduce() 方法：接收一个函数作为累加器，数组中的每个元素值（从左到右）开始累加，最终计算为一个值，返回值是最后一次调用回调函数获得的累计结果。

用法：array.reduce ( function(total, currentValue, [currentIndex], [arr]), initialValue)

callback的四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用 reduce 的数组

callback （执行数组中每个值的函数，包含四个参数）

    1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    2、currentValue （数组中当前被处理的元素）
    3、index （当前元素在数组中的索引）
    4、array （调用 reduce 的数组）

initialValue （作为第一次调用 callback 的第一个参数。）

27.1 简单用法

var  arr = [1, 2, 3, 4];
var sum = arr.reduce((x,y)=>x+y)
var mul = arr.reduce((x,y)=>x*y)
console.log( sum ); //求和，10
console.log( mul ); //求乘积，24

27.2 高级用法

（1）计算数组中每个元素出现的次数

let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

let nameNum = names.reduce((pre,cur)=>{
  if(cur in pre){
    pre[cur]++
  }else{
    pre[cur] = 1 
  }
  return pre
},{})
console.log(nameNum); //{Alice: 2, Bob: 1, Tiff: 1, Bruce: 1}

（2）数组去重

let arr = [1,2,3,4,4,1]
let newArr = arr.reduce((pre,cur)=>{
    if(!pre.includes(cur)){
      return pre.concat(cur)
    }else{
      return pre
    }
},[])
console.log(newArr);// [1, 2, 3, 4]

（3）对象里的属性求和

var result = [
    {
        subject: 'math',
        score: 10
    },
    {
        subject: 'chinese',
        score: 20
    },
    {
        subject: 'english',
        score: 30
    }
];

var sum = result.reduce(function(prev, cur) {
    return cur.score + prev;
}, 0);
console.log(sum) //60

28、reduceRight() 方法：功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

 用法：array.reduceRight( function(total, currentValue, [currentIndex], [arr]), initialValue)

var arr = [1,2,3,4,5,5,2,3];
var arr1 = [1,2,3,4,5,5,2,3,"小明"];
var arr2 = arr.reduceRight(function(total,value){
  return total + value;
});
var arr3 = arr1.reduceRight(function(total,value){
  return total + value;
});
console.log(arr2);  // 25
console.log(arr3);  // 小明32554321