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 ...
随机推荐
- 导弹拦截（dp复习）
题目描述:求最长下降子序列的长度 in: 71 7 3 5 9 4 8 out: 4 解释:1 3 4 8/1 3 5 8 长度为四 这让我想到了hdu上导弹拦截那道题,是求最长上升子序列长度 其转移 ...
- Java并发读书笔记：如何实现线程间正确通信
目录 一.synchronized 与 volatile 二.等待/通知机制 等待 通知 面试常问的几个问题 sleep方法和wait方法的区别 关于放弃对象监视器 三.等待通知典型 生产者消费者模型 ...
- My introduction
Vistors 访客统计
- centos7.5下yum安装php-5.6.40（LNMP环境）
cd /etc/yum.repos.d/ yum -y install epel-release #<===安装centos7下php5.6的epel和remi源 rpm -ivh http:/ ...
- Unity 编辑器开发SceneView GUI控制
前几天项目需要就做了个类似于Collider EditCollider的功能 下面是我做的效果 基础代码如下: public class ExportCFGInputWindow : EditorWi ...
- 解决shiro自定义filter后，ajax登录无法登录，并且无法显示静态资源的问题
这个问题困扰了我一天,看了下面两个文章,豁然开朗: https://www.cnblogs.com/gj1990/p/8057348.html https://412887952-qq-com.ite ...
- CentOS与Ubuntu的区别
学习博客:https://www.cnblogs.com/lirongzheng/p/8250511.html 更多Ubuntu相关信息见Ubuntu 专题页面 http://www.linuxidc ...
- 阿里云ECS服务器，mysql无法外网访问
可参考https://www.jianshu.com/p/7a41734b502e 问题原因 未授权远程IP地址登录.root用户默认只能在localhost也就是本机登录 解决方案 在服务器上登录数 ...
- C语言低级I/O（UNIX接口）
头文件说明 以下各函数均在<unistd.h>中 flags的各个值定义于<fcntl.h>中 BUFSIZ定义于<stdlib.h>中 (似乎<stdio. ...
- codewars--js--create phone number
Write a function that accepts an array of 10 integers (between 0 and 9), that returns a string of th ...