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 ...
随机推荐
- sql server如何判断数据库是否存在
如何判断数据库是否存在 执行下列的SQL,获得一张表,根据表的行数来判断. select * from master..sysdatabases where name=N'所查询的数据库名 ...
- Codeforces_729_E
http://codeforces.com/problemset/problem/729/E 存在的数必须连续,若不连续,从最后选人来补,注意根不是0和其他点是0的情况. #include<io ...
- Codeforces_714_B
http://codeforces.com/problemset/problem/714/B 当不同大小整数有1.2个时,肯定成立,3个时,需要判断,大于等于4个,则肯定不成立. #include & ...
- symfony开发步骤简述
对symfony具体开发也有了一定时间的接触了,下面说一下开发步骤,以备自己以后查看; 1.确定表关系,字段等 2.在相应的模块下的Rescourse下config/Doctrine创建相应的.orm ...
- Spark API 之 map、mapPartitions、mapValues、flatMap、flatMapValues详解
原文地址:https://blog.csdn.net/helloxiaozhe/article/details/80492933 1.创建一个RDD变量,通过help函数,查看相关函数定义和例子: & ...
- Sklearn——SVC学习笔记（图像分割）
新年第二更. 很长时间前就想总结一下用SVC来做图像分割的方法了,方法实现了,但是一直没有总结,今天再来回顾一遍. 首先介绍一下.今天要总结的图像分割其实属于像素级分类,其输出是把图像按照不同的类别逐 ...
- php 对象示例
<?php header("content-type:text/html; charset=utf-8"); error_reporting(E_ALL); class My ...
- golang-练习ATM --面向对象实现
package utils import ( "fmt" "strings" ) type StructAtm struct { action int loop ...
- LVM知识梳理
1 LVM介绍 LVM即logical volume manager逻辑卷管理,其主要特点是:可以动态地扩大和缩小分区大小,但前提是分区的文件系统必须是LVM格式的,lvm的实现需要安装lvm2软件包 ...
- linux的目录结构知识
1. Linux的目录结构知识图解 2. linux下应用程序组成及文件目录定义 #二进制程序: /bin /sbin /usr/bin /usr/sbin /usr/local/bin /usr/l ...