五、ES6之对象
一、对象和属性和方法
JavaScript中对象:
var person={name:"Jack",age:20};
或:
var name = "jack";
var age = 20;
var person = {name:name,age:age};
console.log(person.age); //20
ES6中的简洁表示:
let [name,age]=["jack",20];
let person = {name,age}; //等同person = {name: name,age: age}
console.log(person.age); //20
JavaScript中对象方法:
var person = {
SayHi:function()
{
console.log("hi");
}
}
person.SayHi(); //hi
ES6中简洁表示:
let person = {
SayHi()
{
console.log("hi");
}
}
person.SayHi();
ES6允许用表达式作为属性名,但是一定要将表达式放在方括号内:
var person = {["na"+"me"]:"jack",["a"+"ge"]:20};
console.log(person.age);
或
let str = "Hi";
let person = {
["Say"+str](){
console.log("hi");
}
}
person.SayHi();
注意点:属性的简洁表示法和属性名表达式不能同时使用,否则会报错:
let [name,age]=["jack",20];
let person = {["na"+"me"],["a"+"ge"]}; //报错
二、对象的扩展运算符...
取出参数对象所有可遍历属性然后拷贝到当前对象:
let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1};
console.log(stu2); //{name: "Jack", age: 20,sex:"男"}
合并两个对象:
let stu1BasicInfo = {name:"Jack",age:20,sex:"男"};
let stu1DetailInfo = {phone:"13524521457",mail:"ldh@163.com"};
let stu = {...stu1BasicInfo,...stu1DetailInfo};
console.log(stu);
//{name:"Jack",age:20,sex:"男",phone:"13524521457",mail:"ldh@163.com"}
拷贝对象时支持添加属性:
let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,phone:"13554785452"};
console.log(stu2); //{name:"Jack",age:20,sex:"男",phone:"13554785452"}
添加的属性在拓展运算符后面,取添加的属性:
let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,name:"rose",phone:"13554785452"};
console.log(stu2);
//{name:"rose",age:20,sex:"男",phone:"13554785452"}
添加的属性在拓展运算度前面,取扩展运算符内容:
let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {name:"rose",phone:"13554785452",...stu1};
console.log(stu2);
//{name:"Jack",phone:"13554785452",age:20,sex:"男"}
五、ES6之对象的更多相关文章
- ES6常用对象操作
ES6常用对象操作 一. const 简单类型数据常量 // const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动.对于简单类型的数据(数值.字符串.布尔值),值就保存在 ...
- ES6 - 对象
ES6为对象带来的新特性. 对象传统的写法: let person={ 'name':'Lily', 'say':function(){ alert('hello!'); } } 1.ES6中写法更简 ...
- 第五章 JavaScript对象及初识面向对象
第五章 JavaScript对象及初识面向对象 一.对象 在JavaScript中,所有事物都是对象,如字符串.数值.数组.函数等. 在JavaScript对象分为内置对象和自定义对象,要处理一些 ...
- ES6新增对象方法的访问描述符:get(只读)、set(只写)
Es6新增对象方法的访问描述符:get(只读).set(只写),可以直接使用,一般用于数据监听,用途类似于vue.$watch. var obj = { a:1, get bar() { return ...
- ADO.NET中的五大内置对象
ADO.NET中的五大内置对象 学习链接:https://blog.csdn.net/wxr15732623310/article/details/51828677
- 一、虚拟环境.二、路由配置主页与404.三、2.x路由分发.四、伪静态.五、request对象.六、FBV与CBV.七、文件上传.
一.虚拟环境 ''' 解决版本共存 1. 用pycharm选择File点击NewProject然后选择virtualenv创建一个纯净环境 2. 打开下载的目录将venv文件夹下的所有文件(纯净的环境 ...
- es6 javascript对象方法Object.assign()
es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1 基本用法 Object.assign方法用于对象的合并,将源对象 ...
- Excel VBA入门(五)Excel对象操作
本章是本系列教程的重点.但我觉得应该不是难点.从第零章开始到学完本章,应该可以把VBA用于实战中了. Excel对象主要有4个: 工作薄 Workbook 工作表 Worksheet 单元格区域 Ra ...
- ES6 Promise对象then方法链式调用
then()方法的作用是Promise实例添加解决(fulfillment)和拒绝(rejection)状态的回调函数.then()方法会返回一个新的Promise实例,所以then()方法后面可以继 ...
- ES6之对象的语法糖
本文介绍下ES6中对象的一些拓展功能. 这三个语法糖在实际的项目开发中经常会见到.
随机推荐
- Vulnhub DC-1靶场学习笔记
0x00 环境准备 本文介绍了Vulnhub中DC-1靶机的实战渗透过程,实战的目标是获取到服务器中的5个flag,最终目标是获取到root目录下的thefinalflag文件: 测试环境 备注 Ka ...
- 利用JGrapht对有向无环图进行广度优先遍历
环境需求:JDK:1.8 jar:jgrapht-core-1.01.jar package edu; import org.jgrapht.experimental.dag.DirectedAcyc ...
- eureka的简单介绍,eureka单节点版的实现?eureka的自我保护?eureka的AP性,和CP性?
注意!!! 这是对上一篇博客 springcloud的延续,整个项目的搭建,来源与上一篇博客.一.什么是eureka? // eureka是一个注册中心,实现了dubbo中zookeeper的效果! ...
- deque概述
1.简介 双端队列deque,与vector的最大差异在于: 一.deque运行常数时间对头端或尾端进行元素的插入和删除操作. 二.deque没有所谓的容器概念,因为它是动态地以分段连续空间组合而成随 ...
- 版本控制SVN
为什么需要版本控制软件 代码的冻结 避免在重大的考核之前改动代码 每个稳定版本都在服务器保存进度,随时可以回退 需求频繁的变化不要改动稳定的代码,不要改别人写好的代码 为什么需求会变化?有时候产品自己 ...
- 什么是Segue
Storyboard上每一根用来界面跳转的线,都是一个UIStoryboardSegue对象(简称Segue) Segue的属性 每一个Segue对象,都有3个属性唯一标识@property (non ...
- 一张图让你看懂 iPhone 各种分辨率问题! #DF
话不多说,直接看图! Source: paintcodeapp.com
- Java和Js编码(encodeUrl)解码(decodeUrl)对空格的差异问题
今天解决一个问题的时候遇到了一个编码解码问题,记录一下. 1. Js用的是encodeURIComponent()方法编码,后面的都以该编码方式处理出来的数据为准. 2. Java用的是URLDeco ...
- JSP页面乱码解决
1. tomcat 设置端口处加上 URIEncoding="UTF-8" 2. tomcat 的bin文件夹下的catalina.bat中如下位置加上如下编码:-Dfile.en ...
- shell脚本三剑客之sed
shell脚本之sed命令 1.概述 2.工作流程 3.命令格式 4.具体操作 1.概述: 1.sed是一种流编辑器,流编辑器会在编辑器处理数据之前基于预先提供的一组规则来编辑数据流 2.sed编辑器 ...