JS解构及数组对象操作

解构

JS的解构很灵活，参考

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

列表解构

var parts = ['shoulder','knees']
var lyrics = ['head', ...parts, 'and', 'toes']; // 使用...解构
console.log(lyrics) // [ 'head', 'shoulder', 'knees', 'and', 'toes' ]

参数解构

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

数组解构

const arr = [100,200,300];
let [x,y,z] = arr;
console.log(0,x,y,z);
// 丢弃
const [,a,] = arr;
console.log(1,a);
// a = 5 // 异常，a是常量
// 少于数组元素
const [b] = arr;
console.log(2, b);
const [d,e] = arr;
console.log(3,d,e);
// 多于数组元素
const [m,n,o,p] = arr
console.log(4,m,n,o,p);
// 可变变量
const [f,...args] = arr
console.log(5,f);
console.log(5,args);
// 支持默认值
const [j=1,k,,,l=10] = arr
console.log(j,k,l);

解构的时候，变量从左到右和元素对齐，可变参数放到最右边。

能对应到数据就返回数据，对应不到数据的返回默认值，如果没有默认值返回undefined。

对象解构

const obj = {
    a:100,
    b:200,
    c:300
}
var {x,y,z} = obj;
console.log(x, y, z); // undefined undefined undefined
var {a,b,c} = obj; // key名称
console.log(a,b,c); // 100 200 300
var {a:m, b:n, c} = obj; // 重命名
console.log(m,n,c);
var {a:M, c:N, d:D='python'} = obj; //缺省值
console.log(M, N, D);
var {e} = obj;
console.log(e);

解构时，需要提供对象的属性名，会根据属性名找到对应的值。没有找到的返回缺省值，没有缺省值则返回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 ]

对象

// 提取3个a出来
var data = {
    a:100,
    b:[
       {
            c:200,
            d:[],
            a:300
       },
       {
            c:1200,
            d:[1],
            a:1300
       },
   ],
    c:500
}
var {a:a1, b:[{a:a2},{a:a3}]} = data;
console.log(a1, a2, a3)

数组的操作

方法	描述
push(…items)	尾部增加多个元素
pop()	移除最后一个元素，并返回他
map	引入处理函数来处理数组中的每一个元素，返回新的数组
filter	引入处理函数处理数组中的每一个元素，此处理函数返回true的元素保留，否则该元素会被过滤掉，保留的元素构成新的数组返回
foreach	迭代所有元素，无返回值
splice	删除、替换

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);
console.log(arr.filter(x => x%2==0)); // 新数组
narr = [];
newArr = arr.forEach(x => narr.push(x+10));
console.log(newArr, narr);
narr.splice(1, 1)
console.log(narr);
narr.splice(1, 0, 100, 200, 300)
console.log(narr);
narr.splice(1, 3, 'a', 'b', 'c', 'd')
console.log(narr);


let arr = [1,3,4,5,6,7,8]
 //console.log(arr.splice(1,2)); //从下标1开始，往后删除2个元素
// console.log(arr);

// console.log(arr.splice(1,2,'test')); //从下标1开始，往后删除2个元素，并替换成test
// console.log(arr);

console.log(arr.splice(1,0,'add')); //从下标1开始，往后0个元素，添加
console.log(arr);

数组练习

有一个数组 const arr = [1, 2, 3, 4, 5]; ，要求算出所有元素平方值，且输出平方值是偶数且大于10的平方值

// 这种实现好吗？
console.log(arr.map(x => x * x).filter(x => x % 2 === 0).filter(x => x >
10));

// 1
console.log(arr.filter(x => x%2===0).map(x => x*x).filter(x => x > 10)); // 
先过滤减少迭代次数
// 2
var s = Math.sqrt(10) // 10开方算一次
console.log(arr.filter(x => x > s && !(x % 2)).map(x => x*x))
// 3
let newarr = []
arr.forEach(x => {
    if (x>s && !(x&1)) newarr.push(x*x);
})
console.log(newarr);

对象的操作

Object的静态方法	描述
Object.keys(obj)	ES5开始支持。返回所有key
Object.values(obj)	返回所有值，试验阶段，支持较差
Object.entries(obj)	返回所有值，试验阶段，支持较差

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)); // 键值对，实验性

//输出
[ 'a', 'b', 'c' ]
[ [ 'a', 100 ], [ 'b', 200 ], [ 'c', 300 ] ]
[ 100, 200, 300 ]