草庐IT

ES6对象的扩展

南风晚来晚相识 2023-03-28 原文

对象中可以直接写变量

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。
const foo = 'bar';
const obj = {foo}; //key值就是foo,value值是 foo变量对应的值
// 输出的是 {foo: "bar"}
console.log(obj)

对象中可以直接写函数-省略了function 声明
const obj = {
    method() {
        return "Hello!";
    }
};
// 等价于下面的写法。
const obj = {
    method: function() {
        return "Hello!";
    }
};

//输出 Hello
console.log(obj.method())

属性名表达式

JavaScript 定义对象的属性,有两种方法。
// 方法一
let obj={}
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;
console.log(obj)

属性的可枚举性

对象的每个属性都有一个描述对象(Descriptor)用来控制该属性的行为。
Object.getOwnPropertyDescriptor方法可以获取该属性的描述对象。
感觉这个方法在实际中很少使用。
let obj = { foo: 123 };
console.log(Object.getOwnPropertyDescriptor(obj, 'foo'))
输出的值:
{
  configurable: true
  enumerable: true
  value: 123      //这个属性的值
  writable: true  //这个属性可以修好
}
其中描述对象的enumerable属性,称为“可枚举性”。
如果该属性为false,就表示某些操作会忽略当前属性。

目前,有四个操作会忽略 enumerable 为 false 的属性。

目前,有四个操作会忽略enumerable为false的属性。
for...in循环:只遍历对象自身的和继承的可枚举的属性。  es5
Object.keys():返回对象自身的所有可枚举的属性的键名。es5
JSON.stringify():只串行化对象自身的可枚举的属性。  es5
Object.assign(): 忽略enumerable为false的属性,只拷贝对象自身的可枚举的属性。可以进行浅拷贝。 es6
其中,只有for...in会返回继承的属性,其他三个方法都会忽略继承的属性,只处理对象自身的属性。

引入“可枚举”(enumerable)的目的

实际上,引入“可枚举”(enumerable)这个概念的最初目的:就是让某些属性可以规避掉for...in操作。
不然所有内部属性和方法都会被遍历到。这样影响性能。
比如,对象原型的toString方法,以及数组的length属性,就通过“可枚举性”,从而避免被for...in遍历到。

Object.getOwnPropertyDescriptor(Object.prototype, 'toString').enumerable
// false

Object.getOwnPropertyDescriptor([], 'length').enumerable
// false

上面代码中,toString和length属性的enumerable都是false。
因此for...in不会遍历到这两个继承自原型的属性

另外,ES6 规定,所有 Class 的原型的方法都是不可枚举的。
Object.getOwnPropertyDescriptor(class {foo() {}}.prototype, 'foo').enumerable
// false

属性的遍历

ES6 一共有 5 种方法可以遍历对象的属性。
(1)for...in
for...in循环遍历对象自身的和继承的可枚举属性(不含 Symbol 属性)。

(2)Object.keys(obj)
Object.keys返回一个数组,包括对象自身的(不含继承的)所有可枚举属性(不含 Symbol 属性)的键名。

(3)Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames返回一个数组,包含对象自身的所有属性(不含 Symbol 属性,但是包括不可枚举属性)的键名。

(4)Object.getOwnPropertySymbols(obj)
Object.getOwnPropertySymbols返回一个数组,包含对象自身的所有 Symbol 属性的键名。

(5)Reflect.ownKeys(obj)
Reflect.ownKeys返回一个数组,包含对象自身的(不含继承的)所有键名,不管键名是 Symbol 或字符串,也不管是否可枚举

对象的解构赋值

解构赋值:对象的解构赋值用于从一个对象中取值,
相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。
所有的键和它们的值,都会拷贝到新对象上面。
let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

对象的解构赋值的-4个注意点
第一个:
由于解构赋值要求等号右边是一个对象,所以如果等号右边是undefined或null,就会报错,因为它们无法转为对象。
let { ...z } = null; // 运行时错误
let { ...z } = undefined; // 运行时错误

let { ...a } = {}; //不会报错
console.log(a) //输出的是对象 {}

第二个:
// 解构赋值必须是最后一个参数,否则会报错。
let { ...x, y, z } = {name:'张',age:12,num:1900, sex:'男'}; // 句法错误:因为不是最后一个值
console.log(x) //会报错

第三个:
注意,解构赋值的拷贝是浅拷贝。
即如果一个键的值是复合类型的值(数组、对象、函数)、
那么解构赋值拷贝的是这个值的引用,而不是这个值的副本。
下面特别说明:解构赋值的拷贝是浅拷贝

第四个:
扩展运算符的解构赋值,不能复制继承自原型对象的属性。
let o1 = { a: 1 };
let o2 = { b: 2 };
o2.__proto__ = o1;
let { ...o3 } = o2;
o3 // { b: 2 }
o3.a // undefined

解构赋值的拷贝是浅拷贝

Let oldObj={
  code: 500,
  isAxiosError: true,
  request:  {
    onreadystatechange: null,
    readyState: 4,
    timeout: 30000,
    withCredentials: false,
    upload: XMLHttpRequestUpload,
  },
  response: undefined
}
//浅拷贝
let {...newObj } = oldObj
// 更改了新对象的值,
newObj.code=200
console.log('oldObj.code', oldObj.code) //输出 500
console.log('newObj.code', newObj.code) //输出 200

// 下面证明是浅拷贝
newObj.request.readyState=2
//更改新对象后,原始对象的值也跟着修改了。
console.log('oldObj.request.readyState', oldObj.request.readyState) //输出 2
console.log('newObj.request.readyState', newObj.request.readyState) //输出 2
说明了是浅拷贝

扩展运算符扩展函数的参数

函数wrapperFunction在baseFunction的基础上进行了扩展,
能够接受多余的参数,并且保留原始函数的行为。
这一种经常是用在封装一个方法。这个方法的参数是未知的。
这个时候就可以考虑使用扩展运算符 如下:
function Aa(a,b,...obj){
  console.log('a',a)
  console.log('b',b)
  // 竟然是一个数组 [{name: "詹桑", age: 10, sex: "男"}]
  console.log('obj',obj)
}
Aa('123','345',{name:'詹桑', age:10, sex:'男'})

扩展运算符--用于对象

对象的扩展运算符(...)用于取出对象的所有可遍历属性,拷贝到当前对象之中。
let obj = { a: 3, b: 4 };
let newObj = { ...obj };
newObj // { a: 3, b: 4 }

扩展运算符--用于数组

由于数组是特殊的对象,所以对象的扩展运算符也可以用于数组。
let oldArrr = { ...['a', 'b', 'c'] };
oldArrr
// {0: "a", 1: "b", 2: "c"}

扩展运算符--用于类

对象的扩展运算符,只会返回参数对象自身的、可枚举的属性,这一点要特别小心。
尤其是用于类的实例对象时。
class C {
  p = 12;
  m() {}
}

let c = new C();
let clone = { ...c };

clone.p; // ok
clone.m(); // 报错

c是C类的实例对象,对其进行扩展运算时,只会返回c自身的属性c.p。
而不会返回c的方法c.m(),因为这个方法定义在C的原型对象上

对象的扩展运算符等同于使用 Object.assign()方法

let aClone = { ...a };
// 等同于
let aClone = Object.assign({}, a);


扩展运算符可以用于合并两个对象。
let ab = { ...a, ...b };
// 等同于
let ab = Object.assign({}, a, b);

有关ES6对象的扩展的更多相关文章

  1. ruby - 如何从 ruby​​ 中的字符串运行任意对象方法? - 2

    总的来说,我对ruby​​还比较陌生,我正在为我正在创建的对象编写一些rspec测试用例。许多测试用例都非常基础,我只是想确保正确填充和返回值。我想知道是否有办法使用循环结构来执行此操作。不必为我要测试的每个方法都设置一个assertEquals。例如:describeitem,"TestingtheItem"doit"willhaveanullvaluetostart"doitem=Item.new#HereIcoulddotheitem.name.shouldbe_nil#thenIcoulddoitem.category.shouldbe_nilendend但我想要一些方法来使用

  2. ruby-on-rails - 按天对 Mongoid 对象进行分组 - 2

    在控制台中反复尝试之后,我想到了这种方法,可以按发生日期对类似activerecord的(Mongoid)对象进行分组。我不确定这是完成此任务的最佳方法,但它确实有效。有没有人有更好的建议,或者这是一个很好的方法?#eventsisanarrayofactiverecord-likeobjectsthatincludeatimeattributeevents.map{|event|#converteventsarrayintoanarrayofhasheswiththedayofthemonthandtheevent{:number=>event.time.day,:event=>ev

  3. ruby - 使用 C 扩展开发 ruby​​gem 时,如何使用 Rspec 在本地进行测试? - 2

    我正在编写一个包含C扩展的gem。通常当我写一个gem时,我会遵循TDD的过程,我会写一个失败的规范,然后处理代码直到它通过,等等......在“ext/mygem/mygem.c”中我的C扩展和在gemspec的“扩展”中配置的有效extconf.rb,如何运行我的规范并仍然加载我的C扩展?当我更改C代码时,我需要采取哪些步骤来重新编译代码?这可能是个愚蠢的问题,但是从我的gem的开发源代码树中输入“bundleinstall”不会构建任何native扩展。当我手动运行rubyext/mygem/extconf.rb时,我确实得到了一个Makefile(在整个项目的根目录中),然后当

  4. ruby-on-rails - 如何验证非模型(甚至非对象)字段 - 2

    我有一个表单,其中有很多字段取自数组(而不是模型或对象)。我如何验证这些字段的存在?solve_problem_pathdo|f|%>... 最佳答案 创建一个简单的类来包装请求参数并使用ActiveModel::Validations。#definedsomewhere,atthesimplest:require'ostruct'classSolvetrue#youcouldevencheckthesolutionwithavalidatorvalidatedoerrors.add(:base,"WRONG!!!")unlesss

  5. Ruby 写入和读取对象到文件 - 2

    好的,所以我的目标是轻松地将一些数据保存到磁盘以备后用。您如何简单地写入然后读取一个对象?所以如果我有一个简单的类classCattr_accessor:a,:bdefinitialize(a,b)@a,@b=a,bendend所以如果我从中非常快地制作一个objobj=C.new("foo","bar")#justgaveitsomerandomvalues然后我可以把它变成一个kindaidstring=obj.to_s#whichreturns""我终于可以将此字符串打印到文件或其他内容中。我的问题是,我该如何再次将这个id变回一个对象?我知道我可以自己挑选信息并制作一个接受该信

  6. ruby-on-rails - 如果 Object::try 被发送到一个 nil 对象,为什么它会起作用? - 2

    如果您尝试在Ruby中的nil对象上调用方法,则会出现NoMethodError异常并显示消息:"undefinedmethod‘...’fornil:NilClass"然而,有一个tryRails中的方法,如果它被发送到一个nil对象,它只返回nil:require'rubygems'require'active_support/all'nil.try(:nonexisting_method)#noNoMethodErrorexceptionanymore那么try如何在内部工作以防止该异常? 最佳答案 像Ruby中的所有其他对象

  7. ruby-on-rails - 未在 Ruby 中初始化的对象 - 2

    我在Rails工作并有以下类(class):classPlayer当我运行时bundleexecrailsconsole然后尝试:a=Player.new("me",5.0,"UCLA")我回来了:=>#我不知道为什么Player对象不会在这里初始化。关于可能导致此问题的操作/解释的任何建议?谢谢,马里奥格 最佳答案 havenoideawhythePlayerobjectwouldn'tbeinitializedhere它没有初始化很简单,因为你还没有初始化它!您已经覆盖了ActiveRecord::Base初始化方法,但您没有调

  8. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调? - 2

    我有一个服务模型/表及其注册表。在表单中,我几乎拥有服务的所有字段,但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  9. ruby - 一个 YAML 对象可以引用另一个吗? - 2

    我想让一个yaml对象引用另一个,如下所示:intro:"Hello,dearuser."registration:$introThanksforregistering!new_message:$introYouhaveanewmessage!上面的语法只是它如何工作的一个例子(这也是它在thiscpanmodule中的工作方式。)我正在使用标准的ruby​​yaml解析器。这可能吗? 最佳答案 一些yaml对象确实引用了其他对象:irb>require'yaml'#=>trueirb>str="hello"#=>"hello"ir

  10. ruby - 更改 ActiveRecord 中对象的类 - 2

    假设我有一个FireNinja我的数据库中的对象,使用单表继承存储。后来才知道他真的是WaterNinja.将他更改为不同的子类的最干净的方法是什么?更好的是,我很想创建一个新的WaterNinja对象并替换旧的FireNinja在数据库中,保留ID。编辑我知道如何创建新的WaterNinja来self现有FireNinja的对象,我也知道我可以删除旧的并保存新的。我想做的是改变现有项目的类别。我是通过创建一个新对象并执行一些ActiveRecord魔法来替换行,还是通过对对象本身做一些疯狂的事情,或者甚至通过删除它并使用相同的ID重新插入来做到这一点,这是问题的一部分。

随机推荐