【ES6】—【必备知识】—对象的扩展

news2025/1/14 0:52:30

在这里插入图片描述

一、属性简洁表示法

  1. ES5 写法
let name ='xiao'
let age = 30
let obj = {
	name: name,
	age: age
}
console.log(obj)
// {name: 'xiao', age: 30}
  1. ES6 简洁写法
    对象的属性名 和 属性值的变量名相同,可以简写成 一个属性名
let name ='xiao'
let age = 30
let obj = {
	name,
	age
}
console.log(obj)
// {name: 'xiao', age: 30}

二、属性名表达式

  1. 当属性名是一个变量时,需要加中括号,才能识别
let s = 'school'
let obj = {
	s: 'imooc'
}
console.log(obj)
// {s: 'imooc'}
let s = 'school'
let obj = {
	[s]: 'imooc'
}
console.log(obj)
// {school: 'imooc'}
  1. 声明对象方法时,可以省略冒号和function
let name = 'xiaoxiao'
let obj = {
	name,
	study: function () {
		console.log(this.name + '正在学习')
	}
	// 优化后
	study () {
		console.log(this.name + '正在学习')
	}
}
obj.study()
// xiaoxiao正在学习

三、Object.is() 判断两个值是否相同

console.log(Object.is(1, '1'))
// false
console.log(Object.is(NaN, NaN))
// true
console.log(Object.is(+0, -0))
// false
let obj1 = {
	name: 'xiaoxiao',
	age:34
}
let obj2 = {
	name: 'xiaoxiao',
	age:34
}
console.log(obj1 === obj2)
// false
console.log(Object.is(obj1 , obj2 ))
// false
// 引用数据类型:再栈内存中的值 是一个引用地址,真正的内容是存在堆内存中,每次新建一个对象,都会再堆内存里面开辟一个新的内存空间
obj1 = obj2  // 内存合并,指向了一个堆内存空间
console.log(Object.is(obj1 , obj2 ))
// true

四、扩展运算符与Object.assign()

  1. 对象的扩展运算符
let x = {
	a: 3,
	b: 4
}
let y = {...x}
console.log(y)
// {a: 3, b: 4}
  1. Object.assign() 合并对象
let x = {
	a: 3,
	b: 4
}
let y = {
	c: 5,
	a: 8
}
Object.assign(x, y)
console.log(x)
// {a: 8, b: 4, c: 5}

五、in 判断数组某个索引是否有值

let arr = [1, 2, 3]
console.log(3 in arr)
// false
console.log(0 in arr)
// true

六、对象的遍历方式

1. for in 遍历

let obj = {
	name: 'xiaoxiao',
	age: 30,
	sex: '男'
}
for (let key in obj) {
	console.log(key, obj[key])
}
// name xiaoxiao
// age 30
// sex 男

2. Object.keys() + forEach 遍历

let obj = {
	name: 'xiaoxiao',
	age: 30,
	sex: '男'
}
Object.keys(obj).forEach(key => {
	console.log(key, obj[key])
})
// name xiaoxiao
// age 30
// sex 男

3. Object.getOwnPropertyNames() + forEach 遍历

let obj = {
	name: 'xiaoxiao',
	age: 30,
	sex: '男'
}
Object.getOwnPropertyNames(obj).forEach(key => {
	console.log(key, obj[key])
})
// name xiaoxiao
// age 30
// sex 男

4. Reflect.ownKeys() + forEach 遍历

let obj = {
	name: 'xiaoxiao',
	age: 30,
	sex: '男'
}
Reflect.ownKeys(obj).forEach(key => {
	console.log(key, obj[key])
})
// name xiaoxiao
// age 30
// sex 男

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

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

相关文章

如果你还不知道电商(淘宝京东1688)API,就看这里!

随着电商的蓬勃发展,现在已经进入了全民电商的时代;从国内电商到跨境电商,可以说是百家争艳,同时,电商运营也变得更精细化,各种运营工具也相继涌现,为店铺业绩做保障,电商API就是这样…

【回眸】牛客网刷刷刷!(七)——通信协议之 网络通讯

目录 前言 1、TCP/IP分层模型 2、ARP缓存 3、TCP 协议之所以提供可靠传输,不怕丢包、乱序的主要的原因是 4、以太网数据链路层MII/GMII/RMII/RGMII四种常用接口 5、在以太网通信协议LWIP中,数据包管理机构采用数据结构pbuf 分类包括 6、关于以太网…

关于css 的选择器和 css变量

css 选择器 常用的选择器 1. 后代选择器:也就是我们常见的空格选择器,选择的对象为该元素下的所有子元素 。例如,选择所有 元素下的 元素 div p{font-size:14px}2. 子元素选择器 ‘>’ 选择某元素下的直接子元素。例如,选择所…

龙蜥白皮书精选:云原生混部资源隔离技术

文/云原生 SIG 01 技术方案简介 混部就是将不同类型的业务在同一台机器上混合部署起来,让它们共享机器上的 CPU、内存、IO 等资源,目的就是最大限度地提高资源利用率,从而降低采购和运营等成本。 混部通常是将不同优先级的任务混合在一起&a…

前端开发进阶:前端开发中如何高效渲染大数据量?

在日常工作中,有时会遇到一次性往页面中插入大量数据的场景,在数栈的离线开发(以下简称离线)产品中,就有类似的场景。本文将通过分享一个实际场景中的前端开发思路,介绍当遇到大量数据时,如何实…

【1782. 统计点对的数目】

来源:力扣(LeetCode) 描述: 给你一个无向图,无向图由整数 n ,表示图中节点的数目,和 edges 组成,其中 edges[i] [ui, vi] 表示 ui 和 vi 之间有一条无向边。同时给你一个代表查询…

display设为inline-block时引发的高度问题,大坑

今天在写小程序,点击让这个遮罩层显示,结果一直下移,莫名其妙。 解决方案: 在元素的CSS中添加:vertical-align: bottom;

minAreaRect 函数新版与旧版对比

minAreaRect 函数 cv2.minAreaRect (InputArray_points) 入参 points 是点的集合,如轮廓 返回值 RotatedRect,带角度的旋转矩形框,其值形如(center(x,y), (width, height), angle of rotation ) center(x,y), (width, height)分别是旋转矩形框中心的坐标和矩…

chrome浏览器账号密码输入框自动填充时背景色不变

处理前 使用延时的方式解决 .login-box input,password:-webkit-autofill .login-box input,password:-webkit-autofill:hover, .login-box input,password:-webkit-autofill:focus, .login-box input,password:-webkit-autofill:active {-webkit-transition-delay: 999999…

【HMS Core】在线语种检测返回结果错误

【关键字】 在线语种检测、机器学习 【问题描述】 集成在线语种检测服务,检测蒙古文之后,返回结果为中文 【问题分析】 1、在线语种服务目前不支持蒙古文,具体可见官网语种支持列表: 【ML Kit】语种检测支持的语言列表 2、目前…

【JAVA毕设|课设】基于SpringBoot+vue的在线考试系统-以计算机网络为例,可自行录入题库-附下载地址

基于SpringBootvue的在线考试系统-以计算机网络为例,可自行录入题库 一、项目简介二、开发环境三、项目技术四、功能结构五、运行截图六、功能实现七、数据库设计八、源码获取 一、项目简介 随着信息技术的迅猛发展,教育行业正面临着巨大的变革和挑战。…

RTP/RTCP的 NACK, PLI,SLI,FIR

1,概述 在网络环境不是太好的情况下,比如网络拥塞比较严重,丢包率可能比较高,简单实用NACK重传的机制,这样就会有大量的RTCP NACK报文,发送端收到相应的报文,又会发送大量指定的RTP报文&#x…

5G NR:PRACH时域资源

PRACH occasion时域位置由高层参数RACH-ConfigGeneric->prach-ConfigurationIndex指示,根据小区不同的频域和模式,38.211的第6.3.3节中给出了prach-ConfigurationIndex所对应的表格。 小区频段为FR1,FDD模式(paired频谱)/SUL,…

【前端从0开始】JavaSript——循环控制语句

循环控制语句 while语句 While 循环会在指定条件为真时循环执行代码块。 While循环,先进行条件判断,再执行循环体的代码 while (条件表达式){循环体 }注意:当前循环中,如果不满足条件,一次都不会执行 var i 1; whi…

利用tidevice+mysql+grafana实现ios性能测试

利用tidevicemysqlgrafana实现ios性能测试 1.什么是tidevice? tidevice是一个可以和ios设备进行通信的工具,提供以下功能: 截图获取手机信息ipa包的安装和卸载根据bundleID 启动和停止应用列出安装应用信息模拟Xcode运行XCTest&#xff0c…

学会Mybatis框架:让你的代码更具灵活性、可维护性、安全性和高效性【二.动态SQL】

🥳🥳Welcome Huihuis Code World ! !🥳🥳 接下来看看由辉辉所写的关于Mybatis的相关操作吧 目录 🥳🥳Welcome Huihuis Code World ! !🥳🥳 一.Mybatis动态SQL如何应用 1.需求 2.…

2022美亚杯个人赛复刻

案件详情 于2022年10月,有市民因接获伪冒快递公司的电邮,不慎地于匪徒架设的假网站提供了个人信用咭资料导致经济损失。 警方追查下发现当中一名受骗市民男子李大輝 (TaiFai) 的信用卡曾经被匪徒在区内的商舖购物。 后来警方根据IP地址,锁定…

js实现定时器

用原生js实现一个倒计时效果.最下面有全部源码,需要自取 js语法: setTimeout:定时器 document.getElementById:Document的方法 getElementById()返回一个匹配特定 ID的元素。由于元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特…

第三篇:对话框窗口部件 QDialog

对话框窗口部件 QDialog 对话框(Dialog)是计算机图形用户界面(GUI)中的一种常见窗口类型,通常用于与用户进行交互、获取信息、提供反馈或执行特定任务。对话框的主要目的是与用户进行短期的、有限的交互,以…

【校招VIP】产品职位理解之团队的配合和推进

考点介绍: 对于简历上有实习经验的同学,对于团队配合和项目推进是一个非常常见的提问点。产品经理经常会面临项目延期,无法上线的情况。基于此,产品经理应该做些什么来保障项目按时上线呢? 『产品职位理解之团队的配合…