数组类型

声明数组

创建数组

使用对象方式创建数组

new Array(1, 'mkimq')// [1, 'mkimq']

使用字面量创建是推荐的简单作法

const arr = [1, 'mkimq']

多维数组定义

const arr = [['mkimq'], [1]]

数组是引用类型可以使用const声明并修改它的值
使用原型的 length属性可以获取数组元素数量
数组可以设置任何值，下面是使用索引添加数组

const arr = [0]
arr[1] = 'mkimq'

下面直接设置3号数组，会将1/2索引的数组定义为空值

const arr = [0]
arr[3] = 'mkimq'

声明多个空元素的数组

new Array(3)

Array.of

使用Array.of 与 new Array 不同是设置一个参数时不会创建空元素数组

const arr = Array.of(3) // [3]

类型检测

检测变量是否为数组类型

Array.isArray([1])

类型转换

可以将数组转换为字符串也可以将其他类型转换为数组。

字符串

大部分数据类型都可以使用.toString() 函数转换为字符串。

[1].toString()

也可以使用函数 String 转换为字符串。

String([1])

或使用join连接为字符串

[1, 2, 3].join('-')

Array.from

使用Array.from可将类数组转换为数组，类数组指包含 length 属性或可迭代的对象。

第一个参数为要转换的数据，第二个参数为类似于map 函数的回调方法

const str = 'mkimq'
Array.from(str)

为对象设置length属性后也可以转换为数组，但要下标为数值或数值字符串

let user = {
    0: 'mkimq',
    '1': 18,
    length: 2
}
console.log(Array.from(user))

DOM元素转换为数组后来使用数组函数，第二个参数类似于map 函数的方法，可对数组元素执行函数处理。

<body>
    <button message="mkimq">button</button>
    <button message="在线文档">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    console.log(btns) // 包含length属性
    Array.from(btns, (item) => {
        item.style.background = 'red'
    })
</script>

展开语法

使用展开语法将 NodeList 转换为数组操作

<style>
    .hide {
        display: none;
    }
</style>

<body>
    <div>mkimq.com</div>
    <div>mkimq</div>
</body>

<script>
    let divs = document.querySelectorAll("div")
    [...divs].map(function(div) {
        div.addEventListener('click', function() {
        this.classList.toggle('hide')
        })
    })
</script>

展开语法

数组合并

使用展开语法来合并数组相比 concat 要更简单，使用... 可将数组展开为多个值。

const a = [1, 2, 3]
const b = [11, 22, ...a]

函数参数

使用展示语法可以替代 arguments 来接收任意数量的参数

function mk(...args) {
    console.log(args)
}

// 也可以用于接收部分参数
function mk(name, ...args) {
    console.log(name, args)
}

节点转换

可以将DOM节点转为数组，下面例子不可以使用 filter 因为是节点列表

<body>
    <button message="mkimq">button</button>
    <button message="在线文档">button</button>
</body>

<script>
    let btns = document.querySelectorAll('button');
    btns.map(item => {
        console.log(item) // TypeError: btns.filter is not a function
    })
</script>

使用展开语法后就可以使用数组方法

<body>
  <div>mkimq</div>
  <div>mkimq.com</div>
</body>

<script>
    const divs = document.querySelectorAll('div')
    [...divs].map(function(div) {
        div.addEventListener('click', function() {
            this.classList.toggle('hide')
        })
    })

    // 使用原型处理
    Array.prototype.map.call(divs, item => {
        item.style.background = 'red'
    })
</script>

解构赋值

解构是一种更简洁的赋值特性，可以理解为分解一个数据的结构

基本使用

基本使用语法

const [name, age] = ['mkimq', 18]

解构赋值数组

function mk() {
    return ['mkimq', 18]
}

const [name, age] = mk()

剩余解构指用一个变量来接收剩余参数

const [name, ...arr] = ['mkimq', 18, 'web']

字符串解构

const [...arr] = 'mkimq'

严格模式

非严格模式可以不使用声明指令，严格模式下必须使用声明。所以建议使用 let 等声明。

"use strict";

[web, url] = ['mkimq.com', 'https://www.mkimq.com']

简洁定义

只赋值部分变量

const [, age] = ['mkimq', 18]

使用展开语法获取多个值

const [name, ...arr] = ['mkimq', 18, 'web']

默认值

为变量设置默认值

const [name, age = 18] = ['mkimq']

函数参数

数组参数的使用

function mk([a, b]) {
	console.log(a, b)
}
mk(['mkimq', 'age'])

管理元素

基本使用

使用从0开始的索引来改变数组

const arr = [0, 1, 2]
arr[0] = '0'

向数组追回元素

const arr = [0, 1, 2]
arr[arr.length] = '0'

扩展语法

使用展示语法批量添加元素

const a = [1, 2, 3]
const b = ['mkimq']

b.push(..a)

push

压入元素，直接改变元数组，返回值为数组元素数量

const arr = []
arr.push(1)

pop

从末尾弹出元素，直接改变元数组，返回值为弹出的元素

const arr = [1, 2]
arr.pop()

unshift

从数组前面添加元素

const arr = [1]
arr.unshift(0)

shift

从数组前面取出一个元素

const arr = [1, 2]
arr.shift()

fill

使用fill 填充数组元素

console.dir(Array(4).fill('mkimq'))

指定填充位置

[1, 2, 3, 4].fill('mkimq', 1, 2) // [1, 'mkimq', 3, 4]

slice

使用 slice 方法从数组中截取部分元素组合成新数组（并不会改变原数组），不传第二个参数时截取到数组的最后元素。

const arr = [0, 1, 2, 3, 4, 5, 6]
console.log(arr.slice(1, 3)) // [1, 2]

不设置参数是为获取所有元素

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

splice

使用 splice 方法可以添加、删除、替换数组中的元素，会对原数组进行改变，返回值为删除的元素。

删除数组元素第一个参数为从哪开始删除，第二个参数为删除的数量。

const arr = [0, 1, 2, 3, 4, 5, 6]
arr.splice(1, 3) // 返回 [1, 2, 3] arr [0, 4, 5, 6]

通过修改length删除最后一个元素

const arr = [0, 1]
arr.length = arr.length - 1

通过指定第三个参数来设置在删除位置添加的元素

const arr = [0, 1, 2, 3, 4, 5, 6]
arr.splice(1, 3, 'mkimq')

向末尾添加元素

const arr = [0, 1, 2, 3, 4, 5, 6]
arr.splice(arr.length, 0, 'mkimq')

向数组前添加元素

const arr = [0, 1, 2, 3, 4, 5, 6]
arr.splice(0, 0, 'mkimq')

清空数组

将数组值修改为[]可以清空数组，如果有多个引用时数组在内存中存在被其他变量引用。
将数组length设置为0也可以清空数组
使用splice方法删除所有数组元素user.splice(0, arr.length
使用pop/shift删除所有元素，来清空数组while (user.pop()) {}

合并拆分

join

使用join连接成字符串

const arr = [0, 1, 2, 3]
arr.join('-')

split

split 方法用于将字符串分割成数组，类似join方法的反函数。

const str = '0-1-2-3'
str.split('-')

concat

concat方法用于连接两个或多个数组，元素是值类型的是复制操作，如果是引用类型还是指向同一对象

const a = [1, 2]
const b = [3, 4]
const arr = []

arr.concat(a, b)

也可以使用扩展语法实现连接 [...a, ...b, ...c]

copyWithin

使用 copyWithin 从数组中复制一部分到同数组中的另外位置。

语法说明

arr.copyWithin(target, start, end)

参数说明

参数	描述
target	必需。复制到指定目标索引位置。
start	可选。元素复制的起始位置。
end	可选。停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数。

查找元素

数组包含多种查找的函数，需要把这些函数掌握清楚，然后根据不同场景选择合适的函数。

indexOf

使用 indexOf 从前向后查找元素出现的位置，如果找不到返回 -1。

第二个参数用于指定查找开始位置

lastIndexOf

使用 lastIndexOf 从后向前查找元素出现的位置，如果找不到返回 -1。

第二个参数用于指定查找开始位置

includes

使用 includes 查找字符串返回值是布尔类型更方便判断

const arr = [1, 2, 3]
arr.includes(3)

find

find 方法找到后会把值返回出来

如果找不到返回值为undefined
返回第一次找到的值，不继续查找

const arr = ['mkimq', 18]

const find = arr.find(item => item === 'mkimq')

findIndex

findIndex 与 find 的区别是返回索引值，参数也是 : 当前值，索引，操作数组。

查找不到时返回 -1

const arr = ['mkimq', 18]

const index = arr.findIndex(item => item === 'mkimq')

数组排序

reverse

反转数组顺序

sort

sort每次使用两个值进行比较 Array.sort((a,b)=>a-b
- 返回负数 a 排在 b前面，从小到大
- 返回正数 b 排在a 前面
- 返回 0 时不动

排序原理

let arr = [1, 5, 3, 9, 7]

function sort(array, callback) {
    for (const n in array) {
        for (const m in array) {
            if (callback(array[n], array[m]) < 0) {
                let temp = array[n]
                array[n] = array[m]
                array[m] = temp
            }
        }
    }
    return array
}

arr = sort(arr, function (a, b) {
    return a - b
})

console.table(arr)

循环遍历

for

根据数组长度结合for 循环来遍历数组

const arr = []

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i])
}

forEach

forEach使函数作用在每个数组元素上，但是没有返回值。

const arr = []

arr.forEach((item, index, array) => {
    console.log(item, index, array)
})

for/in

遍历时的 key 值为数组的索引

const arr = []

for (const key in arr) {
    console.log(key)
}

for/of

与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。

const arr = []

for (const item of arr) {
    console.log(item)
}

扩展方法

every

every 用于递归的检测元素，要所有元素操作都要返回真结果才为真。

some

使用 some 函数可以递归的检测元素，如果有一个返回true，表达式结果就是真。第一个参数为元素，第二个参数为索引，第三个参数为原数组。

下面是使用 some 检测规则关键词的示例，如果匹配到一个词就提示违规。

arr.some((item, index, array) => item === 'mkimq')

filter

使用 filter 可以过滤数据中元素

map

使用 map 映射可以在数组的所有元素上应用函数，用于映射出新的值。

reduce

使用 reduce 与 reduceRight 函数可以迭代数组的所有元素，reduce 从前开始 reduceRight 从后面开始。下面通过函数计算课程点击数的和。

第一个参数是执行函数，第二个参数为初始值

传入第二个参数时将所有元素循环一遍
不传第二个参数时从第二个元素开始循环

参数	说明
prev	上次调用回调函数返回的结果
cur	当前的元素值
index	当前的索引
array	原数组

统计元素出现的次数

function countArrayELem(array, elem) {
    return array.reduce((total, cur) => (total += cur == elem ? 1 : 0), 0)
}

# 数组类型

# 声明数组

# 创建数组

# Array.of

# 类型检测

# 类型转换

# 字符串

# Array.from

# 展开语法

# 展开语法

# 数组合并

# 函数参数

# 节点转换

# 解构赋值

# 基本使用

# 严格模式

# 简洁定义

# 默认值

# 函数参数

# 管理元素

# 基本使用

# 扩展语法

# push

# pop

# unshift

# shift

# fill

# slice

# splice

# 清空数组

# 合并拆分

# join

# split

# concat

# copyWithin

# 查找元素

# indexOf

# lastIndexOf

# includes

# find

# findIndex

# 数组排序

# reverse

# sort

# 排序原理

# 循环遍历

# for

# forEach

# for/in

# for/of

# 扩展方法

# every

# some

# filter

# map

# reduce

# 动画案例

数组类型

声明数组

创建数组

Array.of

类型检测

类型转换

字符串

Array.from

展开语法

展开语法

数组合并

函数参数

节点转换

解构赋值

基本使用

严格模式

简洁定义

默认值

函数参数

管理元素

基本使用

扩展语法

push

pop

unshift

shift

fill

slice

splice

清空数组

合并拆分

join

split

concat

copyWithin

查找元素

indexOf

lastIndexOf

includes

find

findIndex

数组排序

reverse

sort

排序原理

循环遍历

for

forEach

for/in

for/of

扩展方法

every

some

filter

map

reduce

动画案例