今天完成的事情：上午编写任务6中列表页的页面，完成了任务6在本页跳转页面的实现，调整了布局变化的问题。整个下午都在整理晚上小课堂要讲的内容，更清楚javascript操作符的细节问题。晚上开始编写‍‍article详情页的静态页面。‍

明天计划的事情：上午完成详情页面的静态页面，给新增按钮添加js，实现页面的再次跳转。

遇到的问题：

 上午通过仿照网上的案例，进行调整后，在nginx环境下实现了单页面局部换成其他页面的动态效果，但是所加载的表格跑到了侧边导航栏的下边。通过对css代码的调整display：inline-block，实现了表格同侧边栏在同一行的最后效果。后来又发现加载好的页面中的列表布局被破坏掉了，所以又回头再次调整列表的样式。现在调整正常了。

收获：熟悉了.model()和.route()方法的实现。对于javascript的操作符有了更多的理解。整理一下今天小课堂的内容：

JavaScript中的操作符

1.背景介绍

在进入Javascript阶段学习后，一直对操作符这块部分的知识点没有引起太多注意，今天就和大家分析一下！探索一下这部分的知识点，提高javascript的技能。

2.知识剖析

2.1 操作符

在ECMA-262中定义了一组用于操作数据值的操作符，包括算术操作符、位操作符、关系操作符和相等操作符等。它们能够适用于很多值，例如：字符串、数字值、布尔值，甚至对象（不过，在应用于对象时，相应的操作符通常都会调用对象的valueOf()、toString()方法，以便取得可以操作的值）。

2.2 一元操作符

只能操作一个值的操作符就称为一元操作符。是最简单的操作符。它包括递增和递减操作符，以及一元加和减操作符。

递增和递减操作符直接借鉴自C语言，分为前置型和后置型。

                        var age = 22;

                        ++age;

                        console.log(age);   //23

                        //等同于

                        var age = 22;

                        age = age + 1;

                        //也等同于

                        var age = 22;

                        age++;

前置型和后置型的区别：执行前置递增或者递减操作时，变量的值都是在语句被求值以前改变的。后置型与之相反。

                        var age = 22;

                        console.log(age); //22

                        var another = ++age + 2 ;

                        console.log(age);   //23

                        console.log(another);  //等于变量age的值前置递减后再加2的结果

                        //等同于

                        var age = 22;

                        age = age + 1;

                        //也等同于

                        var age = 22;

                        age++;

                        //另一个对比

                        var num1 = 2;

                        var num2 = 30;

                        var num3 = --num1 + num2;

                        var num4 = num1 + num2;

                       console.log(num3);

                       console.log(num4);

一元加减操作符是写在数值前边的，和数学中定义的正负是一个概念。在这里就不再演示了。

2.3 布尔操作符

在if(){}else{}这样的条件判断句中，我们需要提供一种可供判断的操作符进行条件的辨别。这里先介绍一下布尔操作符，其包括：非（NOT）、与（AND）、或（OR）。

非（NOT）又叹号（！）表示，与（AND）由和号（&&）表示，或（OR）由两个竖线符号（||）表示。

                        console.log(!false);  

                        console.log(!"");    

                        console.log(!"false"); 

                        console.log(!0);

                        console.log(!NaN); 

                        console.log(!false);

                        console.log(!1234); 

                        //以下同于boolean()方法

                        console.log(!!false);  

                        console.log(!!"");    

                        console.log(!!"false"); 

                        console.log(!!0);

                        console.log(!!NaN); 

                        console.log(!!false);

                        console.log(!!1234); 

逻辑与操作符是一个短路的操作符。如果第一个操作数能够决定结果，就不会对第二个操作数求值。第一个操作数返回false时就不会再对第二个操作数进行求值。返回true是会继续对第二个操作数进行求值。

逻辑或操作符也是一个短路的操作符。第一个操作数返回true时就不会再对第二个操作数进行求值。

                        var a = true && false;

                        console.log(a);

                        var b = false || true;

                        console.log(b);

2.4 乘性操作符

这里的乘性操作符包含了乘法、除法和求模。如果参与乘性计算的某个操作数不是数值，后台会先使用number()转型函数将其转换为数值。

乘法使用星号（*）表示。

除法使用斜线号（/）表示。

求模，即余数，由百分号（%）表示。

                        var c = 58 * 22;

                        console.log(c);

                        var d = 58 / 22;

                        console.log(d);

                        var e = 58 % 22;

                        console.log(e);

2.5 加性操作符

加性操作符包括了加法和减法。

                        var h = 5 + 8;

                        console.log(h);

                        var f = "5" + 8;

                        console.log(f);

                        //一个常见的问题

                        var num1 = 5;

                        var num2 = 15;

                        var message = "5加15等于" + num1 + num2;

                        //减法

                        var result1 = 5 -true;

                        var result2 = NaN - 1;

                        var result3 = 5 - "";

                        var result4 = 5 - "1";

                        var result5 = 5 - null;

2.6 关系操作符

关系操作符包括：小于（<）、大于（>）、小于等于（<=）和大于等于（>=）。然后比较完成后返回一个布尔值。

如果两个都是数值，执行数值比较。

如果两个是字符串，比较字符串对应的字符编码值。

如果只有一个是数值，另外一个会转换为数值进行数值比较。

                        console.log("Back" < "number");

                        console.log("Back".toLowerCase() < "number"..toLowerCase());

                        console.log("23" < "3");

                        console.log("b" < 2);

                        console.log( NaN < 3);

                        console.log( NaN >= 3);

2.7 相等操作符

相等操作符包含两组操作符：相等和不相等——先转换再比较，全等和不全等——仅比较但不转换。

相等用（==）表示，不相等用（!=）表示。全等用（===）表示，不全等用（!==）表示。

如果只有一个是布尔值，比较之前要转换为数值。如果一个为字符串，另一个是数值，比较前会转换为数值。

                        console.log(null == undefind);

                        console.log(undefind == 0);

                        console.log(null == 0);

                        console.log("NaN" == NaN);

                        console.log(NaN == 5);

                        console.log(NaN == NaN);

                        console.log( NaN != NaN);

                        console.log( false == 0);

                        console.log(true == 1);

                        console.log(true == 2);

                        console.log("5" == 5);

全等和不全等

                    console.log("55" == 55);

                    console.log("55" === 55);

                    console.log(null === undefind);

2.8 条件操作符

                    var max = (4 > 6) ? 4 : 8;

                    console.log(null === undefind);

2.9 赋值操作符

简单的赋值操作符：等号（=）表示。复杂的有：乘赋值（*=），除赋值（/=），模赋值（%=），加赋值（+=），减赋值（-=），左移赋值（<<=），有符号右移赋值（>>=），无符号右移赋值（>>>=）。

                    var m = 4;

                    m = m + 4;

                    //等同于

                    var num = 10;

                    num += num;

2.10 逗号操作符

使用逗号操作符可以在一条语句中执行多个操作。也可以用来赋值，返回表达式中最后一项。

                    var num1 = 1, num2= 2, num3 = 3;

                    var num = (5,8,4,3);

3.常见问题

问题: 相关的问题在前边已经提到了

4.解决方案

回顾前边的演示。

5.编码实战

参看以上代码

6.扩展思考

问题: 在使用操作符时大家还有哪些心得体会？

7.参考文献

参考一：JavaScript高级程序设计

参考二：JavaScript权威指南

8.更多讨论

讨论点：操作符的局限？

目前发现只能对基本类型进行操作。对象也只能转换成基本类型进行操作。