JS数组常用处理方法

目录

1、创建数组的方式

2、数组的length属性

3、判断是否为数组

4、转换方法

5、类似栈的方法：push、pop；类似队列方法：shift、unshift

6、重排序方法：reverse、sort

7、操作数组的方法: concat()、slice()、splice()、copyWithin()

8、查值方法：find()、includes()、flat()

9、迭代方法：every()、some()、filter()、map()、forEach()

10、归并方法： reduce()

1、创建数组的方式

---

1. 使用Array构造函数

let newList = new Array();
let newList = new Array('orange', 'apple', 'banana');

2.使用数组字面量表示法, 在使用数组字面量表示法的时候，不会调用Array构造函数（Firefox 3及更早版本除外）

let newList = ['orange', 'apple', 'banana'];

let values = [1,2,] // 不建议这样使用，这样可能会创建一个2或3项的数组
//在IE8以及更早的版本中，第三个值undefined，其他浏览器只包含1，2的数组

3. 使用Array.of方法将一组值，转为数组

Array.of(4,5,6) // [4,5,6]
Array.of(7) // [7]

2、数组的length属性

---

这个属性不是只读的，可以设置这个属性，从数组的末尾移除或想数组中添加新项。

let newList = new Array('orange', 'apple', 'banana');
newList.length = 2
console.log(newList[2]) //undefined;
// 这里将newList的末尾值移除了

newList = ['orange', 'apple', 'banana'];
newList.length = 4;
console.log(newList[3]) // undefined;

newList = ['red','yellow', 'blue'];
newList[newList.length] = 'chestnut';//位置3添加一种水果
newList[newList.length] = 'kiwifruit';//位置4添加一种水果

3、判断是否为数组

---

1. instanceof 运算符用来判断一个构造函数的prototype属性所指向的对象是否存在另外一个要检测对象的原型链上
语法：
具体可以参考：https://www.cnblogs.com/ysk123/p/10006786.html

obj instanceofObject;//true 实例obj在不在Object构造函数中

let newList = new Array('orange', 'apple', 'banana');
newList instanceof Array; // true

2、如果网页中包含多个框架，那实际上就存在两个以上不同的全局执行环境，从而存在两个以上不同版本的Array构造函数。如果你从一个框架向另一个框架传入一个数组，那么传入的数组与第二个框架中原生创建的数组分别具有各自不同的构造函数。为了解决这个问题新增了Array.isArray方法，该方法目的是确定某个值是不是数组，而不管它到底在哪个全局执行环境中创建的。

Array.isArray(value)

if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}
// 也可以用这个方法检测数组，该方法不能检测非原生构造函数的构造函数名

4、转换方法

---

1、toString()、toLocaleString()、valueOf()方法。其中toString()方法会返回由数组中每个值的字符串拼接而成的一个以逗号分隔的字符串，而调用valueOf()返回的还是数组。

let newList = ['orange', 'apple', 'banana'];

newList.toString() // "orange,apple,banana"
newList.valueOf() // ["orange", "apple", "banana"]
newList.toLocaleString() // "orange,apple,banana"

console.log(newList.toString()) // "orange,apple,banana"
alert(newList.valueOf()) // "orange,apple,banana"
console.log(newList.toLocaleString()) // "orange,apple,banana"

alert里面调用valueOf返回了字符串是因为alert要接受字符串参数，所以隐式调用了toString。toLocaleString表示在特定语言环境下的表示字符串，新的 locales 和 options 参数让应用程序可以指定要进行格式转换的语言，并且定制函数的行为，通常返回与toString相同的值。

2、join() 方法可以使用不同的分隔符，来构建这个字符串。

let newList = ['orange', 'apple', 'banana'];
console.log(newList.join('|')) // "orange|apple|banana"

3、Array.from 方法用于将伪数组转为真正的数组：类似数组的对象和可遍历(iterable)的对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};

// ES5的写法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']

// ES6的写法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

Array.from([1, 2, 3])
// [1, 2, 3] 如果参数是一个真数组，会返回一个一摸一样的新数组

该方法还接受第二个参数，（可选的）返回对数组每一项处理的结果，和（可选的）运行该函数的作用域对象--影响this的值

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

5、类似栈的方法：push、pop；类似队列方法：shift、unshift

---

1、 arrayObject.push()：可以接受任意数量的参数，然后返回修改后的数组的长度。

let arr = [1, 2, 3, 4];

console.log(arr.push(5)); // 5
console.log(arr.push([1, 2])); // 6
console.log(arr); // [ 1, 2, 3, 4, 5, [ 1, 2 ] ]

2、arrayObject.pop():  可以从数组的末尾移除最后一项，减少数组的长度，返回删除项。

let arr = [1, 2, 3, 4];

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

3、arrayObject.shift()： 移除数组中的第一项，并返回该项，同时使数组长度减1。

let arr = [1, 2, 3, 4];

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

4、arrayObject.unshift(): 在数组前端添加任意个元素，并返回数组的长度。

let arr = [1, 2, 3, 4];

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

*****shift结合push，unshift结合pop可以像队列一样使用数组。

6、重排序方法：reverse、sort

---

1. reverse顾名思义，就是反转数组项的顺序，并返回排序后的数组；
2. sort排序数组的方法，默认情况下，按照升序排列数组项，调用每个数组项的toString()方法，然后比较得到的字符串，确定如何排序。也可以接受一个函数。返排序后的数组。

[1,5,2,4,3].sort((prev,next)=>{
    if(prev < next){
        return -1 //返回负数，保持原位。
    }else if(prev > next){
        return 1 //返回正数，交换位置。
    }else{
        return 0 //返回负数，保持原位。
    }
})
// [1, 2, 3, 4, 5]

7、操作数组的方法: concat()、slice()、splice()、copyWithin()

---

 1、concat() 方法用于连接两个或多个数组, 返回一个新的数组

let newList1 = [1,2,3]
let newList2 = [4,5,3]
let newList3 = [7,8,9]

let newList = newList1.concat(newList2, newList3) // [1, 2, 3, 4, 5, 3, 7,8,9]
// concat 拼接数组不会去重重复数据

2、slice() 方法可从已有的数组中返回选定的元素, 返回一个新的数组

语法：arrayObject.slice(startIndex,endIndex)

let newList3 = [1,2,3,4,5,7,8,9];
let newList = newList3.slice(2,5); // [3, 4, 5];

// 起始值超过数组index时候，返回空数组
newList3.slice(20,20);  // []

3、splice()方法

splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。
语法：

arrayObject.splice(index,howmany,item1,.....,itemX)

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

// 删除
let color = ["red","green","blue"];
let removed = color.splice(0,1);
console.log(color); //["green","blue"]
console.log(removed);//["red"]


// 插入
let color = ["red","green","blue"];
insert = color.splice(1,0,"yellow","orange");
console.log(insert); //[]
console.log(color); // ["red", "yellow", "orange", "green", "blue"]


//替换
let color = ["red","green","blue"];
update = color.splice(1,1,"red","purple");
console.log(update);// ["green"]
console.log(color);// ["red", "red", "purple", "blue"]

4. copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。

// 将3号位复制到0号位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5]
// -2相当于3号位，-1相当于4号位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5]

8、查值方法：find()、includes()、flat()

---

1、findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置。

** IE11 及更早版本不支持 findIndex() 方法。

let list=[1,2,3,4,88];
let new_list = list.findIndex(item=>{
   return item===88;
})

new_list; // 4

2、find()方法。查找出第一个符合条件的数组成员，接收两个参数：一个遍历每一项的函数和（可选的）运行该函数的作用域对象

[1, 4, -2, 10].find((n) => n < 0) // -2

3、includes() 返回一个布尔值，接收两个参数：要查找的项和表示查找起点位置的索引

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true

4、flat() 用于将嵌套的数组“拉平”，变成以为数组，返回一个新数组。接收一个参数，表示想要拉平的层数。

[1, 2, [3, [4, 5]]].flat() //  [1, 2, 3, Array(2)]
[1, 2, [3, [4, 5]]].flat(2) // [1, 2, 3, 4, 5]
[1, [2, [3]]].flat(Infinity) // [1, 2, 3] 不管多少曾，都要转成一维数组，可以 用Infinity参数。

9、迭代方法：every()、some()、filter()、map()、forEach()

---

every,filter,forEach,map,some,flatMap共6个迭代的方法，每个方法都接收两个参数：要在每一项上运动的函数和（可选的）运行该函数的作用域对象--影响this的值。

传入这些方法中的函数会接受3个参数：数组项的值，该项在数据中的位置和数组对象本身。

1、every();  对数组中的每一项运行给定函数，全部瞒足条件返回true，否则返回false。

let number = [1,2,3,4,5];
let result = number.every((item,index,array)=>{
    return item > 1
}) // false

2、 some(): 方法则是只传入的函数对数组中的某一项瞒足条件则返回true

let number = [1,2,3,4,5];
let someResult = number.some((item, index, array)=>{
    return item > 2
})
console.log(someResult)// true

3.、filter():方法利用指定的函数确定是否在返回的数组中包含某一项。例如要返回一个所有值都大于2的数组

let number = [1,2,3,4,5];
let filterResult = number.filter((item, index, array)=>{
    return item > 2
})
console.log(filterResult)// [3, 4, 5]

4.、map():也返回一个数组，而这个数组的每一项都是在原始数组中的对应项上运行传入函数的结果。

let number = [1,2,3,4,5];
let mapResult = number.map((item, index, array)=>{
    return item * 2
})
console.log(mapResult)// [2, 4, 6, 8, 10]

5.、 forEach:它只是对数组中的每一项运行传入的函数。没有返回值。

语法：

array.forEach(callback(currentVal, index, array) {
  // do something
}, thisArg)

forEach注意点：

 一、没有返回值；

var arr1 = [1, 2, 3, 4, 5]

var solt = arr1.forEach((v,i,t) => {
  console.log(v)
})
console.log(solt)	// undefined

二、不能中止或跳出 forEach 循环；

var arr1 = [1, 2, 3, 4, 5]

// 使用break会报错
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    break
  }
})

// return false 也无效
arr1.forEach((v,i,arr) => {
  console.log(v)
  if(v === 3) {
    console.log('-----')
    return false
  }
})
// 1
// 2
// 3
// -----
// 4
// 5

三、使用箭头函数，thisArg 参数会被忽略

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach((v, i, arr) => {
  console.log(this)
})
// window
// window
// window

arr1.forEach((v, i, arr) => {
  console.log(this)
}, arr2)
// window
// window
// window

四、不会在迭代之前创建数组的副本，如果数组在迭代时被修改了，则其他元素会被跳过 ；

let words = ["one", "two", "three", "four"];
words.forEach(function(word) {
  console.log(word);
  if (word === "two") {
    words.shift();
  }
});
// one
// two
// four
// undefined

五、对原数组进行修改

var arr1 = [1, 2, 3]
var arr2 = [7, 8, 9]

arr1.forEach(function(v, i, arr) {
  console.log(this)
  arr[i] = v * 2
}, arr2)
//  [7, 8, 9]
//  [7, 8, 9]
//  [7, 8, 9]

console.log(arr1)  // [2, 4, 6]
// arr1 从 [1, 2, 3] 变成了 [2, 4, 6] 函数内部 this 指向是 arr2

6.、flatMap()方法对原数组的每个成员执行一个函数，并对返回值执行flat()方法，返回一个新数组。

// 相当于 [[2, 4], [3, 6], [4, 8]].flat()
[2, 3, 4].flatMap((x) => [x, x * 2]) // [2, 4, 3, 6, 4, 8]

// 相当于 [[[2]], [[4]], [[6]], [[8]]].flat()
[1, 2, 3, 4].flatMap((x, index, array) => [[x * 2]]) // [[2], [4], [6], [8]]
//默认只能展开一层

10、归并方法： reduce()

reduce从数组的第一项开始，逐个遍历到最后，reduceRight则从数组的最后一项开始，向前遍历到第一项。

这两个方法都接受两个参数：一个在每一项调用的函数和（可选的）作为归并基础的初始值。

let values = [1,5,4,7];
let sum = values.reduce((prev,cur,index,array)=>{ //这个函数的四个参数：前一个值，当前值，项的索引和数组对象
    return prev+cur; //返回的任何值作为第一个参数自动传给下一项，第一次迭代发生在数组的第二项，因此第一个参数是数组的第一项，第二个参数是数组的第二项
});
console.log(sum);//17