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 ...
随机推荐
- [sphinx]生成文档的工具
安装: pip install sphinx 新建文档项目 sphinx-quickstart 配置一些设置选项, 生成项目文件 生成html make html .\make.bat html #w ...
- ARTS Week 9
Dec 23, 2019 ~ Dec 29, 2019 Algorithm Problem 69 Sqrt(x) 实现求解平方根函数Sqrt(x) 题目链接 题目描述:给定一个非负数x,求解该数字的平 ...
- DOCKER 学习笔记9 Kubernetes (K8s) 生产级容器编排 上
前言 在上一节的学习中.我们已经可以通过最基本的 Docker Swarm 创建集群,然后在集群里面加入我们需要运行的任务 以及任务的数量 这样我们就创建了一个服务. 当然,这样的方式在我们本地虚拟机 ...
- win10系统下安装JDK1.8及配置环境变量的方法
本次演示基于windows10操作系统,如果你是linux,请参考:https://www.yn2333.com/archives/linux上安装JDK8 1:下载安装包 地址:https://ww ...
- Go语言实现：【剑指offer】斐波那契数列
该题目来源于牛客网<剑指offer>专题. 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0) n<=39 Go语言实现: 递归: ...
- Go语言实现：【剑指offer】连续子数组的最大和
该题目来源于牛客网<剑指offer>专题. HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向 ...
- MapReduce清洗数据进行可视化
继上篇第一阶段清洗数据并导入hive 本篇是剩下的两阶段 2.数据处理: ·统计最受欢迎的视频/文章的Top10访问次数 (video/article) ·按照地市统计最受欢迎的Top10课程 (ip ...
- Jmeter之安装与环境配置
前言 本次的教程是Jmeter的安装与配置 1.安装JDK并配置好环境变量,在系统变量中添加JAVA_HOME变量 在系统变量path中添加 %JAVA_HOME%\bin 2.打开Jmeter官网: ...
- 使用Java实现三个线程交替打印0-74
使用Java实现三个线程交替打印0-74 题目分析 三个线程交替打印,即3个线程是按顺序执行的.一个线程执行完之后,唤醒下一个线程,然后阻塞,等待被该线程的上一个线程唤醒.执行的顺序是一个环装的队列 ...
- sed知识及常用用法梳理
1.sed命令简介及其参数说明 sed流编辑器,擅长对文本进行增删改查,过滤指定的字符串和取指定行,也可以在行中字符串前后插入内容,功能非常强大. 注意:sed默认只支持基本的正则表达式,如果要想支持 ...