?

成都創(chuàng)新互聯(lián)公司主營(yíng)濠江網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,成都App制作,濠江h(huán)5微信小程序搭建,濠江網(wǎng)站營(yíng)銷(xiāo)推廣歡迎濠江等地區(qū)企業(yè)咨詢

?

?

解構(gòu)：

?

數(shù)組解構(gòu)：

js的數(shù)組解構(gòu)非常強(qiáng)大；

?

解構(gòu)時(shí)，變量從左到右和元素對(duì)齊，可變參數(shù)放到最右邊；

能對(duì)應(yīng)到數(shù)據(jù)就返回?cái)?shù)據(jù)，對(duì)應(yīng)不到數(shù)據(jù)就返回默認(rèn)值，沒(méi)有默認(rèn)值返回undefined；

?

例：

const arr = [1,3,5,7];

arr.push(9,11,13);

console.log(arr);?? //如何理解常量，常量，聲明和初始化不能分開(kāi)，對(duì)象的地址（內(nèi)存地址，數(shù)組首地址）不能變

// arr = 2;?? //X，TypeError: Assignment to constant variable.

輸出：

[ 1, 3, 5, 7, 9, 11, 13 ]

?

?

例：

const arr = [1,3,5];

?

// const x,y,z = arr;?? //X，是逗號(hào)表達(dá)式，另(x,y,z) = arr;語(yǔ)法錯(cuò)誤；數(shù)組必須要用[]解構(gòu)

const [x,y,z] =arr;

?

const [x,y,z,m,n] =arr;?? //多于數(shù)組元素

?

const [x,y] =arr;?? //少于數(shù)組元素；py必須兩邊個(gè)數(shù)對(duì)應(yīng)

?

const [x,,,,,,,,m,n] =arr;?? //1 undefined undefined；py做不到

?

const [x,...m] =arr;?? //1 [ 3, 5 ]；可變的要往后放

// const [x,...m,n] = arr;?? //X，SyntaxError: Rest element must be last element

，可變的要往后放

const [x,y,...m] =arr;?? //1 3 [ 5 ]

?

const [x=100,,,,,y=200] =arr;?? //支持默認(rèn)值

?

?

例，嵌套數(shù)組：

const arr = [1,[2,3],4];

?

const [a,[b,c],d] =arr;?? //1 2 3 4

?

const [a,b] =arr;?? //1 [ 2, 3 ]

?

const [a,b,c,d=8] =arr;?? //1 [ 2, 3 ] 4 8

?

const [a,...b] =arr;?? //1 [ [ 2, 3 ], 4 ]

?

?

?

對(duì)象解構(gòu)：

解構(gòu)時(shí)，需要提供對(duì)象的屬性名，會(huì)根據(jù)屬性名找到對(duì)應(yīng)的值，沒(méi)有找到的返回缺省值，沒(méi)有缺省值則返回undefined；

?

例，簡(jiǎn)單對(duì)象：

const obj = {

???a:100,

???b:200,

???c:300

};

?

let x,y,z =obj;?? //undefined undefined { a: 100, b: 200, c: 300 }；X錯(cuò)誤，是逗號(hào)表達(dá)式，

let {x,y,z} =obj;?? //undefined undefined undefined；找不到key

?

let {a,b,c} =obj;?? //V，按key來(lái)解

let {a,b,c,d} =obj;?? //100 200 300 undefined

?

let {a,x,c,d=400} =obj;?? //100 undefined 300 400

let {a,x=1000,c=3000,d=4000} =obj;?? //100 1000 300 4000

?

let {a:m,b:n,c} =obj;?? //100 200 300；重命名

console.log(m,n,c);

?

let {a:M,c:N,d:D='python'} =obj;?? //100 300 'python'

console.log(M,N,D);

?

?

例，嵌套對(duì)象：

var metadata = {

???title: 'Scratchpad',

???translations: [

??????? {

???????????locale: 'de',

???????????localization_tags: [ ],

???????????last_edit: '2018-10-22%16:42:00',

???????????url: '/de/docs/Tools/Scratchpad',

???????????title: 'JavaScript-Umgebung'

??????? }

??? ],

???url: '/en-US/docs/Tools/Scratchpad'

};

?

var {title:enTitle,translations:[{title:localeTitle}]} =metadata;

console.log(enTitle,localeTitle);

輸出：

Scratchpad JavaScript-Umgebung

?

?

?

?

數(shù)組操作：

push(...items)?? //尾部增加多個(gè)元素；

pop()?? //移除最后一個(gè)元素，并返回它；

map?? //引入處理函數(shù)來(lái)處理數(shù)組中每一個(gè)元素，返回新的數(shù)組，可鏈?zhǔn)骄幊蹋?/p>

filter?? //引入處理函數(shù)處理數(shù)組中每一個(gè)元素，該處理函數(shù)將返回true的元素保留，將非true的元素過(guò)濾掉，保留的元素構(gòu)成新的數(shù)組返回，可鏈?zhǔn)骄幊蹋?/p>

forEach?? //迭代所有元素，無(wú)返回值；

?

例：

const arr = [1,2,3,4,5];

?

arr.push(6,7,8,9,10);

console.log(arr);

?

arr.pop();

console.log(arr);

?

const power =arr.map(x=>x*x);

console.log(power);

?

const newarr =arr.filter(x=>x>5);

console.log(newarr);

?

const newarr1 =arr.forEach(x=>x+1);?? //無(wú)返回值

console.log(newarr1);

console.log(arr.forEach(x=>x+1),arr);?? //無(wú)返回值，沒(méi)有在原來(lái)數(shù)組上操作

輸出：

[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ]

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

[ 1, 4, 9, 16, 25, 36, 49, 64, 81 ]

[ 6, 7, 8, 9 ]

undefined

undefined [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ]

?

?

例：

const arr = [1,2,3,4,5]，算出所有元素平方值是偶數(shù)，且大于10的結(jié)果；

console.log(arr.map(x=>x*x).filter(x=>x%2 ===0).filter(x=>x>10));?? //不好

?

console.log(arr.filter(x=>x%2===0).map(x=>x*x).filter(x=>x>10));?? //V，和DB中的查詢一樣，先過(guò)濾再計(jì)算

?

s =Math.sqrt(10);

console.log(arr.filter(x=>x>s &&x%2 ===0).map(x=>x*x));

?

?

?

對(duì)象操作：

?

Object的靜態(tài)方法：

Object.keys(obj)?? //ES5開(kāi)始支持，返回所有key

Object.values(obj)?? //返回所有值，試驗(yàn)階段，支持較差

Ojbect.entries(obj)?? //返回所有值，試驗(yàn)階段，支持較差

Object.assign(target,...sources)?? //使用多個(gè)source對(duì)象，來(lái)填充target對(duì)象，返回target對(duì)象

?

例：

const obj = {

???a:100,

???b:200,

???c:300

};

?

console.log(Object.keys(obj));

console.log(Object.values(obj));

console.log(Object.entries(obj));

輸出：

[ 'a', 'b', 'c' ]

[ 100, 200, 300 ]

[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]

?

?

例：

?

var metadata = {

???title: 'Scratchpad',

???translations: [

??????? {

???????????locale: 'de',

???????????localization_tags: [ ],

???????????last_edit: '2018-10-22%16:42:00',

???????????url: '/de/docs/Tools/Scratchpad',

???????????title: 'JavaScript-Umgebung'

??????? }

??? ],

???url: '/en-US/docs/Tools/Scratchpad'

};

?

var copy =Object.assign({},metadata,

??? {schoolName:'magedu',url:'www.magedu.com'},

??? {translations:null});

console.log(copy);

輸出：

{ title: 'Scratchpad',

? translations: null,

? url: 'www.magedu.com',

? schoolName: 'magedu' }

?

?

?

?

?

分享文章：68ES6_解構(gòu)_數(shù)組操作_對(duì)象操作
標(biāo)題路徑：http://chinadenli.net/article28/jpcgjp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站改版、企業(yè)網(wǎng)站制作、服務(wù)器托管、響應(yīng)式網(wǎng)站、品牌網(wǎng)站制作、云服務(wù)器

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)