js中关于逻辑符号的连续使用问题

最新推荐文章于 2022-08-01 20:06:40 发布

LLZYHHH

最新推荐文章于 2022-08-01 20:06:40 发布

阅读量511

点赞数

文章标签： javascript

原文链接：https://blog.csdn.net/weboof/article/details/53116892

版权

JavaScript 连续比较赋值引用类型逻辑运算符

关键词由CSDN通过智能技术生成

连续比较问题

最近在做购物车页面，涉及到最大购买量和最低起订量，而恰恰我们使用的正常数据在最大购买量于最低起订量之间，于是乎就出现了lessData<normalData<bigData；
乍一看没有任何问题，可是当运行的时候发现并不如人意，后来做了一个简单demo，大家可以随便去试，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="jquery.min.js"></script>
<script>
    var a=9;
    var b=10;
    var c=987;
    if(a<5<c) {
        alert("错误语法");//该方法竟然执行啦！！！
    }
</script>
</body>
</html>
   
   
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

经测试了几次发现，a<b<c这种方式等同于js中的a<b||b<c，也就是只满足其中一个条件就成立。后来，以防出错，就又试了一把，果然坑还在后边，代码如下：

var a=9;
var b=10;
var c=987;
if(c<987<c) {
    alert("错误语法");//万恶的该方法又执行了！！！
}
   
   
   
   1
2
3
4
5
6

原因到底出在哪里？哈哈，其实可以这么理解。

c<987--->结果返回false
false--->0(false在js中相当于0)
0<987---->true
   
   
   
   1
2
3

综合分析：在js中连续使用符号对比是极其容易出错的。如果想简单实现连续对比的话，可以采用js提供的逻辑&&,即a<b&&b<c，问题完美解决。

连续赋值问题

既然说到连续比较的问题了，我们不妨说一说连续赋值的问题，当然我们想实现的效果是a=b=c;这就需要我们分情况了：

变量（数值，字符串等不可变量）

d=e=10;
console.log('d='+d+' e='+e);//10 10
var a=20;
d=e=a;
console.log('d='+d+' e='+e);//20 20
   
   
   
   1
2
3
4
5

也就是说，d,e被完美的赋值成想要的值同时还不改变a的值。单纯赋值，不改变引用关系。

对象、数组（引用类型）
js内部为了保证赋值语句的正确，会在一条赋值语句执行前，先把所有要赋值的引用地址取出一个副本，再依次赋值。

var f={bug:1};
    g=h=f;
    console.log('g='+g+' h='+h);
    h.bug='show';
    console.log(g);//show
    console.log(h);//show
    console.log(f);//show,f的值被改变

   
   
   
   1
2
3
4
5
6
7
8

对于数组和对象来说，赋值的操作相当于赋给了指向该地址的指针，同一指针指向的内容发生变化，所有的向关联的均发生变化。根据上例，g,h,f均指向同一地址，h发生变化必引起g,f发生变化，所以，需要注意，如果只想单纯赋值为同一个对象而不改变原始而且要是g,h单独操作没有关联的话，这种方式禁用。可以采用下例：

var b={n:1};
var a={n:1};
a.n=0;
console.log(b);//Object {n: 1}
   
   
   
   1
2
3
4

此时a,b就不会有任何耦合啦~~~，别高兴的太早，再来一例，加深了解：

 var a = {n:1};
 a.x = a = {n:2};//对于a来说引用地址改变,a.x引用地址不变
 a.f=4;
 console.log(a.n);//2
 console.log(a.x); // undefined,注意此时a.x可不等于{n:2}哦~
 console.log(a.f);//4
   
   
   
   1
2
3
4
5
6

1、在执行前，会先将a和a.x中的a的引用地址都取出来，此值他们都指向{n:1}
2、在内存中创建一个新对象{n:2}
3、执行a={n:2}，将a的引用从指向{n:1}改为指向新的{n:2}
4、执行a.x=a，此时a已经指向了新对象，而a.x因为在执行前保留了原引用，所以a.x的a依然指向原先的{n:1}对象，所以给原对象新增一个属性x，内容为{n:2}也就是现在a
5、语句执行结束，原对象由{n:1}变成{n:1,x:{n:2}}，而原对象因为无人再引用他，所以被GC回收，当前a指向新对象{n:2}
6、所以运行后，再执行a.x，自然就是undefined了

这些都是js小细节，需要大家多多注意哦~~~