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() 是一对出现,否则会报错。

原文地址:https://www.cnblogs.com/liumcb/p/14476031.html