ES6 基本数据类型整理


声明:本文转载自https://my.oschina.net/okabe/blog/1559380,转载目的在于传递更多信息,仅供学习交流之用。如有侵权行为,请联系我,我会及时删除。

操作系统:Windows10

运行环境:NodeJS v8.1.2

Shell:Windows PowerShell

ES6 基本数据类型整理

简介:对 7 种数据类型进行简单整理 

1 定义

在 ES6 中共有 7 种基本数据类型:undefined、null、Boolean、String、Number、Object、Symbol  undefined(未定义):表示变量未初始化,属性不存在,函数没有返回值 null(空值):表示变量为空值 Boolean(布尔值):true 或 false String(字符串):单引号字符串 ‘’  或 双引号字符串 "" Number(数值):范围 [-2^53, 2^53] Object(对象):表示属性的集合,其中每个属性由“名/值对”构成 Symbol(符号):表示独一无二(ES6 新增) 

2 使用

2.1 undefined

// 1 变量取值 let a; console.log(a);             // undefined let b = undefined; console.log(b);             // undefined // 2 属性查询 let obj = { b: undefined, }; console.log(obj.a);         // undefined console.log(obj.b);         // undefined if('b' in obj) {   console.log(true);        // true } // 3 函数返回值 function func () {} console.log(func());        // undefined function func2 (arg) { return arg; } let arg = undefined; console.log(func2(arg));    // undefined arg = 'something'; console.log(func2(arg));    // something 
小结: 1 在变量取值时得到 undefined ,表示变量未定义; 2 在对象的属性查询时得到 undefined ,表示查询的属性的值未定义,不能据此判断属性是否存在; 3 在函数返回值时得到 undefined ,表示此次调用该函数的返回值未定义,不能说明该函数没有返回值。 

2.2 null

// 1 变量取值 let a = null; console.log(a);             // null // 2 属性查询 let obj = { b: null, }; console.log(obj.b);         // null // 3 函数返回值 function func (arg) { return arg; } let arg = null; console.log(func(arg));     // null 
小结: 1 在变量取值时得到 null ,表示变量为空值; 2 在对象的属性查询时得到 null ,表示查询的属性的值为空值,可以判断属性存在; 3 在函数返回值时得到 null ,表示此次调用该函数的返回值为空值,说明该函数有返回值。 

2.3 Boolean

let b1 = false; let b2 = Boolean(undefined);    // false let b3 = Boolean(null);         // false let b4 = Boolean(0);            // false let b5 = Boolean(-0);           // false let b6 = Boolean(NaN);          // false let b7 = Boolean('');           // false let b8 = Boolean("");           // false console.log(b1, b2, b3, b4); console.log(b5, b6, b7, b8); let bool1 = true; let bool2 = Boolean('0');       // true let bool3 = Boolean("0");       // true let bool4 = Boolean(1);         // true let bool5 = Boolean(Infinity);  // true let bool6 = Boolean(-Infinity); // true let bool7 = Boolean({});        // true let bool8 = Boolean(Symbol());  // true console.log(bool1, bool2, bool3, bool4); console.log(bool5, bool6, bool7, bool8); let o1 = Boolean(Boolean(true));    // true let o2 = Boolean(Boolean(false));   // false let o3 = Boolean(String(''));       // false let o4 = Boolean(String(""));       // false let o5 = Boolean(String('abc'));    // true let o6 = Boolean(Number(0));        // false let o7 = Boolean(Number(1));        // true let o8 = Boolean(Object());         // true console.log(o1, o2, o3, o4); console.log(o5, o6, o7, o8); let obj1 = Boolean(new Boolean(true));    // true let obj2 = Boolean(new Boolean(false));   // true let obj3 = Boolean(new String(''));       // true let obj4 = Boolean(new String(""));       // true let obj5 = Boolean(new String('abc'));    // true let obj6 = Boolean(new Number(0));        // true let obj7 = Boolean(new Number(1));        // true let obj8 = Boolean(new Object());         // true console.log(obj1, obj2, obj3, obj4); console.log(obj5, obj6, obj7, obj8);  
小结:其它 6 中基本数据类型转 Boolean 1 undefined 转 Boolean 得 false ; 2 null      转 Boolean 得 false ; 3 {}        转 Boolean 得 true ; 4 Symbol()  转 Boolean 得 true ; 5 0|-0|NaN  转 Boolean 得 false ,其它数字   得 true ; 6 '' or ""  转 Boolean 得 false ,非空字符串 得 true ; 7 通过各基本类型的包装对象的转换函数转换后,在转 Boolean ,结果与1~6点一致; 8 各包装对象转 Boolean ,由于包装对象都是对象,因此转换都得 true 。 

2.4 String

let str1 = 'abc'; let str2 = "abc"; let str3 = 'abc"def"ghi'; let str4 = "abc'def'ghi"; let str5 = "No, I can't."; let str6 = 'No, I can\'t.'; let str7 = 'abc\ def\ hij'; let str8 = 'abc\  def\  hij'; console.log(str1);  // abc console.log(str2);  // abc console.log(str3);  // abc"def"ghi console.log(str4);  // abc'def'ghi console.log(str5);  // No, I can't. console.log(str6);  // No, I can't. console.log(str7);  // abcdefghi console.log(str8);  // abc def ghi let s1 = 'Hello'; let s2 = "World"; let s3 = s1 + ' ' + s2.toLowerCase(); console.log(s1);        // Hello console.log(s2);        // World console.log(s3);        // Hello world console.log(s3.length); // 11 
小结: 1 字符串直接量可以由 单引号 或 双引号 括起来(参考str1~str8); 2 字符串直接量在行末由反斜线“\”结尾,字符串可以拆分到多行(参考str7|str8); 3 字符串直接量中可以使用转义字符(参考str6); 4 字符串的连接使用加号“+”(参考s3); 5 可以直接通过字符串直接量调用字符串对象的属性/方法(参考s3)。  JavaScript 转义字符表 转义字符        含义 \o              NUL 字符(\u0000) \b              退格符(\u0008) \t              水平制表符(\u0009) \n              换行符(\u000A) \v              垂直制表符(\u000B) \f              换页符(\u000C) \r              回车符(\u000D) \"              双引号(\u0022) \'              单引号(\u0027) \\              反斜线(\u005C) \xXX            由两位十六进制数XX指定的 Latin-l 字符 \uXXXX          由四位十六进制数XXXX指定的 Unicode 字符 

2.5 Number

// part 1 let n1 = 0; let n2 = 0xff; let n3 = 1.01; let n4 = .02; let n5 = 5.05e22; let n6 = 2.4E-10; console.log(n1);        // 0 console.log(n2);        // 255 console.log(n3);        // 1.01 console.log(n4);        // 0.02 console.log(n5);        // 5.05e+22 console.log(n6);        // 2.4e-10 console.log(1 + 1);     // 2 console.log(1 - 1);     // 0 console.log(2 * 4);     // 8 console.log(5 / 2);     // 2.5 console.log(5 % 2);     // 1 console.log(5.5 % 2.5); // 0.5 
// part 2 console.log(1 / 0);     // Infinity console.log(1 / -0);    // -Infinity console.log(-1 / -0);   // Infinity console.log(0 / 0);     // NaN 
// part 3 console.log(NaN === NaN);         // false console.log(0 === -0);             // true console.log(Infinity === -Infinity);   // false 
小结: 1 JavaScript 不区分整数和浮点数,数字直接量参考 n1~n6 ; 2 JavaScript 预定义了全局变量 Infinity 和 NaN,分别表示 无穷大 和 非数字(参考 part2); 3 NaN 不等于自身(参考 part 3); 

2.6 Object

// part 1 - 方法一 let obj1 = {     x:1,     y:2,     func: function () { return 'hello, world'; }, }; console.log(obj1);        // { x: 1, y: 2, func: [Function: func] } console.log(obj1.x);      // 1 console.log(obj1.y);      // 2 console.log(obj1.func()); // hello world 
// part 2 - 方法二 function MyClass () {     this.x = 1;     this.y = 2;     this.func = function () { return 'hello world'; }; } MyClass.prototype.a = 10; MyClass.prototype.b = 20; MyClass.prototype.func = function () {   return 'Hello World'; }; MyClass.a = 100; MyClass.b = 200; MyClass.func = function () {   return 'Hello, World!'; }; let obj2 = new MyClass(); console.log(obj2);            // MyClass { x: 1, y: 2, func: [Function] } console.log(obj2.x);          // 1 console.log(obj2.y);          // 2 console.log(obj2.func());     // hello world console.log(obj2.a);          // 10 console.log(obj2.b);          // 20 console.log(MyClass.a);       // 100 console.log(MyClass.b);       // 200 console.log(MyClass.func());  // Hello, World! 
// part 3 - 方法三 let objectPrototype = {     a: 10,     b: 20,     func: function () { return 'Hello World'; }, } let propertyDescriptorObject = {     x: { value: 1, writable: true, enumerable: true, configurable: true },     y: { value: 2, writable: true, enumerable: true, configurable: true },     func: { value: function () { return 'hello world'; },             writable: false,             enumerable: true,             configurable: false     }, } let obj3 = Object.create(objectPrototype, propertyDescriptorObject); console.log(obj3);        // { x: 1, y: 2, f: [Getter/Setter], func: [Function: value] } console.log(obj3.x);      // 1 console.log(obj3.y);      // 2 console.log(obj3.func()); // hello world console.log(obj3.a);      // 10 console.log(obj3.b);      // 20 
小结: 1 对象有三种创建方法: 1.1 标识符 = 对象直接量 1.2 标识符 = new 构造函数() 1.3 标识符 = Object.create() 2 通过对象直接量创建的对象,相当于创建一个匿名对象,使用标识符去访问此对象,对象的原型为 Object.prototype ; 3 通过 new 关键字创建的对象,首先需要为待创建的对象定义构造函数,可以通过构造函数为新对象指定其原型,也可以使用构造函数模仿类属性与类方法; 4 通过 Object.create() 创建对象,必须提供新对象的原型作为该方法的第一个参数,可选提供新对象的属性描述对象作为该方法的第二个参数。 

2.7 Symbol

// part 1 let s1 = Symbol(); let s2 = Symbol(); console.log(s1);        // Symbol() console.log(s2);        // Symbol() console.log(s1 === s2); // fasle 
// part 2 let s1 = Symbol('a'); let s2 = Symbol('a'); console.log(s1);        // Symbol(a) console.log(s2);        // Symbol(a) console.log(s1 === s2); // false 
// part 3 let mySymbol = Symbol();  let a = {}; a[mySymbol] = 'hello 1'; console.log(a[mySymbol]);   // hello 1  let b = {     [mySymbol]: 'hello 2', }; console.log(b[mySymbol]);   // hello 2  let c = {}; Object.defineProperty(c, mySymbol, { value: 'hello 3' }); console.log(c[mySymbol]);   // hello 3 
// part 4 let s1 = Symbol('hello'); let s2 = Symbol('world'); let obj = {     a: 1,     b: 2,     [s1]: 'this is s1',     [s2]: 'this is s2', }; console.log(obj);     // { a: 1, b: 2, [Symbol(hello)]: 'this is s1', [Symbol(world)]: 'this is s2' } for(p in obj) {   console.log(p);     // a }                     // b console.log(Object.keys(obj));                  // [ 'a', 'b' ] console.log(Object.getOwnPropertyNames(obj));   // [ 'a', 'b' ] console.log(Object.getOwnPropertySymbols(obj)); // [ Symbol(hello), Symbol(world) ]  let obj2 = {}; Object.defineProperty(obj2, s1, { value: 'hello', writable: false, enumerable: false, configurable: false }); Object.defineProperty(obj2, s2, { value: 'world', writable: true, enumerable: true, configurable: true }); console.log(obj2);                              // { [Symbol(world)]: 'world' } for(p in obj2) {   console.log(p);                               // nothing output } console.log(Object.keys(obj2));                 // [ ] console.log(Object.getOwnPropertyNames(obj2));  // [ ] console.log(obj2[s1]);            // hello console.log(obj2[s2]);            // world obj2[s1] = 'HELLO'; obj2[s2] = 'WORLD'; console.log(obj2[s1]);            // hello console.log(obj2[s2]);            // WORLD delete obj2[s1]; delete obj2[s2]; console.log(obj2[s1]);            // hello console.log(obj2[s2]);            // undefined 
// part 5 let mySymbol = Symbol(); let yourSymbol = Symbol(); let obj = {}; obj[mySymbol] = 'hello'; obj[yourSymbol] = 'world'; console.log(obj);   // { [Symbol()]: 'hello', [Symbol()]: 'world' }  let extendObj = Object.create(obj); console.log(extendObj);               // { } console.log(extendObj[mySymbol]);     // hello console.log(extendObj[yourSymbol]);   // world let exMySymbol = Symbol(); let exYourSymbol = Symbol(); extendObj[exMySymbol] = 'HELLO'; extendObj[exYourSymbol] = 'WORLD'; console.log(extendObj);               // { } console.log(extendObj[mySymbol]);     // hello console.log(extendObj[yourSymbol]);   // world console.log(extendObj[exMySymbol]);   // HELLO console.log(extendObj[exYourSymbol]); // WORLD 
小结: 1 Symbol 用于定义独一无二的属性名 或 常量; 2 Symbol 属性为公共属性; 3 Symbol 属性不会出现在 for...in 、 for...of 循环中; 4 Symbol 属性不会被 Object.keys() 、 Object.getOwnPropertyNames() 返回; 5 可以使用 Object.getOwnPropertySymbols() 返回指定对象的所有 Symbol 属性; 

本文发表于2017年11月01日 22:34
(c)注:本文转载自https://my.oschina.net/okabe/blog/1559380,转载目的在于传递更多信息,并不代表本网赞同其观点和对其真实性负责。如有侵权行为,请联系我们,我们会及时删除.

阅读 1905 讨论 0 喜欢 0

抢先体验

扫码体验
趣味小程序
文字表情生成器

闪念胶囊

你要过得好哇,这样我才能恨你啊,你要是过得不好,我都不知道该恨你还是拥抱你啊。

直抵黄龙府,与诸君痛饮尔。

那时陪伴我的人啊,你们如今在何方。

不出意外的话,我们再也不会见了,祝你前程似锦。

这世界真好,吃野东西也要留出这条命来看看

快捷链接
网站地图
提交友链
Copyright © 2016 - 2021 Cion.
All Rights Reserved.
京ICP备2021004668号-1