zoukankan      html  css  js  c++  java
  • 【JavaScript 从零开始】 原始值和对象引用、类型转换

    JavaScript 中的原始值(undefined、null 、 布尔值、数值和字符串)于对象(包括数组和函数)有着根本区别。

    原始值是不可更改的:任何方法都无法改变(或“突变”)一个原始值。

    对于数字和布尔值来说显然如此-----改变数字的值本身就说不通,而对字符串来说就不那么明显了,

    因为字符串看起来是有字符组成的数组,我们期望可以通过指定索引来修改字符串中的字符。

    实际上,JavaScript是禁止这样做的。

    字符串中所有的方法看上去返回了一个修改后的字符串,实际上返回的是一个新的字符串值。

    例如:

    var s = "hello";               //定义一个有小写字母组成的文本
    s.toUpperCase();               //返回“HELLO”,但并没有改变s的值
    s                      //=>"hello": 原来字符串的值并未改变

    比较

    原始值得比较是值得比较:只有在它们的值相等时它们才相等。

    如果比较两个单独的字符串,当且仅当它们的长度相等且每个索引的字符都相等时,JavaScript才认为它们相等。

    对象和原始值不同。首先,它们是可变的 -----它们的值是可修改的:

    var o ={x:1};     //定义一个对象
    o.x=2;     //通过修改对象属性值来修改对象
    o.y=3;     //再次修改这个对象,给它增加一个新属性
    
    var a = [1,2,3];     //数组也可修改的
    a[0]=0;     //修改数组的一个元素
    a[3]=4;     //给数组增加一个新元素

    对象的比较并非值得比较:即使两个对象包含同样的属性及相同的值,它们也不是相等的。

    各个索引元素完全相等的数组也不相等。

    var o = {x:1}, p = {x: 1};            //具有相同属性的两个对象
    o===p;                                      //=>false : 两个单独的对象永不相等
    var a= [] , b = [];                        //两个单独的空数组
    a===b;                                      //=>false : 两个单独的数组永不相等

    注:a==b 也是false

    我们通常将对象称为引用类型(reference type),以此来和JavaScript的基本类型区分开来。

    依照术语的叫法,对象都是引用(reference),对象的比较均是引用的比较:当且仅当它们引用同一个基对象时,它们才相等。

    var a = [];             //定义一个引用空数组的变量a
    var b= a;               //变量b引用同一个数组
    b[0]=1;                 //通过变量b 来修改引用的数组
    a[0]                       //=> 1 : 变量a 也回修改
    a===b                   //=> true : a和b引用同一个数组,因此相等
    a==b                      //=> true : a和b引用同一个数组,因此相等

    就像你刚刚看到的如上代码,将对象或数组复制给一个变量,激进是复制的引用值:对象本身并有复制一次。

    如果你想得带一个对象或数组的副本,则必须显示复制对象的每一个属性或数组的每个元素。

    下面这个例子通过循环完成数组的复制(深拷贝数组):

    var a = ['a','b','c'];      //待复制的数组
    var b= [];               //复制到的目标空数组
    for (var i = 0; i<a.length ; i++)   // 遍历a[]中的每个元素
    {
        b[i]=a[i]          //强元素之复制到b中
    }

    下面是一个, 深拷贝一个方法(深拷贝对象)

    function cloneObject(obj) {
            var clone = {};
            for(var i in obj) {
                if(typeof(obj[i])=="object" && obj[i] != null)
                    clone[i] = cloneObject(obj[i]);
                else
                    clone[i] = obj[i];
            }
            return clone;
        }
    //此方法用到了 递归,不清楚的请自行百度一下
    //深拷贝的另外两种方法
    
    //使用原型
    function object(o) {
        function F() {}
        F.prototype = o;
        return new F();
    }
    
    var newObject = object(oldObject);
    
    //通过JSON
    var newObject = JSON.parse(JSON.stringify(oldObject));

    类型转换

    JavaScript 中的取值类型非常灵活,我们已经从布尔值看到了这一点:

    当JavaScript 期望使用一个布尔值的时候,你可以提供任意类型值,JavaScript 将根据需要自行转换类型。

    一些值(真值)转换为 true,其他值(假值)转换为 false.

    在其他类型中同样适用:

    如果JavaScript 期望使用一个字符串,它吧给定的值将转换为字符串。

    如果JavaScript 期望使用一个数字,他就把给定的值将转换为数字。(如果转换结果无意义,将返回NaN)

    一些例子:

    10 + " object" ;               //=>"10 object":  数字10将成字符串
    "7" * "4" ;                      //=>28 : 两个字符串均转换为数字
    var n= 1- "x" ;               //=>NaN : 字符串“x”无法转换为数字
    n+" object"                     //=>“NaN object ” : NaN转换为字符串“NaN”

    下表 简要说明了JavaScript 中如何进行类型转换的。

    转换和相等性

    由于JavaScript可以灵活的类型转换,因此其“==” 相等运算符也随相等的含义灵活多变。

    例如 ,如下这些比较结果均是 true:

    null == undefined                 //这两个值被认为相等
    "0" == 0                              //比较前字符串转换成数字
    0 == false                            //比较前布尔值转换成数字
    "0" == false                          //比较前字符串和布尔值都转换成数字

    “==” 等于运算符在判断两个值是否相等时做了类型转换(之后会详解)

    “===” 恒等运算符在判断两个值是否相等时并未做任何类型转换。

    1、对于string,number等基础类型(原始值),==和===是有区别的
    
    1)不同类型间比较,==之比较“转化成同一类型后的值”看“值”是否相等,===如果类型不同,其结果就是不等
    
    2)同类型比较,直接进行“值”比较,两者结果一样
    
     
    
    2、对于Array,Object等高级类型(对象引用),==和===是没有区别的
    
    进行“指针地址”比较
    
     
    
    3、基础类型(原始值)与高级类型(对象引用),==和===是有区别的
    
    1)对于==,将高级转化为基础类型,进行“值”比较
    
    2)因为类型不同,===结果为false
  • 相关阅读:
    Docker(二十一)-Docker Swarm集群部署
    Docker(十八)-Docker配置DNS
    Docker(十七)-修改Docker容器启动配置参数
    Docker(十六)-Docker的daemon.json的作用
    JavaScript实现无缝滚动 原理详细讲解
    JS 数字 、中文、 英文、判断
    JS常用属性方法大全
    vue.js插件使用(01) vue-resource
    Vue.js常见问题
    web前端开发必备技术
  • 原文地址:https://www.cnblogs.com/178mz/p/5083228.html
Copyright © 2011-2022 走看看