一、什么是对象字面量

对象字面量就是创建对象(Object)的一种简单容易理解的方式,再通俗点就是所谓的键值对的集合。举个简单的例子:

let book = {
name: 'JavaScript',
price: 12,
};

但是对象字面量存在一点小问题,那就是再创建对象的时候需要对属性的值(如上面的name和price)进行初始化,此时会造成一定的重复。将上面的代码改成如下形式就会体现出这个问题所在:

function getBook(bookName, price) {
return {
bookName: bookName,
price: price,
getBookName: function() {
console.log(bookName);
}
};
}

可以看出函数内部返回一个对象,属性名称和函数的形参相同,而bookName和price都是重复的书写,这样子对编码的效率也是极为低下的。ES6对该种方式做了一定的扩展使其消除了属性名称和局部变量之间的重复书写。当一个本地变量和对象属性同名的时候,不需要再以键值对的方式书写,而是可以简化为如下的方式:

function getBook(bookName, price) {
return {
bookName: bookName,
price: price,
getBookName() {
console.log(bookName);
}
};
}

注意:上述的函数的书写方式也一样被简化了。

二、全等运算符(===)和Object.is()方法

在JS中比较两个值时,可能习惯使用相等运算符(==)或者全等运算符(===)来执行相应的语句,但是就算全等运算符也不一定完全准确,一个比较常见的例子就是:

console.log('NaN === NaN: ' + (NaN === NaN));  // 返回false

ES6中引入了Object.is()方法来弥补全等运算符的不准确性,下面是一些实际的使用方法:

console.log(Object.is(NaN, NaN));  // return true
console.log(Object.is(5, '5')); // return false
console.log(Object.is(5, 5)); // return true

 

ES6学习笔记(3)- 对象的功能性扩展的更多相关文章

  1. ES6 学习笔记之四 对象的扩展

    ES6 为对象字面量添加了几个实用的功能,虽然这几个新功能基本上都是语法糖,但确实方便. 一.属性的简洁表示法 当定义一个对象时,允许直接写入一个变量,作为对象的属性,变量名就是属性名. 例1: , ...

  2. ES6学习笔记(8)----对象的扩展

    参考书<ECMAScript 6入门>http://es6.ruanyifeng.com/ 对象的扩展 1.属性名的简洁表示法 : ES6允许在代码中直接写变量,变量名是属性名,变量值是属 ...

  3. es6学习笔记-proxy对象

    前提摘要 尤大大的vue3.0即将到来,虽然学不动了,但是还要学的啊,据说vue3.0是基于proxy来进行对值进行拦截并操作,所以es6的proxy也是要学习一下的. 一 什么是proxy Prox ...

  4. es6学习笔记--promise对象

    Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...

  5. ES6学习笔记(对象)

    1.属性的简洁表示法 const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} // 等同于 const baz = {f ...

  6. ES6学习笔记(四)-数值扩展

    PS: 前段时间转入有道云笔记,体验非常友好,所以笔记一般记录于云笔记中,每隔一段时间,会整理一下, 发在博客上与大家一起分享,交流和学习. 以下:

  7. ES6学习笔记(三)-正则扩展

    PS: 前段时间转入有道云笔记,体验非常友好,所以笔记一般记录于云笔记中,每隔一段时间,会整理一下, 发在博客上与大家一起分享,交流和学习. 以下:

  8. Es6 学习笔记(一)数组扩展

    扩展运算符 ... 1.数组的扩展运算符将一个数组转换成一个逗号分隔的参数序列 console.log(...[1,2,3])   //1,2,3 ['a', 'b',...[1,3]]   //a, ...

  9. ES6学习笔记(对象新增方法)

    1.Object.is() ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===).它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0. ...

  10. ES6 学习笔记之对象的拓展

    1.属性的简洁表示法 ES6 允许直接写入变量和函数,作为对象的属性和方法.这样书写更加简洁. const foo = 'bar'; const baz = {foo}; baz //{foo: &q ...

随机推荐

  1. windows7 更新失败,无法开机处理方法

    记录一次今天同事笔记本无法开机的故障处理 windows7系统,安装更新失败,无法开机,卡在配置更新界面 处理方法,强制关机,开机按F8,进入安全模式,安全模式还会卡在配置更新界面,但是卡一会会进入系 ...

  2. c# xaml (1)

    原文:https://www.wpf-tutorial.com/xaml/what-is-xaml/ vs2017 新建 wpf 项目,在解决方案里会自动创建MainWindow.xaml文件 1.新 ...

  3. CDN 工作原理剖析

    CDN 工作原理剖析 CDN / Content Delivery Network / 内容分发网络 https://www.cloudflare.com/zh-cn/learning/cdn/wha ...

  4. TensorFlow & Machine Learning

    TensorFlow & Machine Learning TensorFlow 实战 传统方式 规则 + 数据集 => 答案 无监督学习 机器学习 神经元网络 答案 + 数据集 =&g ...

  5. React Native & Fast Refresh

    React Native & Fast Refresh 0.61 https://reactnative.dev/blog/2019/09/18/version-0.61/ Fast Refr ...

  6. LeetCode & list cycle

    LeetCode & list cycle 链表是否存在环检测 singly-linked list 单链表 "use strict"; /** * * @author x ...

  7. CSS border gradient color All In One

    CSS border gradient color All In One CSS Gradient Borders border-image-source & border-image-sli ...

  8. CORS OPTIONS

    CORS OPTIONS A CORS preflight request is a CORS request that checks to see if the CORS protocol is u ...

  9. 「NGK每日快讯」11.23日NGK公链第21期官方快讯!

  10. 「NGK每日快讯」12.17日NGK第44期官方快讯!