ES6基础语法之对象介绍

ES6基础语法之对象介绍

在ES6中,新的语法规范,对象展开操作符、对象方法、计算属性名以及内置Object属性等,在对象的定义与操作中起到了很大的作用。

对象基础

在ES6中,我们可以通过对象字面量的方式来创建一个对象,如下所示:

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

ES6还引入了一个新的关键字let来定义局部变量,取代了旧的关键字var

对象中的属性和值采用键值对的形式表示,冒号分隔键和值,每个键值对之间用逗号隔开。

对象展开操作符

定义对象时,我们可以使用对象展开操作符...,将一个对象的属性展开到另外一个对象之中。

例如:

let obj1 = {name: '张三', age: 18};
let obj2 = {sex: '男', ...obj1};

console.log(obj2); // {sex: '男', name: '张三', age: 18}

以上代码将obj1对象中的属性展开到obj2中。

此外,...操作符还可以用于函数调用,将一个数组展开成一个序列。

例如:

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

let arr3 = [...arr1, ...arr2];

console.log(arr3); // [1, 2, 3, 4, 5, 6]

对象方法

在ES6中,可以通过在对象中定义函数来定义对象的方法。

例如:

let obj = {
  name: '张三',
  sayHello() {
    console.log('你好,' + this.name);
  }
};

obj.sayHello(); // 你好,张三

在以上代码中,我们在obj对象中定义了一个名为sayHello的函数,当调用obj.sayHello方法时,控制台会输出你好,张三

除了上述的函数定义语法形式之外,在ES6中,还可以使用=>来定义函数,这种函数也称为箭头函数,例如:

let obj = {
  name: '张三',
  sayHello: () => {
    console.log('你好,' + this.name);
  }
};

obj.sayHello(); // 你好,undefined

需要注意的是,在箭头函数中,this指针会指向箭头函数外部的this,因此在以上的代码中,this指针指向了全局变量,而不是obj对象。

计算属性名

在ES6中,我们可以使用计算属性名,动态地定义对象的属性名。

例如:

let name = '张三';

let obj = {
  [name]: 'hello'
};

console.log(obj[name]); // hello

以上代码在定义对象obj时,使用了计算属性名的方式,通过变量name来动态地定义了对象的属性名。

内置Object属性

ES6中还提供了许多内置的Object属性,例如Object.keysObject.values以及Object.entries

  1. Object.keys用于获取对象的所有键名,返回一个数组。

例如:

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let keys = Object.keys(obj);

console.log(keys); // ['name', 'age', 'sex']

以上代码调用了Object.keys方法,输出了数组['name', 'age', 'sex']

  1. Object.values用于获取对象的所有键值,返回一个数组。

例如:

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let values = Object.values(obj);

console.log(values); // ['张三', 18, '男']

以上代码调用了Object.values方法,输出了数组['张三', 18, '男']

  1. Object.entries用于获取对象的所有键值对,返回一个数组。

例如:

let obj = {
  name: '张三',
  age: 18,
  sex: '男'
};

let entries = Object.entries(obj);

console.log(entries); // [['name', '张三'], ['age', 18], ['sex', '男']]

以上代码调用了Object.entries方法,输出了一个包含三个数组的数组,每个子数组包含键值对。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:ES6基础语法之对象介绍 - Python技术站

(0)
上一篇 2023年5月27日
下一篇 2023年5月27日

相关文章

  • Vue中如何把hash模式改为history模式

    Vue中可以通过修改路由模式的方式,从默认的hash模式改为history模式。下面是具体的操作步骤: 1. 修改路由模式 在Vue项目中找到router文件夹,打开index.js文件,找到路由实例的创建代码部分(通常代码会类似如下): import Vue from ‘vue’ import Router from ‘vue-router’ import…

    JavaScript 2023年6月11日
    00
  • 利用JS提交表单的几种方法和验证(必看篇)

    下面是关于“利用JS提交表单的几种方法和验证”的完整攻略: 1. 提交表单的几种方法 1.1 提交按钮直接调用submit方法 当在表单中设置了type=”submit”的按钮,在点击按钮时,会自动提交表单。同时,我们也可以通过js手动触发按钮的点击事件,从而提交表单。 例如,我们有一个表单: <form id="myForm" a…

    JavaScript 2023年6月10日
    00
  • js闭包实例汇总

    JS闭包实例汇总 在 JavaScript 中,函数是一等公民,它们可以被传递、被赋值、被嵌套定义等等。在函数内定义的函数,被称为闭包(Closure)。闭包可以访问函数外部的变量,而且在函数执行完并返回时,可以保留这些变量的值。 本文将为大家汇总几个 JavaScript 闭包的实例,方便大家加深对闭包的理解。 示例一:计数器 我们可以通过闭包来创建一个计…

    JavaScript 2023年6月10日
    00
  • js实例之01支付后的10秒倒计时

    这是一个通过js实现的支付后的页面,点击支付会跳出一个弹窗,提示你是否要确定支付,确定后进入付后界面,该页面有着10秒倒计时,计时结束后便会返回原界面。也可以选择立刻返回,来返回主页面第一个zhifu.html页面<!DOCTYPE html> <html lang=”en”> <head> <meta charse…

    JavaScript 2023年4月18日
    00
  • JavaScript实现简单表单验证案例

    当编写一个表单的时候,为了保证提交的数据正确性以及安全性,我们需要对用户输入的数据进行验证。而 JavaScript 可以提供灵活的表单验证功能,使得表单数据的验证更加方便和高效。 以下是一个可用于表单验证的基本攻略: 获取表单元素对象 通过使用 JavaScript的 DOM 操作获取表单元素对象,以便于后续的获取用户输入和验证数据。 示例: let in…

    JavaScript 2023年6月10日
    00
  • javascript中json对象json数组json字符串互转及取值方法

    下面是“JavaScript中JSON对象、JSON数组、JSON字符串互转及取值方法”的完整攻略: 1. JSON对象 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,其数据格式和JavaScript对象的格式类似。在JavaScript中,可以通过JSON对象来解析JSON字符串,也可以将JavaScript对…

    JavaScript 2023年5月27日
    00
  • 学习AngularJs:Directive指令用法(完整版)

    学习AngularJs:Directive指令用法(完整版)是一篇关于AngularJS指令用法的详细攻略。下面我来详细讲解该攻略。 概述 该攻略主要介绍AngularJS中Directive指令的用法,指令是AngularJS的核心部分,它们允许我们扩展HTML,使其具有复杂的行为和交互特性。指令可以用于添加自定义标记,创建自定义元素,设置元素样式,添加事…

    JavaScript 2023年6月10日
    00
  • JS计算输出100元钱买100只鸡问题的解决方法

    关于“JS计算输出100元钱买100只鸡问题的解决方法”的完整攻略,下面是我的详细讲解: 问题描述 问题描述如下:假设农场里只有鸡和兔子,用 100 元钱买了 100 只鸡,鸡的价格是5元一只,兔子的价格是3元一只,请问鸡和兔子各有多少只? 解决方法 这是一道数学问题,我们可以用代数方程来解决。设鸡的数量为 x,兔子的数量为 y,则有以下两个式子: x + …

    JavaScript 2023年5月28日
    00
合作推广
合作推广
分享本页
返回顶部