数组及其方法详细

javascript 数组及其方法详细

简介

在 JavaScript 中，除了 Object 之外，数组(Array)应该是最常用的类型了。数组是一组有序的数据，使用方括号表示[1, 2, 3]，可通过索引来访问每个元素(索引从 0 开始)。 JavaScript 中的数组的长度和元素类型都是非固定的。

数组的创建

数组的几种创建方法:字面量方式,Array构造函数,扩展运算符(...),ES6新增的用于创建数组的静态方法from()和of()

数组字面量

//  语法
const arr = []
console.log(arr) // []

构造函数

//  语法
const arr1 = new Array();
console.log(arr1) // []

const arr2 = Array()
console.log(arr2) // []

在使用 Array 构造函数时，加不加 new 操作符，结果都一样。

扩展运算符

//  语法 ...
 const arr3 = [1,2,3]
 console.log(...arr3); // 1,2,3

Array静态方法

Array.form()

Array.from()可以可以接收3个参数

// 第一个参数是必传参
console.log(Array.from('arr')); // ['a', 'r', 'r']

// 第二个是可选的映射函数参数
console.log(Array.from([1,2,3],x => x + x)); // [2, 4, 6]

const arr1 = [1,2,3,4]
const arr2 = Array.from(arr1,function(x){return x**this.exponent},{exponent:2})
console.log(arr2); // [1, 4, 9, 16]

Array.of()

console.log(Array.of(1,2,3)); // [1,2,3]

数组检测

//  语法 Array.isArray()
console.log(Array.isArray([1,2,3])); // true
console.log(Array.isArray({foo:123})); // false
console.log(Array.isArray("hello")); // false
console.log(Array.isArray(undefined)); // false

数组的方法

!!!!!!!!!!!!!!!可以改变原数组的方法!!!!!!!!!!!!!!!

push() 末尾添加

push()方法用于向数组末尾添加元素(任意数量的元素)，返回数组的最新长度，该方法会改变原数组

const arr = []
arr.push('a') // ['a']

pop() 末尾删除

数组方法 pop() --- 数组末尾删除元素，返回删除后的数组

const arr20 = ['a','b','c']
arr20.pop() //['a', 'b']

unshift() 开头添加

unshift()方法用于在数组的第一个位置添加元素，并返回添加新元素后的数组长度。该方法会改变原数组。

const arr13 = ['a','b','c']
arr13.unshift('d') // ['d', 'a', 'b', 'c']

shift() 开头删除

shift()方法用于删除数组的第一个元素，并返回该元素。该方法会改变原数组。

const arr12 = ['a','b','c']
arr12.shift() //  ['b', 'c']

splice() 删除插入替换

有以下三种使用方式:

删除。需要给splice()传入两个参数:要删除的第一个元素的位置和要删除的元素和数量
```
const arr = [1,2,3]
arr.splice(0,1); // [1]
```
插入。需要给splice()传入三个参数:开始掺入位置索引,0(删除0个元素)和要插入的元素,可以在数组中指定的位置插入元素.第三个参数之后还可以传第四个、第五个参数，乃至任意多个要插入的元素
```
const arr = [1,2,3]
arr7.splice(1,0,3)
console.log(arr); //[1, 3, 2, 3]
```
替换。splice() 在删除元素的同时可以在指定位置插入新元素，这样我们可以很方便实现元素的替换
```
const arr = [1,2,3]
arr.splice(0,1,0) // [0, 2, 3]
```
reverse() 反转

顾名思义，reverse() 方法就是将数组元素反向排列。该方法将改变原数组。

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

sort() 排序

const arr = [2,3,1]
arr.sort((a,b)=> a - b) // 升序 [1,2,3]
const arr = [2,3,1]
arr.sort((a,b)=> b - a) // 降序 [3,2,1]

!!!!!!!!!!!!!!!不可以改变原数组的方法!!!!!!!!!!!!!!!

contact() 合并

concat它将新数组的元素,添加到原数组的后面,返回一个新的数组,原数组不变

// 语法 .concat()
const arr = [1,2,3].concat(4,5,6);
console.log(arr); // [1, 2, 3, 4, 5, 6]

slice() 截取

slice()方法可以接收一个或俩个参数:返回元素的开始索引和结束索引.slice()返回的结果包括开始索引,不包括结束索引

const arr = [1,2,3]
arr.slice(1); // [2,3]
arr.slice(1,2); // [2]

join() 拼接字符串

join() 方法接收一个作为字符串分隔符的参数，将所有数组成员连接为一个字符串返回。如果不提供参数，默认用逗号分隔。

const arr = [1,2,3,4,5]
const brr = arr.join('') // 1 2 3 4 5
const brr = arr.join() // 1,2,3,4,5
console.log(brr);

indexOf() 从前往后查找下标

indexOf 方法返回给定元素在数组中第一次出现的位置，如果没有出现则返回-1，它还可以接受第二个参数，表示搜索的开始位置

const arr = [1,1,2,2,3,4,5]
const brr1 =  arr.indexOf(1) // 0
const brr2 = arr.indexOf(1,1) // 1

lastIndexOf() 从后往前查找下标

lastIndexOf 方法返回给定元素在数组中最后一次出现的位置(从后往前找)，如果没有出现则返回-1。

const arr = [1,1,2,2,3,4,5]
const brr1 =  arr.lastIndexOf(1) // 1
const brr2 = arr.lastIndexOf(1,0) // 0

includes() 查找指定的值

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

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

flat() 数组扁平化

flat() 方法创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。

// 将嵌套数组的解构层级减少 == 最好是一层 === 数组扁平化
const arr = [1,2,[3,4,5,[6,[8],7]],9]
arr.flat(1);  // [1, 2, 3, 4, 5, Array(3), 9]
arr.flat(2);  // [1, 2, 3, 4, 5, 6, Array(1), 7, 9]
arr.flat(3);  // [1, 2, 3, 4, 5, 6, 8, 7, 9]
arr.flat(Infinity); // [1, 2, 3, 4, 5, 6, 8, 7, 9]
/**
* 最大值 max
* 最小值 min
* 无穷大 Infinity
* 无穷小
**/

!!!!!!!!!!!!!!!参数是函数方法!!!!!!!!!!!!!!!

forEach() 遍历循环数组没有返回值

概念：数组方法 forEach() 同 map() 方法大同小异，都是循环遍历数组中的每个元素，并对每个元素进行指定的操作，与map()不用的是，forEach()不会返回一个新的数组，它是直接对原数组进行操作
注意：forEach()没有返回值。

 const arr = [1,2,3,4,5]
    arr.forEach((item, index, array)=>{
        console.log(item);  // 1 2 3 4 5
    })

map() 遍历循环数组有返回值

概念：数组方法 map() 循环遍历数组中的每个元素，根据对每个元素进行指定的操作，返回一个新的数组(内容为被操作后的元素)，map方法常常用于渲染页面
注意：map()具有返回值

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

filter() 遍历过滤数组

概念：filter() 过滤数组的方法，常常用于筛选满足指定条件的元素，并返回一个新的数组(数组内容为满足条件的元素)，使用场景如：模糊搜索、下拉框显示不同的信息。

const arr = [1,2,3,4,5]
     const brr =  arr.filter((item, index, array) => item > 2)
     console.log(brr); // [3, 4, 5]

some()

概念：数组方法 some() 检测数组中是否至少有一个元素满足指定条件，如果有就返回true,没有则返回false，同时some()也具有循环遍历数组中的每个元素，同时可以对元素进行指定条件的判断。

const arr = [1,2,3,4,5]
     const brr =  arr.some((item,index,array)=>item > 2 )
     console.log(brr); // true

every()

概念：数组方法 every() 检测数组中每个元素都满足指定条件，返回true, every()方法遍历数组对每个元素进行指定的条件判断，所有元素都满足则返回 true，有一个不满足则返回false。

const arr = [1,2,3,4,5]
     const brr = arr.every((item,index,array)=> item > 2)
     console.log(brr); // false

reduce()

概念：数组方法 reduce() 将数组中的每个元素进行累加合并，返回合计的值。reduce()一共有五个参数，分别是：起始值、当前值、当前值的下标、当前调用reduce()方法的数组和传递给起始值的参数值，常用于数据汇总，计算最大值，最小值等。。

    const arr = [1,2,3,4,5]
    const brr = arr.reduce((start,now,index,array)=>{
        console.log(start,now);
        return start+now
     },2)
     console.log(brr);
//  2 1
//  3 2
//  5 3
//  8 4
//  12 5
//  17

find() 查找

概念：数组方法 find() 检测数组中第一个满足指定条件的元素，并返回该元素，find()会对数组中每一个元素进行循环遍历，并对每个元素进行指定条件的判断，满足则返回该元素，不满足则返回undefined。

// find 检测数组中第一个满足指定条件的元素，满足则返回该元素 不满足则返回undefined
const arr = [
    {
        name:'张三'
    },
    {
        name:'李四'
    }
] 
const brr = arr.find(item => item.name === '张三')
console.log(brr); // {name: '张三'}

findIndex() 查找下标

概念：数组方法 findIndex() 检测数组中第一个满足指定条件的元素，并返回该元素的下标。findIndex()会对数组中每一个元素进行遍历，并对每个元素进行条件判断，满足条件则返回该元素对应的下标，不满足则返回-1。

const arr = [
    {
        name:'张三'
    },
    {
        name:'李四'
    }
] 
// 满足条件
const brr1 = arr.findIndex(item =>item.name === '张三')
console.log('满足条件',brr1); // 1
// 不满足条件
const brr2 = arr.findIndex(item =>item.name === '王五')
console.log('不满足条件',brr2); // -1