ECMAScript 6对象的扩展实现示例

目录
  • 属性的简洁表示法
  • 属性名表达式
  • 方法的 name 属性
  • 对象的扩展运算符
  • 对象的新增方法-Object.is()
  • 对象的新增方法-Object.assign()

属性的简洁表示法

对象(object)是 JavaScript 最重要的数据结构。ES6 对它进行了重大升级

ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法。这样的书写更加简洁。

const foo = 'bar';
const baz = {foo};
baz // {foo: "bar"}
// 等同于
const baz = {foo: 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); }
};

CommonJS 模块输出一组变量,就非常合适使用简洁写法。

let ms = {};
function getItem (key) {
  return key in ms ? ms[key] : null;
}
function setItem (key, value) {
  ms[key] = value;
}
function clear () {
  ms = {};
}
module.exports = { getItem, setItem, clear };
// 等同于
module.exports = {
  getItem: getItem,
  setItem: setItem,
  clear: clear
};

属性名表达式

JavaScript 定义对象的属性,有两种方法。

// 方法一
obj.foo = true;
// 方法二
obj['a' + 'bc'] = 123;

上面代码的方法一是直接用标识符作为属性名,方法二是用表达式作为属性名,这时要将表达式放在方括号之内。 ES6 允许字面量定义对象时,用方法二(表达式)作为对象的属性名,即把表达式放在方括号内。

let propKey = 'foo';
let obj = {
  [propKey]: true,
  ['a' + 'bc']: 123
};

方法的 name 属性

函数的name属性,返回函数名。对象方法也是函数,因此也有name属性。

const person = {
  sayName() {
    console.log('hello!');
  },
};
person.sayName.name   // "sayName"

上面代码中,方法的name属性返回函数名(即方法名)。

对象的扩展运算符

《数组的扩展》一章中,已经介绍过扩展运算符(...)。ES2018 将这个运算符引入了对象。 对象的解构赋值用于从一个对象取值,相当于将目标对象自身的所有可遍历的(enumerable)、但尚未被读取的属性,分配到指定的对象上面。所有的键和它们的值,都会拷贝到新对象上面。

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };
x // 1
y // 2
z // { a: 3, b: 4 }

对象的新增方法-Object.is()

ES5 比较两个值是否相等,只有两个运算符:相等运算符(==)和严格相等运算符(===)。它们都有缺点,前者会自动转换数据类型,后者的NaN不等于自身,以及+0等于-0。JavaScript 缺乏一种运算,在所有环境中,只要两个值是一样的,它们就应该相等。 ES6 提出“Same-value equality”(同值相等)算法,用来解决这个问题。Object.is就是部署这个算法的新方法。它用来比较两个值是否严格相等,与严格比较运算符(===)的行为基本一致。

Object.is('foo', 'foo')
// true
Object.is({}, {})
// false

不同之处只有两个:一是+0不等于-0,二是NaN等于自身。

+0 === -0 //true
NaN === NaN // false
Object.is(+0, -0) // false
Object.is(NaN, NaN) // true

对象的新增方法-Object.assign()

Object.assign()方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target)。

const target = { a: 1 };
const source1 = { b: 2 };
const source2 = { c: 3 };
Object.assign(target, source1, source2);
target // {a:1, b:2, c:3}

以上就是ECMAScript 6对象的扩展实现示例的详细内容,更多关于ECMAScript 6对象扩展的资料请关注我们其它相关文章!

(0)

相关推荐

  • 详解ECMAScript typeof用法

    typeof 返回变量的类型字符串值 .其中包括 "object"."number"."string"."undefined"."boolean". 1.在变量只声明.却不初始化值   Or 在变量没有声明时 返回 "undefined" > var b undefined > typeof(b) 'undefined' > typeof e 'undefined' &

  • 详解ECMAScript2019/ES10新属性

    每年都有一些新的属性进入ECMA262标准,今年发布的ECMAScript2019/ES10同样也有很多新的特性,本文将会挑选一些普通开发者会用到的新属性进行深入的解读. Array.prototype.flat() The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth. -- MDN 简单来说flat

  • ES6基础之默认参数值

    如果调用函数的过程中,定义的参数缺失,此参数变量的值则会是undefined.怎么给缺失的参数赋值默认值,在ES6之前,没有简洁的语法设置缺失参数的默认值,但是我们一般可以这么编写代码解决缺失参数默认值: function myFunction(x, y, z) { x = x === undefined ? 1 : x; y = y === undefined ? 2 : y; z = z === undefined ? 3 : z; console.log(x, y, z); //Outpu

  • JavaScript学习总结(一) ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)

    一.JavaScript简介 JavaScript是一种解释执行的脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型,它遵循ECMAScript标准.它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,主要用来给HTML增加动态功能. 几乎所有主流的语言都可以编译为JavaScript,进而能够在所有平台上的浏览器中执行,这也体现了JavaScript的强大性和在Web开发中的重要性.如Blade:一个Visual Studio扩展,可以将C#代码转

  • es6数值的扩展方法

    Number的方法扩展 Number.isFinite() 方法检测有限的数值(有穷的数值) console.log(Number.isFinite(1)) // true console.log(Number.isFinite(3.1415926)) // true console.log(Number.isFinite('1')) // false console.log(Number.isFinite(NaN)) // false console.log(Number.isFinite('

  • 浅谈ECMAScript 中的Array类型

    前言 Array 类型是除了 Object 类型之外又是一个特别经常用的一个类型了,当然数组在其他的语言中都是不可缺少的属性,我们都知道不管 js 还是其他类的语言的数组都是数据的有序列表,但是在 javaScript 中的数组是有一定的区别的,具体的区别就是: js 中的数组保存的数据可以是任何类型的数据,比如,我可以在第一个位置来保存数字,第二个位置保存字符串,第三和第四保存一个对象都完全OK,同时我还可以非常方便的操作数组的大小,添加新数据长度也会自动增长,动态调整什么的都是没有任何问题滴

  • ECMAScript 6数值扩展实例详解

    目录 一.数值的扩展 Number.isFinite(), Number.isNaN() Number.parseInt(), Number.parseFloat() Number.isInteger() 一.数值的扩展 Number.isFinite(), Number.isNaN() ES6 在Number对象上,新提供了Number.isFinite()和Number.isNaN()两个方法. Number.isFinite()用来检查一个数值是否为有限的(finite),即不是Infin

  • ECMAScript 6数组的扩展实例详解

    目录 扩展运算符 Array.from() Array.of() 数组实例的 copyWithin() 数组实例的 find() 和 findIndex() 数组实例的 fill() 数组实例的 includes() 扩展运算符 扩展运算符(spread)是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) // 1 2 3 console.log(1, ...[2, 3, 4], 5) // 1 2 3 4

  • ECMAScript 6对象的扩展实现示例

    目录 属性的简洁表示法 属性名表达式 方法的 name 属性 对象的扩展运算符 对象的新增方法-Object.is() 对象的新增方法-Object.assign() 属性的简洁表示法 对象(object)是 JavaScript 最重要的数据结构.ES6 对它进行了重大升级 ES6 允许在大括号里面,直接写入变量和函数,作为对象的属性和方法.这样的书写更加简洁. const foo = 'bar'; const baz = {foo}; baz // {foo: "bar"} //

  • ES6的内置对象扩展实现示例

    目录 一.Array的扩展方法 1.扩展运算符(展开语法) 2.扩展运算符的应用 1.合并数组 2. 将伪数组转换为真正的数组 3.构造函数方法:Array.from() 4.实例方法 :find() 5.findIndex() 6.includes() 一.Array的扩展方法 1.扩展运算符(展开语法) 扩展运算符可以将数组或者对象转换为逗号分隔的参数序列 let ary = [1,2,3]; ...ary //1,2,3 console.log(...ary); //1 2 3 //con

  • 原生js实现复制对象、扩展对象 类似jquery中的extend()方法

    jq的extend()方法能很方便的实现扩展对象方法,语法如下:$.extend(obj1,boj2,obj3); 现在要实现的是:原生js实现复制对象,扩展对象,类似jq中的extend()方法,具体实例如下: 现有3个对象字面量: var o1={hello:1,old:555}, o2 = { abc: 55555555, hello: 2, fun: function() { alert(111); } }, o3={third:9999}; 实现目标: 复制o1对象,把 o2,o3的对

  • ES6学习教程之对象的扩展详解

    一. 属性的简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法.意思就是说允许在对象中只写属性名,不用写属性值.这时,属性值等于属性名称所代表的变量.下面分别举一个例子来说明: 属性: function getPoint(){ var x = 1 ; var y = 2; return {x,y} } 等同于 fucntion getPoint(x,y){ var x = 1 ; var y = 2; return {x:x,y:y} } 测试: getPoint();//{x:1,y

  • 原生javascript中检查对象是否为空示例实现

    目录 什么是原生 JavaScript A.在较新的浏览器中检查空对象 通过检查 constructor 解决误报 对其他值进行空检查 B.旧版本浏览器中的空对象检查 使用 JavaScript 检查空对象 其它类型的构造函数也能正常判断 使用外部库检查空对象 原生 VS 库 下面的代码片段,用于检查对象是否为空. 对于较新的浏览器,你可以使用 ES6 的 "Object.keys".对于较旧的浏览器,可以安装Lodash库并使用其" isEmpty"方法. con

  • C#中对象状态模式教程示例

    目录 真实的故事 定义枚举表示教程进度 定义角色类 定义教程类 测试代码 状态模式出场 定义 代码重构 创建状态基类 重构教程类 创建各个子状态 添加状态容器 结语 真实的故事 当老胡还是小胡的时候,跟随团队一起开发一款游戏.这款游戏是一款末日生存类游戏,玩家可以 收集资源,两种,一种金子,一种铁. 升级自身 击杀敌人 用资源合成装备 项目开发的很顺利,我那时得到一个任务,是为游戏做一个新手教程,在这个教程里面,通过一系列步骤,引导新手玩家熟悉这个游戏.游戏设计给出的教程包含以下步骤 收集金子

  • JavaScript console对象与控制台使用示例详解

    目录 1. console对象 2. console的静态方法 3. 自定义console 4. 控制台命令行API 4.1 $_ 4.2 $0-$4 4.3 $(selector) 4.4 $x(path) 4.5 inspect(obj) 4.6 keys()和values() 4.7 其它的命令 1. console对象 console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数 console.l

  • 教你正确的Java扩展方法示例详解

    目录 引言 支持扩展方法的语言 C# Visual Basic Kotlin 主角登场 Lombok @ExtensionMethod Manifold 总结 引言 扩展方法能够向现有类型“添加”方法,而无需创建新的派生类型.重新编译或以其他方式修改原始类型.扩展方法是一种特殊的静态方法,但可以像扩展类型上的实例方法一样进行调用.对于用 C# 和 Visual Basic 编写的客户端代码,调用扩展方法与调用在类型中实际定义的方法没有明显的差异. 支持扩展方法的语言 其实比较多的编程语言都支持了

  • jQuery.extend()、jQuery.fn.extend()扩展方法示例详解

    jQuery自定义了jQuery.extend()和jQuery.fn.extend()方法.其中jQuery.extend()方法能够创建全局函数或者选择器,而jQuery.fn.extend()方法能够创建jQuery对象方法. 例如: 复制代码 代码如下: jQuery.extend({ showName : function(name){ alert(name) } }); jQuery.showName("深蓝"); jQuery.extend()除了可以创建插件外,还可以用

随机推荐