一、数据类型
ECMAScript中有6种基本数据类型：Undefined、Null、Boolean、Number、String、Symbol，1种引用数据类型：Object。
1、Undefined
Undefined类型只有一个值：undefined。
当一个变量已经声明了但是没有初始化时，此时该变量的值为undefined。
1 let a; 2 console.log(a === undefined); // true
2、Null
Null类型只有一个值：null，表示空对象指针。
当定义的变量将来用于保存对象时，可将该变量初始化为null。
3、Boolean
Boolean类型有两个值：true和false。
使用Boolean()函数可以将任何数据类型的值转换为Boolean类型，熟悉转换规则对于理解流程控制语句中自动执行的Boolean类型的转换非常重要。
1 // String类型的值：任何非空字符串都会被转换为true，空字符串转换为false 2 const a = 'string'; 3 const b = ''; 4 console.log(Boolean(a), Boolean(b)); // true false 5 6 // Number类型的值：任何非0的数值都会被转换为true，0和NaN转换为false 7 const c = 123; 8 const d = 0; 9 const e = NaN; 10 console.log(Boolean(c), Boolean(d), Boolean(e)); // true false false 11 12 // undefined：转换为false 13 let f; 14 console.log(Boolean(f)); // false 15 16 // null：转换为false 17 const g = null; 18 console.log(Boolean(g)); // false 19 20 // Object：转换为true 21 const h = {}; 22 console.log(Boolean(h)); // true 23 24 // Symbol：转换为true 25 const i = Symbol(); 26 console.log(Boolean(i)); // true
4、Number
Number类型用来表示数字（整数和浮点数）。
常用的函数：
1）parseInt()：将字符串转换为整数
1 // parseInt转换规则： 2 // 当第一个非空格字符不是数字字符（包含负号）时，返回NaN； 3 // 当第一个非空字符是数字字符时，parseInt会继续解析后面的字符，直到遇到非数字字符为止。 4 const a = '123.01'; 5 console.log(parseInt(a)); // 123 6 7 const b = 'aa12'; 8 console.log(parseInt(b)); // NaN 9 10 const c = '12aa'; 11 console.log(parseInt(c)); // 12
2）parseFloat()：将字符串转换为浮点数
1 // parseFloat转换规则与parseInt类似，只有两点不同： 2 // 字符串中的小数点只有第一个是有效的； 3 // 如果字符串中的第一个非空格字符是0，这个0会被忽略。 4 // 另外还需要注意，如果字符串可以使用整数表示，那么使用parseFloat函数后输入的也是整数 5 const d = '12.12'; 6 console.log(parseFloat(d)); // 12.12 7 8 const e = '12.12.12'; 9 console.log(parseFloat(e)); // 12.12 10 11 const f = '12.00'; 12 console.log(parseFloat(f)); // 12 13 14 const g = '012.12'; 15 console.log(parseFloat(g)); // 12.12
3）toFixed()：按指定小数位返回数字的字符串表示
1 // toFixed接收一个参数，该参数表示小数位数； 2 // 使用该方法会对数值进行四舍五入； 3 // 对于整数，会自动补0 4 const h = 12.789; 5 console.log(h.toFixed(2)); // 12.79 6 7 const i = 12; 8 console.log(i.toFixed(2)); // 12.00
4）isNaN()：判断 一个值是否“不是数值”
1 // NaN：非数值，是一个特殊的数值，这个数值用于表示一个本来要返回数值的操作数未返回数值的情况。 2 // NaN有两个特点：1）任何涉及到NaN的操作都会返回NaN；2）NaN与任何值都不相等，包括NaN本身。 3 const j = NaN; 4 console.log(isNaN(j)); // true 5 6 const k = 12; 7 console.log(isNaN(k)); // false 8 9 const l = '12aa'; 10 console.log(isNaN(l)); // true 11 12 const m = 'blue'; 13 console.log(isNaN(m)); // true
5）Number.isInteger()：判断一个数值是否是整数；注意：由于保存浮点数值需要的内存空间是保存整数值的两倍，因此对于那些本身表示的就是整数的浮点数，ECMAScript会将它们转换为整数，比如：10.0会被转换为10，所以10.0和10会被视为同一个值，都会被判断为是整数。
1 const o = 25; 2 console.log(Number.isInteger(o)); // true 3 4 const p = 25.00; 5 console.log(Number.isInteger(p)); // true 6 7 const q = '25'; 8 console.log(Number.isInteger(q)); // false 9 10 const r = 25.1; 11 console.log(Number.isInteger(r)); // false
6）toLocaleString()：将数字转换为本地格式的字符串，常用该函数把数字转换成货币格式。
1 const s = 1000000.123; 2 console.log(s.toLocaleString()); // 1,000,000.123
5、String
String类型用来表示字符串。
常用的函数：
1 const str1 = 'hello'; 2 const str2 = 'world'; 3 4 // 1、charAt()：返回指定位置的字符 5 console.log(str1.charAt(1)); // 'e' 6 7 // 2、concat：拼接字符串，在实践中更多的使用‘+’来进行字符串的拼接 8 console.log(str1.concat(str2)); // 'helloworld' 9 console.log(str1 + str2); // 'helloworld' 10 11 // 3、slice(start, end)：切割字符串 12 // start：表示从start开始截取字符串，end：表示截取到end位置为止，不包含end； 13 // end可以省略，如果省略则表示一直截取到字符串的末尾。 14 console.log(str1.slice(1, 3)); // 'el' 15 console.log(str1); // 'hello，str1的值没有改变，说明slice函数不会改变原始字符串，而是产生新的字符串。 16 console.log(str2.slice(1)); // 'orld 17 18 // 如果start/end为负数，slice会将它们与字符串的长度相加 19 console.log(str1.slice(-4, -2)); // 'el'，相当于slice(1, 3) 20 // 如果end < start，返回空字符串 21 console.log(str1.slice(3, 1)); // '' 22 23 // 4、substring(start, end)：切割字符串 24 // start：表示从start开始截取字符串，end：表示截取到end位置为止，不包含end； 25 // end可以省略，如果省略则表示一直截取到字符串的末尾。 26 console.log(str1.substring(1, 3)); // 'el' 27 console.log(str1); // 'hello，str1的值没有改变，说明substring函数不会改变原始字符串，而是产生新的字符串。 28 console.log(str2.substring(1)); // 'orld 29 30 // 如果start/end为负数，substring会将它们都转换为0 31 console.log(str1.substring(-2, -1)); // '' 32 // 如果end < start，substring会将start和end的值交换 33 console.log(str1.substring(3, 1)); // 'el'，相当于substring(1, 3) 34 35 // 5、substr(start, end)：截取字符串 36 // start：表示从start开始截取字符串，end：表示要截取的字符串的个数，如果end的值大于字符串的长度，则截取到该字符串的末尾即可。 37 // end可以省略，如果省略则表示一直截取到字符串的末尾。 38 console.log(str1.substr(2, 1)); // 'l' 39 console.log(str1); // 'hello，str1的值没有改变，说明substr函数不会改变原始字符串，而是产生新的字符串。 40 console.log(str1.substr(2, 7)); // 'llo' 41 console.log(str1.substr(2)); // 'llo' 42 43 // 如果start为负数，则将其与字符串的长度相加 44 // 如果end为负数，则将其转换为0 45 console.log(str1.substr(-2, -4)); // ''，相当于substr(3, 0) 46 47 // 6、indexOf(child, pos)：从字符串的开头向后中搜索给定的子字符串，返回子字符串第一次出现的位置，如果不存在该子字符串，则返回-1 48 // child：表示待查找的子字符串 49 // pos：可选，表示从该位置开始查找，默认为0 50 console.log(str1.indexOf('l')); // 2 51 console.log(str1.indexOf('l', 3)); // 3 52 console.log(str1.indexOf('w')); // -1 53 54 // 7、lastIndexOf(child, pos)：从字符串的末尾向前搜索给定的子字符串，返回子字符串第一次出现的位置，如果不存在该子字符串，则返回-1 55 // child：表示待查找的子字符串 56 // pos：可选，表示从该位置开始查找，默认为0 57 console.log(str1.lastIndexOf('l')); // 3 58 console.log(str1.lastIndexOf('l', 3)); // 3 59 console.log(str1.lastIndexOf('w')); // -1 60 61 // 8、trim()：去除字符串开头和末尾的空格，并返回新字符串 62 const str3 = ' hello '; 63 console.log(str3.trim()); // 'hello' 64 65 // 9、replace(param1, param2)：用某个字符串替换子字符串 66 // param1: 表示被替换掉的子字符串 67 // 如果param1的值为字符串，则只会替换第一个子字符串； 68 // 如果param1的值为一个指定了全局表示的正则表达式，则会替换所有子字符串 69 // param2：替代子字符串的新字符串 70 const str4 = 'hello world, hello music'; 71 console.log(str4.replace('hello', 'bye')); // 'bye world, hello music' 72 console.log(str4.replace(/hello/g, 'bye')); // 'bye world, bye music' 73 74 // 10、split(sep)：基于指定的分隔符将一个字符串分割为多个子字符串，并将子字符串存到数组中返回。 75 const str5 = 'a,b,c,d'; 76 console.log(str5.split(',')); // [ 'a', 'b', 'c', 'd' ]
6、Symbol
Symbol类型用来表示独一无二的值，该类型是ES6新增的基本数据类型。
1）Symbol()函数：Symbol()函数用来生成Symbol值。
1 // 1）Symbol值通过Symbol()函数来生成。 2 const s1 = Symbol(); 3 console.log(s1); // 'Symbol()' 4 const s2 = Symbol(); 5 console.log(s2); // 'Symbol()' 6 // 2）Symbol()函数生成的值是不相等的，尽管它们在控制台的输出都是Symbol() 7 console.log(s1 === s2); // false 8 // 3）Symbol()函数也可以传入一个字符串作为参数，表示对Symbol()实例的描述，这样比较好区分。 9 const s3 = Symbol('s3'); 10 console.log(s3); // Symbol(s3) 11 const s4 = Symbol('s3'); 12 console.log(s4); // Symbol(s3) 13 // 4)虽然传入Symbol()函数中的参数值相等，但是Symbol()函数生成的值仍然是不相等的。 14 console.log(s3 === s4); // flase 15 // 5）Symbol值不能与其他值进行运算，否则会报错 16 console.log('hello,' + s3); // TypeError: Cannot convert a Symbol value to a string 17 // 6)虽然不能与其他值进行运算，但是Symbol值可以转换为字符串和布尔值，不能转换为数值 18 console.log(s3.toString()); // 'Symbol(s3)' 19 console.log(String(s3)); // 'Symbol(s3)' 20 console.log(Boolean(s3)); // true
2）Symbol的每一个值都是不相等的，因此可以使用Symbol值来标识对象的属性名，这样可以保证不会出现同名的属性。这对于一个对象由多个模块构成的情况非常有用，能防止某一个键被不小心改写或者覆盖。
1 let s5 = Symbol('name'); 2 // 写法一： 3 let obj1 = { 4 [s5]: 'yjj' 5 }; 6 console.log(obj1[s5]); // yjj 7 // 写法二： 8 let obj2 = {}; 9 obj2[s5] = 'yjj'; 10 console.log(obj2[s5]); // yjj 11 // 写法三： 12 let obj3 = {}; 13 Object.defineProperty(obj3, s5, { 14 value: 'yjj' 15 }); 16 console.log(obj3[s5]); // yjj
3）Object.getOwnPropertySymbols()：获取指定对象的所有Symbol属性名
1 const s1 = Symbol('name1'); 2 const s2 = Symbol('name2'); 3 const obj = { 4 [s1]: '嘉平十五', 5 [s2]: 'Alice', 6 age: 18, 7 sex: 'female' 8 }; 9 // ① 当Symbol作为一个属性的属性名时，该属性不会出现在for...in语句、Object.keys()以及Object.getOwnPropertyNames()函数的返回结果中。 10 for (const key in obj) { 11 console.log(key); // age sex 12 } 13 console.log(Object.keys(obj)); // ['age', 'sex'] 14 console.log(Object.getOwnPropertyNames(obj)); // ['age', 'sex'] 15 16 // ② Object.getOwnPropertySymbols()：返回由指定对象中所有用作属性名的Symbol值构成的数组 17 console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(name1), Symbol(name2) ] 18 19 // ③ Reflect.ownKeys()：返回指定对象中的所有属性的属性名，包括常规属性名和Symbol值的属性名 20 console.log(Reflect.ownKeys(obj)); // [ 'age', 'sex', Symbol(name1), Symbol(name2) ]
4）使用Symbol.for()可以反复使用同一个Symbol值，该函数接收一个字符串作为参数，在调用该方法时，会首先检查是否存在以该参数命名的Symbol值，如果存在则返回这个Symbol值，如果不存在就新建并方法以该字符串命名的Symbol值。
1 // Symbol()和Symbol.for()都会产生Symbol值，它们的区别是： 2 // 使用Symbol()产生的值不会被登记在全局环境中，而Symbol.for()产生的值会被登记在全局环境中以供搜索。 3 const s6 = Symbol('age'); 4 const s7 = Symbol.for('age'); 5 const s8 = Symbol.for('age'); 6 console.log(s6 === s7); // false，因为Symbol.for()是查找已被登记在全局环境中的key 7 console.log(s7 === s8); // true 8 9 // Symbol.keyFor()：返回被登记的Symbol值 10 console.log(Symbol.keyFor(s6)); // undefined 11 console.log(Symbol.keyFor(s7)); // age 12 console.log(Symbol.keyFor(s8)); // age
7、Object
Object表示对象，它的范围很广，像常用的Array、Function、Date、RegExp都属于引用类型，此外我们还可以自定义对象。
二、判断方法
1、typeof操作符：能对使用字面量方式赋值的基本数据类型（除Null之外）做出准确判断，另外对于Function类型也能做出判断。该操作符返回小写的字符串。
1 const undef = undefined; 2 const nul = null; 3 const num = 123; 4 const str = 'asd'; 5 const bol = true; 6 const symbol = Symbol(); 7 const arr = [1, 2]; 8 const date = new Date(); 9 const reg = /^{d}$/; 10 const fun = function () { 11 console.log('function') 12 }; 13 const bolObj = new Boolean(true); 14 const numObj = new Number(123); 15 const strObj = new String('asd'); 16 17 // ① 使用typeof操作符检测： 18 // 基本数据类型：能准确检测出除Null类型之外的其他基本数据类型的变量，Null类型使用typeof返回的是object 19 // 引用类型：可以检测出Function类型，其他的引用类型都返回object 20 console.log( 21 '使用typeof检测的结果为：', 22 typeof undef, 23 typeof nul, 24 typeof num, 25 typeof str, 26 typeof bol, 27 typeof symbol, 28 typeof arr, 29 typeof date, 30 typeof reg, 31 typeof fun, 32 typeof bolObj, 33 typeof numObj, 34 typeof strObj 35 ) 36 // 使用typeof检测的结果为： 37 // undefined object number string boolean symbol 38 // object object object function object object object
2、instanceof操作符：用于检测引用类型的变量
1 // ② 使用instanceof操作符检测： 2 // 该操作符适合用于检测引用类型的对象，不能检测使用字面量方式创建的基本数据类型的变量，也不能检测Undefined和Null 3 console.log( 4 '使用instanceof检测的结果为：', 5 undef instanceof Object, 6 nul instanceof Object, 7 num instanceof Number, 8 str instanceof String, 9 bol instanceof Boolean, 10 symbol instanceof Object, 11 arr instanceof Array, 12 date instanceof Date, 13 reg instanceof RegExp, 14 fun instanceof Function, 15 bolObj instanceof Boolean, 16 numObj instanceof Number, 17 strObj instanceof String 18 ) 19 // 使用instanceof检测的结果为： 20 // false false false false false false 21 // true true true true true true true
3、constructor属性：不管是使用字面量还是构造函数创建的基本数据类型，都可以通过constructor检测出来（除了Null和Undefined），并且也可以检测出引用数据类型。
1 // ③ 使用constructor属性检测： 2 // 可以检测出除了Undefined和Null之外的基本数据类型和引用数据类型 3 console.log( 4 '使用constructor属性检测的结果为：', 5 // undef.constructor === Undefined, // Cannot read property 'constructor' of undefined 6 // nul.constructor === Null, // Cannot read property 'constructor' of null 7 num.constructor === Number, 8 str.constructor === String, 9 bol.constructor === Boolean, 10 symbol.constructor === Symbol, 11 arr.constructor === Array, 12 date.constructor === Date, 13 reg.constructor === RegExp, 14 fun.constructor === Function, 15 bolObj.constructor === Boolean, 16 numObj.constructor === Number, 17 strObj.constructor === String 18 ); 19 // 使用constructor属性检测的结果为： 20 // true true true true 21 // true true true true true true true
4、Object.prototype.toSting.call()：能对基本数据类型和引用数据类型做出准确的检测
1 // ④ 使用Object.prototype.toString.call()检测： 2 console.log( 3 '使用Object.prototype.toString.call()检测的结果为：', 4 Object.prototype.toString.call(undef), 5 Object.prototype.toString.call(nul), 6 Object.prototype.toString.call(num), 7 Object.prototype.toString.call(str), 8 Object.prototype.toString.call(bol), 9 Object.prototype.toString.call(symbol), 10 Object.prototype.toString.call(arr), 11 Object.prototype.toString.call(date), 12 Object.prototype.toString.call(reg), 13 Object.prototype.toString.call(fun), 14 Object.prototype.toString.call(bolObj), 15 Object.prototype.toString.call(numObj), 16 Object.prototype.toString.call(strObj) 17 ); 18 // 使用Object.prototype.toString.call()检测的结果为： 19 // [object Undefined] [object Null] [object Number] [object String] [object Boolean] [object Symbol] 20 // [object Array] [object Date] [object RegExp] [object Function] [object Boolean] [object Number] [object String]
该方法的返回值为[object XXX]，所以为了方便使用我们可以做一下处理
1 function judgeType(r) { 2 return Object.prototype.toString.call(r).slice(8, -1).toLowerCase(); 3 }