JavaScript教程(二)：运算符

JavaScript 共提供10个算术运算符，用来完成基本的算术运算。

• 加法运算符：x + y
• 减法运算符： x - y
• 乘法运算符： x * y
• 除法运算符：x / y
• 指数运算符：x ** y
• 余数运算符：x % y
• 自增运算符：++x 或者 x++
• 自减运算符：--x 或者 x--
• 数值运算符： +x
• 负数值运算符：-x

加法运算符是在运行时决定，到底是执行相加，还是执行连接。也就是说，运算子的不同，导致了不同的语法行为，这种现象称为“重载”。
eg:
1 + 2     // 3
1 + '2'   // 12

加法运算符会发生重载，减，乘，除都不会发生重载，因为他们会先转为数值，在进行计算。

　　

　

布尔运算符：

且(&&)运算符：

它的运算规则是：如果第一个运算子的布尔值为true，则返回第二个运算子的值（注意是值，不是布尔值）；
如果第一个运算子的布尔值为false，则直接返回第一个运算子的值，且不再对第二个运算子求值。

或(||)运算符：

它的运算规则是：如果第一个运算子的布尔值为true，则返回第一个运算子的值，且不再对第二个运算子求值；
如果第一个运算子的布尔值为false，则返回第二个运算子的值。

短路：

这种只通过第一个表达式的值，控制是否运行第二个表达式的机制，就称为“短路”（short-cut）。

异或运算（^）在两个二进制位不同时返回1，相同时返回0。

“异或运算”有一个特殊运用，连续对两个数a和b进行三次异或运算，a^=b; b^=a; a^=b;可以互换它们的值。这意味着，使用“异或运算”可以在不引入临时变量的前提下，互换两个变量的值。

var a = 10;
var b = 99;

a ^= b, b ^= a, a ^= b;

a // 99
b // 10

异或运算也可以用来取整。 

12.9 ^ 0 // 12

void运算符

void运算符的作用是执行一个表达式，然后不返回任何值，或者说返回undefined。

var x = 3;
void (x = 5) //undefined -- 运行x=5但是没有返回任何值，x的值经过执行已经变为5
x // 5

下面是一个更实际的例子，用户点击链接提交表单，但是不产生页面跳转。

<a href="javascript: void(document.form.submit())">
  提交
</a>

　　

逗号运算符

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

console

console.log() 支持占位符，不同类型的数据支持不同的占位符。
%s 字符串
%d 整数
%i 整数
%f 浮点数
%o 对象的链接
%c CSS 格式字符串　　

占位符：

var number = 11 * 9;
var color = 'red';

console.log('%d %s 占位符', number, color);    // 99 red 占位符

使用%c占位符时，对应的参数必须是 CSS 代码，用来对输出内容进行 CSS 渲染

console.log(
  '%cThis text is styled!',
  'color: red; background: yellow; font-size: 24px;'
)

发现一个很好玩的，console.table() 出来的就是table列表

var languages = [
  { name: "JavaScript", fileExtension: ".js" },
  { name: "TypeScript", fileExtension: ".ts" },
  { name: "CoffeeScript", fileExtension: ".coffee" }
];

console.table(languages);

console.count()：该方法可以接受一个字符串作为参数，作为标签，对执行次数进行分类。

function greet(user) {
  console.count(user);
  return "hi " + user;
}

greet('bob')
// bob: 1
// "hi bob"

greet('alice')
// alice: 1
// "hi alice"

greet('bob')
// bob: 2
// "hi bob"

console.dir()：方法用来对一个对象进行检查

该方法对于输出 DOM 对象非常有用，因为会显示 DOM 对象的所有属性。
console.dir(document.body)

console.dirxml()：方法主要用于以目录树的形式，显示 DOM 节点。

console.dirxml(document.body)   // 可以展示出所有的代码

console.assert()：方法主要用于程序运行过程中，进行条件判断，如果不满足条件，就显示一个错误，但不会中断程序执行。

console.assert(false, '判断条件不成立');
// Assertion failed: 判断条件不成立

console.assert(true, '判断条件不成立');
没有打印出来任何东西

还有一个很有意思的打印：计算时间

console.time()，console.timeEnd()

console.time('Array initialize');

var array= new Array(1000000);
for (var i = array.length - 1; i >= 0; i--) {
  array[i] = new Object();
};

console.timeEnd('Array initialize');
// Array initialize: 1914.481ms

time方法表示计时开始，timeEnd方法表示计时结束。它们的参数是计时器的名称。调用timeEnd方法之后，控制台会显示“计时器名称: 所耗费的时间”。

console.time() 和 console.timeEnd() 是一对出现，否则会报错。