JavaScript 知識總結（一）

阿新 • • 發佈：2021-11-08

1.基本型別

Number(數值型別)
Null(Null型別)
Boolean(布林)
Undefined(未定義)
String(字串型別)
Symbol(Symbol型別)
注：Symbol是ES6引入了一種新的原始資料型別，表示獨一無二的值。

2.引用型別

Object(物件)
Array（陣列）
Function(函式)

3.splice、split、slice、substring

splice()向陣列新增或者刪除
比如：刪除splice(i，1) 在某迴圈中刪除一個數值；在陣列第幾個新增splice(i,0,'新增老婆')
split()把字串切割成陣列，如果是數值型別需要將轉成字串型別

slice()在陣列中讀取元素,擷取字串,不改變原陣列
let arr = ["帥", "很帥", "太帥了", "帥到生活不用自理", "來個老婆"];
let get = arr.slice(1,3);
console.log(get) //['很帥', '太帥了']
substring()擷取字串
let str = '啊！！！你好帥啊，能加個好友？';
let get = str.substring(4,8)
console.log(get) //你好帥啊

4.Math是一個內建物件，擁有一些數學常數屬性和教學函式方法，用於Number型別

Math.abs(x) 返回一個數的絕對值
Math.abs('-1'); // 1
Math.abs(-2); // 2
Math.abs(null); // 0
Math.abs("string"); // NaN
Math.abs(); // NaN

Math.ceil(x) 返回大於一個數的最小整數，向上取整
Math.floor(x) 返回小於一個數的最大整數，向下取整
Math.random() 返回隨機數
Math.round(x) 返回四捨五入的整數

5.try...catch語句標記要嘗試的語句塊，並指定一個出現異常是丟擲的響應

  try {
    nonExistentFunction();
  } catch (error) {
    console.error(error);
    // expected output: ReferenceError: nonExistentFunction is not defined
    // Note - error messages will vary depending on browser
  }

6.filter()，過濾一個數組篩選出符合元素組成一個新陣列,不改變原陣列，不對空數進行檢測；

  let arr = [12,20,'',16,88,'']
  let val = arr.filter((item) => item)
  console.log(val) //[12,20,16,88]

7.map()，陣列中的元素為原始陣列元素呼叫函式處理後的值，不改變原陣列，不對空數進行檢測；

  let arr = [12,20,'',16,88,'']
  let val = arr.map((item) => Number(item + 1))
  console.log(val) //[13, 21, 1, 17, 89, 1]

8.call()、apply()、bind()

call()方法使用一個指定this值和單獨給出的一個或多個引數來呼叫一個函式；

  function fuc(name,food){
    this.name = name || 'Tom';
    this.food = food;
  }
  function real(name,food){
    fuc.call(this,name,food)
    console.log(`${name}正在吃${food}`)
    this.yes = 'jia'
  }
  new real('Jamy','西瓜')

apply()呼叫一個具有給定this值的函式，以及以一個數組（或類陣列物件）的形式提供的引數；
注：apply和call的方法類似；區別一個是引數列表一個是陣列形式
bind()建立一個新的函式，在bind()被呼叫時，新函式的this被指定為bind()的第一個引數，其餘引數將作為新函式的引數，供呼叫時使用；

  let obj = {
    x: 99,
    getX: function (){
      return this.x
    }
  }
  let isX= obj.getX;
  console.log(isX()) //undefined
  let isY = isX.bind(obj);
  console.log(isY()) //99

9.繼承方法
注：當談到繼承時，javascript只有一種結構：物件。
每個例項物件都有一個私有屬性（稱為__proto__ ）指向他的建構函式的原型物件（prototype）。
該原型物件也有一個自己的原型物件，層層向上直到一個物件的原型物件為null。
根據定義，null沒有原型，並作為原型鏈的最後一個環節。
父類共用：

 function func(){
  this.a = 1;
  this.b = 2;
  this.add = function(){
     return this.a + this.b
  }
}

原型鏈繼承

let pro = new func();
func.prototype.b = 3;
func.prototype.c = 5;
console.log(pro.add()) //3
console.log(pro.d) //undefined

繼承單一，子類無法向父類傳值
新例項共享父類例項

構造繼承

function cat(){
  func.call(this)
  this.yes = 'yes'
}
let pro = new cat();

可以實現多繼承，沒有繼承父類原型屬性
無法實現函式的複用，call多了會臃腫，影響效能問題

例項繼承

function pro(name){
  let Obj = new func();
  Obj.c = 13;
  return pro;
}
let obj = new pro();

不支援多類繼承，繼承父類例項,不是子類例項

拷貝繼承

function deepCopy (target = {}) { //深拷貝繼承
    let anyVal = new func();
    if (typeof anyVal !== 'object' || anyVal === null) return anyVal;
    for (let i in anyVal) {
        const val = anyVal[i];
        if (isType('array', val)) {
            target[i] = deepCopy(val, [])
        } else if (typeof val === 'object') {
            target[i] = deepCopy(val);
        } else {
            target[i] = val;
        }
    }
    return target;
}
function isType (type, anyVal) {
    let newType = type.substring(0, 1).toUpperCase() + type.substring(1);
    return Object.prototype.toString.call(anyVal) === `[object ${newType}]`;
}
let obj = new deepCopy()

效率低，記憶體佔用高

組合繼承

function pro(){
  func.call(this)
  this.a = 10
}
pro.prototype = new func();
let obj = new pro();

呼叫了兩次父類函式構造，子類建構函式會代替父類建構函式

寄生組合繼承

function pro(){
  func.call(this)
  this.a = 10
}
let Obj = function() {}; //建立一個空沒有例項的函式
Obj.prototype = func.prototype;
pro.prototype = new Obj();
let obj = new pro()

該繼承為常用，解決了很多繼承的缺點；