ES6的基礎知識(一)

taohonghui 發布于2019-08-23 15:55 / 2381人閱讀

摘要：上面的不支持變量提升此處報錯不能重復聲明報錯支持塊級作用域報錯除了的功能還不能更改聲明后的值不過可以對聲明的對象增加屬性和更改屬性值報錯小張小紅解構數組解構賦值對象解構賦值對解構賦值的值自定義名稱默認賦值若是給賦值將覆蓋默認值省略賦值展開運

github上面的demo

let&const

let不支持變量提升

 console.log(a); // 此處報錯
 let a = "a";

let不能重復聲明

 let a = "a";
 let a = "abc"; // 報錯

let支持塊級作用域

 if (true) {
   let a = "a";
 }
 console.log(a) // 報錯

 for (let i = 0; i < 5; i++) {
   setTimeout(() => {
     console.log(i); // 0 1 2 3 4
   });
 }

const除了let的功能,還不能更改聲明后的值,不過可以對聲明的對象增加屬性和更改屬性值

 const PI = 3.14;
 PI = 3.141; // 報錯

 const obj = {
   name: "小張"
 };
 obj.name = "小紅";
 obj.age = 25;

解構

{
  // 數組解構賦值
  let [a, b, c] = [123, "abc", { name: "xiaohong" }];
  console.log(a, b, c); // 123 "abc" { name: "xiaohong" }
}

{
  // 對象解構賦值
  let { name, age } = {
    name: "xiaohong",
    age: 25
  };

  console.log(name, age); // xiaohong 25
}

{
  // 對解構賦值的值自定義名稱
  let { name: myname, age: myage } = {
    name: "xiaohong",
    age: 25
  };

  console.log(myname, myage); // xiaohong 25
}

{
  // 默認賦值,若是給age賦值將覆蓋默認值
  let { name, age = 19 } = {
    name: "xiaohong"
  };

  console.log(name, age); // xiaohong 19
}

{
  // 省略賦值
  let [, , a] = [1, 2, 3];
  console.log(a); // 3
}

展開運算符

函數中使用展開運算符

 function test(a, b, c) {}
 let arr = [1, 2, 3];
 test(...arr);

數組中函數中使用展開運算符

 let [a, b, ...c] = [1, 2, 3, 4, 5];
 console.log(a, b, c); // 1 2 [ 3, 4, 5 ]

 let arr1 = [1, 2, 3];
 let arr2 = [...arr1, 4, 5];
 console.log(arr2); // [ 1, 2, 3, 4, 5 ]

類數組變量轉成數組

function test(a, b, c) {
   console.log([...arguments]);
 }
 test(1, 2, 4); // [1 2 4]

字符串

模板字符串:在這之前字符串拼接用+號來完成,現在用``和S{}即可代替字符串的拼接

 let name = "xiaohong", age = 25;
 let str = `我叫:${name},今年${age}歲了`;
 console.log(str); // 我叫:xiaohong,今年25歲了   

{
 // 自定義模板字符串的返回值
 let name = "xiaohong",
   age = 25;
 // ...rest作為參數只是放在最后
 function desc(string, ...rest) {
   let str = "";
   for (let i = 0, len = rest.length; i < len; i++) {
     str += string[i] + rest[i];
   }
   str += string[string.length - 1];
   return str.toLocaleUpperCase();
 }
 let str = desc`我叫:${name},今年${age}歲了`;
 console.log(str); // 我叫:XIAOHONG,今年25歲了
}

判斷字符串以某個字符串開頭

 let str = "hello world!";
 console.log(str.startsWith("h")); // true

判斷字符串以某個字符串結尾

 let str = "hello world!";
 console.log(str.endsWith("!")); // true

判斷字符創是否包含某個字符串

 let str = "hello world!";
 console.log(str.includes("hello")); // true

將字符串重復生成

 let str = "hello world!";
 console.log(str.repeat(3)); // hello world!hello world!hello world!

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/102550.html

ES6-7

摘要：的翻譯文檔由的維護很多人說，阮老師已經有一本關于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復雜性。 JavaScript Promise 迷你書（中文版）超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

mudiyouyou 2019-08-21 18:40 評論0 收藏0
前端小知識--TypeSript和JavaScript到底是什么關系？

摘要：想學好前端，真的要主動，然后對所有的英文文檔耐心一點。在年月日，國際組織發布了的第六版，該版本正式名稱為，但通常被稱為或者。自此，每年發布一次新標準。但保留了用于依賴注入的構造函數參數類型。必須在構造函數中聲明屬性，而不是在類的代碼體中。從 TypeScript 到 ES6 到 ES5 在我初學前端的很長一段時間，不愿意碰git，不愿意碰框架，總是嫌麻煩，連ES6也沒有怎么去弄明白...

sixleaves 2019-08-21 12:02 評論0 收藏0
前端基礎進階（十四）：es6常用基礎合集

摘要：在繼承的構造函數中，我們必須如上面的例子那么調用一次方法，它表示構造函數的繼承，與中利用繼承構造函數是一樣的功能。 showImg(https://segmentfault.com/img/remote/1460000009078532); 在實際開發中，ES6已經非常普及了。掌握ES6的知識變成了一種必須。盡管我們在使用時仍然需要經過babel編譯。 ES6徹底改變了前端的編碼風格，...

Ryan_Li 2019-08-21 18:31 評論0 收藏0
前端基礎進階（十五）：詳解 ES6 Modules

摘要：下載地址安裝一個好用的命令行工具在環境下，系統默認的非常難用，所以我個人比較推薦大家使用或者。下載地址安裝在命令行工具中使用查看版本的方式確保與都安裝好之后，我們就可以安裝了。前端基礎進階系列目錄 showImg(https://segmentfault.com/img/remote/1460000009654403?w=1240&h=272); 對于新人朋友來說，想要自己去搞定一個E...

Lowky 2019-08-21 18:31 評論0 收藏0
ES6零基礎教學_解析彩票項目-學習筆記（一）

摘要：彩票項目實戰學習記錄一完整走了一遍課程，覺得還不錯。支持正版人人有責零基礎教學解析彩票項目下面是項目課程的目錄路線一個項目分為三部分業務邏輯，自動構建系統，模擬數據和真實數據接口處理。彩票項目實戰學習記錄（一）完整走了一遍課程，覺得還不錯。總結: es6的知識點說得還算清楚，主要是為了了解和使用，不是深究，所以淺嘗即止即可，所以覺得還不錯。完整還原了項目開發的代碼設計和開發過...

blastz 2019-08-22 13:52 評論0 收藏0
經常會用到的es6的知識點

摘要：經常會用到的的知識點提到我們就來說說，也是誕生，它的初始名叫。又名，在，和大受重用。年，負責制定規范草案的委員會決定將定義新標準的制度改為一年一次出現。它們在規范的先前版本中被稱為模板字符串。它與數組非常相似，但是數據結構的成員都是唯一的。經常會用到的es6的知識點提到es6我們就來說說javascript，es6也是ES2015 1995：JavaScript誕生，它的初始名叫...

asce1885 2019-08-20 18:03 評論0 收藏0