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 ...
随机推荐
- VS生成垃圾文件清理
@echo Off del /s /a *.txt *.exe *.suo *.ncb *.user *.dll *.pdb *.netmodule *.aps *.ilk 2>nul FOR ...
- C语言笔记--传递结构指针以及值传递，址传递
#include <stdio.h> #include <windows.h> #include <mmsystem.h> #include <string. ...
- jQuery初学者笔记 一
jQuery初学者笔记 一 Mirror王宇阳 by jQuery语法 jQuery语法是通过选取HTML元素,并对选取的元素进行操作 基础语法: 所有jQuery语句用"$"符号 ...
- 小白学 Python 数据分析（5）：Pandas （四）基础操作（1）查看数据
在家为国家做贡献太无聊,不如跟我一起学点 Python 人生苦短,我用 Python 前文传送门: 小白学 Python 数据分析(1):数据分析基础 小白学 Python 数据分析(2):Panda ...
- C++解析Json，使用JsonCpp读写Json数据
JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.通常用于数据交换或存储. JsonCpp是一个基于C++语言的开源库,用于C++程序的J ...
- 使用Python打造一款间谍程序
知识点 这次我们使用python来打造一款间谍程序 程序中会用到许多知识点,大致分为四块 win32API 此处可以在MSDN上查看 Python基础重点在cpytes库的使用,使用方法请点击此处 ...
- windows10 CTCP
windows上除了普通tcp之外,有一个CTCP. 据说可以提升长延时情况下的吞吐量. win7可以方便的通过netsh int tcp set global congestionprovider= ...
- Apache httpd.conf配置文件 1（Global Environment ）
Apache 版本: Server version: Apache/2.2.15 总计 1000行左右 英文前带井号的是注释,不起作用. 但很多注释去掉前方的 # 即可生效. # # This i ...
- 解决 webpack-dev-server 不能使用 IP 访问
webpack 是众所周知很好用的打包工具,在开发 vue 项目时,vue-cli 就集成了 webpack.我们启一个服务:npm run dev然后在浏览器可是使用 http://localhos ...
- ES6 - 基础学习(5): 数值扩展
二进制和八进制数值表示法 ES6提供了二进制和八进制数值的新写法,分别前缀 0b(或0B). 0o(或0O)然后跟上二进制.八进制值即可. 二进制(Binary)表示法新写法:前缀 0b 或 0B. ...