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的更多相关文章

  1. est6 -- Object.is()、Object.assign()、Object.defineProperty()、Symbol、Proxy

    Object.is()用来比较两个值是否严格相等.它与严格比较运算符(===)的行为基本一致,不同之处只有两个:一是+0不等于-0,二是NaN等于自身. + === - //true NaN === ...

  2. Object.assign()

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/assign 说明 Ob ...

  3. es6 Object.assign

    ES6 Object.assign 一.基本用法 Object.assign方法用来将源对象(source)的所有可枚举属性,复制到目标对象(target).它至少需要两个对象作为参数,第一个参数是目 ...

  4. Object.assign()怎么用？

    用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象(target). 1.以对象为参数的合并1)Object.assign方法的第一个参数是目标对象,后面的参数都是源对象 con ...

  5. ES6中Object.assign() 方法

    ES6中Object.assign() 方法 1. 对象合并Object.assign 方法用于对象的合并,将源对象(source)的所有可枚举属性,复制到目标对象上.如下代码演示: var targ ...

  6. [转]javascript之Object.assign()痛点

    本文转自:http://blog.csdn.net/waiterwaiter/article/details/50267787 最近也一直会用javascript,然后中间使用的一些组件,如Echar ...

  7. es6 javascript对象方法Object.assign()

    es6 javascript对象方法Object.assign() 2016年12月01日 16:42:34 阅读数:38583 1  基本用法 Object.assign方法用于对象的合并,将源对象 ...

  8. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  9. Object 对象方法学习之（1）—— 使用 Object.assign 复制对象、合并对象

    作用 Object.assign() 方法用于把一个或多个源对象的可枚举属性值复制到目标对象中,返回值为目标对象. 语法 Object.assign(target, ...sources) 参数 ta ...

随机推荐

  1. Codeforces_818

    A.winners总数为(k+1)diplomas. #include<bits/stdc++.h> using namespace std; long long n,k; int mai ...

  2. 题解 bzoj3688【折线统计】

    考虑 \(dp\) . 首先把所有节点按 \(x\) 从小到大排序是很有必要的. 记 f[i][j][0] 表示满足以第 \(i\) 个节点做折线结尾,选取的点集 \(S\) 满足 \(f(S)=j\ ...

  3. 强连通分量——tarjan算法

    概念: 有向图强连通分量:在有向图G中,如果两个顶点vi,vj间(vi>vj)有一条从vi到vj的有向路径,同时还有一条从vj到vi的有向路径,则称两个顶点强连通.如果有向图G的每两个顶点都强连 ...

  4. 使用Java8 Files类读写文件

    Java8 Files类的newBufferedReader()和newBufferedWriter()方法 这两个方法接受Path类型的参数.Path 类是Java8 NIO中的接口.可以由Path ...

  5. Python - with open()、os.open()、open()的详细使用

    读写文件背景 读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘. 读写文件就是请求 ...

  6. LVM知识梳理

    1 LVM介绍 LVM即logical volume manager逻辑卷管理,其主要特点是:可以动态地扩大和缩小分区大小,但前提是分区的文件系统必须是LVM格式的,lvm的实现需要安装lvm2软件包 ...

  7. redis系列-14点的灵异事件

    概述 项目组每天14点都会遭遇惊魂时刻.一条条告警短信把工程师从午后小憩中拉回现实.之后问题又神秘消失.是PM喊你上工了?还是服务器给你开玩笑?下面请看工程师如何一步一步揪出真凶,解决问题. 如果不想 ...

  8. -bash: warning: setlocale: LC_CTYPE: cannot change locale (zh_CN.UTF-8mb4): No such file or directory

    前几天登录服务器发现出现了这些个警告,一直没时间去处理他,今天难得有空,处理一下并记录下来,希望可以帮助到有需要的朋友. 警告信息如下: Last login: Tue May :: from 192 ...

  9. Python性能优化方案

    Python性能优化方案 从编码方面入手,代码算法优化,如多重条件判断有限判断先决条件(可看 <改进python的91个建议>) 使用Cython (核心算法, 对性能要求较大的建议使用C ...

  10. Redis入门(介绍、搭建)——Windows、Centos环境

    一.介绍 Redis is an open source (BSD licensed), in-memory data structure store, used as a database, cac ...