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('亚索')) // 0console.log(arr.indexOf('盲僧')) // 2console.log(arr.indexOf('石头人')) // -1console.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 1if (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个元素,找到返回这个元素;找不到返回null1. 实例方法 `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)
