68ES6_解构_数组操作_对象操作
成都创新互联公司主营濠江网站建设的网络公司,主营网站建设方案,成都App制作,濠江h5微信小程序搭建,濠江网站营销推广欢迎濠江等地区企业咨询
解构：
数组解构：
js的数组解构非常强大；
解构时，变量从左到右和元素对齐，可变参数放到最右边；
能对应到数据就返回数据，对应不到数据就返回默认值，没有默认值返回undefined；
例：
const arr = [1,3,5,7];
arr.push(9,11,13);
console.log(arr); //如何理解常量，常量，声明和初始化不能分开，对象的地址（内存地址，数组首地址）不能变
// 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，是逗号表达式，另(x,y,z) = arr;语法错误；数组必须要用[]解构
const [x,y,z] =arr;
const [x,y,z,m,n] =arr; //多于数组元素
const [x,y] =arr; //少于数组元素；py必须两边个数对应
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; //支持默认值
例，嵌套数组：
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 ]
对象解构：
解构时，需要提供对象的属性名，会根据属性名找到对应的值，没有找到的返回缺省值，没有缺省值则返回undefined；
例，简单对象：
const obj = {
a:100,
b:200,
c:300
};
let x,y,z =obj; //undefined undefined { a: 100, b: 200, c: 300 }；X错误，是逗号表达式，
let {x,y,z} =obj; //undefined undefined undefined；找不到key
let {a,b,c} =obj; //V，按key来解
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);
例，嵌套对象：
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) //尾部增加多个元素；
pop() //移除最后一个元素，并返回它；
map //引入处理函数来处理数组中每一个元素，返回新的数组，可链式编程；
filter //引入处理函数处理数组中每一个元素，该处理函数将返回true的元素保留，将非true的元素过滤掉，保留的元素构成新的数组返回，可链式编程；
forEach //迭代所有元素，无返回值；
例：
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); //无返回值
console.log(newarr1);
console.log(arr.forEach(x=>x+1),arr); //无返回值，没有在原来数组上操作
输出：
[ 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]，算出所有元素平方值是偶数，且大于10的结果；
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中的查询一样，先过滤再计算
s =Math.sqrt(10);
console.log(arr.filter(x=>x>s &&x%2 ===0).map(x=>x*x));
对象操作：
Object的静态方法：
Object.keys(obj) //ES5开始支持，返回所有key
Object.values(obj) //返回所有值，试验阶段，支持较差
Ojbect.entries(obj) //返回所有值，试验阶段，支持较差
Object.assign(target,...sources) //使用多个source对象，来填充target对象，返回target对象
例：
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_解构_数组操作_对象操作
分享网址：http://6mz.cn/article/jpcgjp.html