Don't assign one object to another one
correct way, when changing object, firstly you should create this object and then assign its property to the new object
<!DOCTYPE html>
<html lang="en">
<head>
<title>Chapter 11: Example 7</title>
</head>
<body>
<form action="" name="theForm">
<select name="theDay" size="5">
<option value="0" selected="selected">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
<br />
<input type="button" value="Remove Wednesday" name="btnRemoveWed" />
<input type="button" value="Add Wednesday" name="btnAddWed" />
<br />
</form>
<script>
var theForm = document.theForm;
function btnRemoveWedClick() {
var options = theForm.theDay.options;
if (options[2].text == "Wednesday") {
options[2] = null;
} else {
alert("There is no Wednesday here!");
}
}
//change object value
function btnAddWedClick() {
var options = theForm.theDay.options;
console.log('length ' +options.length); //6
if (options[2].text != "Wednesday") {
var lastOption = new Option();
options[options.length] = lastOption;
for (var index = options.length - 1; index > 2; index--) {
console.log(index); // 6 because you add last option to options
var currentOption = options[index];
var previousOption = options[index - 1];
currentOption.text = previousOption.text;
currentOption.value = previousOption.value;
}
var option = new Option("Wednesday", 2);
options[2] = option;
} else {
alert("Do you want to have TWO Wednesdays?");
}
}
theForm.btnRemoveWed.addEventListener("click", btnRemoveWedClick);
theForm.btnAddWed.addEventListener("click", btnAddWedClick);
</script>
</body>
</html>
wrong way. don't assign one object to another one , this won't work
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<form action="" name="theForm">
<select name="theDay" size="5">
<option value="0" selected="selected">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
<br />
<input type="button" value="Remove Wednesday" name="btnRemoveWed" />
<input type="button" value="Add Wednesday" name="btnAddWed" />
<br />
</form>
<script>
var theDayEls = document.theForm.theDay;
document.write('option length is :');
document.write(theDayEls.length + ', ' + theDayEls.options.length +'<br>');
console.log(document.theForm.theDay.options)
for (let i=0; i<theDayEls.options.length; i++){
document.write(' | value :');
document.write(theDayEls.options[i].value);
document.write(', text :');
document.write(theDayEls.options[i].text);
}
var btnRemoveWed = document.theForm.btnRemoveWed;
var btnAddWed = document.theForm.btnAddWed;
btnRemoveWed.addEventListener('click',btnRemoveWedClick);
btnAddWed.addEventListener('click',btnAddWedClick);
function btnRemoveWedClick(e) {
var options = document.theForm.theDay.options;
//iterate 7 times, not user-friendly
// for (let option of options){
//
// if (option.text == options[2].text){
// console.log('before');
// console.log(options[2]);
// console.log(option);
// // option= null; //for of loop can not change the value of collections
// //copy the options elements to options for reading
// options[2]= null; //really remove
// console.log('after');
// console.log(options[2]); // turn to options[3] value
// console.log(option); //still exists
// }else {
// alert('no more to be removed');
// }
// }
if (options[2].text == 'Wednesday'){
options[2] = null;
}else {
alert('no more to be removed');
}
}
//can not assign the option object to another option object
//totally wrong
function btnAddWedClick() {
var options =document.theForm.theDay.options;
// var lastOption = options[options.length]; //wrong way
// console.log(lastOption); //undefined
var lastOpt = new Option();
// options[options.length] = lastOpt;
options[options.length] = options[6];
lastOpt =options[6];
console.log(options[5])
console.log(lastOpt)
var prevOpt;
// for (var i = options.length-1 ; i >= 3 ; i--){
// prevOpt = options[i-1];
// var currOpt = options[i];
// var nextOpt = options[i+1];
// nextOpt = currOpt;
// currOpt = prevOpt;
// // console.log(i-1 +'inside for' +(options[2] == prevOpt)); //true
// }
var newWenOpt = new Option('Wednesday',2);
// console.log(prevOpt);
// prevOpt = newWenOpt;
options[2] = newWenOpt;
console.log('outside for' +(options[2] == prevOpt)); //false, there are not the same one
}
</script>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<form action="" name="theForm">
<select name="theDay" size="5">
<option value="0" selected="selected">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</option>
<option value="6">Sunday</option>
</select>
<br />
<input type="button" value="Remove Wednesday" name="btnRemoveWed" />
<input type="button" value="Add Wednesday" name="btnAddWed" />
<br />
</form>
<script>
var theDayEls = document.theForm.theDay;
document.write('option length is :');
document.write(theDayEls.length + ', ' + theDayEls.options.length +'<br>');
console.log(document.theForm.theDay.options)
for (let i=0; i<theDayEls.options.length; i++){
document.write(' | value :');
document.write(theDayEls.options[i].value);
document.write(', text :');
document.write(theDayEls.options[i].text);
}
var btnRemoveWed = document.theForm.btnRemoveWed;
var btnAddWed = document.theForm.btnAddWed;
btnRemoveWed.addEventListener('click',btnRemoveWedClick);
btnAddWed.addEventListener('click',btnAddWedClick);
function btnRemoveWedClick(e) {
var options = document.theForm.theDay.options;
//iterate 7 times, not user-friendly
// for (let option of options){
//
// if (option.text == options[2].text){
// console.log('before');
// console.log(options[2]);
// console.log(option);
// // option= null; //for of loop can not change the value of collections
// //copy the options elements to options for reading
// options[2]= null; //really remove
// console.log('after');
// console.log(options[2]); // turn to options[3] value
// console.log(option); //still exists
// }else {
// alert('no more to be removed');
// }
// }
if (options[2].text == 'Wednesday'){
options[2] = null;
}else {
alert('no more to be removed');
}
}
//can not assign the option object to another option object
//totally wrong
function btnAddWedClick() {
var options =document.theForm.theDay.options;
// var lastOption = options[options.length]; //wrong way
// console.log(lastOption); //undefined
var lastOpt = new Option();
// options[options.length] = lastOpt;
options[options.length] = options[6];
lastOpt =options[6];
console.log(options[5])
console.log(lastOpt)
var prevOpt;
// for (var i = options.length-1 ; i >= 3 ; i--){
// prevOpt = options[i-1];
// var currOpt = options[i];
// var nextOpt = options[i+1];
// nextOpt = currOpt;
// currOpt = prevOpt;
// // console.log(i-1 +'inside for' +(options[2] == prevOpt)); //true
// }
var newWenOpt = new Option('Wednesday',2);
// console.log(prevOpt);
// prevOpt = newWenOpt;
options[2] = newWenOpt;
console.log('outside for' +(options[2] == prevOpt)); //false, there are not the same one
}
</script>
</body>
</html>
Don't assign one object to another one的更多相关文章
- est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy
Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...
- Object.assign()
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 说明 Ob ...
- es6 Object.assign
ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...
- Object.assign()怎么用？
用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 1.以对象为参数的合并1)Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 con ...
- ES6中Object.assign() 方法
ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...
- [转]javascript之Object.assign()痛点
本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...
- es6 javascript对象方法Object.assign()
es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1 基本用法 Object.assign方法用于对象的合并,将源对象 ...
- es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- Object 对象方法学习之（1）—— 使用 Object.assign 复制对象、合并对象
作用 Object.assign() 方法用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象. 语法 Object.assign(target, ...sources) 参数 ta ...
随机推荐
- 使用卷影拷贝提取ntds.dit
一.简介 通常情况下,即使拥有管理员权限,也无法读取域控制器中的C:\Windows\NTDS\ntds.dit文件.使用windows本地卷影拷贝服务,就可以获得该文件的副本. 在活动目录中,所有的 ...
- Junit单元测试案例（测试语言Java）
# 二.单元测试案例##### 1. 首先我们先创建一个Operation类,在类中我们写几个方法,分别为加.减.乘.除.这些方法都不加边界值与判断.如下图所示:![在这里插入图片描述](https: ...
- vs2017项目上传到github
如果要把项目提交到一个厂库里面,需要建个git存储库,比如选择新建git库选择VSVIEW文件夹,以后在这个文件夹下的项目,提交时都会提交到VSVIEW这个github仓库 选择的文件夹不在git文件 ...
- 对char *f=new char[4]赋初值
用new 开辟的可以直接指向字符串常量,但是之后就不能进行修改了比如 char * f=new char[4]; f="ab"; f[0]='0'//错误 但是可以输出f[0]; ...
- PTA 7-9 集合相似度（STL之set初体验）
7-9 集合相似度(25 分) 给定两个整数集合,它们的相似度定义为:Nc/Nt×100%.其中Nc是两个集合都有的不相等整数的个数,Nt是两个集合一共有的不相等整数的个数.你 ...
- PyTorch可视化——tensorboard、visdom
一.pytorch与tensorboard结合使用 Tensorboard Tensorboard一般都是作为tf的可视化工具,与tf深度集成,它能够展现tf的网络计算图,绘制图像生成的定量指标图以及 ...
- 《自拍教程16》cmd的常用技巧
cmd.exe是Windows 自带的命令行操作交互界面软件. 虽然功能有限,但是毕竟是默认的命令行操作交互界面软件. 肯定所有的电脑都是自带的. 当然现在已经有很多改良版的,交互体验更好的cmd类似 ...
- 《自拍教程17》Python调用命令
他山之石 何为他山之石,就是借助外界工具,来实现自己想要的功能. 命令行界面软件, 即各种命令,我们也叫命令行工具, 此类工具也是测试人员或者开发人员常用的工具的一种. 测试人员可以借助这类工具,快速 ...
- UI自动化框架搭建
1.目录结构 大概分为以下几个文件 common :主要是用来放一些封装的公共函数 outputs :主要是输出一些文件,失败截图.用例执行完的测试报告 pagelocate :主要是元素的定位 pa ...
- 处理异常未知端口 Lsof命令
需要使用的命令: ss -tnl 显示所有tcp已被监听的端口 lsof -i:端口 显示所有打开该端口的进程 工作实例: 某天通过ss -tnl发现有不认识的正在被监听的端口 ? 于是使用lso ...