es6 对象的扩展

1.属性的简洁表示法
function f(x,y) {
return {x,y};
}
// 等同于
function f(x,y){
return {x:x,y:y};
}
f(1,2)   // Object {x:1,y:2}
例如:
let birth = '2000/01/01';
const Person = {
name: '张三',
// 等同于 birth: birth
birth,
// 等同于hello: function()...
hello() {console.log('我的名字',this.name);}
};
例如:用于函数的返回值
function getPoint() {
const x = 1;
const y = 10;
return {x,y};
}
console.log(getPoint());
// {x:1,y:10}
2.属性名表达式
表达式作为对象的属性名
let obj = {
[propKey]: true,
['a' 'bc']:123
};
console.log(obj[propKey]); // true
console.log(obj['abc']); // 123
例如:
let lastWord = 'last word';
const a = {
‘first word’: 'hello',
[lastWord]: 'world'
}
console.log(a['first word']); // "hello"
console.log(a[lastWord]); // "world"
console.log(a['last word']); // "world"
例如: 表达式可以用于定义方法名
let obj = {
['h' 'ello']() {
return 'hi';
}
};
console.log(obj.hello()); // 'hi'
3.方法的 name 属性
例如:函数的name 属性,返回函数名。
const person = {
sayName() {
console.log('hello');
}
}
console.log(person.sayName.name); // "sayName"
4.Object.is()
ES 比较两个值是否相等,只有两个运算符,相等运算符,相等运算符(==)
和严格相等运算符(===)
0 === -0 // true
NaN === NaN // false
Object.is( 0,-0); // false
Object.is(NaN,NaN) // true
5.Object.assign()
Object.assign 方法用于对象的合并,将源对象的所有的可枚举属性,赋值到目标对象
例如;
const target = {a:1};
const source1 = {b:2};
const source2 = {c:2};
Object.assign(target,source1,source2);
console.log(target); // {a:1,b:2,c:3}
例如:同名属性的替换,当遇到同名属性的时候,处理方法是替换。
const target = {a:{b:'c',d:'e'}}
const source = {a: {b:'hello'}}
console.log(Object.assign(target,source))
// {a: {b:'hello'}}
例如: 数组的处理
Object.assign 可以用来出来数组,把数组作为对象看
Object.assign([1,2,3],[4,5])
// [4,5,3]
常见用途(1) 为对象添加属性
class Point {
constructor(x,y){
Object.assign(this,{x,y});
}
}
常见用途(2) 为对象添加方法
Object.assign(SomeClass.prototype,{
someMethod(arg1,arg2){
.....
}
anotherMethod(){
...
}
})
常见用途(3) 克隆对象
function clone (origin) {
return Object.assign({},origin);
}
6.属性的可枚举行和遍历
可枚举性
Object.getOwnProperDescriptor 方法可以获取该属性的描述对象
let obj = {foo:123};
Object.getOwnPropertyDescriptor(obj,'foo')
// {
value: 123,
writable: true,
enumerable: true,
configurable:true
}
描述对象的enumerable 属性,称为“可枚举属性” 如果该属性的值为false,
就表示会忽略当前属性。
目前有四个操作会忽略 enumerable 为false 属性。
for...in , Object.keys(), JSON.stringify(), Object.assign();
ES6一共有5种方法可以遍历对象的属性
(1) for ... in
循环遍历对象自身的和继承的可枚举属性
(2) Object.keys(obj)
Object.keys 返回一个数组,包括对象自身的所有可枚举属性
(3) Object.getOwnPropertyNames(obj)
Object.getOwnPropertyNames 返回一个数组,包含对象自身的所有属性
(4) Object.getOwnPropetrySymbols(obj)
Object.getOwnPropetrySymbols 返回一个数组,包含对象自身的所有
Symbol属性的键名。
(5) Reflect.ownKeys(Obj)
Reflect.ownKeys 返回一个数组,包含对象自身的所有键名。
8._proto_ 属性。
_proto_ 属性,用来读取和设置当前对象的protoype对象。
const obj = {
method: function(){
console.log(111)
}
}
obj._proto_= someOtherrObj;
Object.setPrototypeOf()
Object.setPrototypeOf 方法的作用与 _proto_ 相同,用来设置一个对象的prototype对象
返回参数对象本身,。
// 格式
Object.setPrototypeOf(object,prototype)
// 用法
const o = Object.setPrototypeOf({},null);
Object.getPrototypeOf()
该方法与Object.setPrototypeOf 方法配套,用于读取一个对象的原型对象。
Object.getPrototypeOf(obj);
9.super 关键字
this 关键字总是指向函数所在的当前对象,super 指向当前对象的原型对象。
const proto = {
foo: 'hello'
};
const obj = {
find(){
return super.foo;
}
}
Object.setPrototypeOf(obj,proto);
obj.find();
10.Object.keys() ,Object.values(),Object.entries()
let {keys,values,entries} = Object;
let object = {a:1,b:2,c:3};
for (let key of keys(obj)){
console.log(key); // 'a','b','c'
}
for(let key of keys(obj)){
console.log(key);// 'a','b','c'
}
for(let value of values(obj)){
console.log(key); // 1,2,3
}
for (let [key,value] of entries(obj)){
console.log([key,value]); // ['a',1],['b',2],['c',3]
}
11.对象的扩展运算
对象的结构赋值用于从一个对象取值,相当于将所有可遍历的,但尚未对齐的属性,
分配到指定的对象上面,所有的键和值他们的值,都会拷贝到新对象上面。
let {x,y,...z} = {x:1,y:2,a:3,b:4};
x // 1
y // 2
z // {a:3,b:4}
扩展运算
扩展运算符(...) 用于取出参数对象的多有可遍历属性,拷贝到当前对象之中。
let z = {a:3,b:4};
let n = {...z};
n // {a:3,b:4}
合并两个对象
let ab = {...a,...b};
// 等同于
let ab = Object.assign({},a,b)


更多专业前端知识,请上 【猿2048】www.mk2048.com

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/361299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

windows下命令行修改系统时间;修改系统时间的软件

找了很久,都没有找到,还找了关键词 dos下修改系统时间 因为看到linux下修改系统时间是用hwclock 命令写入主板芯片. 而我由于某些原因想自动化修改系统时间,所以找windows下修改系统时间的软件 没有找到. 有一个 意天禁止修改系统时间开发包(系统时间保护组件) 1.0.0.1 ,可以禁…

如何摆脱JavaFX中的重点突出显示

今天,有人问我是否知道摆脱JavaFX控件(分别是按钮)的焦点突出的方法: 有关此问题的大多数文章和提示建议添加: .button:focused {-fx-focus-color: transparent; }但是使用这种样式,仍然会留下这样的光芒…

extjs 基础部分

创建对象的方法: 使用new 关键字创建对象。 new classname ([config]) 使用Ext.create方法创建。 Ext.create(classname,[config]) new Ext.Viewport({}) 修改为Ext.create(Ext.Viewport,{}) Ext.widget 或Ext.createWidget 创建对象 使用Ext.ns 或者Ext.namespace…

Java时区处理初学者指南

基本时间观念 大多数Web应用程序必须支持不同的时区,而正确处理时区绝非易事。 更糟糕的是,您必须确保各种编程语言(例如,前端JavaScript,中间件中的Java和作为数据存储库的MongoDB)之间的时间戳是一致的。…

Android工具HierarchyViewer 代码导读(3) -- 后台代码

在上文中&#xff0c;我们讲解了如何把HierarchyViewer的项目导入到Eclipse中&#xff0c;以便更高效阅读代码。本文将讲解HierarchyViewer的后台代码&#xff0c;建议大家可以先阅读<Android工具HierarchyViewer代码导读(1) -- 功能实现演示>一文, 其中的代码演示了Hier…

Extjs 数据代理

Ext.data.proxy.Proxy 代理类的根类 客户端代理&#xff1a; 1.LocalStorageProxy&#xff1a;将数据存储在localStorage中&#xff0c;此种方式可以持久的将数据存储在客户端 要使用代理&#xff0c;我们首先要有一个数据模型类&#xff0c;我们定义一个简单的Person类&…

WildFly 8.2.0.Final版本–更改的快速概述

自从我上次在此博客上写作以来已经有一段时间了。 尽管我有一些我想写博客的主题&#xff0c;但我只是没有足够的时间来做。 在看到JBoss社区成员之一的邮件后&#xff0c;我终于决定今天写这篇文章&#xff0c;检查为什么最近这里没有任何更新&#xff08;感谢检查&#xff0c…

Ph.D Grind 阅读感想 By 张雄

#Ph.D Grind是Xin Zou老师推荐的一本书&#xff0c;邮件里本来说是要在三周内读完的&#xff0c;不料看了个Preface之后再也放不下&#xff0c;最终一口气地看完了。 #看完之后很有感触&#xff0c;之前也阅读过一本讲如何规划研究生涯的书&#xff0c;但是那是一本从教授的角度…

VUE 入门基础(3)

三&#xff0c;模板语法 Vue将模板编译成虚拟DOM渲染函数&#xff0c;结合响应系统&#xff0c;在应用状态改变时&#xff0c;vue能够智能地计算出重新渲染组件的最小代价并DOM操作上。 插值&#xff0c;文本 数据绑定常见的形式就是使用“Mustache”语法&#xff08;双大括号&…

SVG 使用

SVG即Scalable Vector Graphics可缩放矢量图形&#xff0c;使用XML格式定义图形&#xff0c; 主要优势在于可缩放的同时不会影响图片的质量。 SVG 在html 中常用的方法 1.使用<img>元素来嵌入SVG图像 <img src”http://www.w3school.com.cn/svg/rect1.svg” width”…

超越JAX-RS规范:Apache CXF搜索扩展

在今天的帖子中&#xff0c;我们将超越JAX-RS 2.0规范&#xff0c;并探索Apache CXF &#xff08;流行的JAX-RS 2.0实现之一&#xff09;为REST服务和API开发人员提供的有用扩展。 特别是&#xff0c;我们将讨论使用OData 2.0查询过滤器子集的搜索扩展。 简而言之&#xff0c;…

阿里巴巴使命、愿景、价值观、绩效管理中的六大价值观、

阿里巴巴的使命 让天下没有难做的生意 阿里巴巴的愿景 分享数据的第一平台幸福指数最高的企业“活102年”阿里巴巴的价值观 我们坚持“客户第一、员工第二、股东第三”。 阿里巴巴的六脉神剑&#xff08;绩效管理中的六大价值观&#xff09; 公司的“六脉神剑” 客户第一&#…

Angularjs基础(十)

ng-blur       描述&#xff1a;规定blur 事件的行为       实例&#xff1a;当输入框失去焦点的(onblur)时执行表达式&#xff1a;         <input ng-blur"count count 1" ng-init"count0"/>         <h1>{{co…

在命令行上操作JAR,WAR和EAR

尽管Java IDE和许多图形工具使查看和操作Java归档文件&#xff08;JAR&#xff0c;WAR和EAR&#xff09;文件的内容比以往更加容易&#xff0c;但有时我还是更喜欢使用命令行jar命令来完成这些任务。 当我必须重复做某事或作为脚本的一部分来做时&#xff0c;尤其如此。 在本文…

C#语言使用多态(接口与override) ——帮您剔除对面向对象多态性的疑惑

多态是面向对象编程中三大机制之一,其原理建立在"从父类继承而来的子类可以转换为其父类"这个规则之上,换句话说,能用父类的地方,就能用该类的子类.当从父类派生了很多子类时,由于每个子类都有其不同的代码实现,所以当用父类来引用这些子类时,同样的操作而可以表现出…

Java如何以及为什么使用Unsafe?

总览 sun.misc.Unsafe至少在Java 1.4&#xff08;2004&#xff09;中就已经存在于Java中。 在Java 9中&#xff0c;不安全将与许多其他供内部使用的类一起隐藏。 以提高JVM的可维护性。 尽管仍不确定究竟将取代Unsafe到底是什么&#xff0c;但我怀疑将取代Unsafe不仅仅是一件事…

Angularjs基础(三)

AngularJS ng-model 指令     ng-model 指令用于绑定应用程序数据到HTML 控制器&#xff08;input,select,textarea&#xff09;的值ng-model指令     ng-model指令可以将输入域的值与AngularJS 创建的变量绑定。       实例&#xff1a;         <di…

ASP.NET MVC的生命周期与网址路由

网址路由&#xff08;Routing&#xff09;在ASP.NET MVC中有两个主要用途&#xff0c;一个用途是匹配通过浏览器传来的HTTP请求&#xff0c;另一个用途则是将适当的网址返回浏览器。 首先我们来看下第一个用途&#xff0c;也就是匹配通过浏览器传来的HTTP请求。 客户端对ASP.NE…

ecshop分页类assign_pager分析和扩展

ecshop分页类assign_pager分析和扩展,我们前面的文章中介绍过ecshop ajax分页&#xff0c;他的基础都是简单单一的分页。如果我们要在ecshop分页里面传入自己的参数&#xff0c;你就必须对ecshop的assign_pager分页函数进行系统的认识和分析。 首先我们看category.php的ecshop分…

NEC css规范

CSS规范 - 分类方法 SS文件的分类和引用顺序 通常&#xff0c;一个项目我们只引用一个CSS&#xff0c;但是对于较大的项目&#xff0c;我们需要把CSS文件进行分类。 我们按照CSS的性质和用途&#xff0c;将CSS文件分成“公共型样式”、“特殊型样式”、“皮肤型样式”&#…