前端学习笔记——JavaScript数据类型

分类

• 值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol(ES6)。
• 引用数据类型：对象(Object)、数组(Array)、函数(Function)。

变量类型检测

typeof 操作符：由于 JavaScript 是弱类型的变量，因此 JavaScript 提供了一种可以检测类型的方法，也就是typeof关键字。具体用法如下：

typeof "字符串"; // string
typeof "123"; // string
typeof 123; //number
typeof true; //boolean
typeof null; // object
typeof undefined; //undefined
typeof ["zane", "urnotzane"]; //object
typeof { name: "zane", age: 18 }; //object

const func = () => {};
typeof func; //function

const sym = Symbol();
typeof sym; // symbol
复制代码

数据类型分类简介

字符串（String）

概述

字符串是存储字符的，字符串可以是任意文本。

let str = "我是字符串";
let str2 = "我也是字符串";
let str3 = "123";
复制代码

描述

• 从字符串中获取单个字符（charAt()）

  // 第一种
  let str = "zane";
  str.charAt(1); // a
  
  // 第二种（ES6）
  str[1]; // a
  复制代码

• 字符串比较

  const a = "a";
  const b = "b";
  
  a > b; // false
  a >= b; // false
  a == b; //false
  a < b; // true
  复制代码

• 基本字符串和字符串对象的区别( 对于 Boolean 和 Numbers 也同样如此.)

  JavaScript 会自动将基本字符串转换为字符串对象，只有将基本字符串转换为字符串对象才可以使用字符串对象的方法。

  let str1 = "zane";
  let str2 = new String("zane");
  
  typeof str1; // string
  typeof str2; // object
  复制代码

  valueOf方法可以将字符串对象转换为基本字符串，等同于 String.prototype.toString()。

属性

- String.length
  返回字符串长度。
- String.prototype
  表示 String 原型对象。
复制代码

常用方法

• String.prototype.concat()

  连接两个字符串文本，并返回一个新的字符串。 强烈建议使用 赋值操作符（+, +=）代替 concat 方法。

  let str1 = "zane";
  let str2 = "&tong";
  str1.concat(str2); // zane&tong
  复制代码

• String.prototype.includes()

  判断一个字符串是否包含在另一个字符串，返回 true 或 false；区分大小写。

  let str = "Hello World";
  str.includes("e"); // true
  // 字符串第三位开始查找
  str.includes("e", 2); // false
  复制代码

• String.prototype.indexOf()

  返回 String 对象中第一次出现的指定值的索引，若未找到则返回-1；区分大小写。

  let str = "Hello World";
  str.indexOf("e"); // 1
  // 从第三位开始查找
  str.indexOf(2); // -1
  复制代码

• String.prototype.match()

  当一个字符串与一个正则表达式匹配时，match()方法检索匹配项；返回值为数组。

  const str = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz";
  const regexp = /[A-E]/gi;
  // 不传参则会返回[""]
  const matches_array = str.match(regexp);
  // ['A', 'B', 'C', 'D', 'E', 'a', 'b', 'c', 'd', 'e']
  复制代码

• String.prototype.slice()

  提取一个字符串的一部分，并返回新的字符串。

  let str = "javascript";
  // 第四个字符~倒数第二个字符
  str.slice(4, -2); // scri
  复制代码

• String.prototype.split()

  将字符串对象分割成字符串数组。

  const str = "1.2.3.4";
  str.split("."); // [1,2,3,4]
  复制代码

• String.prototype.substring()

  返回开始索引到结束索引之间的一个子集。

  const str = "javascript";
  str.substring(3); // ascript
  str.substring(2, 5); // vasc
  复制代码

• String.prototype.toString()

  返回用字符串表示的特定对象。重写 Object.prototype.toString 方法。

• String.prototype.toLocaleLowerCase()/String.prototype.toLocaleUpperCase()

  根据当前区域设置，将字符串中的字符转换成大写/小写，对于大多数语言来说，与toLowerCase/toUpperCase的返回值一致。

  "ABCD".toLocaleLowerCase(); // abcd
  "abcd".toLocaleUpperCase(); // ABCD
  复制代码

• String.prototype.trim()

  去除字符串开始和结尾的空格(ES6)。

• String.prototype[@@iterator]()/[Symbol.iterator]

  返回一个新的 Iterator 对象，它遍历字符串的代码点，返回每一个代码点的字符串值。

  let str = 'zane'
  let strIterator = str[Symbol.iterator]()
  
  console.log(strIterator.next().value) // z
  console.log(strIterator.next().value) // a
  console.log(strIterator.next().value) // n
  console.log(strIterator.next().value) // e
  
  // 通过for...of使用
  for(let item of str){
    console.log(item)
  }
  // z
  // a
  // n
  // e
  复制代码

数字(Number)

描述

JavaScript 的数字类型只有一种，可以带小数点也可以不带。

let num = 123;
let num2 = 9.999;
复制代码

• 浮点
• 数值范围 由于内存原因，ECMAScript 并不能保存所有数值，在大多数浏览器中，ECMAScript 能够表示的最小值存在 Number.MIN_VALUE(5e-324)， 最大是 Number.MAX_VALUE。 isFinite()用来确定数值是否有穷的。
• NaN 即非数值。任何数值初一非数值会返回 NaN。 NaN 本身有两个非同寻常的特点：一是任何涉及 NaN 的操作都会返回 NaN；二是 NaN 与任何值都不相等，包括 NaN 本身。 isNaN()可以用来确定是否是数值。

常用方法

• String.prototype.toFixed()

  数值四舍五入保留若干位（最多20）位小数。

  let num = 320.25684
  
  num.toFixed() // 320
  num.toFixed(2)  // 320.26
  复制代码

• Number.isInteger(value)

  判断value是否为整数。

• Number.isNaN(value)

  检测value是否是NaN。

• Number.parseInt(string)/Number.parseFloat(string)

  将字符串解析为整数或浮点数。

布尔(Boolean)

只能有两个值：true 和 false

let x = true;
let y = false;
复制代码

数组(Array)

概述

• 数组对象是使用单独的变量名来存储一系列的值.数组可以用一个变量名存储所有的值，

• 并且可以用变量名访问任何一个值，数组中的每个元素都有自己的的 ID.

• 以便它可以很容易地被访问到。

• 实例

  // 创建数组
  const students = [];
  // 添加元素
  students[0] = "zane";
  students[1] = "tong";
  // 访问、使用数组
  console.log(students[0]);
  复制代码

常用方法

• 定义一个数组

  方便下面示例

  const arr = ['red', 'yello', 'blue']
  复制代码

• Array.prototype.push()

  添加元素到数组末尾。

  arr.push('orange')  // ['red', 'yello', 'blue', 'orange']
  复制代码

• Array.prototype.pop()

  删除数组末尾的元素。

  arr.pop() // ['red', 'yello', 'blue']
  复制代码

• Array.prototype.shift()

  删除数组最前面的元素

  arr.shift() // ['yello', 'blue']
  复制代码

• Array.prototype.unshift()

  添加元素到头部。

  arr.unshift('red')  // ['red', 'yello', 'blue']
  复制代码

• Array.prototype.indexOf()

  找出某个元素在数组中的索引。

  arr.indexOf('red')  // 0
  复制代码

• Array.prototype.splice()

  通过索引删除某个元素。

  // 从数组第二个元素开始删除一个元素
  // 删除多个：arr.slice(1, n)
  arr.slice(1, 1)   // ['red', 'blue']
  
  // slice()也可以用来复制数组
  let arr2 = arr.slice()   // ['red', 'blue']
  复制代码

• Array.isArray(obj)

  判断obj是否为数组。

• Array.prototype.concat()

  合并两个或多个数组并返回一个新数组，不会改变现有的数组，浅拷贝。

  const arr1 = [1,2,3]
  const arr2 = [4,5,6]
  const arr = arr1.concat(arr2)   // [1,2,3,4,5,6]
  
  // 改变参数数组不会改变新数组
  arr2.pop()  // arr: [1,2,3,4,5,6]
  
  // 可以合并如字符串，数字和布尔值（不是对象）
  arr.concat('q') // [1,2,3,4,5,6,'q']
  arr.concat({q: 7})  // [1,2,3,4,5,6,{q: 7}]
  arr.concat(true)  // [1,2,3,4,5,6,true]
  复制代码

空(null)

表示空指针对象，这也正是使用 typeof 操作符检测 null 时会返回'object'的原因，如果定义的变量将来用于保存对象，那么最好将变量初始化为 null。但是null==undefined总是会返回 true。

未定义(undefined)

声明变量但并未初始化，如下：

let msg; // undefined
复制代码

但令人困惑的是，typeof 操作符对未初始化的变量会返回'undefined'，对未声明的变量同样也会返回'undefined'。

Object 类型

• 定义 Object 对象其实就是一组数据和功能的集合。可以通过 new 操作符进行创建。如下：

  let obj = new Obeject();
  复制代码

• 属性和方法 Object 的每个实例都具有下列属性和方法。

  • constructor：保存着用于创建当前对象的函数。对于前面的例子而言，构造函数就是 Object()。
  • hasOwnProperty(propertyName)：用于检查给定的属性在当前对象实例中（而不是在实例的原型中）是否存在。如：obj.hasOwnProperty('name')。
  • isPrototypeOf(object)：检查传入的对象是否是当前对象的原型。
  • propertyIsEnum 而 able(propertyName)：检查给定的属性能否使用 for-in 语句来枚举。
  • toLocaleString()：返回对象的字符串表示，告白字符串与执行环境的地区对应。
  • toString()：返回对象的字符串。
  • valueOf()：返回对象的字符串、数值或布尔值表示。通常与 toString()的返回值相同。

Symbol(ES6)

概述

ES5 的对象属性名都是字符串，容易造成属性名冲突，如果有一种机制，保证每个属性名都是独一无二的，就可以从根本上解决属性名冲突的问题。于是 ES6 引入了Symbol，用来表示独一无二的值。

Symbol 值通过Symbol函数生成。就是说，对象的属性名现在有两种类型，一种是字符串，另一种就是新增的 Symbol 类型。

注意：Symbol 生成的是一个原始类型的值，而不是对象，因此Symbol函数前不能使用 new 命令，否则报错。

使用

• 为了便于区分，Symbol 函数可以接受一个字符串作为参数：

  let s1 = Symbol();
  let s2 = Symbol("zane");
  let s3 = Symbol("tong");
  
  console.log(s1); // Symbol()
  console.log(s2); // Symbol(zane)
  console.log(s3); // Symbol(tong)
  
  s1.toString(); // "Symbol()"
  s2.toString(); // "Symbol(zane)"
  s3.toString(); // "Symbol(tong)"
  复制代码

• 如果 Symbol 的参数是一个对象，就会调用该对象的toString方法，将其转为字符串，然后才生成一个 Symbol 值：

  const obj = {
    toString() {
      return "zane";
    }
  };
  const sym = Symbol(obj);
  console.log(sym); // Symbol(zane)
  
  Symbol(obj) === Symbol(obj); // false
  复制代码

• Symbol 值不能与其他类型的值进行运算，但是可以显式的转为字符串和布尔值。

  const sym = Symbol("zane");
  "my symbol is" + sym; // TypeError: can't convert symbol to string
  
  String(sym); // "Symbol(zane)"
  sym.toString(); // "Symbol(zane)"
  
  Boolean(sym); // true
  !sym; // false
  
  Number(sym); // TypeError
  sym + 2; // TypeError
  复制代码

• 作为属性名使用

  实例：

  let sym = Symbol();
  
  // 第一种写法
  let a = {};
  a[sym] = "zane";
  
  // 第二种写法
  let a = {
    [sym]: "zane"
  };
  
  // 第三种写法
  let a = {};
  Object.defineProperty(a, sym, { value: "zane" });
  
  // 以上写法得到同样的结果
  a[sym]; // 'zane'
  复制代码

常用方法

• Symbol.for(key)

  根据给定的key值，从运行时的symbol注册表中找到对应的symbol，如果找不到，则会新建一个与该key值关联的symbol，并放入全局的symbol注册表中。

  Symbol.for('zane')  // 创建
  Symbol.for('zane')  // 读取
  Symbol.for('zane') === Symbol.for('zane') // true
  复制代码

• Symbol.keyFor(sym)

  获取symbol注册表中与某个symbol关联的键。

  let sym = Symbol.for('zane')
  Symbol.keyFor(sym)  // zane
  复制代码