iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >ES6基础语法之对象介绍
  • 801
分享到

ES6基础语法之对象介绍

2024-04-02 19:04:59 801人浏览 八月长安
摘要

一、对象和属性和方法 javascript中对象: var person={name:"Jack",age:20}; 或: var name = "jack"; var age =

一、对象和属性和方法

javascript中对象:

var person={name:"Jack",age:20};

或:

var name = "jack";
var age = 20;
var person = {name:name,age:age};
console.log(person.age); //20

es6中的简洁表示:

let [name,age]=["jack",20];
let person = {name,age}; //等同person = {name: name,age: age}
console.log(person.age); //20

JavaScript中对象方法:

var person = {
    SayHi:function()
    {
    	console.log("hi");
    }
}
person.SayHi();  //hi

ES6中简洁表示:

let person = {
    SayHi()
    {
    	console.log("hi");
    }
}
person.SayHi();

ES6允许用表达式作为属性名,但是一定要将表达式放在方括号内:

var person = {["na"+"me"]:"jack",["a"+"ge"]:20};
console.log(person.age);

let str = "Hi";
let person = {
    ["Say"+str](){
    	console.log("hi");
    }
}
person.SayHi();

注意点:属性的简洁表示法和属性名表达式不能同时使用,否则会报错:

let [name,age]=["jack",20];
let person = {["na"+"me"],["a"+"ge"]}; //报错

二、对象的扩展运算符...

取出参数对象所有可遍历属性然后拷贝到当前对象:

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1};
console.log(stu2); //{name: "Jack", age: 20,sex:"男"}

合并两个对象:

let stu1BasicInfo = {name:"Jack",age:20,sex:"男"};
let stu1DetailInfo = {phone:"13524521457",mail:"ldh@163.com"};
let stu = {...stu1BasicInfo,...stu1DetailInfo};
console.log(stu);
//{name:"Jack",age:20,sex:"男",phone:"13524521457",mail:"ldh@163.com"}

拷贝对象时支持添加属性:

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,phone:"13554785452"};
console.log(stu2); //{name:"Jack",age:20,sex:"男",phone:"13554785452"}

添加的属性在拓展运算符后面,取添加的属性:

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {...stu1,name:"rose",phone:"13554785452"};
console.log(stu2);
//{name:"rose",age:20,sex:"男",phone:"13554785452"}

添加的属性在拓展运算度前面,取扩展运算符内容:

let stu1 = {name:"Jack",age:20,sex:"男"};
let stu2 = {name:"rose",phone:"13554785452",...stu1};
console.log(stu2);
//{name:"Jack",phone:"13554785452",age:20,sex:"男"}

到此这篇关于ES6基础语法之对象的文章就介绍到这了。希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: ES6基础语法之对象介绍

本文链接: https://www.lsjlt.com/news/147821.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • ES6基础语法之对象介绍
    一、对象和属性和方法 JavaScript中对象: var person={name:"Jack",age:20}; 或: var name = "jack"; var age = ...
    99+
    2024-04-02
  • ES6基础语法之函数介绍
    一、函数参数的扩展 ES6支持参数的默认值: function fn(name,age,sex="男") { console.log(`大家好,我是${name},性别${sex}...
    99+
    2024-04-02
  • ES6基础语法之class类介绍
    一、class基本语法 JavaScript 语言中,编写一个学生类,代码如下:(prototype可以个对象添加属性和方法) function Student(stuno,stun...
    99+
    2024-04-02
  • ES6基础语法之模块化介绍
    ES6 引入了模块化, ES6 的模块化分为导出(export) @与导入(import)两个模块。 ES6模块化特点: (1)ES6 的模块自动开启严格模式,不管你有没有在模块头部...
    99+
    2024-04-02
  • ES6基础语法之Map和Set对象
    一、Map对象 Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。 Map中的键值是有序的。 let myMap = new Map(); myMap.se...
    99+
    2024-04-02
  • ES6基础语法之Map和Set对象怎么用
    本篇内容主要讲解“ES6基础语法之Map和Set对象怎么用”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“ES6基础语法之Map和Set对象怎么用”吧!一、Map对象Map 对象保存键值对。任何值...
    99+
    2023-06-30
  • Python学习之基础语法介绍
    目录前言基础语法编码注释行与缩进多行语句import与from…import前言 Python环境的搭建这里就不赘述了,有需要的小伙伴可以在网上搜罗出很多教程,注意安装PyChom编...
    99+
    2024-04-02
  • ES6基础知识介绍
    目录一、ECMAScript和JavaScript关系二、let命令三、const命令四、变量的解构赋值1、数组的解构赋值2、对象的解构赋值一、ECMAScript和JavaScri...
    99+
    2024-04-02
  • Python类和对象基础入门介绍
    目录视频Python 类和对象创建和使用类根据类创建实例视频 观看视频 Python 类和对象 面向对象编程是编写表示现实世界中的事物和情景的类,并基于这些类来创建对象。 编写类时,...
    99+
    2024-04-02
  • Python基础语法介绍(3)
    基本概念、特性 顺序存储相同/不同类型的元素 定义:使用()将元素括起来,元素之间用“,”括开 特性:不可变,不支持添加,修改,删除等操作 查询:通过下标查询元组指定位置的元素 其他 空元组定义:non_tuple = () 只包含一...
    99+
    2023-01-31
    语法 基础 Python
  • Python基础语法介绍(1)
    环境配置 开发平台:Mac OS Version 10.13.2 开发工具安装 Python3.6.5 官网安装网址:https://www.python.org/downloads/ Pycharm 官网安装网址:http://w...
    99+
    2023-01-31
    语法 基础 Python
  • Kotlin 基础语法详细介绍
    Kotlin 基础语法详细介绍基础语法定义包名包名的定义应当在源文件的头部package my.demoimport java.util.*// ......
    99+
    2023-05-31
    kotlin 基础语法
  • ES6基础语法之数组拓展
    一、Array.of() 将参数中所有值作为元素形成数组: console.log(Array.of(1, 2, 3, 4)); // [1, 2, 3, 4] 参数的值可以为不同的...
    99+
    2024-04-02
  • JavaScript基础之对象
    目录1.对象1.1什么是对象?1.2为什么需要对象2.创建对象的三种方式2.1利用对象字面量创建对象{}2.2利用new Object创建对象2.3 利用构造函数创建对象总结1.对象...
    99+
    2024-04-02
  • ES6基础语法之class类怎么用
    这篇文章主要介绍了ES6基础语法之class类怎么用的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇ES6基础语法之class类怎么用文章都会有所收获,下面我们一起来看看吧。一、class基本语法JavaScri...
    99+
    2023-06-30
  • ES6基础语法之字符串扩展
    一、字符串的遍历 JS中遍历字符串: var str = "hello,world"; for(var i = 0;i<str.length;i++) { console.l...
    99+
    2024-04-02
  • Python基础之面向对象基础
    面向对象编程(Object-Oriented Programming,简称OOP)是一种编程思想,它将程序中的数据和操作封装成对象,...
    99+
    2023-09-23
    Python
  • python基础之面对对象基础类和对象的概念
    简称oop 复习 面向对象编程,简称oop [object oriented programming] 是一种python的编程思想 面...
    99+
    2024-04-02
  • 基础知识:编程语言介绍、Python介绍
    2018年3月19日 今日学习内容: 1、编程语言的介绍 2、Python介绍 3、安装Python解释器(多版本共存) 4、运行Python解释器程序两种方式。(交互式与命令行式)(♥♥♥♥♥) 5、变量(♥♥♥♥♥) 6、数据类型的基...
    99+
    2023-01-31
    基础知识 编程语言 Python
  • ES6基础语法之函数怎么使用
    这篇“ES6基础语法之函数怎么使用”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“ES6基础语法之函数怎么使用”文章吧。一、函...
    99+
    2023-06-30
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作