Array 是内置的构造函数,用于创建数组。

    1. <script>
    2. // 构造函数创建数组
    3. let arr = new Array(5, 7, 8);
    4. // 字面量方式创建数组
    5. let list = ['html', 'css', 'javascript'];
    6. console.log(list.constructor);
    7. console.log(list instanceof Array);
    8. </script>

    课堂代码:

    1. // Array 是内置的一个构造函数,通过 new Array 可以得到数组类型的对象
    2. // let arr = ['a', 'b']
    3. // console.log(typeof arr) // object
    4. // 数组也是对象的一种
    5. // 对象(纯粹的对象、数组、函数)
    6. // ------------------ 使用Array -----------------------------
    7. // let arr = new Array() // 得到一个空数组。和 let arr = [] 一样
    8. // console.log(arr)
    9. // let arr = new Array('张三', '李四') // ['张三', '李四']
    10. // 和 let arr = ['张三', '李四'] 是一样的
    11. // console.log(arr)
    12. // let arr = new Array(3) // 只传递一个数字,表示数组有三个成员
    13. // console.log(arr)

    数组在内存中的存储方式与普通对象一样,如下图所示:
    image.png
    数组在赋值时(let arr2 = arr)只是复制了栈内中的地址,而非堆内存中的数据,如下图所示:
    image.png
    数组赋值后,无论修改哪个变量另一个对象的数据值也会相当发生改变。
    课堂代码:

    1. let arr = ['张三', '李四']
    2. let arr2 = arr // 把 arr 的地址,赋值给 arr2,这样的话,两个变量指向同一个地址
    3. arr2.push('王五')
    4. console.log(arr) // ['张三', '李四', '王五']
    5. console.log(arr2) // ['张三', '李四', '王五']

    总结:

    1. 推荐使用字面量方式声明数组,而不是 Array 构造函数
    2. 实例方法 push,用于向数组的末尾添加一个或多个元素
    3. 实例方法 pop,用于从数组的末尾删除最后一个元素
    4. 实例方法 unshift,将一个或多个元素添加到数组的开头
    5. 实例方法 splice 删除元素,还可以在删除的位置新增其他元素(相当于是修改)
    6. 实例方法 join 将数组元素拼接成字符串
    7. 实例方法 concat 合并两个数组,生成新数组
    8. 实例方法 indexOf 用于在数组中查找元素,找到则返回它的索引;找不到返回 -1
    9. 实例方法 reverse 反转数组

    课堂代码:

    1. let arr = ['亚索', '拉克丝']
    2. // 1. 向数组的末尾,添加一个或多个元素
    3. arr.push('儿童劫', '盲僧')
    4. // console.log(arr) // ['亚索', '拉克丝', '儿童劫', '盲僧']
    5. // 把数组中的 拉克丝和儿童劫 都删除了,同时再新增一个 维克托
    6. // arr.splice(从哪开始删除, 删除几个元素, 添加的新元素, 添加的新元素, .....)
    7. arr.splice(1, 2, '维克托')
    8. // console.log(arr) // ['亚索', '维克托', '盲僧']
    9. // arr.join() --- 默认使用 , 连接数组的每个元素,返回拼接后的字符串
    10. // arr.join('###') --- 表示使用指定的 ### 连接每个数组元素,返回字符串
    11. console.log(arr.join()) // 亚索,维克托,盲僧
    12. console.log(arr.join('###')) // 亚索###维克托###盲僧
    13. console.log(arr.join('')) // 亚索维克托盲僧
    14. console.log(arr.indexOf('亚索')) // 0
    15. console.log(arr.indexOf('盲僧')) // 2
    16. console.log(arr.indexOf('石头人')) // -1
    17. console.log(arr.reverse()) // ['盲僧', '维克托', '亚索']

    实例方法 sort 对原数组单元值排序(先放一下)

    1. // ---------------------- 对数组进行排序 ----------------------
    2. // -------------- sort 的基本认知 --------------
    3. // let arr = [4, 8]
    4. // let result = arr.sort(function (a, b) {
    5. // // console.log(a, b) // 8 4
    6. // // 根据return的值进行排序
    7. // // return 0 // 不排序,保持原来的顺序
    8. // // return 1 // 返回正数(不换位)
    9. // return -1 // 返回负数(换位)
    10. // })
    11. // console.log(result)
    12. // let arr = [4, 9, 2, 8, 0, 5, 7]
    13. // let result = arr.sort(function (a, b) {
    14. // // return a - b // 从小到大排序(升序)
    15. // // return b - a // 从大到小排序(降序)
    16. // return Math.random() - 0.5 // 随机返回正或负数,则打乱数组
    17. // })
    18. // console.log(result)
    19. let arr = ['orange', 'banana', 'apple', 'xigua', 'appla']
    20. // 认知:字符串也能比较大小(按照Unicode编码比较)
    21. let result = arr.sort(function (a, b) {
    22. // 升序(从小到大排序)
    23. if (a < b) return -1 // if 区间如果只有一行代码,可以去掉 {}
    24. if (a > b) return 1
    25. if (a === b) return 0
    26. })
    27. console.log(result)
    28. // let arr = [2, 18, 100, 9]
    29. // let result = arr.sort() // 这里可以不传递那个函数
    30. // // 不传递函数,相当于是把数组的每个成员都变为字符串。然后按照Unicode编码升序排序
    31. // console.log(result)

    Array的静态方法:

    1. Array.from() —— 将伪数组转成真数组
    2. 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. 语法相似的实例方法:
    2. 1. 实例方法 `forEach` 用于遍历数组,替代 `for` 循环
    3. ```javascript
    4. // --------------- forEach 遍历数组 ----------------------
    5. // ['a', 'b', 'c'].forEach(function (item, index, self) {
    6. // // item表示数组的每一项,分别表示 a 、b 、c
    7. // // console.log(item)
    8. // // index表示数组的下标,分别表示 0 、1 、2
    9. // // console.log(index)
    10. // // self表示当前这个数组
    11. // // console.log(self)
    12. // });
    13. // 关于 item、index、self,如果不使用self可以省略、如果不使用index也可以省略
    14. ['a', 'b', 'c'].forEach(function (item) {
    15. console.log(item)
    16. }); // 这里加分号
    17. // ---------------- 配合箭头函数 ----------------------------
    18. // ['a', 'b', 'c'].forEach(() => {})
    19. // ['a', 'b', 'c'].forEach((item, index, self) => { })
    20. // ['a', 'b', 'c'].forEach((item) => {})
    21. // ['a', 'b', 'c'].forEach(item => { console.log(item) })
    22. ['a', 'b', 'c'].forEach(item => console.log(item))
    1. 实例方法 filter 根据条件,过滤数组元素,符合条件的元素组成新数组
    2. 实例方法 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. 1. 实例方法 `find`,根据条件查找符合条件的第1个元素,找到返回这个元素;找不到返回null
    2. 1. 实例方法 `findIndex`,根据条件查找符合条件的第1个元素的下标,找到则返回这个下标,找不到返回 -1
    3. ```javascript
    4. // ----------------------- find -------------------------
    5. // let arr = [3, 8, 5, 9, 1, 0, 2]
    6. // // let result = arr.find(function (item, index, self) { })
    7. // // let result = arr.find(item => {
    8. // // // return 条件
    9. // // return item > 5
    10. // // })
    11. // let result = arr.find(item => item > 5)
    12. // console.log(result)
    13. // ----------------------- findIndex -------------------------
    14. let arr = [3, 8, 5, 9, 1, 0, 2]
    15. let result = arr.findIndex(item => item > 5)
    16. console.log(result)
    1. 实例方法 some,判断数组中是否有一些元素符合条件,如果有则返回true;没有返回false
    2. 实例方法 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. 1. 实例方法 `reduce`,数组求和
    2. ```javascript
    3. // let arr = [4, 2, 8, 9, 5]
    4. // ----------------- 没有初始值 ---------------------
    5. // let result = arr.reduce(function (总和, 当前的元素) {
    6. // })
    7. // let result = arr.reduce(function (total, curr) {
    8. // // 第1循环:total = 数组的第1个元素 curr = 数组的第2个元素
    9. // // 第2循环:total = 总和 curr = 数组的第3个元素
    10. // // 第3循环:total = 总和 curr = 数组的第4个元素
    11. // // 第4循环:total = 总和 curr = 数组的第5个元素
    12. // return total + curr
    13. // })
    14. // console.log(result)
    15. // ----------------- 有初始值 ---------------------
    16. let arr = [4, 2, 8, 9, 5]
    17. // let result = arr.reduce(function (总和, 数组元素) { }, 初始值)
    18. let result = arr.reduce(function (total, curr) {
    19. // 第1次循环:total = 初始值 curr = 数组第1个元素
    20. // 第1次循环:total = 总和 curr = 数组第2个元素
    21. // ......
    22. return total + curr
    23. }, 100)
    24. console.log(result)