ES6 基本数据类型整理

Wesley13
• 阅读 650

操作系统: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 属性;
点赞
收藏
评论区
推荐文章
晴空闲云 晴空闲云
3年前
javascript实践教程-05-数据类型
本节目标1.掌握js中7种数据类型。2.掌握5种基本数据类型number、string、boolean、null、undefined的声明。3.掌握js中数组的声明和数组相关的方法。4.掌握js中对象的声明和属性、方法的使用。内容摘要本篇介绍了js中的7种数据类型,其中5种基本数据类型:number、string、boolean、null、unde
待兔 待兔
5个月前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
CuterCorley CuterCorley
3年前
C语言入门系列之2.数据类型、运算符和表达式
一、数据类型C语言常见数据类型如下:1.数据类型基本数据类型基本数据类型最主要的特点是,其值不可以再分解为其他类型。也可以说,基本数据类型是自我说明的。构造数据类型构造数据类型是根据已定义的一个或多个数据类型用构造的方法来定义的。也就是说,一个构造类型的值可以分解成若干个“成员”或“元素”。每个“成员”都是一个基本数据类型或
LinMeng LinMeng
3年前
js之传值与传址/undefined和null/严格模式
传值与传址基本数据类型有五种Undefined、Null、Boolean、Number和String引用数据类型有两种object,array,fn两种数据类型的区别:1.存储位置不同原始数据类型直接存储在栈(stack)中简单数据段,占据空间小,大小固定,属于被频繁使用的数据,所以存储在栈中;引用数据类型直接存
梦想橡皮擦 梦想橡皮擦
3年前
2. 无门槛学会数据类型与输入、输出函数,滚雪球学 Python
学习一门语言应该是一件充满乐趣的事情,为什么要把它变难呢?二、Python基本数据类型与输入、输出函数2.1基本数据类型对于任何一门语言都存在一些基本类型,Python也不例外,只不过数据类型在Python中要远远比其他语言简单,基本分为以下几种。1.数值数据类型,常见的是整数和浮点数2.布尔值数据类型,就是常说的真和假
Wesley13 Wesley13
3年前
Java中只存在值传递
在Java中并不存在引用传递(即地址传递),对于变量(可以是基本数据类型,也可以是引用数据类型)而言,可以理解为就是一个地址。传递,存在着拷贝操作。举个列子:1、在方法参数上,传递的是基本数据类型。定义了一个用于交换两个整型数的方法:publicstaticvoidswap(inta,intb){in
Stella981 Stella981
3年前
JavaScript的深拷贝和浅拷贝
一、数据类型数据分为基本数据类型(String,Number,Boolean,Null,Undefined,Symbol)和对象数据类型。、1.基本数据类型的特点:直接存储在栈(stack)中的数据2.引用数据类型的特点:存储的是该对象在栈中引用,真实的数据放在堆内存里。引用数据类型在栈中存储了指针,该指针指向堆中该实
Wesley13 Wesley13
3年前
Java中的基本数据类型和引用数据类型的区别
一、前言众所周知Java是一种强类型语言,在Java语言中,Java的数据类型一共分为两大类,分别为基本数据类型和引用数据类型,其中基本数据类型细分小类可分为整数类型、浮点类型、字符类型、布尔类型这四小类。二、基本数据类型和引用数据类型1\.基本数据类型只有
Wesley13 Wesley13
3年前
Java之基本数据类型
本文章分为四个部分:1、基本数据类型的介绍2、类型转换3、装箱和拆箱4、有道练习5、增:编码的那点事儿_\基本数据类型的介绍_Java有8种基本数据类型,其中有
Wesley13 Wesley13
3年前
Java int与Integer的区别
int与integer的区别从大的方面来说就是基本数据类型与其包装类的区别:int是基本类型,直接存数值,而integer是对象,用一个引用指向这个对象1.Java中的数据类型分为基本数据类型和复杂数据类型int是前者而integer是后者(也就是一个类);因此在类进行初始化时int类的变量初始为0.而Integer的变量则初始化为n