【Web】ES6新特性-有解無憂

ECMAScript簡介

ECMAScript6.0 ，簡稱 ES6 ，ECMAScript 是一種由 ECMA 國際通過 ECMA-262 標準化的腳本，為 JavaScript 語言的下一代標準，在 2015 年 6 月正式發布，

類比于 Java ，經典程度堪比 JDK 1.8 版本，
但是兩者之間的區別， JDK 是具體實作，而 ES 就相當于 JSR 規范，

JSR，是 Java Specification Requests 的縮寫，意思是 Java 規范提案，是指向 JCP(Java Community Process) 提出新增一個標準化技術規范的正式請求，

從層級上看， ECMAScript 是一種規范/介面，JavaScript 是規范的具體實作，

let關鍵字

let不會作用到 {} 外，var 會越域到 {} 外，且 var 宣告的變數有域提升的特性，
var 可以多次宣告同一變數，使用 let 則會報錯，只能在作用范圍內宣告一次，
var 定義之前可以使用，let 定義之前不可使用，關聯域提升特性，
let 的宣告之后不允許改變，相當于 const 宣告的變數，

解構運算式

解構運算式，是一種可以用來簡化變數賦值的新語法，

支持 let arr = [1,2,3]; let [a,b,c] = arr; 語法
- 該語法的特性，能夠更方便地在變數之間進行值傳遞，屬于陣列解構運算式
支持物件決議 const { name: abc, age, language } = person; 語法
- 該語法可以將一個 person 物件其中的 name 屬性賦值給 abc 物件，也就是將 name 屬性值對應賦值給 abc ，而不是需要一定相同的屬性名稱，
- 這個程序類似于一種 JsonProperty 的轉換功能，但是不同的是 JsonProperty 注解提供的只是給原物件起一個別名，而不像物件解構運算式是將物件欄位賦值給新的陳述句，

字串擴展

在 ES6 中，對于字串新增了一些擴展，主要是新增部分為字串 API 以及字串模板、變數值插入，
字串 API 新增的主要常用的有：str.startsWith("") 、str.endsWith("") 、str.includes("") 幾個，
字串模板，主要用來輸出一些特定格式的字串，保留在編輯器中的換行空格等字符，字串模板的使用方式很簡單，只需要將目標模板使用包起來即可，
變數值插入，類似于 Java 中的 @Value 注解所需要使用的運算式，格式為 ${} ，我們可以在 { } 中使用變數、運算式、函式，均可以輸出對應的計算結果，

函式優化

在 ES6 中，新增了一些函式的優化，主要有：

函式默認值

# 原始的默認值的寫法
function add1(a, b) {
  b = b | 1
  return a + b
}

# ES6 新增的寫法
function add1(a, b = 2) {
  return a + b
}

不定引數

function fun(...values) {
	console.log(values.length);
}

箭頭函式

var print = obj => console.log(obj);
# 呼叫
print("abc");

物件優化

物件函式

Object.keys(obj);
Object.values(obj);
Object.entries(obj);
# assign 函式將其他物件添加到目標物件中
Object.assign(target, obj1, obj2);

物件宣告簡寫

# 物件的屬性名和變數名一致，可以直接使用簡寫宣告物件
const obj1 = { age, name };

物件拓展運算子

# 該符號可以將物件的所有屬性取出來，可以用于物件的深拷貝、覆寫
let person = { name: "Real", age: 20 }
let someone = { ...person}

陣列優化

在 ES6 中，陣列新增了 Map 和 Reduce 方法，

map 方法：接收一個函式，將原陣列中的所有元素用這個函式處理后放入新陣列后回傳，

arr = arr.map(item=> item*2);

reduce 方法：為陣列中的每個元素執行回呼函式，不包含陣列中被洗掉或者未被賦值初始化的元素，

/**
* 1、previousValue （上一次呼叫回呼回傳的值，或者是提供的初始值（initialValue））
* 2、currentValue （陣列中當前被處理的元素）
* 3、index （當前元素在陣列中的索引）
* 4、array （呼叫 reduce 的陣列）
*/
arr.reduce(callback,[initialValue])

promise異步編排

<script>
  //1、查出當前用戶資訊
  //2、按照當前用戶的id查出他的課程
  //3、按照當前課程id查出分數
  // $.ajax({
  //     url: "mock/user.json",
  //     success(data) {
  //         console.log("查詢用戶：", data);
  //         $.ajax({
  //             url: `mock/user_corse_${data.id}.json`,
  //             success(data) {
  //                 console.log("查詢到課程：", data);
  //                 $.ajax({
  //                     url: `mock/corse_score_${data.id}.json`,
  //                     success(data) {
  //                         console.log("查詢到分數：", data);
  //                     },
  //                     error(error) {
  //                         console.log("出現例外了：" + error);
  //                     }
  //                 });
  //             },
  //             error(error) {
  //                 console.log("出現例外了：" + error);
  //             }
  //         });
  //     },
  //     error(error) {
  //         console.log("出現例外了：" + error);
  //     }
  // });


  //1、Promise可以封裝異步操作
  // let p = new Promise((resolve, reject) => { //傳入成功決議，失敗拒絕
  //     //1、異步操作
  //     $.ajax({
  //         url: "mock/user.json",
  //         success: function (data) {
  //             console.log("查詢用戶成功:", data)
  //             resolve(data);
  //         },
  //         error: function (err) {
  //             reject(err);
  //         }
  //     });
  // });

  // p.then((obj) => { //成功以后做什么
  //     return new Promise((resolve, reject) => {
  //         $.ajax({
  //             url: `mock/user_corse_${obj.id}.json`,
  //             success: function (data) {
  //                 console.log("查詢用戶課程成功:", data)
  //                 resolve(data);
  //             },
  //             error: function (err) {
  //                 reject(err)
  //             }
  //         });
  //     })
  // }).then((data) => { //成功以后干什么
  //     console.log("上一步的結果", data)
  //     $.ajax({
  //         url: `mock/corse_score_${data.id}.json`,
  //         success: function (data) {
  //             console.log("查詢課程得分成功:", data)
  //         },
  //         error: function (err) {
  //         }
  //     });
  // })

  function get(url, data) { //自己定義一個方法整合一下
    return new Promise((resolve, reject) => {
      $.ajax({
        url: url,
        data: data,
        success: function (data) {
          resolve(data);
        },
        error: function (err) {
          reject(err)
        }
      })
    });
  }

get("mock/user.json")
  .then((data) => {
    console.log("用戶查詢成功~~~:", data)
    return get(`mock/user_corse_${data.id}.json`);
  })
  .then((data) => {
    console.log("課程查詢成功~~~:", data)
    return get(`mock/corse_score_${data.id}.json`);
  })
  .then((data)=>{
    console.log("課程成績查詢成功~~~:", data)
  })
  .catch((err)=>{ //失敗的話catch
    console.log("出現例外",err)
  });

</script>

模塊化

模塊化就是把代碼進行拆分，方便重復利用，類似于 Java 中的 import 導包；要使用一個包，必須先匯入進來，而 JS 中沒有包的概念，對應的是模塊，
模塊功能主要由兩個命令構成：export 和 import

export 命令用于規定模塊的對外介面
import 命令用于匯入其他模塊提供的功能

export 不僅可以匯出物件，還可以匯出變數、函式、陣列等等一切 JS 中的變數，

user.js

var name = "jack"
var age = 21
function add(a,b){
  return a + b;
}
// 匯出變數和函式
export {name,age,add}

hello.js

// export const util = {
//     sum(a, b) {
//         return a + b;
//     }
// }

// 匯出后可以重命名
export default {
  sum(a, b) {
    return a + b;
  }
}
// export {util}

//`export`不僅可以匯出物件，一切JS變數都可以匯出，比如：基本型別變數、函式、陣列、物件，

main.js

import abc from "./hello.js"
import {name,add} from "./user.js"

abc.sum(1,2);
console.log(name);
add(1,3);

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/526016.html

標籤：JavaScript

上一篇：記錄--UNI-APP安卓本地打包詳細教程（保姆級）

下一篇：谷歌瀏覽器插件MV3報錯"Uncaught ReferenceError: window is not defined"