JS高级之隐式转换、类型检测、表达式和运算符

JavaScript高级

1 隐式转换

1）减、乘、除

我们在对各种非Number类型运用数学运算符(- \ * /)时，会先将非Number类型转换为Number类型。

1 - true // 0， 首先把 true 转换为数字 1， 然后执行 1 - 1
1 - null // 1,  首先把 null 转换为数字 0， 然后执行 1 - 0
1 * undefined //  NaN, undefined 转换为数字是 NaN
2 * ['5'] //  10， ['5']首先会变成 '5', 然后再变成数字 5

2）加法的特殊性

• 当一侧为String类型，被识别为字符串拼接，并会优先将另一侧转换为字符串类型。
• 当一侧为Number类型，另一侧为原始类型，则将原始类型转换为Number类型。
• 当一侧为Number类型，另一侧为引用类型，将引用类型和Number类型转换成字符串后拼接。

以上 3 点，优先级从高到低，即 3+'abc' 会应用规则 1，而 3+true会应用规则2。

123 + '123' // 123123   （规则1）
123 + null  // 123    （规则2）
123 + true // 124    （规则2）
123 + {
    
    }  // 123[object Object]    （规则3）

3）逻辑语句中的类型转换

当我们使用 if while for 语句时，我们期望表达式是一个Boolean，所以一定伴随着隐式类型转换。而这里面又分为两种情况

• 单个变量

  如果只有单个变量，会先将变量转换为Boolean值

  只有 null undefined '' NaN 0 false 这几个是 false，其他的情况都是 true，比如 {} , []。

• 使用 == 比较中的五条规则

规则1：NaN 和其他任何类型比较永远返回 false（包括和他自己）

NaN == NaN // false

规则2：Boolean 和其他任何类型比较，Boolean 首先被转换为 Number 类型。

true == 1  // true 
true == '2'  // false, 先把 true 变成 1，而不是把 '2' 变成 true
true == ['1']  // true, 先把 true 变成 1， ['1']拆箱成 '1', 再参考规则3
true == ['2']  // false, 同上
undefined == false // false ，首先 false 变成 0，然后参考规则4
null == false // false，同上

规则3：String和Number比较，先将String转换为 Number类型。

123 == '123' // true, '123' 会先变成 123
'' == 0 // true, '' 会首先变成 0

规则 4：null == undefined比较结果是true，除此之外，null、undefined和其他任何结果的比较值都为false

null == undefined // true
null == '' // false
null == 0 // false
null == false // false
undefined == '' // false
undefined == 0 // false
undefined == false // false

规则 5：原始类型和引用类型做比较时，引用类型会依照ToPrimitive规则转换为原始类型。

console.log(new Object() == new Object()); // false
console.log({
    
    } == {
    
    }); // false
console.log([1, 2] == [1, 2]); // false

严格等于===：

// 严格等于
console.log(null == undefined); // true
console.log(null === undefined); // false
console.log(null === null); // true
console.log(new Object() === new Object()); // false

在双等（）的时候，null == undefined 返回的是 true；但是在严格等（=）的时候，返回的是 false，先比较类型在比较值

2 类型检测

2.1 typeof适用于基本数据类型的检测

2.2 instanceof 适用于引用数据类型的检测

console.log([1,2,3] instanceof Array); // true
console.log({
    
    } instanceof Object); // true
console.log({
    
    } instanceof Array); // false
console.log( new Date() instanceof Date); // true

2.3 Object.prototype.toString

console.log(Object.prototype.toString.call([1, 2])); // [object Array]
console.log(Object.prototype.toString.call("abc")); // [object String]
console.log(Object.prototype.toString.call(1)); // [object Number]
console.log(Object.prototype.toString.call(null)); // [object Null]
console.log(Object.prototype.toString.call(undefined)); // [object Undefined]
console.log(Object.prototype.toString.call(NaN)); // [object Number]
// 注：call，apply会改变this的指向
var arr = [];
var result = Object.prototype.toString.call(arr);
console.log(result); // [object Array]

var obj2 = {
    
     a: 300, b: 400, getA: function () {
    
     return this.a } };
var result = obj.getA.apply(obj2);
console.log(result); // 300

2.4 hasOwnProperty：判断是否属于自身上的属性（主要涉及到原型链）

var obj3 = {
    
     a: 100, b: 200 };
Object.prototype.z = 3000;
var res = obj3.hasOwnProperty("z");
console.log(res); // false，并非自身上的属性是原型链上的属性

// 可以获取到原型上的属性
for (var key in obj3) {
    
     
	console.log(obj3[key]);
}

// 不能获取到原型链上的属性
var keys = Object.keys(obj3);
	for (var i = 0; i < keys.length; i++) {
    
    
		console.log(obj3[keys[i]]); 
    }

3 表达式

表达式：使用运算符将操作数进行连接，单个的常量或变量也是一个表达式。

1+5
var a = 10;
常量3.14也是表达式。
true, this, undefined 都属于表达式

3.1 对象初始化表达式：

// 自变量的方式创建对象
var obj = {
    
     x: 1, y: 2 }; 
console.log(obj);
// new关键字创建
var obj2 = new Object(); 
obj2.x=1;
obj2.y=2;
console.log(obj2);

3.2 数组初始化表达式：

var arr = [1,2]; // 数组的初始化表达式
console.log(arr);
var arr2 = new Array(1,2); // 创建有2个元素的数组，元素的值分别为1,2
console.log(arr2);

var arr = [10]; // 创建有1个元素的数组，元素的值为10,
console.log(arr);
var arr2 = new Array(10); // 创建有10个元素的数组，元素的值分别为undefined,
console.log(arr2);

var arr3 = [1,,,4]; // 稀疏数组
arr3.forEach(function(item,index){
    
    
	console.log(item,index); // 不会遍历出空属性
});

var arr4 = [1, 2]; // 0,1
arr4[100] = 100;
console.log(arr4.length); // 101
for (var i = 0; i < arr4.length; i++) {
    
    
	console.log(arr4[i]);
}; // 1, 2, undefined(98), 100
arr4.forEach(function (item, index) {
    
    
	console.log(item, index);  // 不会遍历出空属性
}); // 1, 2, 100

var arr5 = [,,,8,];
console.log(arr5.length); // 4
// 我们使用字面量的方式创建数组和对象之后，后面的逗号是允许存在的

3.3 函数表达式

// 1. 利用 function 自定义函数（命名函数）
// 调用函数
fun();

// 创建函数
function fun() {
    
    
console.log("函数");
}

// 2. 函数表达式（匿名函数）
var fun2 = function () {
    
    
	console.log("这又是一个函数!");
}

fun2(); 
// 利用函数表达式创建的函数一定要在声明后使用

立即执行函数

// 写法1：
(function (param) {
    
    
	console.log("立即执行函数", param);
})(10);
// 写法2：
(function (params) {
    
    
	console.log("立即执行函数", params);
}(20));

3.4 属性访问表达式

• 使用 . 操作符
• 使用 []

var obj = {
    
     x: 1, y: 2, }; 
console.log(obj);

console.log(obj.x, obj['y']);

4 运算符

按照操作数的个数，可以分为一元、二元、三元运算符。

三元运算符: 结果为boolean类型的表达式 ? 表达式1 : 表达式2

// 求两个数的最大值
var num1 = 30;
var num2 = 20;
var max = num1;
// if(max < num2){
    
    
//     max = num2;
// }
// 使用三元运算符进行优化
var max = num1 > num2 ? num1 : num2;
console.log(max); // 30

delete运算符：可以用于删除对象中的某些属性

var obj3 = {
    
     x: 100, y: 200 }; 
console.log(obj3.x); // 100
delete obj3.x; 
console.log(obj3);

// configurable: 是否可配置，是否可删除
// writable: 是否可修改
// enumerable: 是否可枚举
// 以上三个的默认值都是true.
var obj4 = new Object();
// 利用defineProperty定义属性。
//defineProperty(obj,prop,desc)
// 第一个参数为需要定义属性的对象
// 第二个参数为需要定义的属性名
// 第三个参数为属性描述符
// 使用definePropery定义的属性不能对其进行修改，删除，以及枚举。如果需要修改可以用一下三个属性
Object.defineProperty(obj4, 'x', {
    
    
	value: 100,
    configurable: false,  
    writable: true,
    enumerable: true, 
});
delete obj4.x;
console.log(obj4); // {x: 100}

in运算符：可以检查一个对象中是否含有指定的属性，有返回true，没有返回false

// 使用in运算符判断 z 是否属于obj4上的属性
console.log('z' in obj4); // false

void运算符：只执行表达式，但没有返回值

 <a href="javascript: void(0)">百度</a>

默认值

// 让c默认是10
function fun3(a, b, c) {
    
    
// 第一种做法： 进行判断
	if (c == undefined) {
    
    
		c = 10;
	}
    return a + b + c;
}
console.log(fun3(1, 2)); // 13

function fun3(a, b, c) {
    
    
// 第二种写法： || 短路或
	c = c || 10;
    return a + b + c;
}
console.log(fun3(1, 2)); // 13