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