原生JS基础知识

我的github

数组

• 数组的定义

  • 字面量 []

  • new Array(length || content)

    var arr1 = new Array(3);       // [empty × 3]
    var arr2 = new Array(1, 2, 3); // [1, 2, 3]
    

• Tips

  • 数组的所有方法都来自于 Array.prototype

  • 稀松数组( 空缺处补位undefined )

    var arr3 = [1, 2, , , , 3, 4, , ,]; // [1, 2, empty × 3, 3, 4, empty × 2]
    

• JS数组是基于对象的 , 溢出读写基本都不会报错 , 除非调用了数组上没有的方法

  var arr = [];
  console.log(arr[9]); // undefined
  

  var arr = [];
  arr[9] = 'abc';
  console.log(arr.length); // 10
  console.log(arr); // [empty × 9, 'abc'];
  

• es3.0数组常用的方法

  • 改变原数组

    • push底部压栈、pop底部弹栈、首部压栈unshift、首部弹栈shift、reverse逆转原数组

    • splice(pos, len, data): 从第pos位开始 , 截取len长度 , 返回切片, 且可在切口处添加新数据data

      var arr = [1, 2, 3, 5];
      arr.splice(3, 0, 4);
      console.log(arr); // [1, 2, 3, 4, 5]
      

    • pos可以为负, 系统内部归正的方法如下

      splice = function (pos) {
        pos += pos >= 0 ? 0 : this.length;
      }
      

    • sort排序方法

      • 基于冒泡排序 O(2^n)

      • 直接调用sort()是按照字符acsll码顺序排列

        // 最基础用法
        var arr = [3, 1, 4, 2, 6, -1, 9];
        arr.sort();
        console.log(arr); // [-1, 1, 2, 3, 4, 6, 9]
        
        // 稍变式
        var arr = [3, 1, 4, 2, 6, -1, 10];
        arr.sort();
        console.log(arr); // [-1, 1, 10, 2, 3, 4, 6]
        

      • 支持传入带两个形参的函数来自定义排序规则, 函数返回值为正数则将后面的数放在前, 否则不动

        var arr = [3, 1, 4, 2, 6, -1, 10];
        arr.sort(function (x, y) {
          return x - y;
        });
        console.log(arr); // [-1, 1, 2, 3, 4, 6, 10]
        

      • 实际应用 : 给对象数组排序

        var liu = {
          age: 18
        }
        var li = {
          age: 20
        }
        var wang = {
          age: 30
        }
        var arr = [li, liu, wang]
        arr.sort(function (x, y) {
          return x.age - y.age
        })
        

      • 将有序数组乱序

        var arr = [1, 2, 3, 4, 5, 6, 7];
        arr.sort(function (x, y) {
          return Math.random() - 0.5; // [0, 1) --> [-0.5, 0.5)
        });
        console.log(arr);
        

  • 保持原数组

    • concat拼接数组或字符串

    • toString转化为字符串

    • slice(start, end)

      • 传递俩参数 : 从start位截取到end位 , 返回切片数组

      • 传递一个参数 : 从start位截取到最后 , 返回切片数组

      • 不传递参数 : 空截 , 返回整个数组 , 可应用于将类数组转化为数组

    • join是数组的方法 , 和字符串的split方法可逆 , 如果不传递参数则按照逗号拼接

      var arr = [1, 2, 3, 4],
      str = arr.join("-");
      console.log(str); // "1-2-3-4"
      

    • split是字符串的方法 , 和数组的join方法可逆

      var arr = [1, 2, 3, 4],
      str = arr.join("-"),
      newArr = str.split("-");
      console.log(str); // "1-2-3-4"
      console.log(newArr); // ["1", "2", "3", "4"]
      

思考问题

• 给定字符串 “alibaba”、“baidu”、“tengxun”、“toutiao” , 将他们拼接成一个长字符串

// 由于字符串存储于栈内存 , 而栈内存具有FILO的特点 , 故直接操作字符串拼接栈内存的方式效率教低 , 故利用散列结构操作堆内存 , 效率较高

var arr = ["alibaba", "baidu", "tengxun", "toutiao"],
  str = arr.join("");

类数组

• 属性要为索引( 数字 )属性

• 必须有length属性

• 最好加上push方法

• 一旦加上splice方法 , 类数组就会长得很像数组

var obj = {
  "0" : 'a',
  "1" : 'b',
  "2" : 'c',
  "length" : 3,
  "push" : Array.prototype.push,
  "splice" : Array.prototype.splice
}
obj.push("d");
console.log(obj); // {0: "a", 1: "b", 2: "c", 3: "d", length: 4, push: ƒ}

• 可以利用属性名模拟数组的特性

• 可以动态地增长length属性

• 如果强行让类数组调用push方法 , 则会根据length属性的值进行属性的扩充或覆写对应属性名的值

  /**
  * alibaba题目 ( 需要懂得push方法的内部实现方法 )
  */
  
  var obj = {
    "2" : "a",
    "3" : "b",
    "length" : 2,
    "push" : Array.prototype.push
  }
  obj.push('c');
  obj.push('d');
  console.log(obj);