美文网首页
JS基本语法

JS基本语法

作者: PYFang | 来源:发表于2017-05-26 23:45 被阅读0次

typeof运算符

JavaScript有三种方法,可以确定一个值到底是什么类型。

typeof运算符
instanceof运算符
Object.prototype.toString方法

typeof运算符可以返回一个值的数据类型
(1)原始类型
数值、字符串、布尔值分别返回number、string、boolean。

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"

(2)函数
函数返回function。

function f() {}
typeof f
// "function"

(3)undefined
undefined返回undefined。

typeof undefined
// "undefined"

利用这一点,typeof可以用来检查一个没有声明的变量,而不报错。

v
// ReferenceError: v is not defined

typeof v
// "undefined"

(4)其他
除此以外,其他情况都返回object。

typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"

instanceof

判断对象&数组用instanceof
instanceof前面接一个变量或者常量后面接一个函数

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

运算符

布尔运算符

布尔运算符用于将表达式转为布尔值,一共包含四个运算符。

1,取反运算符:!
2,且运算符:&&
3,或运算符:||
4,三元运算符:?:

取反运算符(!)
1, 取反运算符形式上是一个感叹号,用于将布尔值变为相反值,即true变成false,false变成true。
2, 对于非布尔值的数据,取反运算符会自动将其转为布尔值。

取反运算符有转换数据类型的作用。

!undefined // true
!null // true
!0 // true
!NaN // true
!"" // true

!54 // false
!'hello' // false
![] // false
!{} // false

上面代码中,不管什么类型的值,经过取反运算后,都变成了布尔值。

如果对一个值连续做两次取反运算,等于将其转为对应的布尔值,与Boolean函数的作用相同。这是一种常用的类型转换的写法。

!!x
// 等同于
Boolean(x)

取反运算符的这种将任意数据自动转为布尔值的功能,对且运算符、或运算符、三元条件运算符都成立。

且运算符(&&)
且运算符的运算规则是:
1,如果第一个运算子的布尔值为true,则返回第二个运算子的值(注意是值,不是布尔值)
2,如果第一个运算子的布尔值为false,则直接返回第一个运算子的值,且不再对第二个运算子求值。

't' && '' // ""
't' && 'f' // "f"
't' && (1 + 2) // 3
'' && 'f' // ""
'' && '' // ""

短路逻辑(shortcut)
if (i) {
  doSomething();
}

// 等价于

i && doSomething();

或运算符(||)
或运算符(||)的运算规则是:
1,如果第一个运算子的布尔值为true,则返回第一个运算子的值,且不再对第二个运算子求值
2,如果第一个运算子的布尔值为false,则返回第二个运算子的值。

't' || '' // "t"
't' || 'f' // "t"
'' || 'f' // "f"
'' || '' // ""

多个连用
false || 0 || '' || 4 || 'foo' || true
// 4

或运算符常用于为一个变量设置默认值。

function saveText(text) {
  text = text || '';
  // ...
}

// 或者写成

saveText(this.text || '')

上面代码表示,如果函数调用时,没有提供参数,则该参数默认设置为空字符串。

三元条件运算符(?:)
三元条件运算符用问号(?)和冒号(:),分隔三个表达式。如果第一个表达式的布尔值为true,则返回第二个表达式的值,否则返回第三个表达式的值。

't' ? 'hello' : 'world' // "hello"
0 ? 'hello' : 'world' // "world"

上面代码的t和0的布尔值分别为true和false,所以分别返回第二个和第三个表达式的值。

三元条件表达式与if...else语句具有同样表达效果,前者可以表达的,后者也能表达。但是两者具有一个重大差别,if...else是语句,没有返回值;三元条件表达式是表达式,具有返回值。所以,在需要返回值的场合,只能使用三元条件表达式,而不能使用if..else。

console.log(true ? 'T' : 'F');

上面代码中,console.log方法的参数必须是一个表达式,这时就只能使用三元条件表达式。如果要用if...else语句,就必须改变整个代码写法了。

算术运算符

JavaScript提供9个算术运算符,用来完成基本的算术运算。

1,加法运算符(Addition):x + y
2,减法运算符(Subtraction): x - y
3,乘法运算符(Multiplication): x * y
4,除法运算符(Division):x / y
5,余数运算符(Remainder):x % y
6,自增运算符(Increment):++x 或者 x++
7,自减运算符(Decrement):--x 或者 x--
8,数值运算符(Convert to number): +x
9,负数值运算符(Negate):-x
减法、乘法、除法运算法比较单纯,就是执行相应的数学运算。

余数运算符
余数运算符(%)返回前一个运算子被后一个运算子除,所得的余数

12 % 5 // 2

需要注意的是,运算结果的正负号由第一个运算子的正负号决定。

-1 % 2 // -1
1 % -2 // 1

为了得到正确的负数的余数值,需要先使用绝对值函数。

自增和自减运算符
自增和自减运算符,是一元运算符,只需要一个运算子。它们的作用是将运算子首先转为数值,然后加上1或者减去1。它们会修改原始变量。

var x = 1;
++x // 2
x // 2

--x // 1
x // 1

上面代码的变量x自增后,返回2,再进行自减,返回1。这两种情况都会使得,原始变量x的值发生改变。
自增和自减运算符有一个需要注意的地方,就是放在变量之后,会先返回变量操作前的值,再进行自增/自减操作;放在变量之前,会先进行自增/自减操作,再返回变量操作后的值。

var x = 1;
var y = 1;

x++ // 1
++y // 2

上面代码中,x是先返回当前值,然后自增,所以得到1;y是先自增,然后返回新的值,所以得到2。

数值运算符,负数值运算符
数值运算符(+)同样使用加号,但是加法运算符是二元运算符(需要两个操作数),它是一元运算符(只需要一个操作数)。

数值运算符的作用在于可以将任何值转为数值(与Number函数的作用相同)。

+true // 1
+[] // 0
+{} // NaN

上面代码表示,非数值类型的值经过数值运算符以后,都变成了数值(最后一行NaN也是数值)。

负数值运算符(-),也同样具有将一个值转为数值的功能,只不过得到的值正负相反。连用两个负数值运算符,等同于数值运算符。

var x = 1;
-x // -1
-(-x) // 1

上面代码最后一行的圆括号不可少,否则会变成递减运算符。

数值运算符号和负数值运算符,都会返回一个新的值,而不会改变原始变量的值。

赋值运算符

赋值运算符(Assignment Operators)用于给变量赋值。

最常见的赋值运算符,当然就是等号(=),表达式x = y表示将y的值赋给x。

除此之外,JavaScript还提供其他11个复合的赋值运算符。

x += y // 等同于 x = x + y
x -= y // 等同于 x = x - y
x *= y // 等同于 x = x * y
 x /= y // 等同于 x = x / y
 x %= y // 等同于 x = x % y
x >>= y // 等同于 x = x >> y
x <<= y // 等同于 x = x << y
x >>>= y // 等同于 x = x >>> y
x &= y // 等同于 x = x & y
x |= y // 等同于 x = x | y
x ^= y // 等同于 x = x ^ y

这些复合的赋值运算符,都是先进行指定运算,然后将得到值返回给左边的变量。

比较运算符
比较运算符用于比较两个值,然后返回一个布尔值,表示是否满足比较条件。

2 > 1 // true

上面代码比较2是否大于1,返回true。

JavaScript一共提供了8个比较运算符。

== 相等
=== 严格相等
!= 不相等
!== 严格不相等
< 小于
<= 小于或等于
大于
= 大于或等于

禁用 == 和 !=
JS里面只有比较运算符为反回boolean

两个等于号永远不准用(面试时就直接说我觉得两个等于号太复杂了不会)
===(三个等于号)
不是基本类型就不相等
只要是基本类型看值是不是相等
NaN不等于NaN

位运算符

位运算符用于直接对二进制位进行计算,一共有7个。

或运算(or):符号为|,表示若两个二进制位都为0,则结果为0,否则为1。
与运算(and):符号为&,表示若两个二进制位都为1,则结果为1,否则为0。
否运算(not):符号为~,表示对一个二进制位取反。
异或运算(xor):符号为^,表示若两个二进制位不相同,则结果为1,否则为0。
左移运算(left shift):符号为<<,详见下文解释。
右移运算(right shift):符号为>>,详见下文解释。
带符号位的右移运算(zero filled right shift):符号为>>

位运算符只对整数起作用,如果一个运算子不是整数,会自动转为整数后再执行。另外,虽然在JavaScript内部,数值都是以64位浮点数的形式储存,但是做位运算的时候,是以32位带符号的整数进行运算的,并且返回值也是一个32位带符号的整数。

i = i | 0;

上面这行代码的意思,就是将i(不管是整数或小数)转为32位整数。

“或运算”与“与运算”
这两种运算比较容易理解,就是逐位比较两个运算子。“或运算”的规则是,两个二进制位之中只要有一个为1,就返回1,否则返回0。“与运算”的规则是,两个二进制位之中只要有一个位为0,就返回0,否则返回1。

0 | 3 // 3
0 & 3 // 0
上面两个表达式,0和3的二进制形式分别是00和11,所以进行“或运算”会得到11(即3),进行“与运算”会得到00(即0)。

位运算只对整数有效,遇到小数时,会将小数部分舍去,只保留整数部分。所以,将一个小数与0进行或运算,等同于对该数去除小数部分,即取整数位。

2.9 | 0 // 2
-2.9 | 0 // -2

需要注意的是,这种取整方法不适用超过32位整数最大值2147483647的数。

2147483649.4 | 0;
// -2147483647

左移右移运算符:将一个数字乘/除以2、4、8

void运算符
void 不管后面跟上什么都会返回undefined

void 0 // undefined
void(0) // undefined

逗号运算符
逗号运算符用于对两个表达式求值,并返回后一个表达式的值。

'a', 'b' // "b"

var x = 0;
var y = (x++, 10);
x // 1
y // 10

运算符优先级
1,记不住9
2,括号优先级最高,逗号运算符优先级最低,赋值倒数第二
3,结合律:w = x = y = z;

字符串转义

\0 null(\u0000)
\b 后退键(\u0008)
\f 换页符(\u000C)
\n 换行符(\u000A)
\r 回车键(\u000D)
\t 制表符(\u0009)
\v 垂直制表符(\u000B)
' 单引号(\u0027)
" 双引号(\u0022)
\ 反斜杠(\u005C)
\uFFFF 对应 FFFF 的字符

Windows \r\n
Linux mac \n

相关文章

  • JS基本操作

    js编写位置 js基本语法 字面量和变量

  • 10

    js编写位置 !DOCTYPE html> js编写位置 js基本语法 !DOCTYPE html> ...

  • JS补充3

    JS的基本语法 JS语句基本规则 语句后面要用分号结束,特例:function,for, if后面...

  • JS基础和WebAPIs的关联性

    学习ECMAscript标准规定的基本语法掌握JS基础语法只学习JS基础做不了网页交互效果学习JS基础语法是为了后...

  • js基本语法

    1、分类ECMAScript js基本语法与标准DOM Document Object Mode...

  • JS基本语法

    1、分类ECMAScript js基本语法与标准DOM Document Object Model文档对象模型BO...

  • JS基本语法

    编写位置: 可以将js代码编写到外部js文件中,然后通过script标签引入 写到外部文件中可以在不同的页面中同时...

  • 「JS」基本语法

    变量标示符 关键字与保留字 字符敏感 严格模式 注释 变量标示符 变量的命名 关键字与保留字 JavaScript...

  • js基本语法

    之前我们说到一个网页主要由三部分组成: 结构、表现还有行为。 而这三个部分主要体现为三种语言,之前我们学习了: 结...

  • js基本语法

    运算符: JS中我们定义了一套对数据进行运算的运算符。 这其中包括:算数运算符,位运算符,关系运算符。 算术运算符...

网友评论

      本文标题:JS基本语法

      本文链接:https://www.haomeiwen.com/subject/lexffxtx.html