成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6中容易忽視的細(xì)節(jié)（二）

RayKr / 724人閱讀

摘要：變量的解構(gòu)賦值結(jié)構(gòu)賦值允許使用默認(rèn)值內(nèi)部使用嚴(yán)格相等運算符，判斷一個位置是否有值。所以，只有當(dāng)一個數(shù)組成員嚴(yán)格等于，默認(rèn)值才會生效。這樣的層層判斷非常麻煩，因此現(xiàn)在有一個提案，引入了傳導(dǎo)運算符，簡化上面的寫法。

變量的解構(gòu)賦值

結(jié)構(gòu)賦值允許使用默認(rèn)值

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

ES6 內(nèi)部使用嚴(yán)格相等運算符（===），判斷一個位置是否有值。所以，只有當(dāng)一個數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會生效。

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

對象的結(jié)構(gòu)和數(shù)據(jù)的結(jié)構(gòu)類似，但數(shù)組的結(jié)構(gòu)是根據(jù)順序決定的，對象的結(jié)構(gòu)是根據(jù)未知決定的，變量名與鍵值對應(yīng)才能取到值

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"

字符串也可以結(jié)構(gòu)賦值

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

字符串和數(shù)組的結(jié)構(gòu)還有一個屬性

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

結(jié)構(gòu)賦值的用途
第一個用途交換變量的值

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

第二個用途是給函數(shù)設(shè)置默認(rèn)值

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

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

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

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

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

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

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

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

es6中數(shù)組擴(kuò)展運算符的用法

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

擴(kuò)展運算發(fā)在字符串中也同樣可以使用

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

擴(kuò)展運算符和Array.from()都可以將類數(shù)組(類數(shù)組說的廣泛一點其實就含有l(wèi)ength屬性的對象)的對象轉(zhuǎn)換為數(shù)組對象，但其內(nèi)部實質(zhì)調(diào)用時遍歷器接口（Symbol.iterator）)[https://www.cnblogs.com/toulo...]

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

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

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

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也可以用來處理數(shù)組，同位置的值進(jìn)行替換，不同位置的源數(shù)組的值添加到目標(biāo)數(shù)組

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

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

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

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

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

擴(kuò)展

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90773.html

相關(guān)文章

  • es6中容易忽視的細(xì)節(jié)（三）

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

    Michael_Lin 評論0 收藏0

  • es6中容易忽視的細(xì)節(jié)（一）

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

    baishancloud 評論0 收藏0

  • Polyfill：Function.prototype.bind的四個階段

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

    mudiyouyou 評論0 收藏0

  • CSS中的一些小細(xì)節(jié)

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

    fxp 評論0 收藏0

  • koa 實現(xiàn) react-view 原理

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

    zxhaaa 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<