Array
是内置的构造函数,用于创建数组。
<script>
// 构造函数创建数组
let arr = new Array(5, 7, 8);
// 字面量方式创建数组
let list = ['html', 'css', 'javascript'];
console.log(list.constructor);
console.log(list instanceof Array);
</script>
课堂代码:
// Array 是内置的一个构造函数,通过 new Array 可以得到数组类型的对象
// let arr = ['a', 'b']
// console.log(typeof arr) // object
// 数组也是对象的一种
// 对象(纯粹的对象、数组、函数)
// ------------------ 使用Array -----------------------------
// let arr = new Array() // 得到一个空数组。和 let arr = [] 一样
// console.log(arr)
// let arr = new Array('张三', '李四') // ['张三', '李四']
// 和 let arr = ['张三', '李四'] 是一样的
// console.log(arr)
// let arr = new Array(3) // 只传递一个数字,表示数组有三个成员
// console.log(arr)
数组在内存中的存储方式与普通对象一样,如下图所示:
数组在赋值时(let arr2 = arr
)只是复制了栈内中的地址,而非堆内存中的数据,如下图所示:
数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。
课堂代码:
let arr = ['张三', '李四']
let arr2 = arr // 把 arr 的地址,赋值给 arr2,这样的话,两个变量指向同一个地址
arr2.push('王五')
console.log(arr) // ['张三', '李四', '王五']
console.log(arr2) // ['张三', '李四', '王五']
总结:
- 推荐使用字面量方式声明数组,而不是
Array
构造函数 - 实例方法
push
,用于向数组的末尾添加一个或多个元素 - 实例方法
pop
,用于从数组的末尾删除最后一个元素 - 实例方法
unshift
,将一个或多个元素添加到数组的开头 - 实例方法
splice
删除元素,还可以在删除的位置新增其他元素(相当于是修改) - 实例方法
join
将数组元素拼接成字符串 - 实例方法
concat
合并两个数组,生成新数组 - 实例方法
indexOf
用于在数组中查找元素,找到则返回它的索引;找不到返回 -1 - 实例方法
reverse
反转数组
课堂代码:
let arr = ['亚索', '拉克丝']
// 1. 向数组的末尾,添加一个或多个元素
arr.push('儿童劫', '盲僧')
// console.log(arr) // ['亚索', '拉克丝', '儿童劫', '盲僧']
// 把数组中的 拉克丝和儿童劫 都删除了,同时再新增一个 维克托
// arr.splice(从哪开始删除, 删除几个元素, 添加的新元素, 添加的新元素, .....)
arr.splice(1, 2, '维克托')
// console.log(arr) // ['亚索', '维克托', '盲僧']
// arr.join() --- 默认使用 , 连接数组的每个元素,返回拼接后的字符串
// arr.join('###') --- 表示使用指定的 ### 连接每个数组元素,返回字符串
console.log(arr.join()) // 亚索,维克托,盲僧
console.log(arr.join('###')) // 亚索###维克托###盲僧
console.log(arr.join('')) // 亚索维克托盲僧
console.log(arr.indexOf('亚索')) // 0
console.log(arr.indexOf('盲僧')) // 2
console.log(arr.indexOf('石头人')) // -1
console.log(arr.reverse()) // ['盲僧', '维克托', '亚索']
实例方法 sort
对原数组单元值排序(先放一下)
// ---------------------- 对数组进行排序 ----------------------
// -------------- sort 的基本认知 --------------
// let arr = [4, 8]
// let result = arr.sort(function (a, b) {
// // console.log(a, b) // 8 4
// // 根据return的值进行排序
// // return 0 // 不排序,保持原来的顺序
// // return 1 // 返回正数(不换位)
// return -1 // 返回负数(换位)
// })
// console.log(result)
// let arr = [4, 9, 2, 8, 0, 5, 7]
// let result = arr.sort(function (a, b) {
// // return a - b // 从小到大排序(升序)
// // return b - a // 从大到小排序(降序)
// return Math.random() - 0.5 // 随机返回正或负数,则打乱数组
// })
// console.log(result)
let arr = ['orange', 'banana', 'apple', 'xigua', 'appla']
// 认知:字符串也能比较大小(按照Unicode编码比较)
let result = arr.sort(function (a, b) {
// 升序(从小到大排序)
if (a < b) return -1 // if 区间如果只有一行代码,可以去掉 {}
if (a > b) return 1
if (a === b) return 0
})
console.log(result)
// let arr = [2, 18, 100, 9]
// let result = arr.sort() // 这里可以不传递那个函数
// // 不传递函数,相当于是把数组的每个成员都变为字符串。然后按照Unicode编码升序排序
// console.log(result)
Array的静态方法:
- Array.from() —— 将伪数组转成真数组
- Array.isArray() —— 判断元素是否是数组 ```javascript // ——————————— from 将伪数组转成真数组 ———————— // 伪数组(实际是对象) let obj = { 0: ‘aa’, 1: ‘bb’, length: 2 }
let arr = Array.from(obj) console.log(arr) // [‘aa’, ‘bb’] // 转成真数组后,才能 调用数组方法 arr.push(‘ccc’) console.log(arr)
// ——————————— 判断变量是否是数组类型 —————————— console.log(Array.isArray([])) // true console.log(Array.isArray([‘a’, ‘c’])) // true console.log(Array.isArray(obj)) // false console.log(Array.isArray(123)) // false
语法相似的实例方法:
1. 实例方法 `forEach` 用于遍历数组,替代 `for` 循环
```javascript
// --------------- forEach 遍历数组 ----------------------
// ['a', 'b', 'c'].forEach(function (item, index, self) {
// // item表示数组的每一项,分别表示 a 、b 、c
// // console.log(item)
// // index表示数组的下标,分别表示 0 、1 、2
// // console.log(index)
// // self表示当前这个数组
// // console.log(self)
// });
// 关于 item、index、self,如果不使用self可以省略、如果不使用index也可以省略
['a', 'b', 'c'].forEach(function (item) {
console.log(item)
}); // 这里加分号
// ---------------- 配合箭头函数 ----------------------------
// ['a', 'b', 'c'].forEach(() => {})
// ['a', 'b', 'c'].forEach((item, index, self) => { })
// ['a', 'b', 'c'].forEach((item) => {})
// ['a', 'b', 'c'].forEach(item => { console.log(item) })
['a', 'b', 'c'].forEach(item => console.log(item))
- 实例方法
filter
根据条件,过滤数组元素,符合条件的元素组成新数组 - 实例方法
map
循环遍历原数组,函数的返回值组成新数组 ```javascript // ————————- filter ——————————————- // let arr = [4, 2, 9, 5, 0, 8] // let result = arr.filter(function (item, index, self) { }) // let result = arr.filter(function (item) { // // 这里要返回一个条件 // return item > 5 // }) // let result = arr.filter((item) => {return item > 5}) // let result = arr.filter(item => item > 5) // console.log(result)
// 使用filter删除数组元素(删除id=7的元素) let data = [ { id: 1, name: ‘zs’, age: 20 }, { id: 3, name: ‘lisi’, age: 30 }, { id: 7, name: ‘wangwu’, age: 23 }, { id: 15, name: ‘abc’, age: 26 } ]
let result = data.filter(item => { // console.log(item) // reutrn 条件 // 符合条件的将组成新的数组 return item.id !== 7 }) console.log(result)
// —————————— map —————————————- // let arr = [4, 2, 9, 5, 0, 8] // 需要,得到新数组,数组中放原数组每个元素的平方值 // let result = arr.map(function (item) { // return item item // 返回每个元素的平方 // }) // let result = arr.map(item => item item) // console.log(result)
1. 实例方法 `find`,根据条件查找符合条件的第1个元素,找到返回这个元素;找不到返回null
1. 实例方法 `findIndex`,根据条件查找符合条件的第1个元素的下标,找到则返回这个下标,找不到返回 -1
```javascript
// ----------------------- find -------------------------
// let arr = [3, 8, 5, 9, 1, 0, 2]
// // let result = arr.find(function (item, index, self) { })
// // let result = arr.find(item => {
// // // return 条件
// // return item > 5
// // })
// let result = arr.find(item => item > 5)
// console.log(result)
// ----------------------- findIndex -------------------------
let arr = [3, 8, 5, 9, 1, 0, 2]
let result = arr.findIndex(item => item > 5)
console.log(result)
- 实例方法
some
,判断数组中是否有一些元素符合条件,如果有则返回true;没有返回false - 实例方法
every
,判断数组中是否每个元素都符合条件,如果都符合条件返回true,否则返回false ```javascript // ———————————- some ————————————- // let arr = [3, 8, 5, 9, 1, 0, 2] // let result = arr.some(item => item > 5) // console.log(result) // true
// ———————————- every ————————————- let arr = [3, 8, 5, 9, 1, 0, 2] let result = arr.every(item => item > 5) console.log(result) // false
1. 实例方法 `reduce`,数组求和
```javascript
// let arr = [4, 2, 8, 9, 5]
// ----------------- 没有初始值 ---------------------
// let result = arr.reduce(function (总和, 当前的元素) {
// })
// let result = arr.reduce(function (total, curr) {
// // 第1循环:total = 数组的第1个元素 curr = 数组的第2个元素
// // 第2循环:total = 总和 curr = 数组的第3个元素
// // 第3循环:total = 总和 curr = 数组的第4个元素
// // 第4循环:total = 总和 curr = 数组的第5个元素
// return total + curr
// })
// console.log(result)
// ----------------- 有初始值 ---------------------
let arr = [4, 2, 8, 9, 5]
// let result = arr.reduce(function (总和, 数组元素) { }, 初始值)
let result = arr.reduce(function (total, curr) {
// 第1次循环:total = 初始值 curr = 数组第1个元素
// 第1次循环:total = 总和 curr = 数组第2个元素
// ......
return total + curr
}, 100)
console.log(result)