Javascript(2)操作符和隐式转换

vlesil

已于 2022-08-26 16:04:45 修改

阅读量124

点赞数

文章标签： javascript 前端开发语言

于 2022-08-26 16:04:00 首次发布

本文链接：https://blog.csdn.net/vlesil/article/details/126412693

版权

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

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

注意：

有关==的隐式转换

1.算数运算符

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

进行数据运算时，除'+'外，其他运算符可以自动将字符串数字隐式转换成数字

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

2.一元运算符

JavaScript中有8种常用的一元运算符: + - ！ ++ -- delete typeof void

+(正号)

1.数据相加

var a = 1;
var b = 2;
console.log(a + b); //3

2.放在数据前面，相当于取正数

var a = '6';
var b = -6;
var c = 6;
console.log(+a, +b, +c) //6 -6 6

3.与字符串运算时就是字符串连接符

console.log('hello' + 'world'); //helloworld
console.log(3 + 2 + '6' + 1 + 3); //5613

4.可以将字符串类型或者boolean类型转化成Number类型

console.log(+false, +'5'); // 0 5

-(负号)

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

!(取反)

经常被用作条件判断时的取反操作，类型判断等，还可以用'!'将变量转换为Boolean类型

// ! 取反
// 判断对象有没有值 null
// 空字符串 str == ''
var a;
if (!a) { //a为空判断为真
  console.log(123);
}else{
  console.log(456);
}
//输出123

++(递增)

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

++放在前面，并进行赋值：先累加，后赋值

var num = 0;
var a = ++num;
console.log(a); // 1
console.log(num); // 1
//num先自加1，再赋值给a

++放在后面，并进行赋值：先赋值，后累加

var num = 0;
var a = num++;
console.log(a); // 0
console.log(num); // 1
//先把num的值赋值给a，num再自加1

--(递减)

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

delete

删除数组或对象中特定索引的值

// 删除对象或数组中的数据
var obj = {
  name:'zhangsan',
  age:18
}
// 删除掉对象中对相应的属性
delete obj.name;
console.log(obj); // {age:18}

var arr = [1, 2, 3, 4];
delete arr[0];
console.log(arr); //[ <1 empty item>, 2, 3, 4 ]

typeof

数据放到typeof的后面，会返回当前数据的类型，对于基本数据类型可以准确返回，对于引用数据类型，Function会返回'function'，其他都只会返回'object'

void

丢弃表达式的返回值，而返回undefined

// void 会将返回值统一的设置为undefined
function test() {
  return 123
}
console.log(void test()); //undefined

3.基本数据类型和引用数据类型的隐式转换

3.1什么是隐式转换

即编译时有些我们看不到的类型转换，就是隐式转换

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

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

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

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

基本类型的转换

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

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。字符串减数字也一样。两个字符串相减也先转成数字。

console.log(10 - '20')    //-10
console.log(10 - 'one')   //NaN
console.log(10 - '100a')  //NaN

3.乘，除，大于，小于跟减的转换也是一样。大于，小于不会返回NaN会返回false

// *
console.log(10*'20')  //200
console.log('10'*'20')  //200
console.log('10'*'one') //NaN
// /
console.log(20/'10')  //2
console.log('20'/'10')  //2
console.log('20'/'one') //NaN

引用类型的转换

引用类型的转换先要把引用类型转成基本类型，再按基本类型的方法比较。

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

// 引用数据类型的隐式转换
console.log([] + []);
// 1.确定[] PreferredType 为number
// 2.确定[] 不是一个原始值
// 3.调用valueOf方法
// console.log([].valueOf(), typeof [].valueOf()); //[] object
// 4.调用toString()方法
// console.log([].valueOf().toString(), typeof [].valueOf().toString()); // string
// 5.最终 [] 隐式转换 => '' 空的字符串

案例2

// 转换一个{}
// console.log({}.valueOf().toString(), typeof {}.valueOf().toString()); //[object Object] string
console.log([] + {}); // [] 转换成''
// console.log('' + '[object Object]');

案例3

js解释器会将开头的 { } 看作一个代码块，而不是一个js对象；原来{ } + [ ]被解析成了{ };+[ ]，前面是一个空代码块被略过，剩下+[ ]就成了一元运算。[ ]的原值是””，将””转化成Number结果是0。

// {} + []
console.log({} + [], typeof ({} + [])); // 0 Number

案例4

在金丝雀版本的chrome浏览器和node中，结果符合预期。结果是”object Object”。

在普通版本的chrome浏览器中结果是NaN。这是为什么呢？

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

// {} + {}
console.log({} + {}, typeof ({} + {})); //[object Object][object Object] string

有关==的隐式转换

1.undefined等于null

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

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

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

false转换成0 true转换成1

console.log(undefined == null);//true
console.log('0' == 0);//true,字符串转数字 字符串比数字
console.log(0 == false);//true,布尔转数字 布尔比数字
console.log('0' == false);//true,两者转数字 字符串比布尔