JS数组特征

  • js数组不是典型的数组，是用对象模拟的数组
  • 典型的数组特征：
    • 存储元素的数据类型相同
    • 使用连续的内存
    • 通过数字下标获取元素
  • js数组特征：
    • 存储元素类型可以不同
    • 内存不一定连续，对象随机存储
    • 不是通过数字下标而是通过字符串下标获取元素，所以数组可以有任何key，比如
  1. let arr = [1,2,3];
  2. arr['xx'] = 11;

创建数组

  • 新建
  1. let arr = [1,2,3];
  2. let arr = new Array(1,2,3);  // 元素
  3. let arr = new Array(3); // 长度
  • 字符串 -> 数组
  1. let arr = '1,2,3'.split(','); // ["1", "2", "3"]
  2. let arr = '123'.split(''); // ["1", "2", "3"]
  3. let arr = Array.from(123); // ["1", "2", "3"]
  • 数组 -> 字符串
  1. let arr = [1, 2, 3];
  2. let str = arr.join('-'); // "1-2-3",  默认以","连接
  3. arr.toString(); // "1,2,3"

  • 伪数组

    • 伪数组的原型链中没有数组的原型，没有数组的共有属性
  1. let arr = document.querySelectorAll('div'); // 返回的是伪数组
  • 合并两个数组，得到新数组，不改变原数组
  1. let arr1 = [1,1];
  2. let arr2 = [2,2];
  3. arr1.concat(arr2); // [1, 1, 2, 2]
  • 截取数组的一部分，得到新数组，不改变原数组
  1. let arr = [1,2,3,4];
  2. arr.slice(1); // [2, 3, 4]
  3. arr.slice(0); // [1,2,3,4], 用于复制一个数组，js只提供浅拷贝
  4. arr.slice(); // [1,2,3,4]

增删改查

  • 增

    • 从头部增加

      1. arr.unshift(item1, item2) // 修改 arr, 返回新长度

    • 从尾部增加

      1. arr.push(item1, item2) // 修改 arr, 返回新长度

    • 从中间增加

      1. arr.splice(index, 0, 'x'); // 在 Index 处插入 'x'
      2. arr.splice(index, 0, 'x', 'y'); // 在 Index 处插入 'x', 'y'

  • 删

    • 从头部删除

      1. arr.shift()  // arr被修改，并返回被删元素

    • 从尾部删除

      1. arr.pop()  // arr被修改，并返回被删元素

    • 从中间中间元素

      1. // splice 会返回被删数组
      2. arr.splice(index, 1) // 删除 index 处的一个元素
      3. arr.splice(index, 1, 'x') // 删除 index 处的一个元素并在删除处添加 'x'
      4. arr.splice(index, 1, 'x', 'y') // 删除 index 处的一个元素并在删除处添加 'x', 'y'

    • delete 删除

      1. // 对象一样的方法
      2. // 数组长度不变
      3. let arr = ['a', 'b', '3'];
      4. delete arr['0'];
      5. arr // [empty, "b", "3"]

    • 直接改length, 最好不用

      1. let arr = [1, 2, 3, 4]; 
      2. arr.length = 1;
      3. arr // [1]

  • 改

    • 直接改

      1. let arr = [1, 2, 3, 4]; 
      2. arr[0] = 'a';

    • 反转顺序 ```javascript arr.reverse(); // 改变原数组

// 反转字符串 let s = ‘abc’; s.split(‘’).reverse().join(‘’); // “cba”

  2.    - 使用 sort 自定义排序
  3. ```javascript
  4. // 默认从小到大排序
  5. let arr = [5, 4, 3, 2, 1];
  6. arr.sort(); // [1, 2, 3, 4, 5]
  8. // 自定义排序 arr.sort(fn)
  9. // fun 返回：正数， 0， 负数
  10. arr.sort((a, b) => {
  11.     return b-a;
  12. }) // [5, 4, 3, 2, 1]
  14. // 打乱原数组顺序
  15. arr.sort(function(a, b){
  16.     return 0.5 - Math.random();
  17. });
  • 查
    • 查看单个属性 ```javascript let arr = [‘a’, ‘b’, ‘c’]; arr[0]

// 索引越界 arr[100] === undefined // true arr[-1] === undefined // true

// 查找某个元素是否在数组里 arr.indexOf(item); // 存在返回索引，不存在返回 -1

// 使用条件查找元素 arr.find(item => item%2 === 0); // 返回第一个偶数

// 使用条件查找元素的索引 arr.findIndex(item => item%2 === 0); // 返回第一个偶数的索引

  1. <a name="RPMRP"></a>
  2. ### 遍历数组
  4. - for 循环遍历数组
  5. ```javascript
  6. let arr = [1, 2, 3];
  7. arr.x = 'xxx';
  8. // 查看所有属性名
  9. Object.keys(arr); // ["0", "1", "2", "3", "4", "x"]
  11. // for循环遍历
  12. for(let i = 0; i < arr.length; i++){
  13.     console.log(`${i}: ${arr[i]}`); // 由于属性值 'x' 的下标不是数字，不会改变 arr.length，所以不会被打印出来
  14. } 
  15. // 0: 1
  16. // 1: 2
  17. // 2: 3
  • 用 forEach 遍历数组（推荐）
  1. let arr = [1, 2, 3];
  2. arr.forEach(function(item, index){
  3.     console.log(`${index}: ${item}`)
  4. });
  5. // 0: 1
  6. // 1: 2
  7. // 2: 3

手动实现 forEach

  1. let arr = ['a', 'b', 'c'];
  2. function forEach(array, fn) {
  3.     for (let i = 0; i < array.length; i++) {
  4.         fn(array[i], i, array);
  5.     }
  6. }
  7. forEach(arr, function(item, index, array){
  8.     console.log(item, index, array);
  9. })
  10. // a 0 ["a", "b", "c"]
  11. // b 1 ["a", "b", "c"]
  12. // c 2 ["a", "b", "c"]

数组变换

arr-translate.png

  • map：n 变 n
    将数组中每个值传入函数中，返回处理后的值
  1.  // 题1：将数字转换为星期
  2. let arr = [0,1,2,2,3,3,3,4,4,4,4,6];
  3. let arr2 = arr.map((item)=>{
  4.     let num2week = {'0': '周日', '1': '周一', '2': '周二', '3': '周三', '4': '周四', '5': '周五', '6': '周六'};
  5.     return num2week[item];
  6. });
  7. console.log(arr2); // ['周日', '周一', '周二', '周二', '周三', '周三', '周三', '周四', '周四', '周四', '周四','周六']
  • filter: n 变 m (m < n)
    将数组中每个值传入函数中，返回值为布尔值，true则保留，false则去掉
  1.  // 题2：输出大于60的数
  2. let scores = [95,91,59,55,42,82,72,85,67,66,55,91]
  3. let scores2 = scores.filter((item) => {
  4.     return item > 60; 
  5. })
  6. console.log(scores2) //  [95,91,82,72,85,67,66, 91]
  • reduce：n 变 1
  1. // 题3：算出所有奇数之和
  2. let numbers = [95,91,59,55,42,82,72,85,67,66,55,91]
  3. let sum = numbers.reduce((sum, n)=>{
  4.     return sum + (n % 2 === 0 ? 0:n);
  5. },0) // 0 为 sum的初始值
  6. console.log(sum) // 奇数之和：598