认识JavaScript（2）JavaScript 的数据类型

数据类型

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

下一节：数组方法大全