亚洲午夜视频在线,亚洲图色网站,一级黄色a视频

[轉帖]分享ES6 常用的幾個方法

freeflydom

2023年5月25日 17:20 本文熱度 655

1.什么是ES6 ？

ESMAscript 6.0(以下簡稱ES6)是 Javascript 語言的下一代標準，已在2015年6月正式發布。它的目標：是使Javascript語言可以編寫復雜且大型應用，成為企業級開發語言。ES6既是一個歷史名詞，也是一個泛指，泛指涵蓋了ES2015、ES2016、ES2017等的下一代Javascript語言標準。 標準委員會規定每年6月正式發布一次標準，作為當年的正式版本。

2.了解Babel轉碼器

Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5，從而在老版本的瀏覽器中執行。不過現在的開發當中幾乎不會用到了；所以說：你可以使用ES6的方式編寫程序，也不用擔心現有的環境是否支持。

// 轉碼前
input.map(item => item + 1);

// 轉碼后
input.map(function(item){
return item + 1;
})

上面的原始代碼用了箭頭函數，Babel將其轉為普通函數，就能在不支持箭頭函數的 Javascript環境執行了。目前各大技術棧（React/Vue/Angular）的腳手架項目都在使用babel作為默認的語言標準轉碼工具，可以在.babelrc文件中進行更多的自定義配置。

我們也可以通過官方提供的REPL在線編譯器來體驗Babel轉碼。

3.變量的解構賦值

ES6允許按照一定模式，從不同類型數據中提取值，然后對變量進行賦值，并且快讀從對象或者數組里面獲取一些數據，這杯稱為：解構賦值

3.1 數組的解構賦值

在之前；我們給變量賦值只能直接指定一個變量值

let a = 12;
let b = 11;
let c = 10;

在ES6之后，就可以寫成這樣的

let [a, b, c] = [1, 2, 3];

上面的代碼表示，可以從數組中提取數值，按照對應的位置，對變量賦值。本質上，這種寫法屬于"匹配模式"，只要等號兩邊的模式相同，左邊的變量就會被賦予對應的值，而解構賦值允許指定的默認值。

3.2 對象的解構賦值

對象的解構與數組有一個重要的不同。數組的元素是按次序排列的，變量的取值由它的位置決定；而對象的屬性沒有次序，變量必須與屬性同名，才能取到正確的值：

語法：let {key1, key2, ...} = {鍵值對1, 鍵值對2, ...}

 const JsonData = {
      name: "小彭",
      id: 727,
      status: "OK",
      data: [867, 5309],
      otherData1: 18,
      otherData2: ['www', 'itsource', 'cn'],
      otherData3: {
        a: 1
  }
}
console.log(JsonData.name,JsonData.id);

3.3 函數參數的解構賦值

函數的參數也可以使用解構賦值；并且也一樣可以使用默認值。函數sum()的參數表面上是一個數組，但在傳入參數的那一刻，數組參數就被解構成變量a和b。

function sum([a,b]){
  return a + b;
}
sum([1,7]);

4.展開運算符

展開運算符也叫擴展運算符。

語法： (...);

除此之外，擴展運算符也可以展開數組和對象；并且可以對數組和對象進行淺拷貝、合并的功能；也可以將偽數組轉換為真數組。

5.模板字符串

對于傳統的Javascript語言，輸出一個模板字符串通常是這樣寫的。（此次用了jQuery的方法）

$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);

這種寫法相當的繁瑣，所以在ES6引入了模板字符串來解決繁瑣等的諸多問題。

$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);

模板字符串是增強版的字符串，用反引號(``)標識。它可以當作普通字符串使用，也可以用來定義多行字符串，或者在字符串中嵌入變量。模板字符串，可以換行，也可以在字符串中直接輸出變量。

6.對象的簡潔寫法

ES6中對象的屬性和方法都有簡寫形式。 它的寫法就是如果鍵名和鍵值的屬性名是一樣時，可以只寫一個。對于函數來說；可以省略冒號（:）和function。

let name = "小彭";
let age = 22;
let gender = "male";

let person = {
    name,
    age,
    gender,
    // 省略 冒號(:)和function
    hobby () {
          console.log("愛好和平");
   },
    color () {
          console.log("藍色");
    }
}
console.log(person);

7.class

7.1 class的由來

在ES5中如果想要寫一個類，傳統的寫法就是使用構造函數。另外可以定義靜態方法。但是這種寫法跟傳統的面向對象語言的差異很大，很容易讓初學者感到困惑；由此ES6提供更接近傳統語言的寫法，引入了class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。

// 類(構造函數)
function Person(name, age){
// 定義實例屬性
   this.name = name;
   this.age = age;
}
// 添加原型方法
Person.prototype.show = function () {
       console.log("我是原型方法");
 }
// 創建實例對象
let per = new Person("花開富貴", 22);
// 添加靜態方法。靜態方法是屬于類自己的，實例對象調用不了。
 Person.say = function (){
     console.log("我是靜態方法");
 }

7.2 class的寫法

ES6的class可以看作是一個語法糖，它的絕大部分功能，ES5都可以做到，新的class寫法只是讓對象原型的寫法更加清晰、更像面向對象編程的語法而已。

class類的命名規則是大駝峰，并且class類里面有一個構造器，等價于構造函數；如果沒有構造器，在實例化的時候會自動創建一個空的構造器。

class Test{
// 一般固定的屬性會放在外層
  eye = 2;
  leg = 2;

constructor(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

    show () {
        console.log("原型方法");
}
// 靜態方法
    static () {
        console.log("靜態方法");
}
}
// 實例化對象
let obj = new Test("小彭", 22, "male");
console.log(obj);

7.3 class 繼承

使用ES6 ，class 語法來改寫之前寄生組合式繼承的代碼（使用extends關鍵字）；其中，super是父類構造函數，ES6規定，子類構造函數中必須執行一次super函數。

繼承中的屬性或者方法查找原則：就近原則；先看自身有沒有這個屬性或者方法，有則用；如果沒有，則查找父類，若有，則用。

// 狗狗繼承動物
class Animal {
//構造器
eye = 2;
constructor(name, age){
     this.name = name;
     this.age = age;
}
        
color () {
     console.log("毛發細潤呈白");
}

static hobby() {
     console.log("躺平");
  }
}
        
class Dog extends Animal {
    // 構造器
    // ES6 要求，子類的構造函數必須執行一次super函數。
    constructor(name,age) {
        super(name,age);
   }
 }

let dogs = new Dog("富貴", 2);
console.log(dogs);

8.ES6 模塊化

什么是模塊化？一個 JS 文件就是一個模塊。

模塊功能主要由兩個命令構成：import和export

import命令用于導入其他模塊提供的功能
export命令用于規定模塊的對外接口

8.1 語法一

導出/暴露：

export 要導出的內容1

export 要導出的內容2

export 要導出的內容3

導入：

import{導入的內容1, 導入的內容2, 導入的內容3，....} from '文件模塊路徑'

步驟：

先建立文件，兩個為js，一個為HTML

將要寫或者要用的js代碼放在其中一個文件中，我是放在了index.js中。并且要在導出的代碼塊前面加上export

將index.js文件引入到另外一個js文件中，導入的時候路徑和文件后綴名不能省略，更不能本地打開，要通過live Serve打開。

最后再把這個b.js文件引入到html中，但是在script標簽類型必須是module，否則會報錯。

8.2 語法二

語法二的引用過程和語法是一模一樣的。

導出：export default{ 要導出的內容 }

導入：import 變量 from '文件模塊路徑'

使用export default命令是為了給模塊指定默認的導出，import時可以為其任意命名（一般導出和導入的命名保持相同）。顯然，一個模塊只能有一個默認導出，因此export default命令只能使用一次。所以，import命令后面才不用加大括號，因為只可能唯一對應export default命令。

8.3 ES6 模塊化的優勢

寫法之外，相較于ES5時代的模塊化方案，ES6模塊化有著諸多優勢。其中最主要的優勢是「靜態加載」。ES6 模塊的設計思想是盡量的靜態化，使得編譯時 就能確定模塊的依賴關系，以及輸入和輸出的變量。CommonJS和AMD模塊，都只能在運行時確定這些東西。比如，CommonJS模塊就是對象，輸入時必須查找對象屬性。

靜態加載，也叫編譯時加載，它的好處是：

（1）編譯時就能完成模塊加載，加載效率要比運行時高得多；

（2）使得「靜態分析」成為可能。有了它，就能進一步拓寬 Javascript 的語法，比如引入「宏」和「類型檢驗」這些只能靠靜態分析實現的功能。

—————————————————————————
原文鏈接：https://juejin.cn/post/7236672410626375735

該文章在 2023/5/25 17:24:34 編輯過

關鍵字查詢

常用

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv