主頁 > 企業開發 > ES6新特性總結

ES6新特性總結

2020-10-02 08:04:53 企業開發

ES6新特性總結

日常開發中寫的 JavaScript 代碼，會用到ES6的部分新特性，這篇博客總結了ES入門的知識點，供日常查閱使用，

1. let和const命令

var

ES6之前, 我們定義變數使用關鍵詞var. 但是var有個問題就是定義的變數很容易變成全域變數, 這并不是我們想看到的.比如:

for (var i = 0; i < 5; i++){
  console.log(i);
}

console.log(i) // 5

回圈中定義的i變數在回圈外也可以使用.

let

使用let宣告變數, 只在let命令所在的代碼塊中有效.

for (let i = 0; i < 5; i++){
  console.log(i);
}

console.log(i) // undefined

const

const 宣告的變數是常量，不能被修改，類似于java中final關鍵字

const a = 1
const a = 2 // 報錯: Assignment to constant variable.

2.字串擴展

在ES6中，為字串擴展了幾個新的API.

  • includes() : 回傳布林值，表示是否找到了引數字串;
  • startsWith() : 回傳布林值，表示引數字串是否在原字串的頭部;
  • endsWith() : 回傳布林值，表示引數字串是否在原字串的尾部.

字串模板

ES6中提供了`來作為字串模板標記，我們可以這么玩:

字串模板

在兩個 `之間的部分都會被作為字串的值，可以任意換行，

3. 解構運算式

什么是解構？ -- ES6中允許按照一定模式從陣列和物件中提取值，然后對變數進行賦值，這被稱為解構 (
Destructuring)，

3.1 陣列解構

比如有一個陣列：

let arr = [1, 2, 3]

之前我想獲取其中的值，只能通過角標，ES6可以這樣：

let arr = [1,2,3]
const [x,y,z] = arr;// x，y，z將與arr中的每個位置對應來取值
// 然后列印
console.log(x,y,z); // 1 2 3
const [a] = arr; //只匹配1個引數
console.log(a); // 1

3.2 物件解構

例如有一個person物件：

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}

我們可以這樣解構：

//  解構運算式獲取值
const {name,age,language} = person;
// 列印
console.log(name);
console.log(age);
console.log(language);

如果需要使用其他變數，需要額外指定別名：

{name : n} ：name 是 person 中的屬性名，冒號后面的 n 是解構后要賦值的變數，

4. 函式優化

在ES6中，對函式的操作做了優化，使得我們在操作函式時更加的便捷，

4.1 函式引數的默認值

在ES6之前，我們無法給一個引數設定默認值，我們只能采取變通的寫法：

 function add(a , b) {
    // 判斷b是否為空，為空就給默認值1
    b = b || 1;
    return a + b;
 }
  // 傳一個引數
  console.log(add(10));

現在可以這么寫：

function add(a , b = 1) {
  return a + b;
}
// 傳一個引數
console.log(add(10));

4.2 箭頭函式

ES6中定義函式的簡寫方式：
一個引數時：

var print = function (obj) {
  console.log(obj);
}
// 簡寫為：
var print2 = obj => console.log(obj);

多個引數：

//  兩個引數的情況：
var sum = function (a , b) {
  return a + b;
}
// 簡寫為：
var sum2 = (a,b) => a+b;

沒有引數：

//  沒有引數時，需要通過()進行占位，代表引數部分
let sayHello = () => console.log("hello!");
sayHello();

代碼不止一行，可以用 {} 括起來：

var sum3 = (a,b) => {
  return a + b;
}
// 多行，沒有回傳值
let sayHello = () => {
  console.log("hello!");
  console.log("world!");
}
sayHello();

4.3 物件的函式屬性的簡寫

比如一個Person物件，里面有eat方法：

let person = {
  name: "jack",
  // 以前：
  eat: function (food) {
    console.log(this.name + "在吃" + food);
 },
  // 箭頭函式版：
  eat2: food => console.log(person.name + "在吃" + food),// 這里拿不到this
  // 簡寫版：
  eat3(food){
    console.log(this.name + "在吃" + food);
 }
}

4.4 箭頭函式結合解構運算式

比如有一個函式：

const person = {
  name:"jack",
  age:21,
  language: ['java','js','css']
}
function hello(person) {
  console.log("hello," + person.name)
}

如果用箭頭函式和解構運算式：

var hi = ({name}) =>  console.log("hello," + name);
hi(person)

5. map和reduce

ES6中，陣列新增了map和reduce方法，

5.1 map

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

舉例：有一個字串陣列，我們希望轉為int陣列，

let arr = ['1','20','-5','3'];
console.log(arr)
let newArr = arr.map(s => parseInt(s));
console.log(newArr)

5.2 reduce

reduce{}：接收一個函式（必須）和一個初始值（可選），該函式接收兩個引數：

  • 第一個引數是上一次 reduce處理的結果
  • 第二個引數是陣列中要處理的下一個元素

reduce()會從左到右依次把陣列中的元素用reduce處理，并把處理的結果作為下次reduce的第一個引數，如果是
第一次，會把前兩個元素作為計算引數，或者把用戶指定的初始值作為起始引數，

舉例：

const arr = [1, 20, -5, 3]

// 沒有初始值
arr.reduce((a, b) => a + b) // 19

// 指定初始值
arr.reduce((a, b) => a * b, -1) // 300

6. 擴展運算子

擴展運算子(spread)是三個點(...)， 將一個陣列轉為用逗號分隔的引數序列 ，

用法：

 console.log (...[1, 2, 3]); //1 2 3
  console.log(1, ...[2, 3, 4], 5); // 1 2 3 4 5
  function add(x, y) {
    return x + y;
 }
  var numbers = [1, 2];
  console.log(add(...numbers)); // 3
  // 陣列合并
  let arr = [...[1,2,3],...[4,5,6]];
  console.log(arr); //[1, 2, 3, 4, 5, 6]
  // 與解構運算式結合
  const [first, ...rest] = [1, 2, 3, 4, 5];
  console.log(first, rest) //1  [2, 3, 4, 5]
  //將字串轉成陣列
  console.log([...'hello']) //["h", "e", "l", "l", "o"]

7. Promise

所謂Promise，簡單說就是一個容器，里面保存著某個未來才會結束的事件（通常是一個異步操作）的結果，從語法
上說，Promise 是一個物件，從它可以獲取異步操作的訊息，Promise 提供統一的 API，各種異步操作都可以用同樣
的方法進行處理，

我們可以通過Promise的建構式來創建Promise物件，并在內部封裝一個異步執行的結果，

語法：

const promise = new Promise(function(resolve, reject) {
 // ... 執行異步操作
 if (/* 異步操作成功 */){
  resolve(value);// 呼叫resolve，代表Promise將回傳成功的結果
} else {
  reject(error);// 呼叫reject，代表Promise會回傳失敗結果
}
});

這樣，在promise中就封裝了一段異步執行的結果，

如果我們想要等待異步執行完成，做一些事情，我們可以通過 promise的then方法來實作,語法：

promise .then(function(value){
  // 異步執行成功后的回呼
});

如果想要處理promise異步執行失敗的事件，還可以跟上catch：

promise .then(function(value){
  // 異步執行成功后的回呼
}).catch(function(error){
  // 異步執行失敗后的回呼
})

示例：

const p = new Promise(function (resolve, reject) {
  // 這里我們用定時任務模擬異步
  setTimeout(() => {
    const num = Math.random();
    // 隨機回傳成功或失敗
    if (num < 0.5) {
      resolve("成功！num:" + num)
   } else {
      reject("出錯了！num:" + num)
   }
 }, 300)
})
// 呼叫promise
p.then(function (msg) {
  console.log(msg);
}).catch(function (msg) {
  console.log(msg);
})

// 結果：
出錯了!0.834567898765434567890

8. set和map

ES6提供了Set和Map的資料結構，

Set，本質與陣列類似，不同在于Set中只能保存不同元素，如果元素相同會被忽略，和java中的Set集合非常相似，

建構式：

// Set 建構式可以接收一個陣列或空
let set = new Set();
set.add(1);// [1]
// 接收陣列
let set2 = new Set([2,3,4,5,5]);// 得到[2,3,4,5]

方法：

set.add(1);//  添加
set.clear();// 清空
set.delete(2);// 洗掉指定元素
set.has(2); // 判斷是否存在
set.forEach(function(){})//遍歷元素
set.size; // 元素個數，是屬性，不是方法，

map，本質是與Object類似的結構，不同在于，Object強制規定key只能是字串，而Map結構的key可以是任意物件即：

  • object 是 <string,object>集合
  • map 是<object,object>集合

建構式：

// map 接收一個陣列，陣列中的元素是鍵值對陣列
const map = new Map([
 ['key1','value1'],
 ['key2','value2'],
])
// 或者接收一個set
const set = new Set([
 ['key1','value1'],
 ['key2','value2'],
])
const map2 = new Map(set)
// 或者其它map
const map3 = new Map(map)

方法：

map .set(key, value);// 添加
map.clear();// 清空
map.delete(key);// 洗掉指定元素
map.has(key); // 判斷是否存在
map.forEach(function(key,value){})//遍歷元素
map.size; // 元素個數，是屬性，不是方法
map.values() //獲取value的迭代器
map.keys() //獲取key的迭代器
map.entries() //獲取entry的迭代器
用法：
for (let key of map.keys()) {
console.log(key);
}
或：
console.log(...map.values()); //通過擴展運算子進行展開

9. class（類）的基本語法

JavaScript 語言的傳統方法是通過建構式定義并生成新物件，ES6中引入 class 的概念，通過 class 關鍵詞自定義類，

基本語法：

  class User{
    constructor(name, age = 20){ // 構造方法
      this.name = name; // 添加屬性并且賦值
      this.age = age;
   }
    sayHello(){ // 定義方法
      return "hello";
   }
    static isAdult(age){ //靜態方法
      if(age >= 18){
        return "成年人";
     }
      return "未成年人";
   }
 }
  let user = new User("張三");
  // 測驗
  console.log(user); // User {name: "張三", age: 20}
  console.log(user.sayHello()); // hello
  console.log(User.isAdult(20)); // 成年人

類的繼承：

class User{
    constructor(name, age = 20){ // 構造方法
      this.name = name; // 添加屬性并且賦值
      this.age = age;
   }
    sayHello(){
      return "hello"; // 定義方法
   }
    static isAdult(age){ //靜態方法
      if(age >= 18){
        return "成年人";
     }
      return "未成年人";
   }
 }
  class ZhangSan extends User{
    constructor(){
      super("張三", 30); //如果父類中的構造方法有引數，那么子類必須通過super呼叫父類的構造
方法
      this.address = "上海";//設定子類中的屬性，位置必須處于super下面
   }
 }
  // 測驗
  let zs = new ZhangSan();
  console.log(zs.name, zs.address);
  console.log(zs.sayHello());
  console.log(ZhangSan.isAdult(20));

10. Generator函式

Generator 函式是 ES6 提供的 一種異步編程解決方案，語法行為與傳統函式完全不同 ，

Generator函式有兩個特征: 一是 function命令與函式名 之間有一個星號: 二是 函式體內部使用 yield吾句定義不同的
內部狀態，

用法：

function* hello () {
    yield "hello";
    yield "world";
    return "done";
}
let h = hello();

console.log(h.next()); //{value: "hello", done: false}
console.log(h.next()); //{value: "world", done: false}
console.log(h.next()); //{value: "done", done: true}
console.log(h.next()); //{value: undefined, done: true}

可以看到，通過 hello() 回傳的h物件，每呼叫一次next()方法回傳一個物件，該物件包含了 value 值和 done 狀態，直到
遇到 return 關鍵字或者函式執行完畢，這個時候回傳的狀態為 true，表示已經執行結束了，

for...of 回圈

通過for...of可以回圈遍歷Generator函式回傳的迭代器，

function* hello () {
    yield "hello";
    yield "world";
    return "done";
}
let h = hello();
for (let obj of h) {
    console.log(obj);
}

// 輸出：
hello
world

11. 修飾器(Decorator)

修飾器(Decorator)是一個函式， 用來修改類的行為， ES2017 引入了這項功能， 目前 Babel 轉碼器己經支持，
使用：


@T //通過@符號進行參考該方法，類似java中的注解
class User {
    constructor(name, age = 20){
        this.name = name;
        this.age = age;
    }
}

function T(target) { //定義一個普通的方法
    console.log(target); //target物件為修飾的目標物件，這里是User物件
    target.country = "中國"; //為User類添加一個靜態屬性country
}
console.log(User.country); //列印出country屬性值

運行報錯！

原因是，在 ES6中，并沒有支持該用法，在ES2017中才有，所以我們不能直接運行了，需要進行編碼后再運行，
轉碼的意思是：將ES6或ES2017轉為ES5執行，類似這樣：

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

12. 轉碼器

  • Babel (babeljs.io) 是一個廣為使用的 ES6 轉碼器，可以將 ES6 代碼轉為 ES5 代碼，從而 在瀏覽器或其他環境執
    行 ，
  • Google 公司的 Traceur 轉碼器 Cgithub.com/google/traceur-compiler)， 也可 以將 ES6 代碼轉為ES5的代
    碼，

這兩款都是非常優秀的轉碼工具，這里介紹一個阿里螞蟻金服的一個底層前端框架---umi，umi框架對轉碼器進行了封裝，

12.1 了解UmiJS

官網：

特點：

  • 插件化
    umi 的整個生命周期都是插件化的，甚至其內部實作就是由大量插件組成，比如 pwa、按需加載、一鍵切
    換 preact、一鍵兼容 ie9 等等，都是由插件實作，
  • 開箱即用
    你只需一個 umi 依賴就可啟動開發，無需安裝 react、preact、webpack、react-router、babel、jest 等等，
  • 約定式路由
    類 next.js 的約定式路由，無需再維護一份冗余的路由配置，支持權限、動態路由、嵌套路由等等，

12.2 部署安裝

首先需要安裝 Node.js，檢查 Node.js 是否安裝好可以使用命令：

node -v

已經安裝 Node.js 的可以忽略，

接下來，開始安裝yarn，其中tyarn使用的是npm.taobao.org的源，速度要快一些，可以把yarn看做了優化了的npm，

npm i yarn tyarn -g  #-g 是指全域安裝
tyarn -v #進行測驗，如果能夠正常輸出版本資訊則說明安裝成功了

接下來安裝 umi

tyarn global add umi
umi #進行測驗

12.3 快速入門

在專案根目錄下執行：

# 通過初始化命令將生成package.json檔案，它是 NodeJS 約定的用來存放專案的資訊和配置等資訊的檔案，
tyarn init -y

#通過umi命令創建index.js檔案
umi g page index  #可以看到在pages下創建好了index.js和index.css檔案

#將下面記憶體拷貝到index.js檔案中進行測驗
 @T //通過@符號進行參考該方法，類似java中的注解
 class User {
   constructor(name, age = 20){
     this.name = name;
     this.age = age;
   }
 }
 
  function T(target) { //定義一個普通的方法
   console.log(target); //target物件為修飾的目標物件，這里是User物件
   target.country = "中國"; //為User類添加一個靜態屬性country
 }
 console.log(User.country); //列印出country屬性值
#通過命令列啟動umi的后臺服務,用于本地開發
umi dev
#通過瀏覽器進行訪問：http://localhost:8000/，查看效果
#值得注意的是，這里訪問的是umi的后臺服務，不是idea提供的服務

13. 模塊化

13.1 什么是模塊化

模塊化就是把代碼進行拆分，方便重復利用，類似 Java 中的導包：要使用一個包，必須先匯入一個包，而 JS 中沒有包的概念，換來的是模塊，

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

  • export：用于規定模塊的對外介面；
  • import：用于匯入其他模塊提供的功能，
export

比如我定義一個js檔案：Util.js，里面有一個Util類：

class Util {
  static sum = (a, b) => a + b;
}
//匯出該類
export default Util;

import

使用 export 命令定義了模塊的對外介面以后，其他 JS 檔案就可以通過 import 命令加載這個模塊，
例如我要使用上面匯出的Util：

//Index.js
//匯入Util類
import Util from './Util'
//使用Util中的sum方法
console.log(Util.sum(1, 2));

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

標籤：JavaScript

上一篇：JavaScript中基本資料型別之間的轉換

下一篇：Uncaught TypeError: Cannot set property 'onclick' of null解決辦法

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂