資訊專(zhuān)欄INFORMATION COLUMN
摘要：變量的解構(gòu)賦值結(jié)構(gòu)賦值允許使用默認(rèn)值內(nèi)部使用嚴(yán)格相等運(yùn)算符，判斷一個(gè)位置是否有值。所以，只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于，默認(rèn)值才會(huì)生效。這樣的層層判斷非常麻煩，因此現(xiàn)在有一個(gè)提案，引入了傳導(dǎo)運(yùn)算符，簡(jiǎn)化上面的寫(xiě)法。
變量的解構(gòu)賦值
結(jié)構(gòu)賦值允許使用默認(rèn)值
let [foo = true] = []; foo // true
ES6 內(nèi)部使用嚴(yán)格相等運(yùn)算符（===），判斷一個(gè)位置是否有值。所以，只有當(dāng)一個(gè)數(shù)組成員嚴(yán)格等于undefined，默認(rèn)值才會(huì)生效。
let [x = 1] = [undefined]; x//1; let [x=1] = [null]; x//null ;
對(duì)象的結(jié)構(gòu)和數(shù)據(jù)的結(jié)構(gòu)類(lèi)似，但數(shù)組的結(jié)構(gòu)是根據(jù)順序決定的，對(duì)象的結(jié)構(gòu)是根據(jù)未知決定的，變量名與鍵值對(duì)應(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)還有一個(gè)屬性
let {length:yx}=[1,2,3,,4,,5,]
yx // 7
結(jié)構(gòu)賦值的用途
第一個(gè)用途交換變量的值
在es5中我們需要用一個(gè)中間變量來(lái)轉(zhuǎn)換交換變量的值，但是在es6中不需要 var x=4,y=5,c; c=x;x=y;y=c; 在es6中我們直接可以用結(jié)構(gòu)的方式直接交換 [x,y]=[y,x]
第二個(gè)用途是給函數(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ù)的
第三個(gè)用途輸入模塊的制定的方法
const {set,index} = require("set-index");
es6給字符串提供了遍歷的方法
for(let item of "sdfsdf"){
console.log(item)
}
字符串方法中可以使用正則的是match、replace、search、split
es5中的正則修飾符g(全局匹配)/i(不區(qū)分大小寫(xiě)匹配)/m(多行匹配)，es6中新增的修飾符u用來(lái)正確處理大于uFFFF的 Unicode 字符
/?{2}/.test("??") // false
/?{2}/u.test("??") // true
es6中數(shù)組擴(kuò)展運(yùn)算符的用法
在es5中我們可以這樣求取數(shù)組的最大值 var arr=[1,2,4,5,5] Math.max.apply(null,arr) 在es6中我們可以直接 Math.max(...arr)
擴(kuò)展運(yùn)算發(fā)在字符串中也同樣可以使用
var hello = "hello"; console.log(...hello) //h e l l o
擴(kuò)展運(yùn)算符和Array.from()都可以將類(lèi)數(shù)組(類(lèi)數(shù)組說(shuō)的廣泛一點(diǎn)其實(shí)就含有l(wèi)ength屬性的對(duì)象)的對(duì)象轉(zhuǎn)換為數(shù)組對(duì)象，但其內(nèi)部實(shí)質(zhì)調(diào)用時(shí)遍歷器接口（Symbol.iterator）)[https://www.cnblogs.com/toulo...]
對(duì)象屬性的書(shū)寫(xiě)：在es5中我們是不允許把對(duì)象的鍵寫(xiě)成變量或者是表達(dá)式，但是在es6中我們可以把對(duì)象的鍵寫(xiě)成表達(dá)式，以及函數(shù)名也可以寫(xiě)成表達(dá)式的形勢(shì)
var a = "index"
var obj = {a:5}
obj // {a:5} es5中的寫(xiě)法
let obj = {[a]:5}
obj // {index:5} es6中的寫(xiě)法會(huì)得到這樣的結(jié)果
function [a](){}
Object.assign方法實(shí)行的是淺拷貝，而不是深拷貝。也就是說(shuō)，如果源對(duì)象某個(gè)屬性的值是對(duì)象，那么目標(biāo)對(duì)象拷貝得到的是這個(gè)對(duì)象的引用(只對(duì)嵌套的對(duì)象實(shí)現(xiàn)淺拷貝，對(duì)于非嵌套的對(duì)象實(shí)行的是深拷貝)。
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也可以用來(lái)處理數(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運(yùn)算符
編程實(shí)務(wù)中，如果讀取對(duì)象內(nèi)部的某個(gè)屬性，往往需要判斷一下該對(duì)象是否存在。比如，要讀取message.body.user.firstName，安全的寫(xiě)法是寫(xiě)成下面這樣。
const firstName = (message && message.body && message.body.user && message.body.user.firstName) || "default";
這樣的層層判斷非常麻煩，因此現(xiàn)在有一個(gè)提案，引入了“Null 傳導(dǎo)運(yùn)算符”（null propagation operator）?.，簡(jiǎn)化上面的寫(xiě)法。
const firstName = message?.body?.user?.firstName || "default";
擴(kuò)展
// 如果 a 是 null 或 undefined, 返回 undefined // 否則返回 a.b.c().d a?.b.c().d // 如果 a 是 null 或 undefined，下面的語(yǔ)句不產(chǎn)生任何效果 // 否則執(zhí)行 a.b = 42 a?.b = 42 // 如果 a 是 null 或 undefined，下面的語(yǔ)句不產(chǎn)生任何效果 delete a?.b
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/90773.html
摘要：模塊就是對(duì)象，輸入時(shí)必須查找對(duì)象屬性模塊不是對(duì)象，而是通過(guò)命令顯式指定輸出的代碼，再通過(guò)命令輸入。大括號(hào)里面的變量名，必須與被導(dǎo)入模塊對(duì)外接口的名稱(chēng)相同。 proxy代理的坑 var obj = {index:index} var newObj = new Proxy(obj,{ get:(target,key)=>{ console.l...
摘要：但是對(duì)于復(fù)雜類(lèi)型的數(shù)據(jù)數(shù)組對(duì)象，保存的是一個(gè)指針，真正的數(shù)據(jù)是存儲(chǔ)在堆區(qū)，只能保證這個(gè)指針不會(huì)變化，不能保證里面的數(shù)據(jù)不發(fā)生變化的變量聲明方式在中聲明的全局變量是和頂層對(duì)象的屬性對(duì)等的獲取全局對(duì)象的方法 你可能不知道的let與const let var聲明的變量會(huì)發(fā)生變量提升，在var聲明之前調(diào)用該變量會(huì)數(shù)處undefined,但是let聲明的變量不會(huì)發(fā)生提升，在聲明之前調(diào)用就會(huì)...
摘要：第二階段被忽略的細(xì)節(jié)函數(shù)的屬性，用于表示函數(shù)的形參。第三階段被忽視的細(xì)節(jié)通過(guò)生成的構(gòu)造函數(shù)。五本文涉及的知識(shí)點(diǎn)的用法的用法除操作符外的構(gòu)造函數(shù)的用法下詭異的命名函數(shù)表達(dá)式技術(shù)六總結(jié)在這之前從來(lái)沒(méi)想過(guò)一個(gè)的會(huì)涉及這么多知識(shí)點(diǎn)，感謝給的啟發(fā)。 昨天邊參考es5-shim邊自己實(shí)現(xiàn)Function.prototype.bind，發(fā)現(xiàn)有不少以前忽視了的地方，這里就作為一個(gè)小總結(jié)吧。 一、Fu...
摘要：一排版原理改變盒模型計(jì)算方式取值初始值舉個(gè)例子演示結(jié)果文檔二一些容易被忽視的小細(xì)節(jié)下面代碼，標(biāo)簽的高度是多少解析默認(rèn)情況下是沒(méi)有高度只有寬度。使用場(chǎng)景可以利用的百分比來(lái)做出一些固定寬高比的盒子。另外注意水平垂直居中的實(shí)現(xiàn)方式。 一、CSS排版原理 showImg(https://segmentfault.com/img/remote/1460000015207778?w=1642&h=...
摘要：今天，其實(shí)講的是在實(shí)現(xiàn)同構(gòu)過(guò)程中看到過(guò)，可能非常容易被忽視更小的一個(gè)點(diǎn)。每一個(gè)架構(gòu)的框架都會(huì)涉及到層的展現(xiàn)，也不例外。這種說(shuō)法即對(duì)也不對(duì)。總結(jié)其實(shí)，實(shí)現(xiàn)非常簡(jiǎn)單，我們也從一些維度看到了設(shè)計(jì)一個(gè)的一般方法。 在之前我們有過(guò)一篇『React 同構(gòu)實(shí)踐與思考』的專(zhuān)欄文章，給讀者實(shí)踐了用 React 怎么實(shí)現(xiàn)同構(gòu)。今天，其實(shí)講的是在實(shí)現(xiàn)同構(gòu)過(guò)程中看到過(guò)，可能非常容易被忽視更小的一個(gè)點(diǎn) —— R...
閱讀 3170·2021-09-22 15:54
閱讀 4096·2021-09-09 11:34
閱讀 1832·2019-08-30 12:48
閱讀 1219·2019-08-30 11:18
閱讀 3512·2019-08-26 11:48
閱讀 976·2019-08-23 17:50
閱讀 2181·2019-08-23 17:17
閱讀 1312·2019-08-23 17:12
