68ES6_解构_数组操作_对象操作-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

68ES6_解构_数组操作_对象操作-创新互联

创新互联公司是一家专注于成都做网站、成都网站设计与策划设计,殷都网站建设哪家好?创新互联公司做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:殷都等地区。殷都做网站价格咨询:18982081108

解构:

数组解构:

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' }

另外有需要云服务器可以了解下创新互联cdcxhl.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


当前文章:68ES6_解构_数组操作_对象操作-创新互联
网站地址:http://kswsj.cn/article/dhjsed.html

其他资讯