JavaScript Day02 操作符及类型转换与流程控制语句 1

简介: JavaScript Day02 操作符及类型转换与流程控制语句 1

1.操作符

1.1.算数运算符

运算符 描述 例子 结果
+ 加法 var num = 1 + 2; 3
- 减法 var num = 4 - 3; 1
* 乘法 var num = 4 * 3; 12
/ 除法 var num = 6 / 3; 2
% 取余 var num = 7 % 3; 1

1.1.1 -正常的数据运算

var num1 = 8;
var num2 = 4;
console.log(num1 + num2); //12
console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0

1.1.2 -进行数据运算时,除’+'外,其他运算符可以自动将字符串数字隐形转成数字

var num1 = '8';
var num2 = '4';
console.log(num1 - num2); //4
console.log(num1 / num2); //2
console.log(num1 * num2); //32
console.log(num1 % num2); //0

1.2.一元运算符

1.2.1 -JavaScript中有8种常用的一元运算符

运算符 描述
+ 将操作数转换成数字,字符串的拼接
- 将操作数转换成数字,同时变为负数
! 逻辑取反运算符
++ 递增
递减
delete 删除数组或对象中特定索引的值
typeof 操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回’function’,其他都只会返回’object’
void void 运算符对任何值返回 undefined。

1.2.2 + (正号)

1.'+'的第一种用法:进行数据相加
var num1 = 3;
var num2 = 5;
var sum = num1 + num2; //8
2.'+'放在数据的前面,就是取正数
var num = 6;
console.log(+num); // 6
3.'+'与字符串运算时,就是字符串连接符
var a = 'hello';
var b = 'world';
console.log(a + b); // helloworld
4.'+'可以将数字字符串或布尔类型等隐式转换成number类型
var a = '123';
var b = true;
console.log(+a, +b); // 123  1

1.2.3 -(负号)

1.正、负号可以对数字进行取正或取负,其他运算符不能转换
var num1 = 6;
var num2 = -6;
console.log(-num1); //-6
console.log(+num1); //6
console.log(-num2); //6
console.log(+num2); //-6
2.正、负号可以将字符串数字隐式转换成数字
var num1 = '20';
var num2 = '-20';
console.log(-num1); //-20
console.log(+num1, typeof +num1); //20 number
console.log(-num2); //20
console.log(+num2, typeof +num2); //-20 number

1.2.4 !(取反)

1.经常被用作条件判断时的取反操作,类型判断等,还可以用’!'将变量转换为Boolean类型
var a;
if (!a) {}
console.log(!null);  //true
console.log(!undefined);  //true
console.log(!''); //true
console.log(!100);  //false
console.log(!'abc');  //false

1.2.5 ++(递增)

通常用于循环语句,动画操作等。

1.++放在前面,并进行赋值:先累加,后赋值
var num = 0;
var a = ++num;
console.log(a); // 1
console.log(num); // 1
//num先自加1,再赋值给a
2.++放在后面,并进行赋值:先赋值,后累加
var num = 0;
var a = num++;
console.log(a); // 0
console.log(num); // 1
//先把num的值赋值给a,num再自加1

1.2.6 --(递减)

通常用于循环语句,动画操作等。使用方法与++类似。

1.2.7 delete

1.删除数组或对象中特定索引的值
var obj = {
  name:'zhangsan',
  age: 17
};
delete obj.name;
console.log(obj); // {age: 17}
var arr = [1,2,3,4,5];
delete arr[2];
console.log(arr); //[ 1, 2, <1 empty item>, 4, 5 ]

1.2.8 typeof

操作数放到typeof的后面,会返回当前操作数的类型,对于数值类型可以准确返回,对于引用类型,Function会返回’function’,其他都只会返回’object’

var obj = {
  name:'zhangsan',
  age: 17
};
var arr = [1,2,3,4,5];
console.log(typeof obj, typeof arr); //object object

1.3 扩展:JavaScript隐式转换

JavaScript中有两类数据类型:原始类型、对象类型:

1.3.1 原始类型(基础类型):

Undefined、Null、S tring、Number、Boolean、Symbol(es6新推出的,暂不考虑)

1.3.2 对象类型

object

  • -既然要隐式转换,就应该有一套转换规则,才能追踪最终转换成了什么

隐式转换中主要涉及到三种转换:

1、将值转为原始值,ToPrimitive()。

2、将值转为数字,ToNumber()。

3、将值转为字符串,ToString()。

  • -通过ToPrimitive将值转换为原始值

js引擎内部的抽象操作ToPrimitive有着这样的签名:

ToPrimitive(input, PreferredType?)


input是要转换的值,PreferredType是可选参数,仅可以是Number或String类型。

他只是一个转换标志,转化后的结果并不一定是这个参数值的类型,但是转换结果一定是一个原始值(或者报错)。


对于Date求原始值比较特殊,PreferredType是String,其他Object对象均为Number。


基本类型的转换

-加减乘除:

1.字符串加数字,数字就会转成字符串。数字加数字或字符串加字符串不需要转换。


在加法的过程中,首先把加号左右两边进行了求原值ToPrimitive()操作,然后如果有两个或多个原始值只要有一个是String类型,就把两个或多个原始值都进行转化字符串toString()操作,进行字符串拼接;否则把两个或多个原始值都进行转化数字toNumber()操作,进行数字相加。

var a = 1 + 2 + '3';
console.log(a, typeof a); // '33' string
var b = 1 + 2 + 3;
console.log(b, typeof b); // 6 number

2.数字减字符串,字符串转成数字。如果字符串不是纯数字就会转成NaN。字符串减数字也一样。两个字符串相减也先转成数字。

// -
10 - '20'    //-10
10 - 'one'   //NaN
10 - '100a'  //NaN

3.乘,除,大于,小于跟减的转换也是一样。

// *
10*'20'      //200
'10'*'20'    //200
// /
20/'10'      //2
'20'/'10'    //2
'20'/'one'  //NaN
  • -有关==的隐式转换

1.undefined等于null

2.字符串和数字比较时,字符串转数字

3.数字和布尔比较时,布尔转数字

4.字符串和布尔比较时,两者转数字

// ==
undefined == null;    //true
'0' == 0;            //true,字符串转数字
0 == false;           //true,布尔转数字
'0' == false;       //true,两者转数字
  • -引用类型的转换
    基本类型间的比较相对简单。引用类型和基本类型的比较就相对复杂一些,先要把引用类型转成基本类型,再按上述的方法比较。

1.3.3 -PreferredType转换策略

  • -如果PreferredType被标记为Number,则会进行下面的操作流程来转换输入的值。

1、如果输入的值已经是一个原始值,则直接返回它

2、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法,

如果valueOf()方法的返回值是一个原始值,则返回这个原始值。

3、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。

4、否则,抛出TypeError异常。

  • -如果PreferredType被标记为String,则会进行下面的操作流程来转换输入的值。

1、如果输入的值已经是一个原始值,则直接返回它

2、否则,调用这个对象的toString()方法,如果toString()方法返回的是一个原始值,则返回这个原始值。

3、否则,如果输入的值是一个对象,则调用该对象的valueOf()方法,

如果valueOf()方法的返回值是一个原始值,则返回这个原始值。

4、否则,抛出TypeError异常。


-注意:

PreferredType的值会按照这样的规则来自动设置:


1、该对象为Date类型,则PreferredType被设置为String

2、否则,PreferredType被设置为Number

1.3.4 -案例

[] + [] // ""

进行ToPrimitive,两个都是Array对象,不是Date对象,所以以Number为转换标准,所以先调用valueOf(),结果还是[ ],不是原始值,所以继续调用toString(),结果是“”(空字符串)原始值,将“”返回。第二个[ ]过程是相同的,返回“”。加号两边结果都是String类型,所以进行字符串拼接,结果是“”。

[] + {} // "[object Object]"

进行ToPrimitive,依然是以Number为转换标准。

[ ]的结果是“”。

{ }先调用valueOf(),结果是{ },不是原始值,所以继续调用toString(),结果是“[object Object]”,是原始值,将“[object Object]”返回。

加号两边结果都是String类型,所以进行字符串拼接,结果是“[object Object]”。

+ [] // 0

+[ ]就成了一元运算。[ ]的原值是””, 将””转化成Number结果是0。

{} + {} // "[object Object][object Object]"

在金丝雀版本的chrome浏览器和node中,结果符合预期。

结果是”object Object”。

在普通版本的chrome浏览器中结果是NaN。

这是为什么呢?原因是在node中会将以“{”开始,“}”结束的语句外面包裹一层( ),就变成了({ } + { }),结果就符合预期。而普通版本的chrome依然会解析成{};+{},结果就变成了NaN

1.4.赋值运算符

运算符 例子 等同于
= x = y 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
= 赋值运算符向变量赋值。
var x = 7;
+= 赋值运算符向变量添加值。
var x = 7;
x += 8;
-= 赋值运算符从变量中减去一个值。
var x = 7;
x -= 8;
*= 赋值运算符相乘变量。
var x = 7;
x *= 8;
/= 赋值运算符对变量相除。
var x = 7;
x /= 8;
%= 赋值运算符把余数赋值给变量。
var x = 7;
x %= 8;
目录
相关文章
|
6天前
|
JavaScript 前端开发 算法
JavaScript 中算术操作符:全面解读、实战应用与最佳实践
【4月更文挑战第5天】本文探讨JavaScript中的算术操作符,包括加、减、乘、除、求余、自增、自减及复合赋值等,强调理解与熟练运用它们对提升编程效率和代码准确性的重要性。文中通过示例介绍了各种操作符的用法,同时提醒注意数据类型转换、浮点数精度、除以零错误以及利用短路求值优化逻辑等问题。通过学习,读者能更好地掌握算术操作符在不同场景的应用,提升编程技能。
26 1
|
6天前
|
JavaScript 前端开发 安全
javascript中的可选链操作符
javascript中的可选链操作符
|
6天前
|
JavaScript 前端开发
JavaScript基础语法(类型转换)
JavaScript基础语法(类型转换)
30 0
|
6天前
|
JavaScript 前端开发 Java
JavaScript基础语法(流程控制语句)
JavaScript基础语法(流程控制语句)
27 0
|
6天前
|
JavaScript 前端开发
JavaScript变量、数据类型、运算符及类型转换
JavaScript变量、数据类型、运算符及类型转换
42 0
|
4天前
|
JavaScript 前端开发
探索JavaScript中的New操作符:原理与使用
探索JavaScript中的New操作符:原理与使用
|
6天前
|
JavaScript 前端开发 编译器
彻底理解JavaScript中的类型转换(上)
彻底理解JavaScript中的类型转换
|
6天前
|
JavaScript 前端开发 Python
javascript中的强制类型转换和自动类型转换
javascript中的强制类型转换和自动类型转换
|
6天前
egg.js 24.12sequelize模型-where操作符
egg.js 24.12sequelize模型-where操作符
29 1
egg.js 24.12sequelize模型-where操作符
|
6天前
|
JavaScript 前端开发
javascript中的类型转换
javascript中的类型转换