68ES6_解构_数组操作_对象操作
解构:
数组解构:
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' }
转载于:https://blog.51cto.com/jowin/2394714
68ES6_解构_数组操作_对象操作相关推荐
- JS(解构) 之数组和对象中提取数据总结
解构含义 解构功能含义:从复杂数据类型中(数组或对象)中提取数据的过程. JS(解构) 之数组 从数组中提取首个元素 方式一:基于数组下标提取元素 const names = ['zzg', 'zcx ...
- 解构给默认值_解构赋值默认值误区
问题还原 这是最近 CR 的时候在业务代码中发现了一个问题,先来看一下问题代码: // data 为接口返回的数据 const { bizObject = {}, total = 0 } = data ...
- java数组可以包含对象吗_数组可以包含对象类型的元素吗_对象数组
对象数组就是数组里的每个元素都是类的对象,赋值时先定义对象,然后将对象直接赋给数组就行了. 怎样声明包含 5 个元素的对象数组,每个元素都是 Employee 类型的对象 浏览次数:4875 bill ...
- 解构给默认值_函数的对象参数的解构和默认值
{"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...
- 哈希表(散列表_Hashtable)_数组+链表_代码实现员工管理
1.基本介绍 散列表(Hash table,也叫哈希表),是根据关键码值(Key value)而直接进行访问的数据结构.也就是说,它通过把关键码值映射到表中一个位置来访问记录,以加快查找的速度.这个映 ...
- C++_跳转语句continue_跳转语句goto_一维数组数组_数组定义_数组名---C++语言工作笔记019
然后我们去看continue语句,这个跟java中的是一样的 意思是跳出本次循环
- ES6(一)——字面量的增强、解构、let/const、块级作用域、暂时性死区
一.字面量的增强 ES6中对 对象字面量 进行了增强,称之为 Enhanced object literals(增强对象字面量). 字面量的增强主要包括下面几部分: 属性的简写:Property Sh ...
- java对象赋值给数组_带你深入的理解数组和对象的解构赋值。
es6提供了一个非常好的特性,即变量的解构赋值.从而我们可以方便的从数组和对象中提取数据并将它们赋值给变量.这是非常必要的.先来看在这个新特性发布之前我们是如何从数组中提取数据的.如下: let nu ...
- 最详细ES6教程_变量的解构赋值
最详细ES6教程_变量的解构赋值 数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 以前,为变量赋值,只能直接指定 ...
- javascript语法_了解JavaScript中的解构,剩余参数和传播语法
javascript语法 The author selected the COVID-19 Relief Fund to receive a donation as part of the Write ...
最新文章
- zk Acl权限:只有一个账号有crdwa权限,匿名用户只有r权限
- sql server 链接服务器 改访问接口_跨服务器链接数据库?其实很简单!(上)
- 卷积神经网络训练模拟量化实践
- 奥鹏东师计算机应用基础18,免费在线作业答案奥鹏东师计算机应用基础15秋在线作业1试卷及答案(1)...
- (篇三)C语言的冒泡排序多解、选择排序、数组合并、矩阵相加
- linux7新建用户,CentOS 7中添加一个新用户并授权
- linux关闭mysql日志记录_linux 下mysql 运行一段时间后自动关闭,日志无异常
- JUnit 5 Alpha版本简化了单元测试
- cjuiautocomplete ajax,Yii CJuiAutoComplete小部件:空响应消息事件
- 客户跟进中的一些小技巧
- java 实现soa_Java实现SOA的标准途径
- vue手机号校验,邮箱校验
- 快递公司面单纸张标准
- phpmyadmin linux 升级,phpMyAdmin 4.9.2发布下载,附主要更新内容介绍
- @media用法解释
- 干货,值得收藏!Python 操作 Excel 报表自动化指南!
- C语言printf输出十六进制16进制
- 专利与论文-1:为什么要写专利?专利有什么好处?
- Excel如何完成多权重计算
- Win7蓝牙标志不见了, 如何找回?
热门文章
- 解决ESXi识别加密狗U盾的问题
- ElementUI 面试题整理
- 计算机与网络技术 英语,计算机与网络英语词汇(S3)
- NBT:扩增子及其他测序的最少信息标准和测序规范(MIMARKS)
- word2010设置护眼背景
- 用户流失生命周期如何最大化延缓或延长(包含引流-促活-问卷调研-流失召回话术)
- ipv6的127位掩码如何表示_IPv4地址、子网掩码、详细讲解
- 克隆出错fatal: unable to access ‘https://github.com/‘: OpenSSL SSL_connect:
- 小游戏《塔防》开发(一)上篇
- 人力资源专员岗位职责和要求