课程来源：后盾人

数组引用类型分析

数组的定义

const array = new Array('hello', 'dust', 1, 2, 3, 4, 5)
console.log(array)
let arr = ['hello', 'dust', 1, 2, 3, 4, 5]
console.log(arr)

运行结果:

数组是引用类型的
体现:

let arr = ['hello', 'dust', 1, 2, 3, 4, 5]
console.log(arr)let hd = arr
hd[1] = 'hello,world'
console.log(arr)
console.log(hd)

引用类型传的是"地址"，而不是值。
这就像我买了一台电脑，然后我把它“传”给你的时候实际上是借给你。你如果把它弄坏了，那咱俩都用不了了。你如果在里面装了个软件，那咱俩都可以用这个软件。

当我们隔空添加元素时，数组会自动补全中间的内容，用undefined填充

let lesson = ['class1', 'java']
lesson[5] = 'c++'
console.log(lesson)
console.log(lesson[2])

输出结果：

多维数组

a的情况：一般情况，一般我们在数组中都放对象为存储形式。
lesson的情况：在数组里套数组以实现多维数组。

let a = [{ name: 'java', number: 99 },{ name: 'c#', number: 666 },{ title: 'c#', bool: true },
]
console.log(a[1][1]) //undefined
console.log(a[1].name) //c#
console.log(a)
//   [
//     { name: 'java', number: 99 },
//     { name: 'c#', number: 666 },
//     { title: 'c#', bool: true }
//   ]let lesson = [['class1'], ['class2', 'java']]
console.log(lesson[1][1]) //java

输出：

用Array.of为数组创建细节

new Array(5)是创建一个长度为5的数组
Array.of(5)是创建一个包含5的数组

let a = new Array(5)
console.log(a.length) //5
console.log(a[0]) //undefinedlet b = Array.of(5)
console.log(b.length) //1
console.log(b[0]) //5

运行结果：

类型检测与转换

数组转换成字符串的两种方式

a.toString()返回一个字符串，把数组变成字符串。
a.join('')返回一个字符串，用join("这里的内容")来填充数组每一项之间的内容，不写则为单纯的连接。
与a.join('')相对的还有一个.split(" ")，意思是将一个数组根据内容拆分。
描述起来还是不那么直观，以下用一小段代码演示

let a = [1, 3, 4]
console.log(typeof a)
b = a.join('lalala')
console.log(b)
console.log(b.split('lalala'))

运行结果：

let a = [1, 3, 4]
console.log(typeof a)
console.log(a.toString())
console.log(a)
console.log(a.join(''))
console.log(location.href + '?id=' + a.join(''))

运行结果：

querySelectorAll返回的也是数组

可以体验一下如下的代码：
test4.js

let divs = document.querySelectorAll('div')console.log(Array.from(divs, function (i) {i.style.backgroundColor = 'lightgray'return i}),
)

test.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><div class="div1">hello</div><p>emmmmm</p><div class="div2">dust</div><script src="./test4.js"></script></body>
</html>

运行结果：

Array.from是一个迭代函数，可以转换数组，也可以对数组里的元素进行一些二次处理。
在此如果看不懂可以略过。
遍历一个数组的方式还是有挺多的。

在一个数组后面加一个新的数组

在这里用到for-of语法，如果有不会的回去看JavaScript 运算符与流程控制
在文章中间偏后的位置有介绍for-of的使用哦
还要用到数组的.push()api，意思是往数组后添加一项，添加的就是括号内的内容。
console.table(arr)的用途：看下面输出的样子

//展开语法真的好用啊
let arr = ['hello', 'dust']
let hd = ['js', 'css']
for (const value of hd) {arr.push(value)
}
console.log(arr);
console.table(arr)

运行结果：

两个console里显示样式不同

解构赋值

展开语法真是太好用了
...表示展开
展开语法表示我们来接收这个变量，把多个元素赋值给一个变量。

//展开语法真的好用啊
let arr = ['hello', 'dust']
let hd = ['js', 'css']
arr = [...arr, ...hd]
console.log(arr)

运行结果：

配合`reduce()`使用解构赋值求和

let arr = ['hello', 'dust']
let hd = ['js', 'css']
function sum(...args) {return args.reduce((s, v) => {return (s += v)}, 0)
}
console.log(sum(1, 2, 4, 5))

运行结果：

解构赋值控制元素

写一个点击就隐藏的事件
test6.js

const div = document.querySelectorAll('div')let q = [...div].map(function (i) {i.addEventListener('click', function () {this.classList.toggle('hide')})
})

test.html

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><style>.hide {display: none;}</style><div class="div1">hello</div><p>emmmmm</p><div class="div2">dust</div><script src="./test6.js"></script></body>
</html>

运行结果：

点击div后隐藏

这里的q是什么类型的呢？把光标悬浮到q上方，看到q是void[]类型的。

其它解构赋值

比如这样，也是一种解构赋值

let arr = ['dust', 20]
let [name, age] = arr
console.log(name, age)

运行结果：

字符串也可以被转化成数组

console.log(...'hello')
let a = [...'hello']
console.log(a.length)
console.log(typeof a)

运行结果：

吸星大法

name被吸走啦！

let [name, ...args] = ['dust', 'student', 20]
console.log(args)

运行结果：

多种添加元素的方式

首先我们定义两个数组

let arr = ['dust', 'student', 20]
let lang = ['js', 'css']

直接添加

arr[arr.length] = 'hello1'
arr[arr.length] = 'hello2'

批量追加

arr = [...arr, ...lang]

.push方法
在数组末尾添加一项

arr.push(...lang)

与.push()相对的.pop()操作
弹出数组的最后一项

arr.push(...lang)
console.log(arr)
let a = arr.pop()
console.log(a)
console.log(arr)

在数组中添加（修改）

.fill()

let a = [1, 2, 3, 4]
a.fill('hhh', 1, 3)
console.log(a)

运行结果：

在数组中增删

slice截取
不改变原数组

let a = [1, 2, 3, 4]
//从1截到2，slice不改变原数组
console.log(a.slice(1, 2)) //[ 2 ]
//从2开始截
console.log(a.slice(2)) //[ 3, 4 ]

splice在某一位置增或删（删就是不增）
会改变原数组

let a = [1, 2, 3, 4]//splice截几个
console.log(a.splice(0, 3)) //[ 1, 2, 3 ]

这个时候a已经改变了，下面这段代码要把上面这段注释掉再运行。

let a = [1, 2, 3, 4]//splice删除，增加操作
a.splice(1, 1)
console.log(a) //[ 1, 3, 4 ]
a.splice(1, 0, 'hello')
console.log(a) //[ 1, 'hello', 3, 4 ]

小函数：移动数组里的一部分

let arr = [0, 1, 2, 3, 4, 5]
//移动数组里的一部分
function move(arr, from, to) {//声明一个新数组，不要改变原数组const newArr = [...arr]let item = newArr.splice(from, 1)newArr.splice(to, 0, ...item)return newArr
}
let a = move(arr, 1, 3)
console.log(a)

运行结果：

清空数组的方式

以下几种方式都可以清空数组

let a = [0, 1, 2, 3, 4, 5]
a = []

a.length = 0

a.splice(0, a.length)

while (a.pop()) {}

`split`和`join`的使用

split：按什么拆分
`join``：按什么合并
不改变原数组

let str = 'hello,dust'
console.log(str.split(','))
let hd = str.split(',') //[ 'hello', 'dust' ]
hd.join('-')
//不改变原数组
console.log(hd) //[ 'hello', 'dust' ]
console.log(hd.join('-')) //hello-dust

`find`和`findIndex`的使用

（这两个在对象中格外好用）
find的使用

let a = [1, 2, 3, 4, 5]//find的使用
let res = a.find((item) => {return item == 2
})
console.log(res) //2

find在对象中的使用
对象是引用类型，includes查找的是地址，所以不存在（includes括号里的内容相当于开辟了一块新的地址）
用find+对象里的属性就可以找到

let lessons = [{ name: 'js' }, { name: 'css' }, { name: 'mysql' }]
console.log(lessons.includes({ name: 'css' })) //false
//因为引用类型用的是地址
let res1 = lessons.find((item) => {return item.name == 'css'
})
console.log(res1) //{ name: 'css' }

注意下面这种是不行的：

let res1 = lessons.find((item) => {return item == { name: 'css' }
})
console.log(res1) //undefined

findIndex在对象中的使用
可以找到你所找的这个对象的index值

let resIndex = lessons.findIndex((item) => {return item.name == 'css'
})
console.log(resIndex) //1

随口一提：对象也是有长度（length属性）的

let lessons = [{ name: 'js' }, { name: 'css' }, { name: 'mysql' }]
console.log(lessons.length) //2

自定义find函数

function find(array, callback) {for (const value of array) {if (callback(value)) return value}return undefined
}
let arr = [1, 2, 3, 4, 5]
console.log(find(arr, (item) => {return item == 2}),
) //2

运行结果：

原型链初体验

说是初体验，但我也不是第一次写原型链了哈哈
说白了这里就是对于Array这个基本类型增加一个方法，自定义的！

//老师头一次讲原型啦！
Array.prototype.findValue = function (callback) {for (const value of this) {if (callback(value)) return value}return undefined
}
const res = arr.findValue((item) => {return item == 223
})
console.log(res) //undefined

运行结果：

神奇的排序

最近不知道为什么觉得什么都是神奇的……

sort的原理：传入一个函数，看返回值，为非负就不交换，不然就交换。
下面是一个非常基础的升序排序，如果要降序就是b-a（这个很好理解吧）

//排序
let arr = [1, 5, 3, 9, 7]
arr = arr.sort(function (a, b) {return a - b
})
console.log(arr) //[ 1, 3, 5, 7, 9 ]

输出：

那么排序可不可以用在包含对象的数组中呢？
我们定义一个购物车，里面有一些商品和对应的价格，试一试。

let cart = [{ name: 'iphone', price: '12000' },{ name: 'imac', price: '18000' },{ name: 'ipad', price: '3200' },
]//注意传进去的是item，但是return的一定是一个数值！
cart = cart.sort((a, b) => {return a.price - b.price
})
console.log(cart)

输出：

用自己实现的方法写出sort函数

有一说一，这一段没什么实际意义，主要是看一下这个sort函数到底是个啥原理
当然，如果你理解什么是冒泡排序的话，那没事了。

//自定义排序：冒泡算法
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) {const temp = array[n]array[n] = array[m]array[m] = temp}}}return array
}
console.log(sort(arr, (a, b) => {return a - b}),
) //[ 1, 3, 5, 7, 9 ]

运行结果：

听说文章一长，就没人看到最后。
更多内容，详见下一期……

[JavaScript] JavaScript 数组挖掘，不只是讲数组哟相关推荐

[JavaScript] JavaScript数组挖掘，不只是讲数组哟(2)
课程来源:后盾人上一篇的内容:[JavaScript] JavaScript数组挖掘,不只是讲数组哟数组引用类型分析,多维数组,用Array.of为数组创建细节,类型检测与转换,在一个数组后面加一 ...
javascript数组降维_Javascript实现的数组降维——维度不同，怎么谈恋爱
数组的元素可能是数组,这样一层层嵌套,可能得到一个嵌套很深的数组,数组降维要做的事就是把嵌套很深的数组展开,一般最后得到一个一维数组,其中的元素都是非数组元素,比如数组[1, [2, 3, [4, 5 ...
JavaScript创建或填充任意长度的数组
JavaScript创建或填充任意长度的数组直接填充法 const arr = [0,0,0]; Array 构造函数 var len = 3; var arr = new Array(len); ...
es6删除数组某一项_「JavaScript 从入门到精通」10.数组
往期回顾「JavaScript 从入门到精通」1.语法和数据类型「JavaScript 从入门到精通」2.流程控制和错误处理「JavaScript 从入门到精通」3.循环和迭代「JavaScr ...
JavaScript学习（九十二）—关联数组的基本操作
JavaScript学习(九十二)-关联数组的基本操作王同学的每天进步一点点系列!!! 一.关联数组的定义定义:所谓关联数组,就是指数组元素的下标为字符型二.关联数组的创建方式 1)定义一个空数 ...
JavaScript学习（八十九）—数组练习题
JavaScript学习(八十九)-数组练习题
JavaScript学习（八十八）—数组知识点总结，超详细！！！
JavaScript学习(八十八)-爆肝数组知识点总结,超详细!!! 每天都要进步一点点小王加油!!! 一.数组的概念所谓数组就是指内存中开辟出来的用来存储大量数据的连续的存储空间数组可以把一 ...
JavaScript学习（六十五）—数组知识点总结
JavaScript学习(六十五)-数组学习内容一.什么是数组二.数组的分类三.数组的创建方式四.数组元素五.数组的操作六.数组元素遍历的四种方法七.随机数为数组赋值八.数组的比较 ...
JavaScript:实现将 base64 字符串转换为字节数组算法（附完整源码）
JavaScript:实现将 base64 字符串转换为字节数组算法 function base64ToBuffer (b64) {// The base64 encoding uses the fo ...

[JavaScript] JavaScript 数组挖掘，不只是讲数组哟

数组引用类型分析

数组的定义

多维数组

用Array.of为数组创建细节

类型检测与转换

数组转换成字符串的两种方式

querySelectorAll返回的也是数组

在一个数组后面加一个新的数组

解构赋值

配合`reduce()`使用解构赋值求和

解构赋值控制元素

其它解构赋值

吸星大法

多种添加元素的方式

在数组中添加（修改）

在数组中增删

小函数：移动数组里的一部分

清空数组的方式

`split`和`join`的使用

`find`和`findIndex`的使用

自定义find函数

原型链初体验

神奇的排序

用自己实现的方法写出sort函数

[JavaScript] JavaScript 数组挖掘，不只是讲数组哟相关推荐

最新文章

热门文章

[JavaScript] JavaScript 数组挖掘，不只是讲数组哟

数组引用类型分析

数组的定义

多维数组

用Array.of为数组创建细节

类型检测与转换

数组转换成字符串的两种方式

querySelectorAll返回的也是数组

在一个数组后面加一个新的数组

解构赋值

配合reduce()使用解构赋值求和

解构赋值控制元素

其它解构赋值

吸星大法

多种添加元素的方式

在数组中添加（修改）

在数组中增删

小函数：移动数组里的一部分

清空数组的方式

split和join的使用

find和findIndex的使用

自定义find函数

原型链初体验

神奇的排序

用自己实现的方法写出sort函数

[JavaScript] JavaScript 数组挖掘，不只是讲数组哟相关推荐

最新文章

热门文章

配合`reduce()`使用解构赋值求和

`split`和`join`的使用

`find`和`findIndex`的使用