?
成都創(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)銷推廣歡迎濠江等地區(qū)企業(yè)咨詢
?
?
?
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);?? //如何理解常量，常量，聲明和初始化不能分開，對(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 ]
?
?
?
解構(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
?
?
?
?
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));
?
?
?
?
Object的靜態(tài)方法：
Object.keys(obj)?? //ES5開始支持，返回所有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' }
?
?
?
?
?
重慶分公司
重慶分公司
