ES6标准---【六】【学习ES6标准看这一篇就够了！！！】

news2024/11/9 10:44:28

目录

以往ES6文章

前言

对象属性的简洁表示法

一个实际例子

简介写法在打印对象时也很有用

注意

对象属性名表达式

用表达式做属性名

用表达式定义方法名

注意

对象方法的name属性

对象属性的可枚举性和遍历

可枚举性

属性的遍历

属性比那里次序规则

super关键字

注意

对象的链判断运算符

链判断运算符的用法

链判断运算符的机制

短路机制

delete运算符

括号的影响

报错场合

右侧不得为十进制数值

NULL判断符

NULL判断符的作用

NULL的问题

以往ES6文章

ES6标准---【一】【学习ES6看这一篇就够了！！】-CSDN博客

ES6标准---【二】【学习ES6看这一篇就够了！！】-CSDN博客

ES6标准---【三】【学习ES6看这一篇就够了！！！】-CSDN博客 

ES6标准---【四】【学习ES6标准看这一篇就够了！！！】_es6 有arguments 吗-CSDN博客

ES6标准---【五】【看这一篇就够了！！！】-CSDN博客

前言

ES6标准对“对象”进行了扩展

对象属性的简洁表示法

ES6允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

  • 直接写入变量时：变量名做键，变量值做键值
  • 直接写入函数时，无需添加“:”(冒号)
const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: foo};

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); }
};

简介写法在打印对象时也很有用

let user = {
  name: 'test'
};
let foo = {
  bar: 'baz'
};
console.log(user, foo)
// {name: "test"} {bar: "baz"}
console.log({user, foo})
// {user: {name: "test"}, foo: {bar: "baz"}}

如果console.log直接输出“user”和“foo”两个对象时，就是两组键值对，可能会混淆

但是如果把它们放在大括号里面输出，就变成了对象的简洁表示，每组键值对前面会打印对象名，这样就比较清晰了

注意

简写的对象方法不能用作构造函数，会报错

const obj = {
  f() {
    this.foo = 'bar';
  }
};
new obj.f() // 报错

对象属性名表达式

JavaScript定义对象的属性，有两种方法：

  • 直接用标识符作属性名
  • 用表达式做属性名(需要将表达式放在方括号内)
// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;

用表达式做属性名

ES6允许字面量定义对象时，用方法二(表达式)作为对象的属性名，即把表达式放在“方括号”内

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};
  • 用变量做属性名时，可以使用变量名或变量值来检索对象
let lastWord = 'last word';
const a = {
  'first word': 'hello',
  [lastWord]: 'world'
};
a['first word'] // "hello"
a[lastWord] // "world"
a['last word'] // "world"

用表达式定义方法名

let obj = {
  ['h' + 'ello']() {
    return 'hi';
  }
};
obj.hello() // hi

注意

  • 属性名表达式与简洁表示法不能同时使用，会报错
// 报错
const foo = 'bar';
const bar = 'abc';
const baz = { [foo] };
// 正确
const foo = 'bar';
const baz = { [foo]: 'abc'};
  • 属性名表达式如果是一个对象，默认情况下会自动将对象转为字符串“[obejct Object]”
const keyA = {a: 1};
const keyB = {b: 2};
const myObject = {
  [keyA]: 'valueA',
  [keyB]: 'valueB'
};
myObject // Object {[object Object]: "valueB"}

对象方法的name属性

对象方法也是函数，因此也有name属性

const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"
  • 如果对象的方法使用了取值函数(getter)和存值函数(setter)，则name的返回值是“方法名前加上get 和 set”
const obj = {
  get foo() {},
  set foo(x) {}
};
obj.foo.name
// TypeError: Cannot read property 'name' of undefined
const descriptor = Object.getOwnPropertyDescriptor(obj, 'foo');
descriptor.get.name // "get foo"
descriptor.set.name // "set foo"
  • bind创造的函数，name属性返回“bound 加上原函数名字”，Function构造函数，name返回anonymous
(new Function()).name // "anonymous"
var doSomething = function() {
  // ...
};
doSomething.bind().name // "bound doSomething"

对象属性的可枚举性和遍历

可枚举性

对象的每个属性都有一个描述对象，用来控制该属性的行为

  • Obejct.getOwnPropertyDesciptor：获取该属性的描述对象
let obj = { foo: 123 };
Object.getOwnPropertyDescriptor(obj, 'foo')
//  {
//    value: 123,
//    writable: true,
//    enumerable: true,
//    configurable: true
//  }

描述对象的“enumrable”属性，称为“可枚举性”，如果该属性为false，就表示某些操作会忽略当前属性

有四个操作会忽略enumerable为false的属性

  • for...in循环：只遍历对象自身的和可继承的可枚举的属性
  • Obejct.keys()：返回对象自身的所有可枚举的属性的键名
  • JSON.stringfy()：只串行化对象自身的可枚举的属性
  • Object.assign()：忽略enumerable为false的属性，只拷贝对象自身的可枚举的属性

属性的遍历

ES6中一共有五种方法可以遍历对象的属性

  • for...in：循环遍历对象自身的和继承的可枚举属性(不含Symbol属性)
  • Object.keys(obj)：返回一个数组，包括对象自身的(不含继承的)所有可枚举属性(不含Symbol属性)的键名
  • Object.getOwnPropertyNames(obj)：返回一个数组，包含对象自身的所有属性(不含Symol属性)的键名
  • Obejct.getOwnPropertySymbols(obj)：返回一个数组，包含对象自身的所有Symbol属性的键名
  • Reflect.ownKeys(obj)：返回一个数组，包含对象自身的(不含继承的)所有键名，不管键名是否是Symbol或字符串，也不管是否可枚举
<body>
	<script>
		let obj = {
			"name": "yy",
			"age": 123
		}
		for(let i in obj) {
			console.log(i);
		}
		console.log("Object.keys:",Object.keys(obj));
		console.log("Object.getOwnPropertyNames:",Object.getOwnPropertyNames(obj));
		console.log("Object.getOwnPropertySymbols:",Object.getOwnPropertySymbols(obj));
		console.log("Reflect.ownKeys:",Reflect.ownKeys(obj));
	</script>	
</body>

效果：

 

属性比那里次序规则

ES6中的五种方法遍历对象的键名，都遵守同样的属性遍历的次序规则：

  • 首先遍历所有数值键，按照数值升序排列
  • 其次遍历所有字符串键，按照加入事件升序排列
  • 最后遍历所有Symbol键，按照加入时间排列
Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 })
// ['2', '10', 'b', 'a', Symbol()]

super关键字

super指向当前对象的原型对象(父亲)

const proto = {
  foo: 'hello'
};
const obj = {
  foo: 'world',
  find() {
    return super.foo;
  }
};
Object.setPrototypeOf(obj, proto);
obj.find() // "hello"

注意

super关键字指向原型对象时，只能用在对象的方法之中，用在其他地方都会报错

// 报错
const obj = {
  foo: super.foo
}
// 报错
const obj = {
  foo: () => super.foo
}
// 报错
const obj = {
  foo: function () {
    return super.foo
  }
}

对象的链判断运算符

ES6增加了“？.”运算符，直接在链式调用的时候判断，左侧的对象是否为NULL或undefined，如果是就不再往下运算，而是返回undefined

链判断运算符的用法

链判断运算符有三种用法：

  • obj?.prop：对象属性
  • obj?.[expr]：对象属性
  • obj(function)?.(...args)：函数或对象方法的调用
a?.b
// 等同于
a == null ? undefined : a.b
a?.[x]
// 等同于
a == null ? undefined : a[x]
a?.b()
// 等同于
a == null ? undefined : a.b()
a?.()
// 等同于
a == null ? undefined : a()

注意点：

  • 如果a?.b()里面a.b不是函数，或不可调用，那么会报错
  • 如果a?.()也是如此，如果a不是null或undefined，也不是函数，那么会报错

链判断运算符的机制

短路机制

如果对象是undefined或null，那么不会执行后面的表达式

a?.[++x]
// 等同于
a == null ? undefined : a[++x]

delete运算符

如果对象是undefined或null，会直接返回undefined，而不会进行delete运算

delete a?.b
// 等同于
a == null ? undefined : delete a.b

括号的影响

如果属性链有圆括号，链判断运算符对圆括号外部没有影响，只对圆括号内部有影响

(a?.b).c
// 等价于
(a == null ? undefined : a.b).c

报错场合

// 构造函数
new a?.()
new a?.b()
// 链判断运算符的右侧有模板字符串
a?.`{b}`
a?.b`{c}`
// 链判断运算符的左侧是 super
super?.()
super?.foo
// 链运算符用于赋值运算符左侧
a?.b = c

右侧不得为十进制数值

foo?.3:0会被解析成foo ? .3 : 0(三元运算符)，因此规定?.不能紧跟一个十进制数字

NULL判断符

ES6引入一个新的NULL判断符“??”，它的行为类似“||”，但是只有运算符左侧的值为NULL或undefined时，才会返回右侧的值

NULL判断符的作用

与链判断运算符“?>”配合使用，为null或undefined的值设置默认值

const animationDuration = response.settings?.animationDuration ?? 300;

NULL的问题

“??”与“&&”或“||”不分优先级高低，两个或三个同时使用时，需要使用括号表明优先级，否则会报错

// 报错
lhs && middle ?? rhs
lhs ?? middle && rhs
lhs || middle ?? rhs
lhs ?? middle || rhs

//正确
(lhs && middle) ?? rhs;
lhs && (middle ?? rhs);
(lhs ?? middle) && rhs;
lhs ?? (middle && rhs);
(lhs || middle) ?? rhs;
lhs || (middle ?? rhs);
(lhs ?? middle) || rhs;
lhs ?? (middle || rhs);

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

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

相关文章

图片生成PPT！首推这款一站式AI制作PPT工具！

图片生成PPT！首推这款一站式AI制作PPT工具！

在当今快节奏的工作中&#xff0c;制作一份精美的PPT演示文稿往往是一项费时费力的工作&#xff0c;特别是当我们需要将大量的图片转化为PPT时&#xff0c;传统的方法显得尤为繁琐。幸运的是&#xff0c;随着AI人工智能技术的飞速发展&#xff0c;一种更便捷地将图片转为ppt的解…
阅读更多...
计算机毕业设计 《计算机基础》网上考试系统的设计与实现 Java实战项目 附源码+文档+视频讲解

计算机毕业设计 《计算机基础》网上考试系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍&#xff1a;✌从事软件开发10年之余&#xff0c;专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精…
阅读更多...
Java之线程篇三

Java之线程篇三

​​​​​​​ 目录 线程状态 观察线程的所有状态 线程状态及其描述 线程状态转换 代码示例1 代码示例2 线程安全 概念 线程不安全的代码示例 线程不安全的原因 线程安全的代码示例-加锁 synchronized关键字 synchronized的特性 小结 形成死锁的四个必要条件 …
阅读更多...
Java设计模式之命令模式介绍和案例示范

Java设计模式之命令模式介绍和案例示范

一、命令模式简介 命令模式&#xff08;Command Pattern&#xff09;是一种行为型设计模式&#xff0c;它将请求封装为一个对象&#xff0c;从而使你可以用不同的请求对客户端进行参数化、对请求排队或记录日志&#xff0c;以及支持可撤销的操作。命令模式的核心思想是将发出请…
阅读更多...
kvm 虚拟机命令行虚拟机操作、制作快照和恢复快照以及工作常用总结

kvm 虚拟机命令行虚拟机操作、制作快照和恢复快照以及工作常用总结

文章目录 kvm 虚拟机命令行虚拟机操作、制作快照和恢复快照一、kvm 虚拟机命令行虚拟机操作(创建和删除)查看虚拟机virt-install创建一个虚拟机关闭虚拟机重启虚拟机销毁虚拟机 二、kvm 制作快照和恢复快照**创建快照**工作常见问题创建快照报错&#xff1a;&#xff1a;intern…
阅读更多...
超详细、史上最全pytorch安装教程

超详细、史上最全pytorch安装教程

一、anaconda安装 1.下载 Index of /anaconda/archive/ | 清华大学开源软件镜像站 | Tsinghua Open Source Mirrorhttps://mirrors.tuna.tsinghua.edu.cn/anaconda/archive/ 这里划到最下面选择5.3.1最新版&#xff1a; 2.下载完成后安装 点击next 点击 I agree 选择All Us…
阅读更多...
ignav的INS的状态更新

ignav的INS的状态更新

ignav的代码 static void updstat(const insopt_t *opt,insstate_t *ins,const double dt,const double *x0,const double *P0,double *phi,double *P,double *x,double *Q) {opt->exprn?getprn(ins,opt,dt,Q): getQ(opt,dt,Q); // //phi 状态转移矩阵 &#xff0c;离散化…
阅读更多...
算法学习攻略总结 : 入门至进阶，通关之路指南

算法学习攻略总结 : 入门至进阶，通关之路指南

❃博主首页 &#xff1a; <码到三十五> ☠博主专栏 &#xff1a; <mysql高手> <elasticsearch高手> <源码解读> <java核心> <面试攻关> ♝博主的话 &#xff1a; <搬的每块砖&#xff0c;皆为峰峦之基&#xff1b;公众号搜索(码到…
阅读更多...
CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条

CircleProgressView 鸿蒙ArkTS自定义View实现圆形进度条

上篇的截图中除了一个上下的箭头&#xff0c;还有一个圆形进度条&#xff0c;今天我们来讲讲这个如何进行实现 我们看这个图形的构造&#xff0c;其实很简单&#xff1a;一个圆形图形&#xff0c;以及一个文本来显示进度 所以我们用一个层叠布局 绘制一个带颜色的圆形&#xff…
阅读更多...
『功能项目』播放动画时禁止点击移动【40】

『功能项目』播放动画时禁止点击移动【40】

我们打开上一篇39GameObject对象池 - 第三职业的项目&#xff0c; 本章要做的事情是在第三职业播放续航攻击动画时禁止点击时触发的移动函数&#xff0c;换句话说是在播放攻击动画时禁止移动 修改脚本&#xff1a;PlayerRayClickNavigation.cs 运行项目 - 播放第三职业续航技能…
阅读更多...
2-92 基于matlab的KPCA的TE过程的故障监测

2-92 基于matlab的KPCA的TE过程的故障监测

基于matlab的KPCA的TE过程的故障监测&#xff0c;利用核主元分析法(KPCA)来进行故障检测的思想,将输入空间中复杂的非线性问题转化为特征空间中的线性问题&#xff0c;计算步骤&#xff1a;&#xff08;1&#xff09; 选择监控变量&#xff0c;收集正常工况下的各变量的样本&am…
阅读更多...
【警告 C6031：返回值被忽略：scanf】

【警告 C6031：返回值被忽略：scanf】

警告 C6031 返回值被忽略: “scanf”。 错误 C4996 scanf: This function or variable may be unsafe. Consider using scanf_s instead. To disable deprecation, use _CRT_SECURE_NO_WARNINGS. See online help for details. #include <stdio.h> int max(int x, int y…
阅读更多...
OKHttp实现原理分享

OKHttp实现原理分享

前言介绍 大约在2年半之前&#xff0c;就想写一篇关于OKHttp原理的文章&#xff0c;一来深入了解一下其原理&#xff0c;二来希望能在了解原理之后进行更好的使用。但是因为种种原因&#xff0c;一直无限往后推迟&#xff0c;最近因为我们情景智能半个月一次的分享轮到我了&…
阅读更多...
手势识别＆手势控制系统-OpenCV＆Python（源码和教程）

手势识别＆手势控制系统-OpenCV＆Python（源码和教程）

项目特点 手部手势识别&#xff1a; 项目利用计算机视觉技术来识别手部的各种手势。这种技术可以应用于多种场景&#xff0c;比如人机交互、游戏控制、无障碍技术等。 自定义手势&#xff1a; 用户可以自定义手势&#xff0c;这意味着可以通过训练新的手势模式来扩展系统的功能…
阅读更多...
基于vue框架的城市网约车管理系统v34td（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

基于vue框架的城市网约车管理系统v34td（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。

系统程序文件列表 项目功能&#xff1a;用户,司机,订单评价,完成订单,司机接单,打车订单 开题报告内容 基于Vue框架的城市网约车管理系统开题报告 一、研究背景与意义 1.1 研究背景 随着城市化进程的加速和互联网技术的飞速发展&#xff0c;网约车服务作为一种新兴的出行方…
阅读更多...
基于java+SpringBoot+Vue的阿博图书馆管理系统设计与实现

基于java+SpringBoot+Vue的阿博图书馆管理系统设计与实现

开发语言:Java 数据库:MySQL技术:SpringBootMyBatis工具:IDEA/Ecilpse、Navicat、Maven 系统简介 阿博图书馆管理系统是一款基于Java、SpringBoot和Vue.js技术开发的信息化管理系统&#xff0c;旨在为图书馆提供一个高效、便捷的图书管理与借阅服务。系统通过B/S架构&#x…
阅读更多...
FinalShell连接Linux服务器并解决反复输入密码问题

FinalShell连接Linux服务器并解决反复输入密码问题

FinalShell是一款由国人开发的SSH客户端工具&#xff0c;它支持多平台&#xff0c;包括Windows、Mac OS X和Linux。FinalShell主要用于一体化服务器管理&#xff0c;它不仅是一个SSH客户端&#xff0c;还具备强大的开发和运维功能&#xff0c;能够充分满足开发和运维的需求。 本…
阅读更多...
人脸匿名化初步研究：解决人脸隐私安全

人脸匿名化初步研究：解决人脸隐私安全

1、人脸匿名化定义&#xff1a; 将人脸图像匿名化方法从图像语义修改、图像语义保持、视觉可恢复以及深度学习过程中的人脸隐私保护四个方面进行分类&#xff0c;将人脸视频匿名化方法从聚焦面部区域隐私的视频匿名化方法和面向生物特征隐私的视频匿名化方法两个方面进行分类 …
阅读更多...
开源FormCreate低代码表单组件的配置项和事件的详解

开源FormCreate低代码表单组件的配置项和事件的详解

在使用开源FormCreate低代码表单时&#xff0c;您可以通过各种 props 来定制表单的行为和外观。这些参数允许您控制表单的生成规则、配置选项、双向数据绑定等&#xff0c;为复杂的表单场景提供了强大的支持。 源码地址: Github | Gitee FormCreate组件Props 以下是常用的 pr…
阅读更多...
【项目开发 | Python】基于“羊了个羊“风格的消除类小游戏

【项目开发 | Python】基于“羊了个羊“风格的消除类小游戏

原创文章，不得转载。 目标：使用 Python 开发"羊了个羊"风格的消除类小游戏，合理运用 AIGC 工具提高开发效率；使用文生图工具实现图片设计等工作。 文章目录 项目背景项目介绍+项目展示游戏逻辑概述主界面游戏界面获胜界面失败界面附加功能项目细节项目测试测试样…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023