-
2019-08-22 16:05:25
ES6 对象属性的缩写
ES6 中对象的属性可以缩写
如,这段 ajax 请求的代码
let url = 'http://kylebing.cn/dontstarve' $.ajax({ url: url, success: function (data) { console.log(data) } })
缩写为
let url = 'http://kylebing.cn/dontstarve' $.ajax({ url, // 属性名和变量为相同时,直接写一个,跟 url: url 相同 success(data){ // 匿名方法的时候,可以直接写成这样。跟 success: function(data){} 相同。 console.log(data) } })
例子
在很多 vue 项目中,都会用到缩写,如:
main.js
export default { name: "tabbar", data (){ // ES6 方法简写,等同于 data: function(){} return { currentTab: 'index', tabs: [ {title: '主页', tab: 'index', class: 'tab-index'}, {title: '制造', tab: 'craft', class: 'tab-craft'}, {title: '我的', tab: 'mine', class: 'tab-mine'} ] } } }
更多相关内容 -
ES6 对象属性的简洁表示
2021-07-15 13:38:24ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 示例 定义了一个对象的基本属性 let username = 'zhangsan' let age = 18 let tag = function() { console.log('i love ...ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。
示例
- 定义了一个对象的基本属性
let username = 'zhangsan' let age = 18 let tag = function() { console.log('i love study! ') }
- ES6以前的做法,需要按照
变量名: 变量对象
这种形式来做
var user = { username: username, age: age, tag: tag, sing: function() { console.log('I am singing!') } }
- ES6的写法:可省略变量名,直接传入变量对象;对象中的方法声明可省略
: function
const user = { username, age, tag, sing() { console.log('I am singing!') } }
- 打印输出结果
总结
当不需要更改变量名时,可直接直接写 已有变量 来完成对象声明操作;在对象中编写方法时,可省略
: function
-
ES6对象属性名简洁表示法和表达式、对象新方法、属性的遍历
2021-04-08 19:36:43对象属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法。 ES6允许在对象中只写属性名,不写属性值。 let foo = 'bar'; let baz = {foo}; console.log(baz); // {foo:'bar'} // same as let baz1 = ...概览
对象属性的简洁表示法
ES6允许直接写入变量和函数作为对象的属性和方法。
ES6允许在对象中只写属性名,不写属性值。let foo = 'bar'; let baz = {foo}; console.log(baz); // {foo:'bar'} // same as let baz1 = {foo:foo} console.log(baz1); // {foo:'bar'} let first = 'Jone'; let last = 'Doe'; let obj = {first,last}; console.log(obj); // {first: "Jone", last: "Doe"} // same as let obj1 = {first:first,last:last}; console.log(obj1); // {first: "Jone", last: "Doe"} const HELLO = { method(){ return 'hello' } } console.log(HELLO.method()); // 'hello' // same as const HELLO1 = { method:function(){ return 'hello' } } console.log(HELLO1.method()); // 'hello'
实际运用中的一些例子:
// 用于人物名称及行为的对象 let birth = '2000/01/01' const PERSON = { name: '张三', birth, // same as: birth:birth hello() {console.log('我的名字是', this.name);} // same as: hello:function(){...} } // 用于函数返回值 function getPoint(x = 1, y=10){ return {x, y} } console.log(getPoint()); // {x: 1, y: 10} console.log(getPoint(3,3)); // {x: 3, y: 3} console.log(getPoint(3)); // {x: 3, y: 10} // CommonJS模块输出变量 let ms = {}; function getItem(key){ return key in ms? ms[key] : null; } function setItem(key,value){ ms[key] = value; } function clear(){ ms = {}; } module.exports = {getItem,setItem,clear}; // same as: module.exports = {getItem:getItem,setItem:setItem,clear:clear}; // 属性的赋值器和取值器 const CART = { _wheels: 4, get wheels(){ return this._wheels; }, set wheels(value){ if(value<this._wheels){ throw new Error('数值太小了'); } this._wheels = value; } }
属性名表达式
ES6允许字面量定义对象时,用表达式作为对象的属性名,即把表达式放在方括号内。
定义对象属性的两种方法:
- 通过固定名称
let obj = {}; obj.foo = true; console.log(obj); // {foo: true}
- 通过表达式
let obj1 = {}; obj1['a'+'bc'] = 123; console.log(obj1); // {abc: 123}
let propKey = 'foo'; let propKeyObj = { [propKey]: true, ['a'+ 'bc']: 123 } console.log(propKeyObj); // {foo: true, abc: 123} let lastWord = 'last word'; let a = { 'first word':'hello', [lastWord]:'world' } console.log(a); // {first word: "hello", last word: "world"} console.log(a['first word']);// 'hello' console.log(a[lastWord]); // 'world' console.log(a['last word']); // 'world' // 定义方法名 let methodName = { ['h'+'ello'](){ return 'hi' } } console.log(methodName.hello()); // 'hi'
注意:属性名表达式不能和简洁表达式同时使用
// 报错 let foo = 'bar'; let bar = 'abc'; let baz = {[foo]};
注意:属性表达式如果是一个对象,默认情况下会把对象转为字符串
[object Object]
const keyA = {a:1}; const keyB = {b:2}; const myObject = { [keyA]: 'valueA', [keyB]: 'valueB', } console.log(myObject); // {[object Object]: "valueB"}
Object.is(value1,value2)
与严格相等运算符(=)的行为基本一致;
解决严格运算符(=)NaN
不等于自身,以及+0等于-0的问题。console.log(Object.is('foo','foo'));; // true console.log({} === {}); // false console.log(Object.is({},{})); // false console.log(NaN === NaN); // false console.log(Object.is(NaN,NaN)); // true console.log(+0 === -0); // true console.log(Object.is(+0,-0)); // false console.log([0,NaN,2].indexOf(NaN)); // -1 console.log([0,NaN,2].findIndex(x => Object.is(x, NaN))); // 1
Object.assign(target,source_1,source_2,...)
Object.assign()
方法将源对象(source)所有可枚举的属性合并到目标对象(target)中:它修改target,首先将source_1的所有可枚举的自己的属性复制到target中,然后将source_2的所有自己的属性复制到target中,以此类推。最后,它返回target。let target = {a:1}; let source_1 = {b:2}; let source_2 = {c:3}; Object.assign(target,source_1,source_2); console.log(target,source_1,source_2); // {a: 1, b: 2, c: 3} {b: 2} {c: 3}
让我们更仔细看看
Object.assign()
是如何运作的:- 两种类型的属性键:同时支持
String
、Symbel
作为属性键;
let v1 = 'abc'; let v2 = true; let v3 = 10; let v4 = {[Symbol('c')]: 'c'}; const obj = Object.assign({}, v1, v2, v3, v4); console.log(obj); // {0: "a", 1: "b", 2: "c", Symbol(c): "c"}
- 仅复制源对象可枚举的自身属性:不复制继承属性,也不复制不可枚举的属性;
const obj = Object.assign({b: 'c'}, Object.defineProperty({}, 'invisible',{ enumerable:false, // enumerable属性称为‘可枚举性’ value:'hello' }) ) console.log(obj); // {b: "c"}
- 通过赋值复制:目标对象中的属性是通过赋值(内部操作[[Put]])创建的。这意味着,如果
target
拥有(自己的或继承的)setter
,则在复制期间将调用这些setter
。另一种方法是定义新的属性,这是一种总是创建新的自己的属性且从不调用setter
的操作。最初有人建议使用Object.assign()
的一个变体,它使用定义而不是赋值的方式。这个提议在ECMAScript 6中已经被拒绝了,但是在以后的版本中可能会被重新考虑。
let obj1 = {a: {b: 1}}; let obj2 = Object.assign({}, obj1); console.log(obj2); // {a: {b: 1}} // Object.assign()方法实行的是浅复制,而不是深复制。 let target = {a: { b: 'c', d: 'e' }}; let source = {a: { b: 'hello' }}; const obj = Object.assign(target, source); console.log(obj); // a: {b: "hello"} console.log(target); // a: {b: "hello"}
常见用途:
为对象添加属性class Point{ constructor(x, y){ Object.assign(this, {x, y}); } }
为对象添加方法
function SomeClass(){ } Object.assign(SomeClass.prototype, { someMethod(arg1,arg2){ // ... }, anotherMethod(){ // ... } }) console.dir(SomeClass); // same as SomeClass.prototype.someMethod = function(arg1, arg2){ //... }; SomeClass.prototype.anotherMethod = function(){ //... }
克隆对象
// 克隆原始对象自身的值 function clone1(origin){ return Object.assign({}, origin); } // 克隆原始对象继承的值(保持继承链) function clone2(params) { let paramsProto = Object.getPrototypeOf(params); return Object.assigin(Object.create(paramsProto), params) }
合并多个对象
// 多个对象合并到target const merge1 = (target, ...sources) => Object.assign(target, ...sources); // 多对象合并返回新对象 const merge2 = (...sources) => Object.assign({}, ...sources);
为属性指定默认值
const DEFAULTS = { logLevel: 0, output: 'html' }; function processContent(options){ options = Object.assign({},DEFAULTS,options); console.log(options); } processContent('abc'); // {0: "a", 1: "b", 2: "c", logLevel: 0, output: "html"} processContent({'abc':'abc'}); // {logLevel: 0, output: "html", abc: "abc"}
属性的遍历
for...in
、Object.keys(obj)
、Object.getOwnPropertyNames(obj)
、Object.getOwnPropertySymbels(obj)
、Reflect.ownKeys(obj)
function allObj(){ this.name = '张三'; // 自有属性 this.age = '12'; // 自有属性 this.invisible = { enumerable: false, value: 'hello' }, this.invisible = { enumerable: false, value: 'hello' } } allObj.prototype.disEnum = { enumerable: false, value: 'disEnum' } allObj.prototype.Enum = { enumerable: true, value: 'Enum' } let obj = new allObj Object.assign(obj, { a: '1', b: '2', c: '3', [Symbol('c')]: 'c', }) // let obj2 = Object.assign(obj1, // Object.defineProperty({}, ) // ) Object.assign(obj, Object.defineProperty({}, 'visible',{ enumerable: true, value: 'word' }) ) console.log(obj); // allObj {a: "1",age: "12",b: "2",c: "3",invisible: {enumerable: false,value: 'hello'},name: "张三",visible: "word",Symbol(c): "c",__proto__:Enum: {enumerable: true, value: "Enum"},disEnum: {enumerable: false, value: "disEnum"}} // for...in循环遍历对象自身的和继承的属性(不含Symbol属性) for(let key in obj){ console.log(key); // name // age // invisible // a // b // c // invisible // visible // disEnum // Enum } // Object.keys()返回一个数组,包括对象自身(不含继承的)的所有属性(不含Symbol属性) console.log(Object.keys(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible"] // Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含Symbol属性,但是包括不可枚举属性 ) console.log(Object.getOwnPropertyNames(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible"] // Object.getOwnPropertySymbols() 返回一个数组,包含所有对象自身的所有Symbol属性 console.log(Object.getOwnPropertySymbols(obj)); // [Symbol(c)] // Reflect.ownKeys()返回一个数组,包含对象自身的所有属性,不管属性名是Symbol还是字符串,也不管是否可枚举 console.log(Reflect.ownKeys(obj)); // ["name", "age", "invisible", "a", "b", "c", "visible", Symbol(c)]
-
es6 对象属性/方法简写
2021-06-23 20:52:54es6 对象属性 / 方法简写 对象属性简写 变量名会作为对象属性名 let username = 'wj' let age = 123 let obj5 = { username, age } 对象方法简写 原来是 foo: function(param1, param2) {}, es6 写法: foo... -
es6对象属性的可枚举性
2021-11-15 09:10:48对象属性的可枚举性 对象的每个属性都有一个描述对象(Descriptor),用来控制该属性的行为。 Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。 let obj = { name: 'Tom', age: 26 } console.log... -
ES6 对象属性名表达式
2022-04-30 21:42:31属性表达式是属于ES6对象拓展 简洁表示 在es6 如果键名和值名是一致的话 那么可以省略一个。换句话说,ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。 对象属性名表达式 ... -
我不会ES6-对象属性重命名
2021-12-22 16:22:54我不会ES6-对象属性重命名期望效果实现方法 期望效果 "data": [ { "type": "长庆分公司", "value": 1180 }, { "type": "华北分公司", "value": 676 } ], 将”type“改为"place" "dataModifed": [ { ... -
微信小程序 妙用ES6 对象属性拼接和赋值进行提交数据
2020-07-21 11:11:44this.setData({ [`inputList[${inputindex}].value`]: inputVal }) 这里是在提交时,循环inputList的每个type作为属性名,value为属性值,进行对象属性新增和赋值: dataList[item.type] = item.value; 点击提交,... -
ES6的对象属性简写
2021-01-27 14:56:14在ES6中允许我们在设置一个对象的属性的时候不指定属性名。 不使用ES6: const name='Ming', age='18', city='Shanghai'; const student ={ name:name, age:age, city:city }; console.log(student); 使用ES6: ... -
ES6的属性及方法
2022-04-08 08:29:51ES6的常用方法(一) 什么是es6?ES6全称 ECMAScript 6.0,2015年6月发布。现在大部分浏览器都支持ES6了。 为什么会有ES6? 解决了ES5的不足点。 ES6的语法糖,写代码有质的飞跃。 现在各大厂面试中必有ES6,如果... -
es6对象属性的遍历
2019-01-24 15:52:24ES6一共有5种方法可以遍历对象的属性。 (1)for...in for...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。 (2)Object.keys(obj) Object.keys返回一个数组,包括对象自身的(不含继承的)所有... -
ES6对象表达式和添加属性
2019-03-12 11:10:18如果对象属性study是个方法,则可以简写为study(){} let books = { study:function(){ } }; let js = "javascript", h5 = "html4"; let books = { js,//如果属性名和变量... -
ES6五种遍历对象属性的方式
2021-04-12 19:13:59ES6五种遍历对象属性的方式 function allObj(){ this.name = '张三'; // 自有属性 this.age = '12'; // 自有属性 this.invisible = { enumerable: false, value: 'hello' }, this.invisible = { enumerable:... -
ES6,14、对象属性同名简写
2021-11-22 15:04:27以前的同名属性需要这样写 const name = '大鱼'; const age = 100; const obj = { name:name, age:age }; console.log(obj) //{name:'大鱼',age:100} ES6新增语法,只需要这样写 const name = '大鱼'; const age ... -
es6新增属性
2021-06-15 19:16:301、向对象添加属性 克隆对象,同时向(浅)克隆对象添加附加属性,如下代码: const user = { id: 10, name: 'Tom'}const userWithPass = { ...user, password: 'Password!' }user //=> { id: 10, name: 'Tom' }... -
ES6 对象的拷贝
2022-04-20 16:15:16ES6 对象的深拷贝 1、如果要进行对象的浅拷贝可以使用Object.assign() https://cloud.tencent.com/developer/section/1191901 2、深拷贝 https://blog.csdn.net/liusa825983081/article/details/118723285 -
ES6学习--对象属性的遍历
2020-12-19 11:12:53ES6一共有5种方法可以遍历对象的属性。(1)for...infor...in循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)。(2)Object.keys(obj)Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含... -
es6 对象添加类型属性
2021-11-26 19:47:28es6 对象添加类型属性 当一个对象想添加一个独一无二的方法时 使用symbol类型是最安全的 对象内方法 值太多 不好查找时 可以使用如下方法: let play = { name:'abc', lol:function(){ console.log('英雄联盟') ... -
ES6对象增强写法
2021-11-08 15:23:44在es6中,对字面量进行了很多增强。 1、属性的简写 //1、属性的简写 //es6之前 // let name='why'; // let age='18'; // let obj1 = { // name: name, // age: age // } // console.log(obj1) // //es6... -
ES6+ | 对象属性与方法简写
2019-03-20 14:52:12文章目录对象字面量简写属性简写方法简写注意应用坑点 对象字面量 在JavaScript中,对象字面量是创建对象是一种简洁方式,形式如下: let a = 3 let obj = { ...在ES6之前,对象字面量的属性与方法必... -
ES6删除和过滤对象中部分属性
2020-10-19 15:20:01ES6删除和过滤对象中部分属性 -
ES6对象的新增方法
2021-01-13 18:57:51Object.is()Object.assign()1.Object.is()ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后...ES6 提出“Same-value equality”(同值相等)... -
Es6判断对象中是否含有某属性
2022-05-11 17:30:47let n = Object.keys(item).indexOf("backmoney"); -1没有 -
ES6-对象的函数属性简写
2020-04-07 10:56:49比如一个Person对象,里面有eat方法: let person = { name: "jack", // 以前: eat: function (food) { console.log(this.name + "在吃" + food); }, // 箭头函数版: eat2: food => console.log(person.... -
ES6 中三种方式定义对象属性
2019-12-28 16:57:15ES6 中三种方式定义对象属性 重复样本代码让开发者很不爽,代码混乱掩盖了重要业务代码。ES6关注并解决一些重复的代码方式,使代码简洁、逻辑清晰,如数组解构、对象解构、箭头函数等。本文我们主要介绍利用三种方式... -
ES6对象数组按照某个对象属性值分组汇总并排序
2021-12-30 17:42:36} //对象数组排序 var compare = function (property,type) { type=type?type:"asc" var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])\s+(20|21|22|23|[0-1]\d):[0-5]\d:[0-... -
第 43 题:如何使用 ES5、ES6 实现监听对象属性的改变?
2021-09-08 09:33:17利用 ES5 的 Object.defineProperty 实现 let student = {}; let age = undefined; Object.defineProperty... // 获取该属性时触发 return age; }, set: function(val) { // 设置该属性值时触发 age = val; -
es6 中 对象和数组常用的方法和属性
2021-10-23 20:57:32对象的方法和属性 for…in 以任意顺序遍历一个对象的除Symbol以外的可枚举属性 for (variable in object) statement ...//遍历出对象属性 // 1、 for(let prop in obj){ console.log("obj."+prop -
【ES6之对象】Object.assign()的使用——复制可枚举属性
2021-09-27 10:34:14【ES6之对象】Object.assign()的使用——复制可枚举属性 Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象分配到目标对象。它将返回目标对象。 实例1 const target = { a: 1, b: 2 }; const source ...
收藏数
100,475
精华内容
40,190