js权威指南学习笔记（二）表达式与运算符

1、数组初始化表达式

数组直接量中的列表逗号之间的元素可以省略，这时省略的空位会填充undefined。如：

 

 

 

2

2

 

 

 

 

 

1

var arr = [1,,,,,6]; 

2

console.log(arr[2]); //打印数组中索引为2的值->undefined

 

 

数组直接量的元素列表结尾处可以留下单个逗号，这时并不会创建一个新的值为undefined的元素。

2、运算符

（1）、javascript总是严格按照从左至右的顺序来计算表达式的。

如：

 

 

 

4

4

 

 

 

 

 

1

w = x + y * z; 

2

/*

3

首先计算表达式w,然后计算x,y,z,然后y的值与z的值相乘，再加上x的值，最后赋值给w所指代的变量或属性。

4

*/

 

 

（2）、所有数字都是浮点型，除法运算的结果也是浮点型。如5/2结果是2.5。

（3）、加号的转换规则优先考虑字符串的连接。（操作数中含有字符串时），但是

“++”或“--”运算符从不进行字符串的连接操作。

in运算符

用于检测某个属性名是否属于某个对象。

当属性名所对应的值初始化为undefined时，检测结果也为true；

当属性名被delete后，再次检测，结果为false。

 

 

 

7

7

 

 

 

 

 

1

var point = {    //定义一个对象

2

x: 1,

3

y: 1

4

};

5

console.log("x" in point); //true

6

console.log("z" in point); //false

7

console.log("toString" in point); //true:对象继承了toString()方法

 

 

instanceof运算符

用于检测某个对象是否是某个类的实例。所有的对象都是Object的实例。

 

 

 

4

4

 

 

 

 

 

1

var d = new Date(); //通过Date()构造函数实例化一个新的对象

2

console.log(d instanceof Date);    //true

3

console.log(d instanceof Object);     //true

4

console.log(d instanceof Number);    //false

 

 

3、逻辑表达式

(1)、逻辑与(&&)

原理：运算符首先计算左操作数的值，即“&&”左侧的表达式。如果计算结果是假值，那么整个表达式的结果也一定是假值，因此“&&”会返回左操作数的值，而并不会对右操作数进行计算，将左操作数的值作为整个表达式计算的结果。

反过来，左操作数的值为真值时，会计算右操作数的值，不管是真是假，都会返回右操作的值作为整个表达式计算的结果。

 

 

 

6

6

 

 

 

 

 

1

var o = {

2

x: 3

3

};

4

var p = null;

5

console.log(o && o.x);     //o和o.x都为真，返回o.x的值3

6

console.log(p && p.x);    //p为假值，返回p的值null，不去计算p.x

 

 

(2)、逻辑或（||）

原理：运算符首先计算左操作数的值，即“||”左侧的表达式。如果计算结果是真值，那么整个表达式的结果也一定是真值，因此“||”会返回左操作数的值，而并不会对右操作数进行计算，将左操作数的值作为整个表达式计算的结果。

反过来，左操作数的值为假值时，会计算右操作数的值，不管是真是假，都会返回右操作的值作为整个表达式计算的结果。

最常用的方式是从一组备选表达式中选出第一个真值表达式：

 

 

 

3

3

 

 

 

 

 

1

//如果max_width已经定义，直接使用它；否则在preferences对象中查找max_width

2

//如果没有定义它，则使用一个写死的常量

3

var max = max_width || preference.max_width || 500;

 

 

(3)、逻辑非（!）

对操作数的布尔值进行求反。

如：x是真值，则!x返回false。

 

 

 

3

3

 

 

 

 

 

1

// 对于p和q取任意值，这两个等式都永远成立

2

!(p && q) == !p || !q

3

!(p || q) == !p && !q

 

 

4、赋值表达式

在大多数情况下，表达式

a op= b (op代表一个运算符)

这个表达式和 a = a op b 是等价的。

特例：下面两个表达式不等价

 

 

 

15

15

 

 

 

 

 

1

var data = [1, 2, 3, 4];

2

3

for (var i = 0; i < 4; i++) {

4

    //根据表达式从左到右的运算顺序，++运算法则，先计算data[i]的值为1，i再加1

5

    //1*2 = 2,求得第一个值，i++,i为3，再次执行循环

6

    console.log(data[i++] *= 2); //2,6

7

8

}

9

10

for (var j = 0; j < data.length; j++) {

11

    //同上，先计算=左边的值后，j+1变为1，然后计算右边的表达式值，

12

    //此时j为1，data[j]=2,求得第一个值为4，然后j+1变为2，

13

    //j++,j为3，再次执行循环

14

    console.log(data[j++] = data[j++] * 2); //4 NaN

15

}

 

 

5、eval()

只有一个参数。如果传入的参数不是字符串，它直接返回这个参数。

作用：解析并运行由javascript源码组成的字符串。

如：

 

 

 

2

2

 

 

 

 

 

1

eval("3+2") // 5

2

eval("var y = 3");     //声明一个新的局部变量y

 

 

它使用了调用它的变量作用域环境。直接调用eval()时，它总是在调用它的上下文作用域内执行。其他的间接调用则使用全局对象作为其上下文作用域，并且无法读、写、定义局部变量和函数。如：

 

 

 

18

18

 

 

 

 

 

1

var geval = eval;    //使用别名调用eval将是全局eval

2

var x = "global",

3

    y = "global";

4

5

function f() {     //函数内执行的是局部的eval

6

    var x = "local";

7

    eval("x += 'change';");     // 直接eval更改局部变量的值

8

    return x;     //返回更改后的局部变量

9

}

10

11

function g() {     //函数内执行的是全局的eval

12

    var y = "local";

13

    geval("y += 'changed';"); //间接调用更改了全局变量的值

14

    return y;    //返回未更改的局部变量

15

}

16

17

console.log(f(), x);     // localchange global

18

console.log(g(), y);    // local globalchanged

 

 

在严格模式下，即es5 。代码段以 “ use strict ”开始，eval执行的代码段可以查询或更改局部变量，但不能在局部作用域中定义新的变量或函数。同时，eval被列为保留字，不能用一个别名覆盖eval()函数，并且变量名、函数名、函数参数或异常捕获的参数都不能取名为“eval”。

6、delete运算符

delete是一元操作符，它用来删除对象属性或数组元素。

如：

 

 

 

x

8

 

 

 

 

 

1

var o = { x : 1, y : 2};     //定义一个对象

2

delete o.x;                    //删除一个属性

3

"x" in o                    //false 属性不存在

4

5

var a = [1,2,3];            //定义一个数组

6

delete a[2];                //删除索引为2 的数组元素

7

2 in a;                    //false 索引为2的数组元素不存在

8

a.length                   // 3， 数组长度并没有改变，因为其它值的索引并没有改变

 

 

但是，一些内置核心和客户端属性是不能被删除的，通过var语句声明的变量也不能删除，function语句定义的函数和函数参数也不能删除。

在es5严格模式下，如果删除的操作数非法，将抛出一个语法错误的异常，同时删除不可配置属性时会抛出类型错误异常。在非严格模式下，只是简单的返回false，并不会报错。

 

 

 

9

 

 

 

 

 

1

var o = { x:1, y:2};  

2

delete o.x;    //true  

3

typeof o.x;    //undefined 属性不存在  

4

delete o.x;     //true 不存在属性  

5

delete o;    //false var声明不能删除  

6

7

delete 1;    //true 不是左值（属性）  

8

this.x = 1;    //全局定义一个属性  

9

delete x;     //true(非严格模式下) 严格模式下使用 delete this.x

 

 

 

span::selection, .CodeMirror-line > span > span::selection { background: #d7d4f0; }.CodeMirror-line::-moz-selection, .CodeMirror-line > span::-moz-selection, .CodeMirror-line > span > span::-moz-selection { background: #d7d4f0; }.cm-searching {background: #ffa; background: rgba(255, 255, 0, .4);}.cm-force-border { padding-right: .1px; }@media print { .CodeMirror div.CodeMirror-cursors {visibility: hidden;}}.cm-tab-wrap-hack:after { content: ""; }span.CodeMirror-selectedtext { background: none; }.CodeMirror-activeline-background, .CodeMirror-selected {transition: visibility 0ms 100ms;}.CodeMirror-blur .CodeMirror-activeline-background, .CodeMirror-blur .CodeMirror-selected {visibility:hidden;}.CodeMirror-blur .CodeMirror-matchingbracket {color:inherit !important;outline:none !important;text-decoration:none !important;}.CodeMirror-sizer {min-height:auto !important;}
-->
span::selection, .cm-s-monokai .CodeMirror-line > span > span::selection { background: rgba(73, 72, 62, .99); }.cm-s-monokai .CodeMirror-line::-moz-selection, .cm-s-monokai .CodeMirror-line > span::-moz-selection, .cm-s-monokai .CodeMirror-line > span > span::-moz-selection { background: rgba(73, 72, 62, .99); }.cm-s-monokai .CodeMirror-gutters { background: #272822; border-right: 0px; }.cm-s-monokai .CodeMirror-guttermarker { color: white; }.cm-s-monokai .CodeMirror-guttermarker-subtle { color: #d0d0d0; }.cm-s-monokai .CodeMirror-linenumber { color: #d0d0d0; }.cm-s-monokai .CodeMirror-cursor { border-left: 1px solid #f8f8f0; }.cm-s-monokai span.cm-comment { color: #75715e; }.cm-s-monokai span.cm-atom { color: #ae81ff; }.cm-s-monokai span.cm-number { color: #ae81ff; }.cm-s-monokai span.cm-property, .cm-s-monokai span.cm-attribute { color: #a6e22e; }.cm-s-monokai span.cm-keyword { color: #f92672; }.cm-s-monokai span.cm-builtin { color: #66d9ef; }.cm-s-monokai span.cm-string { color: #e6db74; }.cm-s-monokai span.cm-variable { color: #f8f8f2; }.cm-s-monokai span.cm-variable-2 { color: #9effff; }.cm-s-monokai span.cm-variable-3 { color: #66d9ef; }.cm-s-monokai span.cm-def { color: #fd971f; }.cm-s-monokai span.cm-bracket { color: #f8f8f2; }.cm-s-monokai span.cm-tag { color: #f92672; }.cm-s-monokai span.cm-header { color: #ae81ff; }.cm-s-monokai span.cm-link { color: #ae81ff; }.cm-s-monokai span.cm-error { background: #f92672; color: #f8f8f0; }.cm-s-monokai .CodeMirror-activeline-background { background: #373831; }.cm-s-monokai .CodeMirror-matchingbracket {text-decoration: underline; color: white !important;}
-->
li {list-style-type:decimal;}.wiz-editor-body ol.wiz-list-level2 > li {list-style-type:lower-latin;}.wiz-editor-body ol.wiz-list-level3 > li {list-style-type:lower-roman;}.wiz-editor-body blockquote {padding: 0 12px;}.wiz-editor-body blockquote > :first-child {margin-top:0;}.wiz-editor-body blockquote > :last-child {margin-bottom:0;}.wiz-editor-body img {border:0;max-width:100%;height:auto !important;margin:2px 0;}.wiz-editor-body table {border-collapse:collapse;border:1px solid #bbbbbb;}.wiz-editor-body td,.wiz-editor-body th {padding:4px 8px;border-collapse:collapse;border:1px solid #bbbbbb;min-height:28px;word-break:break-word;box-sizing: border-box;}.wiz-hide {display:none !important;}
-->