chapter1.六、解構和對象的操做

解構

JS的解構較爲靈活，參考https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Spread_syntax

列表解構

var parts = ["shoulder", "knees"];
var lyrics = ["head", ...parts, 'and', 'toes'];
console.log(lyrics)

參數解構

function f(x, y, z) {
    console.log(x + y + z)
    }
var args = [2, 3 ,4];
f(...args);

數組解構

const arr = [100,200,300];
let [x,y,z] = arr;
console.log(1,x,y,z); //1 100 200 300

// 丟棄
const [,b,] = arr;
console.log(2,b); // 2 200
// b = 5 // 異常，b聲明爲const

// 少於數組元素
const [d,e] = arr; // 3 100 200
console.log(3,d,e);

// 多於數組元素
const [m,n,o,p] = arr // 4 100 2002 300 undefined
console.log(4,m,n,o,p);

// 可變變量
const [f,...args] = arr
console.log(5,f);  // 5 100   
console.log(5,args); // 5 [200, 300]

// 支持默認值
const [j=1,k,,,l=10] = arr
console.log(j,k,l); // 100 200 10

解構的時候，變量從左到右和元素對齊，可變參數放到最右邊。

能對應到數據就返回數據，對應不到數據的返回默認值，若是沒有默認值返回undefined。

對象解構

const obj = {
    a:100,
    b:200,
    c:300
};

let {x,y,z} = obj;
console.log(x,y,z); // undefined undefined undefined

let {a,b,c} = obj; // key名稱
console.log(a,b,c);

let {a:m,b:n,l} = obj; //c已經聲明，不能再次let
console.log(m,n,l)

let {a:M,c:N,d:D="python"} = obj; // 缺省值
console.log(M,N,D)

解構時，須要提供對象的屬性名，會根據屬性名找到對應的值。沒有找到的返回缺省值，沒有缺省值則返回undefined。

複雜結構

嵌套數組

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

const [a, [b, c], d] = arr;
console.log(a, b, c, d); //1 2 3 4

const [e, f] = arr;
console.log(e, f); //1 [ 2, 3 ]

const [g, h, i, j = 18] = arr;
console.log(g, h, i, j); //1 [ 2, 3 ] 4 18

const [k, ...l] = arr;
console.log(k, l); //1 [ [ 2, 3 ], 4 

對象

var metadata = {
    title: "Scratchpad",
    translations: [
        {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
        }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};
//
var { title: enTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(enTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

數組的操做

方法	描述
push(...items)	尾部增長多個元素
pop()	移除最後一個元素，並返回它
map	引入處理函數來處理數組中每個元素，返回新的數組
filter	引入處理函數處理數組中每個元素，此處理函數返回true的元素保留，不然該元素被過濾掉，保留的元素構成新的數組返回
foreach	迭代所用元素，無返回值

 

 

const arr = [1, 2, 3, 4, 5];
arr.push(6,7);
console.log(arr);
arr.pop()
console.log(arr);
// map
const powerArr = arr.map(x => x*x); // 新數組
console.log(powerArr);
const newarr = arr.forEach(x => x+10); // 無返回值
console.log(newarr, arr);
narr = []
newArr = arr.forEach(x => narr.push(x+10));
console.log(newArr, narr);
console.log(arr.filter(x => x%2==0)) // 新數組

數組練習

有一個數組 const arr = [1, 2, 3, 4, 5]; ，要求算出全部元素平方值是偶數且大於10的平方值

var arr = [1,2,3,4,5]
const c = Math.sqrt(10)
console.log(arr.filter(x => x > c && !(x % 2)).map(x => x*x))

過濾數據儘量先過濾，後計算，海量數據處理更要先過濾。 涉及數據清洗。

對象的操做

Object的靜態方法	描述
Object.keys(obj)	ES5開始支持。返回全部key
Object.values(obj)	返回全部值，試驗階段，支持較差
Object.entries(obj)	返回全部值，試驗階段，支持較差
Object.assign(target, ...sources)	使用多個source對象，來填充target對象，返回target對象，返回的對象就是target對象，是同一個對象

 

 

 

 

 例：

const obj = {
    a:100,
    b:200,
    c:300
};
console.log(Object.keys(obj)); // key，ES5
console.log(Object.values(obj)); // 值，實驗性
console.log(Object.entries(obj)); // 鍵值對，實驗性
// assign
var metadata = {
    title: "Scratchpad",
    translations: [
    {
        locale: "de",
        localization_tags: [ ],
        last_edit: "2014-04-14T08:43:37",
        url: "/de/docs/Tools/Scratchpad",
        title: "JavaScript-Umgebung"
    }
    ],
    url: "/en-US/docs/Tools/Scratchpad"
};
var copy = Object.assign({}/*目標對象*/, metadata,
    {schoolName:'Riper',url:'www.Riper.com'}/*增長新的屬性，覆蓋同名屬性*/,
    {translations:null} /*覆蓋metadata的translations*/
);
console.log(copy);