前端週記1--JS

基礎知識點

選中html物件 domcument.documentElement
選中body或同級元素，直接用documentElement.body(或其他標籤名就好)
API
- Object
  - 方法
    - keys()：傳入一個json物件，返回該物件的所有key組成的陣列
事件引數物件 event
- 方法
  - stopPropagation()：阻止事件冒泡
  - stopImmediatePropagation()：取消事件新增效果，使第一個事件之外新增的所有事件失效
  - preventDefault()：阻止事件預設行為
- 屬性
  - target：點選的物件
  - currentTarget: 事件繫結的物件

e.currentTarget=====事件繫結的物件,e.target=====點選的物件（簡單來說，就是如果事件繫結的物件內部還有子元素，點選該子元素也會觸發事件，此時target指的就是子元素，而currentTarget則是事件繫結物件本身（ps：個人理解））
複製程式碼

ES6

變數
- 宣告關鍵字
  - var的缺點
    1. 重複宣告不報錯
    2. 無法限制修改
    3. 沒有塊級作用域
    4. 定義全域性時會掛載全域性物件window上
  - 對應ES6的宣告方式let const
    1. 支援塊級作用域
    2. 重複宣告會報錯
    3. 省略閉包
    4. 不會汙染window
- 宣告方式
  - 解構賦值
    - 實現前提
      1. 左右結構必須一致
      2. 右側格式必須符合規範
      3. 必須宣告同時進行初始化
函式
- 箭頭函式 () => {}
  1. 在只有一個引數時可以省略()：e=> {}
  2. 在函式體只有一個return時可以省略{}：()=>return;
  3. 箭頭函式中的this在建立時就會固定，而不會再出現一定指向呼叫物件的現象
- 函式引數
  1. 引數擴充套件：
    1. 引數收集：...args
    2. 陣列展開：...arr
  2. 預設引數
    1. es6支援在函式定義時可以以給形參初始化的方式進行引數預設，若函式呼叫時未傳入該引數，則依照預設值進行函式呼叫
陣列
- map 對映一對一
  - 傳入一個函式，返回陣列內每個元素操作後組成的新陣列
- reduce 彙總多對一
  - 三個形參
    - temp 中間值--即上一次計算的結果值，第一次的值因為沒有計算，所有值等於陣列的第一個元素
    - item 項值從陣列第二項開始
    - index 項索引從1開始
  - 返回一個總值
- filter 過濾器
  - 通過return 布林值進行決定陣列是否保留
  - 返回一個陣列
字串
- 方法
  - startsWith(str)：首子字串匹配返回boolean
  - endsWith(str)：尾子字串匹配
- 字串模板
  - 引入``定義str的方式，仿用資料庫，存在${}佔位符的寫法
```
eg:
let addStr = `c`;
let str = `ab${addStr}d`;
console.log(str);//abcd
複製程式碼
```
json
- JSON物件
- json簡寫
  1. key-value相同時可以只寫一個；
  2. 內部存在方法可以省略: function部分；
- 方法
  - JSON.stringify(json); json物件序列化，即轉化成字串
  - JSON.parse(); json型別字串轉換成json物件
  - encodeURIComponent(json型別的字串)
- json標準寫法：
  1. key必須用""包裹
  2. 只能使用雙引號
ES6的物件導向
- 新增class關鍵字
  - 內部定義
    - constructor方法（構造器）
    - 普通方法
  - 意義
    - 將構造器和類分開了
    - 方法可內部定義，避免了原型情況的向外暴露
- 新增extends關鍵字
  - super方法指向父類
Promise(承諾)
- 意義：
  - 消除非同步操作：本質上是底層封裝非同步操作
  - 其實就是簡化非同步請求的寫法：最好用到解構賦值
- 使用：
  - 原生
    1. new建立Promise例項
    2. 構造傳參匿名函式，函式傳參resovle，reject（其實就是成功或失敗時呼叫的函式，在then方法呼叫時傳入）
```
let p = new Promise(function (resovle,reject){
    # 請求
});
p.then(function (arr){
    # 成功的回撥函式
},function(err){
    # 失敗的回撥函式
});
複製程式碼
```
  - jq中封裝
    1. jq中的ajax是有返回值的，其實就是一個Promise的例項
    2. 而Promise的類方法存在all+then
      - all()傳參是Promise的例項陣列arr
      - then()傳參是成功resovle和失敗reject的回撥函式，resovle的引數是一個陣列，內容是arr中每一個請求的返回資料(ps:可以通過解構賦值進行簡單賦值);
      - 當所有請求成功，則會執行resovle函式；失敗則執行reject函式;
- 方法
  - then 傳參為成功和失敗兩個回撥函式
  - all
  - race 競賽有一個成功及成功，但存在對效能的消耗，因為對一個資源多次請求
- 有Promise之後的非同步
```
Promise.all([$.ajax請求陣列]).then(results=>{
      # 成功的回撥函式
}, err=>{
      # 失敗的回撥函式
});
複製程式碼
```
generator （生成器）
- 特點
  1. 相對於函式執行到底的特點，生成器生成函式可以中斷
  2. 生成器函式的函式名前存在*號
  3. 生成器函式執行後只會產生一個物件，該物件存在next方法，在函式體內從上至下執行到yield命令就停止；
- 本質：其實就是建立了多個函式，每次呼叫next方法即是呼叫一個函式
- yield
  - 特點
    - 既可以傳參，又可以賦值
      1. 返回值是一個json物件{value:;done:boolean}
      2. 可以在next呼叫進行傳參

前端週記1--JS

基礎知識點

ES6

相關文章