数据类型
1、概念
JavaScript 语言的每一个值,都属于某一种数据类型。JavaScript 的数据类型,共有八种。
2、检测数据类型
JavaScript 有三种方法,可以确定一个值到底是什么类型。
- typeof
- instanceof
- Object.prototype.toString
2.1 typeof
typeof运算符的返回类型为字符串,值包括如下几种:
- ‘string’ —— 字符串类型的变量或值
- ‘number’ —— 数字类型的变量或值
- ‘boolean’ —— 布尔类型的变量或值
- ‘object’ —— 对象类型的变量或值,或者null
- ‘function’ —— 函数类型的变量或值
- ‘undefined’ —— 未定义的变量或值
实例:
typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean"
function fun() {}
typeof fun // "function"
typeof undefined // "undefined"
typeof window // "object"
typeof {} // "object"
typeof [] // "object"
typeof null // "object"
null的类型是object,这是由于历史原因造成的。1995年的 JavaScript 语言第一版,只设计了五种数据类型(对象、整数、浮点数、字符串和布尔值),没考虑null,只把它当作object的一种特殊值。后来null独立出来,作为一种单独的数据类型,为了兼容以前的代码,typeof null返回object就没法改变了。
typeof 对于一些创建的对象(Date、function、Array),都会返回’object’,不能准确判断出数据类型,所以要想区别对象、数组、函数单纯使用 typeof 是不行的。
2.2 instanceof
2.3 Object.prototype.toString
JavaScript 可以通过 toString() 来获取每个对象的类型。为了每个对象都能通过 Object.prototype.toString() 来检测,需要以 Function.prototype.call() 或者 Function.prototype.apply() 的形式来调用,传递要检查的对象作为第一个参数,称为 thisArg。
在介绍Object.prototype.toString方法之前,我们先把toString()方法和Object.prototype.toString.call()方法进行对比。
toString()方法和Object.prototype.toString.call()方法对比:
var arr=[1,2];
//直接对一个数组调用toString() ==> 数组转字符串
arr.toString(); // "1,2"
//通过call指定arr数组为Object.prototype对象中的toString方法的上下文
Object.prototype.toString.call(arr); //"[object Array]"
Object.prototype中的toString方法是确实被继承下来了,但很多东西不总是一成不变的,作为儿子的数组重写了toString方法,所以直接调用数组对象上面的toString方法调用到的实际是重写后的方法,并不是Object.prototype中的toString方法。
为什么toString会有不同的作用呢?
其实,这里面就涉及到js原型及原型链的相关知识:
var arr=[1,2,3];
Object.prototype.toString.call(arr); //[object Array]
Array.prototype.toString.call(arr); //"1,2,3"
根据原型链概念,当我们使用arr.toString()时,不能进行复杂数据类型的判断,因为它调用的是Array.prototype.toString,虽然Array也继承自Object,但js在Array.prototype上重写了toString,而我们通过toString.call(arr)实际上是通过原型链调用了Object.prototype.toString。
看到这里已经明了,只有Object.prototype上的toString才能用来进行复杂数据类型的判断。
console.log(Object.prototype.toString.call(123)); //[object Number]
console.log(Object.prototype.toString.call('123')); //[object String]
console.log(Object.prototype.toString.call(undefined)); //[object Undefined]
console.log(Object.prototype.toString.call(true)); //[object Boolean]
console.log(Object.prototype.toString.call({})); //[object Object]
console.log(Object.prototype.toString.call([])); //[object Array]
console.log(Object.prototype.toString.call(function(){})); //[object Function]
console.log(Object.prototype.toString.call(null)); //[[object Null]]
3、详解
3.1 null 和 undefined
在if语句中,它们都会被自动转为false,相等运算符(==)甚至直接报告两者相等。
if (!undefined) {
console.log('undefined is false');
}
// undefined is false
if (!null) {
console.log('null is false');
}
// null is false
undefined == null
// true
1995年 JavaScript 诞生时,最初像 Java 一样,只设置了null表示"无"。根据 C 语言的传统,null可以自动转为0。
Number(null) // 0
5 + null // 5
但是,JavaScript 的设计者 Brendan Eich,觉得这样做还不够。首先,第一版的 JavaScript 里面,null就像在 Java 里一样,被当成一个对象,Brendan Eich 觉得表示“无”的值最好不是对象。其次,那时的 JavaScript 不包括错误处理机制,Brendan Eich 觉得,如果null自动转为0,很不容易发现错误。
因此,他又设计了一个undefined。区别是这样的:null是一个表示“空”的对象,转为数值时为0;undefined是一个表示"此处无定义"的原始值,转为数值时为NaN。
Number(undefined) // NaN
5 + undefined // NaN
因此:
null表示空值,即该处的值现在为空。调用函数时,某个参数未设置任何值,这时就可以传入null,表示该参数为空。比如,某个函数接受引擎抛出的错误作为参数,如果运行过程中未出错,那么这个参数就会传入null,表示未发生错误。
undefined表示“未定义”,下面是返回undefined的典型场景:
1、变量声明了,但没有赋值
var i;
i // undefined
2、调用函数时,应该提供的参数没有提供,该参数等于 undefined
function f(x) {
return x;
}
f() // undefined
3、对象没有赋值的属性
var obj = new Object();
obj.p // undefined
4、函数没有返回值时,默认返回 undefined
function f() {}
f() // undefined
3.2 boolean 布尔值
布尔值有两个状态,分别为“真”和“假”。“真”用关键字true表示,“假”用关键字false表示。
下列运算符会返回布尔值:
- 前置逻辑运算符: ! (Not) 非
- 相等运算符:= = =,!= =,==,!=
- 比较运算符:>,>=,<,<=
自动转换为false的值有:
- undefined
- null
- false
- 数字0
- NaN
- 空字符串 ‘’ 或 “”
注意,空数组([])和空对象({})对应的布尔值,都是true。
if ([]) {
console.log('true');
}
// true
if ({}) {
console.log('true');
}
// true
3.3 number 数值
3.3.1 整数和浮点数
JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,1与1.0是相同的,是同一个数。
1 === 1.0 // true
由于浮点数不是精确的值,所以涉及小数的比较和运算将存在误差。
0.1 + 0.2 === 0.3
// false
0.3 / 0.1
// 2.9999999999999996
(0.3 - 0.2) === (0.2 - 0.1)
// false
3.3.2 数值精度
根据国际标准 IEEE 754,JavaScript 浮点数的64个二进制位,从最左边开始,是这样组成的:
- 第1位:符号位,0表示正数,1表示负数
- 第2位到第12位(共11位):指数部分
- 第13位到第64位(共52位):小数部分(即有效数字)
符号位决定了一个数的正负,指数部分决定了数值的大小,小数部分决定了数值的精度。
3.3.3 数值范围
JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。
如果一个数大于等于2的1024次方,那么就会发生“正向溢出”,即 JavaScript 无法表示这么大的数,这时就会返回Infinity。
Math.pow(2, 1024) // Infinity
如果一个数小于等于2的-1075次方(指数部分最小值-1023,再加上小数部分的52位),那么就会发生为“负向溢出”,即 JavaScript 无法表示这么小的数,这时会直接返回0。
Math.pow(2, -1075) // 0
3.3.4 特殊数值
NaN
NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。
5 - 'x' // NaN
上面代码运行时,会自动将字符串x转为数值,但是由于x不是数值,所以最后得到结果为NaN,表示它是“非数字”(NaN)。
0除以0也会得到NaN。
0 / 0 // NaN
需要注意的是,NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number。
typeof NaN // 'number'
运算规则:
1、NaN不等于任何值,包括它本身。
NaN === NaN // false
2、数组的indexOf方法内部使用的是严格相等运算符,所以该方法对NaN不成立。
[NaN].indexOf(NaN) // -1(表示未匹配数值)
3、NaN在布尔运算时被当作false。
Boolean(NaN) // false
4、NaN与任何数(包括它自己)的运算,得到的都是NaN。
NaN + 2 // NaN
NaN - 2 // NaN
NaN * 2 // NaN
NaN / 2 // NaN
Infinity
Infinity表示“无穷”,用来表示两种场景。一种是一个正的数值太大,或一个负的数值太小,无法表示;另一种是非0数值除以0,得到Infinity。
// 场景一
Math.pow(2, 1024) // Infinity
// 场景二
0 / 0 // NaN
1 / 0 // Infinity
Infinity有正负之分,Infinity表示正的无穷,-Infinity表示负的无穷。
Infinity === -Infinity // false
Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。
Infinity > 1000 // true
-Infinity < -1000 // true
Infinity与NaN比较,总是返回false。
Infinity > NaN // false
-Infinity > NaN // false
Infinity < NaN // false
-Infinity < NaN // false
运算规则:
1、0乘以Infinity,返回NaN;0除以Infinity,返回0;Infinity除以0,返回Infinity。
0 * Infinity // NaN
0 / Infinity // 0
Infinity / 0 // Infinity
2、Infinity加上或乘以Infinity,返回的还是Infinity。
Infinity + Infinity // Infinity
Infinity * Infinity // Infinity
3、Infinity减去或除以Infinity,得到NaN。
Infinity - Infinity // NaN
Infinity / Infinity // NaN
4、Infinity与null计算时,null会转成0,等同于与0的计算。
null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity
5、Infinity与undefined计算,返回的都是NaN。
null * Infinity // NaN
null / Infinity // 0
Infinity / null // Infinity
6、Infinity与undefined计算,返回的都是NaN。
undefined + Infinity // NaN
undefined - Infinity // NaN
undefined * Infinity // NaN
undefined / Infinity // NaN
Infinity / undefined // NaN
方法
parseInt()
1、parseInt方法用于将字符串转为整数。
parseInt('123') // 123
2、自动去除字符串头部空格
parseInt(' 12') // 81
3、转换过程是是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。
parseInt('8a') // 8
parseInt('12**') // 12
parseInt('12.34') // 12
parseInt('15e2') // 15
4、如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN。
parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1
parseFloat()
1、parseFloat方法用于将一个字符串转为浮点数。
parseFloat('3.14') // 3.14
2、如果参数不是字符串,或者字符串的第一个字符不能转化为浮点数,则返回NaN。
parseFloat([]) // NaN
parseFloat('FF2') // NaN
parseFloat('') // NaN
isNaN()
1、isNaN方法可以用来判断一个值是否为NaN。
isNaN(NaN) // true
isNaN(123) // false
2、isNaN只对数值有效,如果传入其他值,会被先转成数值。
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) ==> isNaN(NaN) // true
也就是说,isNaN为true的值,有可能不是NaN,而是一个字符串。
3、对于空数组和只有一个数值成员的数组,isNaN返回false。
isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false
3.4 string 字符串
3.4.1 概念
- 用单引号或双引号括起来的字符。
"123" "ABC" 'abc' '790'
- 单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。
'Did she say "Hello"?'
"Did she say 'Hello'?"
- 如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。双引号字符串内部使用双引号,也是如此。
'Did she say \'Hello\'?'
"Did she say \"Hello\"?"
- 字符串默认只能写在一行内,分成多行将会报错。
'a
b
c'
// SyntaxError: Unexpected token ILLEGAL
如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。
'a\
b\
c'
加了反斜杠以后,原来写在一行的字符串,可以分成多行书写。但是,输出的时候还是单行,效果与写在同一行完全一样。
连接(拼接)运算符(+)可以连接多个单行字符串,将长字符串拆成多行书写,输出的时候也是单行。
‘a’
+ 'b'
+ 'c'
3.4.2 字符串与数组
字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。
var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"
// 直接对字符串使用方括号运算符
'hello'[1] // "e"
如果方括号中的数字超过字符串的长度,或者方括号中根本不是数字,则返回undefined。
'abc'[3] // undefined
'abc'[-1] // undefined
'abc'['x'] // undefined
但是,字符串与数组的相似性仅此而已。实际上,无法改变字符串之中的单个字符。
var s = 'hello';
delete s[0];
s // "hello"
s[1] = 'a';
s // "hello"
s[5] = '!';
s // "hello"
3.4.3 length 属性
length属性返回字符串的长度。
var s = 'hello';
s.length // 5
s.length = 3;
s.length // 5
s.length = 7;
s.length // 5
上面代码表示字符串的length属性无法改变,但是不会报错。
3.4.4 Base64 转码
所谓 Base64 就是一种编码方法,可以将任意值转成 0~9、A~Z、a-z、+和/这64个字符组成的可打印字符。使用它的主要目的,不是为了加密,而是为了不出现特殊字符,简化程序的处理。
JavaScript 原生提供两个 Base64 相关的方法。
- btoa():任意值转为 Base64 编码
- atob():Base64 编码转为原来的值
var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"
注意,这两个方法不适合非 ASCII 码的字符,会报错。
btoa('你好') // 报错
要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。
function b64Encode(str) {
return btoa(encodeURIComponent(str));
}
function b64Decode(str) {
return decodeURIComponent(atob(str));
}
b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"
3.5 object 对象
3.5.1 概念
什么是对象?简单说,对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在 JavaScript 中,对象是拥有属性和方法的数据。
属性是与对象相关的值。方法是能够在对象上执行的动作。
var obj = {
foo: 'Hello',
bar: 'World'
};
3.5.1.1 键名
对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名),所以加不加引号都可以。
var obj = {
foo: 'Hello',
bar: 'World'
};
// 同
var obj = {
'foo': 'Hello',
'bar': 'World'
};
如果键名是数值,会被自动转为字符串。
如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错。
// 报错
var obj = {
1p: 'Hello World'
};
// 不报错
var obj = {
'1p': 'Hello World'
};
对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。
var obj = {
p: function (x) {
return 2 * x;
}
};
obj.p(1) // 2
3.5.1.2 对象的引用
如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。
var o1 = {};
var o2 = o1;
o1.a = 1;
o2.a // 1
o2.b = 2;
o1.b // 2
上面代码中,o1和o2指向同一个对象,因此为其中任何一个变量添加属性,另一个变量都可以读写该属性。
此时,如果取消某一个变量对于原对象的引用,不会影响到另一个变量。
var o1 = {};
var o2 = o1;
o1 = 1;
o2 // {}
上面代码中,o1和o2指向同一个对象,然后o1的值变为1,这时不会对o2产生影响,o2还是指向原来的那个对象。
但是,这种引用只局限于对象,如果两个变量指向同一个原始类型的值。那么,变量这时都是值的拷贝。
var x = 1;
var y = x;
x = 2;
y // 1
上面的代码中,当x的值发生变化后,y的值并不变,这就表示y和x并不是指向同一个内存地址。
3.5.2 属性的操作
3.5.2.1 属性的读取
读取对象的属性,有两种方法:
- 点运算符,
- 方括号运算符
var obj = {
p: 'Hello World'
};
obj.p // "Hello World"
obj['p'] // "Hello World"
注意,如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。纯数字键可以不加引号,因为会自动转成字符串。
var obj = {
7: 'Hello World'
};
obj['7'] // "Hello World"
obj[7] // "Hello World"
注意,数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。
var obj = {
23: 'hello world'
};
obj.23 // 报错
obj[23] // "hello world"
3.5.2.2 属性的赋值
点运算符和方括号运算符,不仅可以用来读取值,还可以用来赋值。
var obj = {};
obj.foo = 'Hello';
obj['bar'] = 'World';
JavaScript 允许属性的“后绑定”,也就是说,你可以在任意时刻新增属性,没必要在定义对象的时候,就定义好属性。
var obj = { p: 1 };
// 等价于
var obj = {};
obj.p = 1;
3.5.2.3 属性的查看
查看一个对象本身的所有属性,可以使用Object.keys方法。
var obj = {
key1: 1,
key2: 2
};
Object.keys(obj); // ['key1', 'key2']
3.5.2.4 属性的删除
delete命令用于删除对象的属性,删除成功后返回true。
var obj = { p: 1 };
Object.keys(obj) // ["p"]
delete obj.p // true
obj.p // undefined
Object.keys(obj) // []
注意,删除一个不存在的属性,delete不报错,而且返回true。
var obj = {};
delete obj.p // true
只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。
var obj = Object.defineProperty({}, 'p', {
value: 123,
configurable: false
});
obj.p // 123
delete obj.p // false
另外,delete命令只能删除对象本身的属性,无法删除继承的属性
var obj = {};
delete obj.toString // true
obj.toString // function toString() { [native code] }
上面代码中,toString是对象obj继承的属性,虽然delete命令返回true,但该属性并没有被删除,依然存在。这个例子还说明,即使delete返回true,该属性依然可能读取到值。
3.5.2.5 检测属性是否存在
in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。它的左边是一个字符串,表示属性名,右边是一个对象。
var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true
in运算符的一个问题是,它不能识别哪些属性是对象自身的,哪些属性是继承的。就像上面代码中,对象obj本身并没有toString属性,但是in运算符会返回true,因为这个属性是继承的。
这时,可以使用对象的hasOwnProperty方法判断一下,是否为对象自身的属性。
var obj = {};
if ('toString' in obj) {
console.log(obj.hasOwnProperty('toString')) // false
}
3.5.2.6 属性的遍历
for…in循环用来遍历一个对象的全部属性。
var obj = {a: 1, b: 2, c: 3};
for (var i in obj) {
console.log('键名:', i);
console.log('键值:', obj[i]);
}
// 键名: a
// 键值: 1
// 键名: b
// 键值: 2
// 键名: c
// 键值: 3
注意:
- for…in遍历的是对象所有可遍历的属性,会跳过不可遍历的属性。
- for…in不仅遍历对象自身的属性,还遍历继承的属性。
var obj = {};
// toString 属性是存在的
obj.toString // toString() { [native code] }
for (var p in obj) {
console.log(p);
}
// 没有任何输出
对象obj继承了toString属性,该属性不会被for…in循环遍历到,因为它默认是“不可遍历”的。
如果继承的属性是可遍历的,那么就会被for…in循环遍历到。但是,一般情况下,都是只想遍历对象自身的属性,所以使用for…in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。
var person = { name: '老张' };
for (var key in person) {
if (person.hasOwnProperty(key)) {
console.log(key);
}
}
// name
3.5.3 with 语句
格式:
with (对象) {
语句;
}
它的作用是操作同一个对象的多个属性时,提供一些书写的方便。
var obj = {
p1: 1,
p2: 2,
};
with (obj) {
p1 = 4;
p2 = 5;
}
// 等同于
obj.p1 = 4;
obj.p2 = 5;
注意,如果with区块内部有变量的赋值操作,必须是当前对象已经存在的属性,否则会创造一个当前作用域的全局变量。
var obj = {};
with (obj) {
p1 = 4;
p2 = 5;
}
obj.p1 // undefined
p1 // 4
3.6 function 函数
3.6.1 概念
3.6.1.1 函数的声明
JavaScript 有三种声明函数的方法:
- function 命令
- 函数表达式
- 构造函数
1、function 命令
function命令声明的代码区块,就是一个函数。function命令后面是函数名,函数名后面是一对圆括号,里面是传入函数的参数。函数体放在大括号里面。
function test(s) {
console.log(s);
}
test()
// test ==> 函数名 ,s ==> 参数 , test() ==> 调用函数
2、函数表达式
除了用function命令声明函数,还可以采用变量赋值的写法。
var test = function(s) {
console.log(s);
};
将一个匿名函数赋值给变量。这时,这个匿名函数又称函数表达式,因为赋值语句的等号右侧只能放表达式。
采用函数表达式声明函数时,function命令后面不带有函数名。如果加上函数名,该函数名只在函数体内部有效,在函数体外部无效。
var test= function x(){
console.log(x);
};
x // ReferenceError: x is not defined
test()
// ƒ x(){
console.log(x);
}
上面代码在函数表达式中,加入了函数名x。这个x只在函数体内部可用,指代函数表达式本身,其他地方都不可用。这种写法的用处有两个:
- 可以在函数体内部调用自身
- 方便除错,除错工具显示函数调用栈时,将显示函数名,而不再显示这里是一个匿名函数。
因此,下面的形式声明函数也非常常见。
var f = function f() {};
3、构造函数
var test= new Function(
'x',
'y',
'return x + y'
);
// 等同于
function test(x, y) {
return x + y;
}
上面代码中,构造函数接受三个参数,除了最后一个参数是test函数的“函数体”,其他参数都是test函数的参数。
你可以传递任意数量的参数给构造函数,只有最后一个参数会被当做函数体,如果只有一个参数,该参数就是函数体。
var test= new Function(
'return "hello world";'
);
// 等同于
function test() {
return 'hello world';
}
3.6.1.2 函数的重复声明
如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。
function f() {
console.log(1);
}
f() // 2
function f() {
console.log(2);
}
f() // 2
上面代码中,后一次的函数声明覆盖了前面一次。而且,由于函数名的提升,前一次声明在任何时候都是无效的。
3.6.1.3 函数调用、return语句和递归
调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。
function add(x, y) {
return x + y;
}
add(1, 1) // 2
函数体内部的return语句,表示返回。JavaScript 引擎遇到return语句,就直接返回return后面的那个表达式的值,后面即使还有语句,也不会得到执行。也就是说,return语句所带的那个表达式,就是函数的返回值。return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined。
函数可以调用自身,这就是递归。
3.6.1.4 函数名的提升
JavaScript 引擎将函数名视同变量名,所以采用function命令声明函数时,整个函数会像变量声明一样,被提升到代码头部。所以,下面的代码不会报错。
f();
function f() {}
表面上,上面代码好像在声明之前就调用了函数f。但是实际上,由于“变量提升”,函数f被提升到了代码头部,也就是在调用之前已经声明了。但是,如果采用赋值语句定义函数,JavaScript 就会报错。
f();
var f = function (){};
// TypeError: f is not a function
上面的代码等同于下面的形式。
var f;
f();
f = function () {};
注意,如果像下面例子这样,采用function命令和var赋值语句声明同一个函数,由于存在函数提升,最后会采用var赋值语句的定义。
var f = function () {
console.log('1');
}
function f() {
console.log('2');
}
f() // 1
上面例子中,表面上后面声明的函数f,应该覆盖前面的var赋值语句,但是由于存在函数提升,实际上正好反过来。等同:
var f = function(){
console.log('2');
}
var f = function () {
console.log('1');
}
f() // 1
注意:函数提升优先级高于变量提升,且不会被同名变量声明时覆盖,但是会被变量赋值后覆盖
案例:
console.log(bar);
console.log(bar());
var bar = 456;
function bar() {
console.log(123);
}
console.log(bar);
bar = 789;
console.log(bar);
console.log(bar())
上面js代码的执行步骤:
// 函数提升,函数提升优先级高于变量提升
var bar = function() {
console.log(123);
}
// 变量提升,变量提升不会覆盖(同名)函数提升,只有变量再次赋值时,才会被覆盖
var bar;
// 代码从上到下开始执行
console.log(bar);
console.log(bar());
// 变量赋值,覆盖同名函数字面量
bar = 456;
console.log(bar);
// 再次赋值
bar = 789;
console.log(bar);
console.log(bar())
输出结果:
f bar() { console.log(123) }
123 // 执行bar()里的console.log
undefined // bar()的返回值,如果函数没有返回值,默认为:undefined
456
789
TypeError: bar is not a function
3.6.2 函数的属性和方法
3.6.2.1 name 属性
函数的name属性返回函数的名字。
function f1() {}
f1.name // "f1"
1、通过变量赋值定义的函数,那么name属性返回变量名。
var f2 = function () {};
f2.name // "f2"
2、如果变量的值是一个具名函数,那么name属性返回function关键字之后的那个函数名。
var f3 = function myFun() {};
f3.name // 'myFun'
上面代码中,f3.name返回函数表达式的名字。注意,真正的函数名还是f3,而myFun这个名字只在函数体内部可用。
name属性的一个用处,就是获取参数函数的名字。
var myFunc = function () {};
function test(f) {
console.log(f.name);
}
test(myFunc) // myFunc
上面代码中,函数test内部通过name属性,就可以知道传入的参数是什么函数。
3.6.2.2 length 属性
函数的length属性返回函数预期传入的参数个数,即函数定义之中的参数个数。
function f(a, b) {}
f.length // 2
上面代码定义了空函数f,它的length属性就是定义时的参数个数。不管调用时输入了多少个参数,length属性始终等于2。
length属性提供了一种机制,判断定义时和调用时参数的差异,以便实现面向对象编程的“方法重载”(overload)。
3.6.2.3 toString()
函数的toString()方法返回一个字符串,内容是函数的源码。
function f() {
a();
b();
c();
}
f.toString()
// function f() {
// a();
// b();
// c();
// }
对于那些原生的函数,toString()方法返回function (){[native code]}。
Math.sqrt.toString()
// "function sqrt() { [native code] }"
3.6.3 函数作用域
3.6.3.1概念
作用域(scope)指的是变量存在的范围。在 ES5 的规范中,JavaScript 只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。ES6 又新增了块级作用域。
对于顶层函数来说,函数外部声明的变量就是全局变量(global variable),它可以在函数内部读取。
var v = 1;
function f() {
console.log(v);
}
f()
// 1
上面的代码表明,函数f内部可以读取全局变量v。
在函数内部定义的变量,外部无法读取,称为“局部变量”(local variable)。
function f(){
var v = 1;
}
console.log(v);
// ReferenceError: v is not defined
上面代码中,变量v在函数内部定义,所以是一个局部变量,函数之外就无法读取。
函数内部定义的变量,会在该作用域内覆盖同名全局变量。
var v = 1;
function f(){
var v = 2;
console.log(v);
}
f() // 2
console.log(v); // 1
上面代码中,变量v同时在函数的外部和内部有定义。结果,在函数内部定义,局部变量v覆盖了全局变量v。
注意,对于var命令来说,局部变量只能在函数内部声明,在其他区块中声明,一律都是全局变量。
if (true) {
var x = 5;
}
console.log(x); // 5
上面代码中,变量x在条件判断区块之中声明,结果就是一个全局变量,可以在区块之外读取。
3.6.3.2 函数内部的变量提升
与全局作用域一样,函数作用域内部也会产生“变量提升”现象。var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。
function foo(x) {
if (x > 100) {
var tmp = x - 100;
}
}
// 等同于
function foo(x) {
var tmp;
if (x > 100) {
tmp = x - 100;
};
}
3.6.3.3 函数本身的作用域
函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在的作用域无关。
var a = 1;
var x = function () {
console.log(a);
};
function f() {
var a = 2;
x();
}
f() // 1
上面代码中,函数x是在函数f的外部声明的,所以它的作用域绑定外层,内部变量a不会到函数f体内取值,所以输出1,而不是2。
总之,函数执行时所在的作用域,是定义时的作用域,而不是调用时所在的作用域。
var x = function () {
console.log(a);
};
function y(f) {
var a = 2;
f();
}
y(x)
// ReferenceError: a is not defined
上面代码将函数x作为参数,传入函数y。但是,函数x是在函数y体外声明的,作用域绑定外层,因此找不到函数y的内部变量a,导致报错。
同样的,函数体内部声明的函数,作用域绑定函数体内部。
function foo() {
var x = 1;
function bar() {
console.log(x);
}
return bar;
}
var x = 2;
var f = foo();
f() // 1
上面代码中,函数foo内部声明了一个函数bar,bar的作用域绑定foo。当我们在foo外部取出bar执行时,变量x指向的是foo内部的x,而不是foo外部的x。
3.6.4 参数
3.6.4.1 概念
函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。
function square(x) {
return x * x;
}
square(2) // 4
square(3) // 9
上式的x就是square函数的参数。每次运行的时候,需要提供这个值,否则得不到结果。
3.6.4.2 参数的省略
函数参数不是必需的,JavaScript 允许省略参数。
function f(a, b) {
return a;
}
f(1, 2, 3) // 1
f(1) // 1
f() // undefined
f.length // 2
上面代码的函数f定义了两个参数,但是运行时无论提供多少个参数(或者不提供参数),JavaScript 都不会报错。省略的参数的值就变为undefined。需要注意的是,函数的length属性与实际传入的参数个数无关,只反映函数预期传入的参数个数。
但是,没有办法只省略靠前的参数,而保留靠后的参数。如果一定要省略靠前的参数,只有显式传入undefined。
function f(a, b) {
return a;
}
f( , 1) // SyntaxError: Unexpected token ,(…)
f(undefined, 1) // undefined
上面代码中,如果省略第一个参数,就会报错。
3.6.4.3 传递方式
函数参数如果是原始类型的值(数值、字符串、布尔值),传递方式是传值传递(passes by value)。这意味着,在函数体内修改参数值,不会影响到函数外部。
var p = 2;
function f(p) {
p = 3;
}
f(p);
p // 2
上面代码中,变量p是一个原始类型的值,传入函数f的方式是传值传递。因此,在函数内部,p的值是原始值的拷贝,无论怎么修改,都不会影响到原始值。
但是,如果函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递。也就是说,传入函数的原始值的地址,因此在函数内部修改参数,将会影响到原始值。
var obj = { p: 1 };
function f(o) {
o.p = 2;
}
f(obj);
obj.p // 2
上面代码中,传入函数f的是参数对象obj的地址。因此,在函数内部修改obj的属性p,会影响到原始值。
注意,如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。
var obj = [1, 2, 3];
function f(o) {
o = [2, 3, 4];
}
f(obj);
obj // [1, 2, 3]
上面代码中,在函数f()内部,参数对象obj被整个替换成另一个值。这时不会影响到原始值。这是因为,形式参数(o)的值实际是参数obj的地址,重新对o赋值导致o指向另一个地址,保存在原地址上的值当然不受影响。
3.6.4.4 同名参数
如果有同名的参数,则取最后出现的那个值。
function f(a, a) {
console.log(a);
}
f(1, 2) // 2
上面代码中,函数f()有两个参数,且参数名都是a。取值的时候,以后面的a为准,即使后面的a没有值或被省略,也是以其为准。
function f(a, a) {
console.log(a);
}
f(1) // undefined
调用函数f()的时候,没有提供第二个参数,a的取值就变成了undefined。这时,如果要获得第一个a的值,可以使用arguments对象。
function f(a, a) {
console.log(arguments[0]);
}
f(1) // 1
3.6.4.5 arguments 对象
由于 JavaScript 允许函数有不定数目的参数,所以需要一种机制,可以在函数体内部读取所有参数。这就是arguments对象的由来。
arguments对象包含了函数运行时的所有参数,arguments[0]就是第一个参数,arguments[1]就是第二个参数,以此类推。这个对象只有在函数体内部,才可以使用。
var f = function (one) {
console.log(arguments[0]);
console.log(arguments[1]);
console.log(arguments[2]);
}
f(1, 2)
// 1
// 2
// undefined
正常模式下,arguments对象可以在运行时修改。
var f = function(a, b) {
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 5
上面代码中,函数f()调用时传入的参数,在函数内部被修改成3和2。
严格模式下,arguments对象与函数参数不具有联动关系。也就是说,修改arguments对象不会影响到实际的函数参数。
var f = function(a, b) {
'use strict'; // 开启严格模式
arguments[0] = 3;
arguments[1] = 2;
return a + b;
}
f(1, 1) // 2
上面代码中,函数体内是严格模式,这时修改arguments对象,不会影响到真实参数a和b。
通过arguments对象的length属性,可以判断函数调用时到底带几个参数。
function f() {
return arguments.length;
}
f(a,b,c) // 3
f(a) // 1
f() // 0
3.7 Array 数组
3.7.1 概念
数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。
var arr = ['a', 'b', 'c'];
var arr = [1,2,3,4,5,6,7,8,9];
var arr = ["组长","班长","排长","连长"];
除了在定义时赋值,数组也可以先定义后赋值。
var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 'c';
console.log(arr) // ["a", "b", "c"]
任何类型的数据,都可以放入数组。
var arr = [
{a: 1},
[1, 2, 3],
function() {return true;}
];
arr[0] // Object {a: 1}
arr[1] // [1, 2, 3]
arr[2] // function (){return true;}
上面数组arr的3个成员依次是对象、数组、函数。
如果数组的元素还是数组,就形成了多维数组。
var a = [[1, 2], [3, 4]];
a[0] // [1,2]
a[0][0] // 1
a[1][1] // 4
本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object。
typeof [1, 2, 3] // "object"
数组的特殊性体现在,它的键名是按次序排列的一组整数(0,1,2…)。
var arr = ['a', 'b', 'c'];
Object.keys(arr) // ["0", "1", "2"]
由于数组成员的键名是固定的(默认总是0、1、2…),因此数组不用为每个元素指定键名,而对象的每个成员都必须指定键名。JavaScript 语言规定,对象的键名一律为字符串,所以,数组的键名其实也是字符串。之所以可以用数值读取,是因为非字符串的键名会被转为字符串。
var arr = ['a', 'b', 'c'];
arr['0'] // 'a'
arr[0] // 'a'
3.7.2 length 属性
数组的length属性,返回数组的成员数量。
var arr = ['a', 'b', 'c'];
arr.length // 3
length属性是可写的。如果人为设置一个小于当前成员个数的值,该数组的成员数量会自动减少到length设置的值。
var arr = [ 'a', 'b', 'c' ];
arr.length // 3
arr.length = 2;
arr // ["a", "b"]
上面代码中,arr数组长度应该是3,但在下边手动设置数组长度为2时,数组第三项被自动删除了。
清空数组的一个有效方法,就是将length属性设为0。
var arr = [ 'a', 'b', 'c' ];
arr.length = 0;
arr // []
如果人为设置length大于当前元素个数,则数组的成员数量会增加到这个值,新增的位置都是空位。
var a = ['a'];
a.length = 3;
console.log(a) // ["a", empty × 2] ==> 表明存在两个空值
a[1] // undefined
上面代码表示,当length属性设为大于数组个数时,读取新增的位置都会返回undefined。
如果人为设置length为不合法的值,JavaScript 会报错。
// 设置负值
[].length = -1
// RangeError: Invalid array length
// 数组元素个数大于等于2的32次方
[].length = Math.pow(2, 32)
// RangeError: Invalid array length
// 设置字符串
[].length = 'abc'
// RangeError: Invalid array length
3.7.3 数组的遍历
for…in循环不仅可以遍历对象,也可以遍历数组,毕竟数组只是一种特殊对象。
var a = [1, 2, 3];
for (var i in a) {
console.log(a[i]);
}
// 1
// 2
// 3
但是,for…in不仅会遍历数组所有的数字键,还会遍历非数字键。
var a = [1, 2, 3];
a.foo = true;
for (var key in a) {
console.log(key);
}
// 0
// 1
// 2
// foo
上面代码在遍历数组时,也遍历到了非整数键foo。所以,不推荐使用for…in遍历数组。
数组的遍历
for循环:
var a = [1, 2, 3];
for(var i = 0; i < a.length; i++) {
console.log(a[i]);
}
// 1
// 2
// 3
while循环:
var a = [1, 2, 3];
var i = 0;
while (i < a.length) {
console.log(a[i]);
i++;
}
// 1
// 2
// 3
//逆向遍历,即从最后一个元素向第一个元素遍历
var l = a.length;
while (l--) {
console.log(a[l]);
}
// 3
// 2
// 1
forEach方法:
var a = [1, 2, 3];
a.forEach(function (val) {
console.log(val);
});
// 1
// 2
// 3
3.7.4 数组的空位
当数组的某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位(hole)。
var a = [1, , 1];
a.length // 3
a[1] // undefined
上面代码表明,数组的空位不影响length属性。且空位返回undefined。
使用delete命令删除一个数组成员,会形成空位,并且不会影响length属性。
var a = [1, 2, 3];
delete a[1];
a[1] // undefined
a.length // 3
数组的某个位置是空位,与某个位置是undefined,是不一样的。如果是空位,使用数组的forEach方法、for…in结构、以及Object.keys方法进行遍历,空位都会被跳过。
var a = [, , ,];
a.forEach(function (x, i) {
console.log(i + '. ' + x);
})
// 不产生任何输出
for (var i in a) {
console.log(i);
}
// 不产生任何输出
Object.keys(a)
// []
如果某个位置是undefined,遍历的时候就不会被跳过。
var a = [undefined, undefined, undefined];
a.forEach(function (x, i) {
console.log(i + '. ' + x);
});
// 0. undefined
// 1. undefined
// 2. undefined
for (var i in a) {
console.log(i);
}
// 0
// 1
// 2
Object.keys(a)
// ['0', '1', '2']
这就是说,空位就是数组没有这个元素,所以不会被遍历到,而undefined则表示数组有这个元素,值是undefined,所以遍历不会跳过。
3.8 Symbol
3.8.1 概念
ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法,新方法的名字就有可能与现有方法产生冲突。为了从根本上防止属性名的冲突,保证每个属性的名字都是独一无二的,ES6 引入了Symbol。Symbol它的功能类似于一种标识唯一性的ID。
通常情况下,我们可以通过调用Symbol()函数来创建一个Symbol实例:
let s1 = Symbol()
或者,我们也可以在调用Symbol()函数时传入一个可选的字符串参数,相当于给创建的Symbol实例一个描述信息:
let s2 = Symbol('another symbol')
Symbol函数前不能使用new命令,否则会报错。这是因为生成的 Symbol 是一个原始类型的值,不是对象。也就是说,由于 Symbol 值不是对象,所以不能添加属性。基本上,它是一种类似于字符串的数据类型。
var sym = new Symbol(); // TypeError
由于Symbol是一种基础数据类型,所以当我们使用typeof去检查它的类型的时候,它会返回一个属于自己的类型symbol,而不是什么string、object之类的:
let s1 = Symbol();
typeof s1 // 'symbol'
注意:每个Symbol实例都是唯一的。因此,比较两个Symbol实例的时候,将总会返回false:
let s1 = Symbol()
let s2 = Symbol()
let s3 = Symbol('another symbol')
s1 === s2 // false
s2 === s3 // false
3.8.2 应用
3.8.2.1 使用Symbol来作为对象属性名(key)
通常我们定义或访问对象的属性时都是使用字符串:
let obj = {
abc: 123,
"hello": "world"
}
obj["abc"] // 123
obj["hello"] // 'world'
现在
const NAME = Symbol()
const AGE = Symbol()
let obj = {
[NAME]: "哈哈哈"
}
obj[AGE] = 18
obj[NAME] // '哈哈哈'
obj[AGE] // 18
当使用了Symbol作为对象的属性key后,再对该对象进行key的遍历时,会不会有什么不同?下面我们看个案例:
let obj = {
[Symbol('name')]: '熊二',
age: 18,
sex: '男'
}
// 使用Object.keys()
Object.keys(obj) // ['age', 'sex']
// 使用for...in
for (let i in obj) {
console.log(i) // 分别会输出:'age' 和 'sex'
}
// 对象自身的属性名集合(property names)
Object.getOwnPropertyNames(obj) // ['age', 'sex']
从上面代码可知,Symbol类型的key是不能通过Object.keys()或者for…in来枚举的,它未被包含在对象自身的属性名集合之中。所以,利用该特性,我们可以把一些不需要对外操作和访问的属性使用Symbol来定义。
然而,这样的话,我们就没办法获取以Symbol方式定义的对象属性了么?No No No,我们有一些专门针对Symbol的API,比如:
// 使用Object的API
Object.getOwnPropertySymbols(obj) // [Symbol(name)]
// 使用新增的反射API
Reflect.ownKeys(obj) // [Symbol(name), 'age', 'title']
3.9 bigInt
3.9.1 概念
JavaScript中Number是双精度浮点数,它可以表示的最大安全范围是正负9007199254740991,也就是2的53次方减一,在浏览器控制台分别输入Number.MAX_SAFE_INTEGER和Number.MIN_SAFE_INTEGER可查看对应的最大/小值。现在比2的53次方减一大的所有数字可以使用BigInt表达。
3.9.2 创建bigInt
- 整数末尾加n
- 调用BigInt()构造函数
console.log(9007199254740991n) // 9007199254740991n
console.log(9007199254740995) //9007199254740996
BigInt(9007199254740995) // 9007199254740996n
下一节:数组方法大全