es6中容易忽視的細節（二）

RayKr 發布于2019-08-21 18:44 / 713人閱讀

摘要：變量的解構賦值結構賦值允許使用默認值內部使用嚴格相等運算符，判斷一個位置是否有值。所以，只有當一個數組成員嚴格等于，默認值才會生效。這樣的層層判斷非常麻煩，因此現在有一個提案，引入了傳導運算符，簡化上面的寫法。

變量的解構賦值

結構賦值允許使用默認值

let [foo = true] = [];
foo // true

ES6 內部使用嚴格相等運算符（===），判斷一個位置是否有值。所以，只有當一個數組成員嚴格等于undefined，默認值才會生效。

let [x = 1] = [undefined];
x//1;
let [x=1] = [null];
x//null ;

對象的結構和數據的結構類似，但數組的結構是根據順序決定的，對象的結構是根據未知決定的，變量名與鍵值對應才能取到值

let { foo: baz } = { foo: "aaa", bar: "bbb" };
baz // "aaa"
let obj = { first: "hello", last: "world" };
let { first: f, last: l } = obj;
f // "hello"
l // "world"

字符串也可以結構賦值

const [a, b, c, d, e] = "hello";
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

字符串和數組的結構還有一個屬性

let {length:yx}=[1,2,3,,4,,5,]
yx // 7

結構賦值的用途
第一個用途交換變量的值

在es5中我們需要用一個中間變量來轉換交換變量的值，但是在es6中不需要
var x=4,y=5,c;
c=x;x=y;y=c;
在es6中我們直接可以用結構的方式直接交換
[x,y]=[y,x]

第二個用途是給函數設置默認值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};
指定參數的

第三個用途輸入模塊的制定的方法

const {set,index} = require("set-index");

es6給字符串提供了遍歷的方法

for(let item of "sdfsdf"){
    console.log(item)
}

字符串方法中可以使用正則的是match、replace、search、split

es5中的正則修飾符g(全局匹配)/i(不區分大小寫匹配)/m(多行匹配)，es6中新增的修飾符u用來正確處理大于uFFFF的 Unicode 字符

/?{2}/.test("??") // false
/?{2}/u.test("??") // true

es6中數組擴展運算符的用法

在es5中我們可以這樣求取數組的最大值
var arr=[1,2,4,5,5]
Math.max.apply(null,arr)
在es6中我們可以直接
Math.max(...arr)

擴展運算發在字符串中也同樣可以使用

var hello = "hello";
console.log(...hello)    //h e l l o

擴展運算符和Array.from()都可以將類數組(類數組說的廣泛一點其實就含有length屬性的對象)的對象轉換為數組對象，但其內部實質調用時遍歷器接口（Symbol.iterator）)[https://www.cnblogs.com/toulo...]

對象屬性的書寫：在es5中我們是不允許把對象的鍵寫成變量或者是表達式，但是在es6中我們可以把對象的鍵寫成表達式，以及函數名也可以寫成表達式的形勢

var a = "index"
var obj = {a:5}
obj    // {a:5}    es5中的寫法
let obj = {[a]:5}
obj    // {index:5}    es6中的寫法會得到這樣的結果
function [a](){}

Object.assign方法實行的是淺拷貝，而不是深拷貝。也就是說，如果源對象某個屬性的值是對象，那么目標對象拷貝得到的是這個對象的引用(只對嵌套的對象實現淺拷貝，對于非嵌套的對象實行的是深拷貝)。

var obj1={a:1,b:{c:2}}
var obj2=Object.assign({},obj1)
obj1.a++;
obj1.b.c++;
obj2    // {a:1,b:{c:3}}

Object.assign也可以用來處理數組，同位置的值進行替換，不同位置的源數組的值添加到目標數組

Object.assign([1,2,4],["sdfs",4,{a:5},4,6])
["sdfs",4,{a:5},4,6]    直接返回這樣的結果

null運算符
編程實務中，如果讀取對象內部的某個屬性，往往需要判斷一下該對象是否存在。比如，要讀取message.body.user.firstName，安全的寫法是寫成下面這樣。

const firstName = (message
  && message.body
  && message.body.user
  && message.body.user.firstName) || "default";

這樣的層層判斷非常麻煩，因此現在有一個提案，引入了“Null 傳導運算符”（null propagation operator）?.，簡化上面的寫法。

const firstName = message?.body?.user?.firstName || "default";

擴展

// 如果 a 是 null 或 undefined, 返回 undefined
// 否則返回 a.b.c().d
a?.b.c().d

// 如果 a 是 null 或 undefined，下面的語句不產生任何效果
// 否則執行 a.b = 42
a?.b = 42

// 如果 a 是 null 或 undefined，下面的語句不產生任何效果
delete a?.b

云服務器 GPU云服務器不能忽視的問題容易混淆的問題 webrtc的視頻容易崩潰最容易實現的替換算法

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

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

es6中容易忽視的細節（三）

摘要：模塊就是對象，輸入時必須查找對象屬性模塊不是對象，而是通過命令顯式指定輸出的代碼，再通過命令輸入。大括號里面的變量名，必須與被導入模塊對外接口的名稱相同。 proxy代理的坑 var obj = {index:index} var newObj = new Proxy(obj,{ get:(target,key)=>{ console.l...

Michael_Lin 2019-08-22 13:50 評論0 收藏0
es6中容易忽視的細節（一）

摘要：但是對于復雜類型的數據數組對象，保存的是一個指針，真正的數據是存儲在堆區，只能保證這個指針不會變化，不能保證里面的數據不發生變化的變量聲明方式在中聲明的全局變量是和頂層對象的屬性對等的獲取全局對象的方法你可能不知道的let與const let var聲明的變量會發生變量提升，在var聲明之前調用該變量會數處undefined,但是let聲明的變量不會發生提升，在聲明之前調用就會...

baishancloud 2019-08-21 18:44 評論0 收藏0
Polyfill：Function.prototype.bind的四個階段

摘要：第二階段被忽略的細節函數的屬性，用于表示函數的形參。第三階段被忽視的細節通過生成的構造函數。五本文涉及的知識點的用法的用法除操作符外的構造函數的用法下詭異的命名函數表達式技術六總結在這之前從來沒想過一個的會涉及這么多知識點，感謝給的啟發。昨天邊參考es5-shim邊自己實現Function.prototype.bind，發現有不少以前忽視了的地方，這里就作為一個小總結吧。一、Fu...

mudiyouyou 2019-08-22 10:57 評論0 收藏0
CSS中的一些小細節

摘要：一排版原理改變盒模型計算方式取值初始值舉個例子演示結果文檔二一些容易被忽視的小細節下面代碼，標簽的高度是多少解析默認情況下是沒有高度只有寬度。使用場景可以利用的百分比來做出一些固定寬高比的盒子。另外注意水平垂直居中的實現方式。一、CSS排版原理 showImg(https://segmentfault.com/img/remote/1460000015207778?w=1642&h=...

fxp 2019-08-29 15:38 評論0 收藏0
koa 實現 react-view 原理

摘要：今天，其實講的是在實現同構過程中看到過，可能非常容易被忽視更小的一個點。每一個架構的框架都會涉及到層的展現，也不例外。這種說法即對也不對。總結其實，實現非常簡單，我們也從一些維度看到了設計一個的一般方法。在之前我們有過一篇『React 同構實踐與思考』的專欄文章，給讀者實踐了用 React 怎么實現同構。今天，其實講的是在實現同構過程中看到過，可能非常容易被忽視更小的一個點 —— R...

zxhaaa 2019-08-19 18:24 評論0 收藏0