JavaScript——属性的增删改查

news/2024/7/7 18:32:13 标签: javascript, 开发语言, 前端, 学习

目录

任务描述

相关知识

属性的获取

方式一

方式二

属性的修改与新增

删除属性

编程要求

任务描述

Luma Restaurant 以前的财务人员在统计销售额的时候不小心把数据弄错了,现在的财务人员想通过一个 JavaScript 函数方便的修改数据,并署上自己的名字,请你帮助她完成这个任务吧!   本关任务:根据本小结内容,完成 JavaScript 对象属性值的获取和修改。

相关知识

在 Java 中,当实体类建立以后,类的属性只能获取与修改,不能增加与删除。但是因为 JavaScript 是动态类型的语言,JavaScript 中对象的属性具有增删改查所有的操作。

属性的获取

方式一

属性的获取有两种方式,一种是使用.符号,符号左侧是对象的名字,符号右侧是属性的名字,如下:

javascript">var student = {name:"Alice",gender:"girl"};
console.log(student.name);    // 输出Alice

这种情况下属性名必须是静态的字符串,即不能是通过计算或者字符串的拼接形成的字符串。

方式二

另外一种是使用[""]符号,符号的左边是对象的名字,双引号中间是属性的名字,这种情况下属性名可以是一个表达式,只要表达式的值是一个字符串即可。如下:

javascript">var student = {name:"Alice",gender:"girl"};
console.log(student["name"]);    / /输出Alice

有两种情况必须使用第二种方式:

  • 属性名含有空格字符,如student["first name"],这时不能用student.first name代替,编译器无法解释后者;

  • 属性名动态生成,比如用for循环获取前端连续 id 的值,这种 id 名之间一般有特定关系。如下面的例子:

    javascript">for(int i = 0;i < 5;i ++) {
        console.log(student["id"+i]);
    }

    属性的修改与新增

    属性的修改指修改已有属性的值,这个直接用赋值符号即可。   属性的新增与修改在形式上完全相同,区别仅在于编译器会根据属性的名字判断是否有该属性,有则修改,没有则新增。

javascript">var student = {
    name:"Kim",
    age:21
};
student.age = 20;//修改属性,覆盖了原来的值21
student.gender = "female";//新增属性gender

删除属性

JavaScript 中的属性还可以删除,这在其他的面向对象语言如 Java 或者 C++ 中是无法想象的,删除通过delete运算符实现。删除成功返回布尔型true,删除失败也是返回true,所以在删除之前需要判断一个属性是否存在,这个内容将在下一关讲解。

需要注意的是,对象只能删除自己特有的属性,而不能删除继承自原型对象的属性。同时,对象在删除属性时,要防止删除被其他对象继承的属性,因为这样会导致程序出错。

javascript">var Store = new Object();
Store.name = "lofo Market";
Store.location = "NO.13 Five Avenue";
console.log(delete Store.name);    // 删除成功,输出true
console.log(Store.name);    // 已删除,返回undefined
delete Store.prototype;    // 删除失败,非自有属性

编程要求

请补全右侧 Begin 和 End 之间的代码片段,使函数reviseAttribute(reviser,date,attvalue) 具备根据传入参数修改store对象的属性的功能,具体要求如下:

  • 如果调用函数reviseAttribute(reviser,date,attvalue)并传入值 Alice,1,1000那么对应storeday1属性的值就修改为 1000,accountant属性的值修改为Alice
    javascript">var store = {
    	name:"Luma Restaurant",
    	location:"No 22,Cot Road",
    	accountant:"Vivian Xie",
    	day1:3200,
    	day2:3200,
    	day3:3200,
    	day4:3200,
    	day5:3200,
    	day6:3200,
    	day7:3200,
    	day8:3200,
    	day9:3200,
    	day10:3200
    }
    function reviseAttribute(reviser,date,attValue) {
        //Convert string to integer
        attValue = parseInt(attValue);
        //请在此处编写代码
        /*********begin*********/
    	store["day"+date] = attValue;
    	store.accountant = reviser;
    	/*********end*********/
        var totalSales =  store["day1"]+store["day2"]+store["day3"]+store["day4"]+store["day5"]+store["day6"]+store["day7"]+store["day8"]+store["day9"]+store["day10"];
        return totalSales+store.accountant;
    }


http://www.niftyadmin.cn/n/5534870.html

相关文章

基于 Windows Server 2019 部署域控服务器

文章目录 前言1. 域控服务器设计规划2. 安装部署域控服务器2.1. 添加 Active Directory 域服务2.2. 将服务器提升为域控制器2.3. 检查域控服务器配置信息 3. 管理域账号3.1. 新建域管理员账号3.2. 新建普通域账号 4. 服务器加域和退域4.1. 服务器加域操作4.2. 服务器退域操作 总…

word图题表题公式按照章节编号(不用题注)

预期效果&#xff1a; 其中3表示第三章&#xff0c;4表示第3章里的第4个图。标题、公式编号也是类似的。 为了达到这种按照章节编号的效果&#xff0c;原本可以用插入题注里的“包含章节编号” 但实际情况是&#xff0c;这不仅需要一级标题的序号是用“开始->多级列表”自动…

Spring Boot 学习第八天:AOP代理机制对性能的影响

1 概述 在讨论动态代理机制时&#xff0c;一个不可避免的话题是性能。无论采用JDK动态代理还是CGLIB动态代理&#xff0c;本质上都是在原有目标对象上进行了封装和转换&#xff0c;这个过程需要消耗资源和性能。而JDK和CGLIB动态代理的内部实现过程本身也存在很大差异。下面将讨…

CSS filter(滤镜)属性,并实现页面置灰效果

目录 一、filter&#xff08;滤镜&#xff09;属性 二、准备工作 三、常用的filter属性值 1、blur(px) 2、brightness(%) 3、contrast(%) 4、grayscale(%) 5、opacity(%) 6、saturate(%) 7、sepia(%) 8、invert(%) 9、hue-rotate(deg) 10、drop-shadow(h-shadow v…

flutter开发实战-ListWheelScrollView与自定义TimePicker时间选择器

flutter开发实战-ListWheelScrollView与自定义TimePicker 最近在使用时间选择器的时候&#xff0c;需要自定义一个TimePicker效果&#xff0c;当然这里就使用了ListWheelScrollView。ListWheelScrollView与ListView类似&#xff0c;但ListWheelScrollView渲染效果类似滚筒效果…

使用React复刻ThreeJS官网示例——keyframes动画

最近在看three.js相关的东西&#xff0c;想着学习一下threejs给的examples。源码是用html结合js写的&#xff0c;恰好最近也在学习react&#xff0c;就用react框架学习一下。 本文参考的是threeJs给的第一个示例 three.js examples (threejs.org) 一、下载threeJS源码 通常我们…

【LC刷题】DAY22:491 46 47 332 51 37

【LC刷题】DAY22&#xff1a;491 46 47 332 51 37 文章目录 【LC刷题】DAY22&#xff1a;491 46 47 332 51 37491. 非递减子序列 [link](https://leetcode.cn/problems/non-decreasing-subsequences/description/)46. 全排列 [link](https://leetcode.cn/problems/permutations…

Kafka集群部署(手把手部署图文详细版)

1.1.1 部署zookpeer 在node02下载并解压zookeeper软件包 cd /usr/local wget https://archive.apache.org/dist/zookeeper/zookeeper-3.4.6/zookeeper-3.4.6.tar.gz 或者&#xff1a;scp cat192.168.28.100:/home/cat/zookeeper-3.4.6.tar.gz /tmp&#xff08;注意目录&#xf…