ES6对象操作实例详解

本文实例讲述了ES6对象操作。分享给大家供大家参考，具体如下：

1.对象赋值

es5中的对象赋值方式如下：

let name="小明";
let skill= 'es6开发';
var obj= {name:name,skill:skill};
console.log(obj);

结果为：

ES6允许把声明的变量直接赋值给对象，例如：

let name="小明";
let skill= 'es6开发';
var obj= {name,skill};
console.log(obj);

结果与上述相同。

2.对象Key值构建

有时候我们会在后台取出key值，而不是我们前台定义好的，这时候我们可以我们可以把后台定义的key值重新构建返回给后台。

在前端我们可以用[ ] 的形式，进行对象的构建。

let key='skill';//假定是后台定义的key值
var obj={
  [key]:'web' //构建key值
}
console.log(obj.skill);//web

3.自定义对象方法

对象方法就是把对象中的属性，用匿名函数的形式编程方法。

var obj={
  add:function(a,b){
    return a+b;
  }
}
console.log(obj.add(1,2)); //3

4.Object.is( ) 对象比较

ES5的对象比较方法,经常使用===来判断，如下：

var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(obj1.name === obj2.name);//true

ES6为我们提供了is方法进行对比，如下：

var obj1 = {name:'admin'};
var obj2 = {name:'admin'};
console.log(Object.is(obj1.name,obj2.name))//true

区分=== 和 is方法的区别是什么，看下面的代码输出结果。

console.log(+0 === -0); //true
console.log(NaN === NaN ); //false

console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

记忆为：===为同值相等，is()为严格相等。

6.Object.assign( )合并对象

使用assgin( )可以实现像数组一样的合并操作。

var a={a:'a'};
var b={b:'b'};
var c={c:'c'};
let d=Object.assign(a,b,c)
console.log(d);

结果为：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《javascript面向对象入门教程》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • JS面向对象编程——ES6 中class的继承用法详解

    本文实例讲述了 ES6 中class的继承用法.分享给大家供大家参考,具体如下: JS是一种基于对象的语言,要实现面向对象,写法跟传统的面向对象有很大的差异.ES6引入了Class语法糖,使得JS的继承更像面向对象语言的写法. 此篇博客,分为:基本介绍.Vue使用案例 基本介绍 Class可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多: class Father { } class Son extends Father { } 代码定义了一个Son 类

  • ES6中定义类和对象的方法示例

    本文实例讲述了ES6中定义类和对象的方法.分享给大家供大家参考,具体如下: 类的基本定义和生成实例: // 类的基本定义和生成实例 class Parent{ //定义一个类 constructor(name='xiaxaioxian'){ this.name= name; } } // 生成一个实例 let g_parent = new Parent(); console.log(g_parent); //{name: "xiaxaioxian"} let v_parent = ne

  • ES6 对象的新功能与解构赋值介绍

    ES6 通过字面量语法扩展.新增方法.改进原型等多种方式加强对象的使用,并通过解构简化对象的数据提取过程. 一.字面量语法扩展 在 ES6 模式下使用字面量创建对象更加简洁,对于对象属性来说,属性初始值可以简写,并可以使用可计算的属性名称.对象方法的定义消除了冒号和 function 关键字,示例如下: // Demo1 var value = "name", age = 18 var person = { age, // age: age ['my' + value]: 'Jenny

  • ES6数组与对象的解构赋值详解

    本文实例讲述了ES6数组与对象的解构赋值.分享给大家供大家参考,具体如下: 数组的解构赋值 基本用法 ES6允许按照一定的模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构(Destructuring) // 以前为变量赋值,只能直接指定值 var a = 1; var b = 2; var c = 3; // ES6允许写成这样 var [a,b,c] = [1,2,3]; 本质上,这种写法属于"模式匹配",只要等号两边的模式相同,左边的变量就会被赋予对应的值. 下面是一些使

  • ES6 Promise对象的应用实例分析

    本文实例讲述了ES6 Promise对象的应用.分享给大家供大家参考,具体如下: The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value. Promise 对象用于一个异步操作的最终完成(或失败)及其结果值的表示.简单点说,它就是用于处理异步操作的,异步处理成功了就执行成功的操作,异步处理失败了就捕获错误或者停止

  • ES6新特性六：promise对象实例详解

    本文实例讲述了ES6新特性之promise对象.分享给大家供大家参考,具体如下: 1. promise 介绍 它是一个对象,也就是说与其他JavaScript对象的用法,没有什么两样:其次,它起到代理作用(proxy),充当异步操作与回调函数之间的中介.它使得异步操作具备同步操作的接口,使得程序具备正常的同步运行的流程,回调函数不必再一层层嵌套. 它的思想是,每一个异步任务立刻返回一个Promise对象,由于是立刻返回,所以可以采用同步操作的流程.这个Promises对象有一个then方法,允许

  • ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析

    本文实例讲述了ES6学习笔记之字符串.数组.对象.函数新增知识点.分享给大家供大家参考,具体如下: 1.模板字符串 反引号`` 内用于输入格式化的字符串文本,在``内可以将表达式用${}包含起来 let str=` <!DOCTYPE html> <html lang="en"> <body> <div> <p class="pClass">格式化字符串</p> </div> <

  • 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

  • ES6知识点整理之对象解构赋值应用示例

    本文实例讲述了ES6知识点整理之对象解构赋值应用.分享给大家供大家参考,具体如下: ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要注意的事项 初识对象的解构 var {name} = { name:'Joh', age:10 }; console.log(name); // Joh 通过解构的形式取出对象中的属性值 对解构出的属性进行重命名 var {name} = { name:'Joh', age:1

  • ES6学习教程之对象字面量详解

    前言 本文主要给大家介绍了关于ES6对象字面量的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. ECMAScript6使得声明对象字面量更加简单,提供了属性简写和方法简写功能,属性名计算的新特性. function getInfo(name, age, weight) { return { // 如果属性名和属性值同名可以利用.es6的属性简写 name, // 等同于 make: make age, // 等同于 model: model weight, // 等同

  • ES6 Promise对象概念与用法分析

    本文实例讲述了ES6 Promise对象概念与用法.分享给大家供大家参考,具体如下: 1.Promise概念 Promise 对象有三种状态: ① Fulfilled 可以理解为成功的状态 ② Rejected 可以理解为失败的状态 ③ Pending 既不是 Fulfilld 也不是 Rejected 的状态,可以理解为 Promise 对象实例创建时候的初始状态 2.三个重要方法 在 Promise 对象当中有三个重要方法----resolve, reject和then. resolve 方

  • ES6 迭代器与可迭代对象的实现

    ES6 新的数组方法.集合.for-of 循环.展开运算符(...)甚至异步编程都依赖于迭代器(Iterator )实现.本文会详解 ES6 的迭代器与生成器,并进一步挖掘可迭代对象的内部原理与使用方法 一.迭代器的原理 在编程语言中处理数组或集合时,使用循环语句必须要初始化一个变量记录迭代位置,而程序化地使用迭代器可以简化这种数据操作 如何设计一个迭代器呢? 迭代器的本身是一个对象,这个对象有 next( ) 方法返回结果对象,这个结果对象有下一个返回值 value.迭代完成布尔值 done,

随机推荐