数组方法

Mr.Liu大约 6 分钟

数组方法

Array.isArray 判断是不是数组

在类型判断的时候，我们通常使用typeof ，但是使用typeof的时候数组判断出来的就是Object类型，可以说数组是特殊的对象，使用typeof判断不出数组，就可以使用Array.isArray方法

(function () {
//在这可以看出arguments并不是一个数组
  console.log(Array.isArray(arguments));//false
})(1, 3, 4, 5);

const arr = ["March", "Jan", 6, 2, "A", "a"];
//看的出是可以识别出来的 但typeof却识别不出来
console.log(typeof arr, Array.isArray(arr));//object true

from() 将伪数组变成数组

将伪数组变成数组，就是只要有length的就可以转成数组。 ---es6

let str = '12345'
console.log(Array.from(str)) // ["1", "2", "3", "4", "5"]
let obj = {0:'a',1:'b',length:2}
console.log(Array.from(obj)) // ["a", "b"]

of() 将一组值转换成数组

将一组值转换成数组，类似于声明数组 ---es6

let str = '11'
console.log(Array.of(str)) // ['11']

等价于

console.log(new Array('11'))  // ['11]

注意:但是new Array()有缺点，就是参数问题引起的重载 console.log(new Array(2)) //[empty × 2] 是个空数组 console.log(Array.of(2)) // [2]

arr.push() 从后面添加元素

在尾部追加，类似于压栈，原数组会变。

const arr = [1, 2, 3]
arr.push(8)
console.log(arr) // [1, 2, 3, 8]

pop() 从后面删除元素

在尾部弹出，类似于出栈，原数组会变。数组的 push & pop 可以模拟常见数据结构之一：栈。

const arr = [1, 2, 3]
const popVal = arr.pop()
console.log(popVal) // 3
console.log(arr) // [1, 2]

// 数组模拟常见数据结构之一：栈
const stack = [0, 1]
stack.push(2) // 压栈
console.log(stack) // [0, 1, 2]

const popValue = stack.pop() // 出栈
console.log(popValue) // 2
console.log(stack) // [0, 1]

unshift() 从前面添加元素

在头部压入数据，类似于入队，原数组会变。

const arr = [1, 2, 3]
arr.unshift(0)
console.log(arr) // [0, 1, 2, 3]

shift() 从前面删除元素

在头部弹出数据，原数组会变。数组的 push（入队） & shift（出队）可以模拟常见数据结构之一：队列。

const arr = [1, 2, 3]
const shiftVal = arr.shift()
console.log(shiftVal) // 1
console.log(arr) // [2, 3]

// 数组模拟常见数据结构之一：队列
const queue = [0, 1]
queue.push(2) // 入队
console.log(queue) // [0, 1, 2]

const shiftValue = queue.shift() // 出队
console.log(shiftValue) // 0
console.log(queue) // [1, 2]

at()获取数组的最后一个元素

对于获取数组的最后一个元素，可能平常见得多的就是arr[arr.length - 1]，我们其实可以使用at()方法进行获取

const arr = ['justin1go', 'justin2go', 'justin3go'];
console.log(arr.at(-1)) // 倒数第一个值
console.log(arr.at(-2)) // 倒数第二个值
console.log(arr.at(0)) // 正数第一个  
console.log(arr.at(1)) // 正数第二个

concat() 连接两个数组

concat会在当前数组尾部拼接传入的数组，然后返回一个新数组，原数组不变。

const arr = [1, 2, 3]
const arr2 = arr.concat([7, 8, 9])
console.log(arr) // [1, 2, 3]
console.log(arr2) // [1, 2, 3, 7, 8, 9]

sort() 数组进行排序

将数组进行排序,返回值是排好的数组，默认是按照最左边的数字进行排序，不是按照数字大小排序的，见例子。

let arr = [2,10,6,1,4,22,3]
console.log(arr.sort()) // [1, 10, 2, 22, 3, 4, 6]


let arr1 = arr.sort((a, b) =>a - b)
console.log(arr1) // [1, 2, 3, 4, 6, 10, 22]
let arr2 = arr.sort((a, b) =>b-a)
console.log(arr2) // [22, 10, 6, 4, 3, 2, 1]

reverse() 数组反转

翻转原数组，并返回已完成翻转的数组，原数组改变。

const arr = [1, 2, 3]
console.log(arr.reverse()) // [3, 2, 1]
console.log(arr) // [3, 2, 1]

new Set() 数组去重

const arr = [3,4,4,5,4,6,5,7];
console.log(new Set(arr)); // {3,4,5,6,7}
const a = Array.from(new Set(arr)) // [3, 4, 5, 6, 7]

indexOf() 查找数组下标

在数组中寻找该值，找到则返回其下标，找不到则返回-1。

const arr = [1, 2, 3]
console.log(arr.indexOf(2)) // 1
console.log(arr.indexOf(0)) // -1

lastIndexOf() 查找数组下标

查找元素的索引值和arr.indexOf()的功能一样，不同的是从后往前查找

let arr = [1,2,3,4,5,2]
let arr1 = arr.lastIndexOf(2)
console.log(arr1) // 5
let arr2 = arr.lastIndexOf(9)
console.log(arr2) // -1

includes() 判断是否包含该值

includes() 方法用来判断一个数组或字符串中是否包含一个指定的值返回值：如果包含返回true，否则返回false。

let arr = [1, 2, 3, 4];
arr.includes(3);        // true
arr.includes(5);        // false
arr.includes(3, 1);     // true

ps:与indexOf()的区别： 1、 indexOf()返回的是数值，而includes()返回的是布尔值 2、 indexOf() 不能判断NaN，返回为-1 ，includes()则可以判断

find() 符合第一个条件元素

找到第一个符合条件的数组成员

let arr = [1,2,3,4,5,2,4]
let arr1 = arr.find((value, index, array) =>value > 3)
console.log(arr1) // 值：4

findIndex() 符合第一个条件索引

找到第一个符合条件的数组成员的索引值

let arr = [1,2,3,4,5]
let arr1 = arr.findIndex((value, index, array) => value > 3)
console.log(arr1) // 下标：3

fill(e, start, end) 数组填充

使用给定的值，填充一个数组,ps:填充完后会改变原数组

参数： e-- 待填充的元素　　　　　 start -- 开始填充的位置-索引　　　　 end -- 终止填充的位置-索引（不包括该位置)

let arr = [1,2,3,4,5]
let arrs1 = arr.fill(5)
console.log(arrs1) // [5, 5, 5, 5, 5]
console.log(arr) // [5, 5, 5, 5, 5]

let arr1 = [1,2,3,4,5]
let arrs2 = arr1.fill(5,2)
console.log(arrs2)//[1, 2, 5, 5, 5]
console.log(arr1)//[1, 2, 5, 5, 5]

let arr2 = [1,2,3,4,5]
let arrs3 = arr2.fill(5,1,3)
console.log(arrs3)//[1, 5, 5, 4, 5]
console.log(arr2)//[1, 5, 5, 4, 5]

let arr3 = [1,2,3,4,5]
let arrs4 = arr3.fill([9,8,7,6],1,3)
console.log(arrs4)//[1, [9,8,7,6], [9,8,7,6], 4, 5]
console.log(arr3)//[1, [9,8,7,6], [9,8,7,6], 4, 5]

filter() 数组过滤

filter用于对数组进行过滤。 filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

注意：filter() 不会对空数组进行检测；不会改变原始数组

语法

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

function：函数，规定了过滤条件。必需。该函数接受三个参数：当前元素的值、当前元素的索引和包含该元素的数组。
thisValue：可选项。对象作为该执行回调时使用，传递给函数，用作 “this” 的值。如果省略thisValue，则默认是全局对象（浏览器环境下是 window 对象）。

返回值 返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。

返回数组nums中所有大于5的元素

let nums = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
 
let res = nums.filter((num) => {
  return num > 5;
});
 
console.log(res);  // [6, 7, 8, 9, 10]

把一个Array中的空字符串删掉

var arr = ['A', '', 'B', null, undefined, 'C', '  '];
var r = arr.filter(function (s) {
    return s && s.trim(); // 注意：IE9以下的版本没有trim()方法
});
r; // ['A', 'B', 'C']

利用 filter 进行数组去重

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
var arr = [1,1,'RUNOOB','RUNOOB',true,true,15];
console.log(unique(arr))
// [1, "RUNOOB", true, 15]

indexOf总是返回第一个元素的位置，后续的重复元素位置与indexOf返回的位置不相等，因此被filter滤掉了，所以重复的元素仅会保留第一个位置的元素

flat() 扁平化转一维数组

按照一个可指定的深度递归遍历数组

let nestedArray = [1, 2, [3, 4, [5, 6]]];
let flatArray = nestedArray.flat();
console.log(flatArray);
// 输出: [1, 2, 3, 4, [5, 6]]
 
// 指定深度为2
let deeplyNestedArray = [1, 2, [3, 4, [5, 6]]];
let deeplyFlatArray = deeplyNestedArray.flat(2);
console.log(deeplyFlatArray);
// 输出: [1, 2, 3, 4, 5, 6]