js数据类型

251 阅读18分钟

1.概述

js的数据类型

基本类型(单类型):Number、String、Boolean、Null、undefined、object、symbol、bigInt。 引用类型:object。里面包含的 function、Array、Date。

如何判断数据类型

1、typeof 操作符(通用:上面有内容有讲到)

2、toString ( )
作用:其他类型转成 string 的方法 支持:number、boolean、string、object 不支持:null 、undefined

3、toLocaleString ( ) 把数组转成本地字符串

4、检测数组类型的方法

① instanceof 操作符

②对象的 constructor 属性

③ Array.isArray( ) 检验值是否为数组

== 和 === 有什么区别,什么场景下使用?

简单理解就是 == 就是先比较数据类型是否一样。=== 类型不同直接就是 false。 blog.csdn.net/u013592575/…

2.null,undefined 和布尔值

null,undefined

nullundefined都可以表示“没有”,含义非常相似。将一个变量赋值为undefinednull,老实说,语法效果几乎没区别。

null是一个表示“空”的对象,转为数值时为0undefined是一个表示"此处无定义"的原始值,转为数值时为NaN

布尔值

下列运算符会返回布尔值:

  • 前置逻辑运算符: ! (Not)
  • 相等运算符:===!====!=
  • 比较运算符:>>=<<= 注意,空数组([])和空对象({})对应的布尔值,都是true

3.数值

概述

整数和浮点数

JavaScript 内部,所有数字都是以64位浮点数形式储存,即使整数也是如此。所以,11.0是相同的,是同一个数。

由于浮点数不是精确的值,所以涉及小数的比较和运算要特别小心。

0.1 + 0.2 === 0.3
// false

数值精度

精度最多只能到53个二进制位,这意味着,绝对值小于2的53次方的整数,即-253到253,都可以精确表示。

数值范围

JavaScript 能够表示的数值范围为21024到2-1023(开区间),超出这个范围的数无法表示。 如果一个数大于等于2的1024次方,那么就会发生“正向溢出”,即 JavaScript 无法表示这么大的数,这时就会返回Infinity

Math.pow(2, 1024) // Infinity

如果一个数小于等于2的-1075次方(指数部分最小值-1023,再加上小数部分的52位),那么就会发生为“负向溢出”,即 JavaScript 无法表示这么小的数,这时会直接返回0。

Math.pow(2, -1075) // 0

JavaScript 提供Number对象的MAX_VALUEMIN_VALUE属性,返回可以表示的具体的最大值和最小值。

Number.MAX_VALUE // 1.7976931348623157e+308
Number.MIN_VALUE // 5e-324

数值的表示法

1.用字面形式直接表示,比如35(十进制)和0xFF(十六进制)。

2.数值也可以采用科学计数法表示,下面是几个科学计数法的例子。

123e3 // 123000
123e-3 // 0.123
-3.1E+12
.1e-23

数值的进制

使用字面量(literal)直接表示一个数值时,JavaScript 对整数提供四种进制的表示方法:十进制、十六进制、八进制、二进制。

  • 十进制:没有前导0的数值。
  • 八进制:有前缀0o0O的数值,或者有前导0、且只用到0-7的八个阿拉伯数字的数值。
  • 十六进制:有前缀0x0X的数值。
  • 二进制:有前缀0b0B的数值。 默认情况下,JavaScript 内部会自动将八进制、十六进制、二进制转为十进制。

特殊数值

正零和负零

javaScript 内部实际上存在2个0:一个是+0,一个是-0,区别就是64位浮点数表示法的符号位不同。它们是等价的。

-0 === +0 // true

唯一有区别的场合是,+0-0当作分母,返回的值是不相等的。

(1 / +0) === (1 / -0) // false

NaN

NaN是 JavaScript 的特殊值,表示“非数字”(Not a Number),主要出现在将字符串解析成数字出错的场合。

5 - 'x' // NaN

另外,一些数学函数的运算结果会出现NaN

Math.acos(2) // NaN
Math.log(-1) // NaN
Math.sqrt(-1) // NaN

0除以0也会得到NaN

0 / 0 // NaN

NaN不是独立的数据类型,而是一个特殊数值,它的数据类型依然属于Number

NaN不等于任何值,包括它本身。

NaN === NaN // false

NaN与任何数(包括它自己)的运算,得到的都是NaN

Infinity

1 / 0 // Infinity

Infinity大于一切数值(除了NaN),-Infinity小于一切数值(除了NaN)。

Infinity > 1000 // true
-Infinity < -1000 // true

InfinityNaN比较,总是返回false

Infinity > NaN // false

与数值相关的全局方法

parseInt()

parseInt方法用于将字符串转为整数。

如果字符串头部有空格,空格会被自动去除。

字符串转为整数的时候,是一个个字符依次转换,如果遇到不能转为数字的字符,就不再进行下去,返回已经转好的部分。

如果字符串的第一个字符不能转化为数字(后面跟着数字的正负号除外),返回NaN

parseInt的返回值只有两种可能,要么是一个十进制整数,要么是NaN

如果字符串以0x0X开头,parseInt会将其按照十六进制数解析。

如果字符串以0开头,将其按照10进制解析。

parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat会将空字符串转为NaN

isNaN()

isNaN方法可以用来判断一个值是否为NaN

对于字符串、对象和数组,isNaN返回true

对于空数组和只有一个数值成员的数组,isNaN返回false

判断NaN更可靠的方法是,利用NaN为唯一不等于自身的值的这个特点,进行判断。

function myIsNaN(value) {
  return value !== value;
}

isFinite()

sFinite方法返回一个布尔值,表示某个值是否为正常的数值。 除了Infinity-InfinityNaNundefined这几个值会返回falseisFinite对于其他的数值都会返回true

5.字符串

概述

定义

单引号字符串的内部,可以使用双引号。双引号字符串的内部,可以使用单引号。

如果要在单引号字符串的内部,使用单引号,就必须在内部的单引号前面加上反斜杠,用来转义。

如果长字符串必须分成多行,可以在每一行的尾部使用反斜杠。

反斜杠的后面必须是换行符,而不能有其他字符(比如空格),否则会报错。

连接运算符(+)可以连接多个单行字符串

如果想输出多行字符串,有一种利用多行注释的变通方法。

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"

转义

需要用反斜杠转义的特殊字符,主要有下面这些。

  • \0 :null(\u0000
  • \b :后退键(\u0008
  • \f :换页符(\u000C
  • \n :换行符(\u000A
  • \r :回车键(\u000D
  • \t :制表符(\u0009
  • \v :垂直制表符(\u000B
  • ' :单引号(\u0027
  • " :双引号(\u0022
  • \ :反斜杠(\u005C

字符串与数组

字符串可以被视为字符数组,因此可以使用数组的方括号运算符,用来返回某个位置的字符(位置编号从0开始)。

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"


无法改变字符串之中的单个字符。

length 属性

length属性返回字符串的长度,该属性也是无法改变的。

字符集

JavaScript 使用 Unicode 字符集。

JavaScript 不仅以 Unicode 储存字符,还允许直接在程序中使用 Unicode 码点表示字符,即将字符写成\uxxxx的形式,其中xxxx代表该字符的 Unicode 码点。比如,\u00A9代表版权符号。

var s = '\u00A9';
s // "©"

解析代码的时候,JavaScript 会自动识别一个字符是字面形式表示,还是 Unicode 形式表示。输出给用户的时候,所有字符都会转成字面形式。

var f\u006F\u006F = 'abc';
foo // "abc"

每个字符在 JavaScript 内部都是以16位(即2个字节)的 UTF-16 格式储存。

Base64 转码

有时,文本里面包含一些不可打印的符号,比如 ASCII 码0到31的符号都无法打印出来,这时可以使用 Base64 编码,将它们转成可以打印的字符。

另一个场景是,有时需要以文本格式传递二进制数据,那么也可以使用 Base64 编码。

所谓 Base64 就是一种编码方法,可以将任意值转成 0~9、A~Z、a-z、+/这64个字符组成的可打印字符。使用它的主要目的,不是为了加密,而是为了不出现特殊字符,简化程序的处理。

JavaScript 原生提供两个 Base64 相关的方法。

  • btoa():任意值转为 Base64 编码
  • atob():Base64 编码转为原来的值

注意,这两个方法不适合非 ASCII 码的字符,会报错。

btoa('你好') // 报错

要将非 ASCII 码字符转为 Base64 编码,必须中间插入一个转码环节,再使用这两个方法。

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

6.对象

概述

生成方法

对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合。

var obj = {
  foo: 'Hello',
  bar: 'World'
};

键名

对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名)

如果键名是数值,会被自动转为字符串。

如果键名不符合标识名的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错。

对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型。如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用。

如果属性的值还是一个对象,就形成了链式引用。

var o1 = {};
var o2 = { bar: 'hello' };

o1.foo = o2;
o1.foo.bar // "hello"

对象的引用

如果不同的变量名指向同一个对象,那么它们都是这个对象的引用,也就是说指向同一个内存地址。修改其中一个变量,会影响到其他所有变量。

表达式还是语句?

JavaScript 引擎的做法是,如果遇到这种情况,无法确定是对象还是代码块,一律解释为代码块。

{ console.log(123) } // 123

如果要解释为对象,最好在大括号前加上圆括号。因为圆括号的里面,只能是表达式,所以确保大括号只能解释为对象。

({ foo: 123 }) // 正确
({ console.log(123) }) // 报错

这种差异在eval语句(作用是对字符串求值)中反映得最明显。

eval('{foo: 123}') // 123
eval('({foo: 123})') // {foo: 123}

上面代码中,如果没有圆括号,eval将其理解为一个代码块;加上圆括号以后,就理解成一个对象。

属性的操作

属性的读取

读取对象的属性,有两种方法,一种是使用点运算符,还有一种是使用方括号运算符。

var obj = {
  p: 'Hello World'
};

obj.p // "Hello World"
obj['p'] // "Hello World"

请注意,如果使用方括号运算符,键名必须放在引号里面,否则会被当作变量处理。

方括号运算符内部还可以使用表达式。

obj['hello' + ' world']
obj[3 + 3]

数字键可以不加引号,因为会自动转成字符串。

obj[0.7] // "Hello World"

注意,数值键名不能使用点运算符(因为会被当成小数点),只能使用方括号运算符。

属性的赋值

点运算符和方括号运算符,不仅可以用来读取值,还可以用来赋值。

属性的查看

查看一个对象本身的所有属性,可以使用Object.keys方法。

属性的删除:delete 命令

delete命令用于删除对象的属性,删除成功后返回true

delete obj.p // true

注意,删除一个不存在的属性,delete不报错,而且返回true

只有一种情况,delete命令会返回false,那就是该属性存在,且不得删除。

需要注意的是,delete命令只能删除对象本身的属性,无法删除继承的属性

属性是否存在:in 运算符

in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),它不能识别哪些属性是对象自身的,哪些属性是继承的。

'p' in obj // true

可以使用对象的hasOwnProperty方法判断一下,是否为对象自身的属性。

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

属性的遍历:for...in 循环

for...in循环用来遍历一个对象的全部属性。

for...in循环有两个使用注意点。

  • 它遍历的是对象所有可遍历(enumerable)的属性,会跳过不可遍历的属性。
  • 它不仅遍历对象自身的属性,还遍历继承的属性。

对象都继承了toString属性,但是for...in循环不会遍历到这个属性。

所以使用for...in的时候,应该结合使用hasOwnProperty方法,在循环内部判断一下,某个属性是否为对象自身的属性。

var person = { name: '老张' };

for (var key in person) {
  if (person.hasOwnProperty(key)) {
    console.log(key);
  }
}
// name

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

建议不要使用with语句,可以考虑用一个临时变量代替with

with(obj1.obj2.obj3) {
  console.log(p1 + p2);
}

// 可以写成
var temp = obj1.obj2.obj3;
console.log(temp.p1 + temp.p2);

7.函数

概述

函数的声明

javaScript 有三种声明函数的方法。

(1)function 命令 (2)函数表达式 (3)Function 构造函数 Function构造函数接受三个参数,除了最后一个参数是add函数的“函数体”,其他参数都是add函数的参数。

var add = new Function(
  'x',
  'y',
  'return x + y'
);

// 等同于
function add(x, y) {
  return x + y;
}

函数的重复声明

如果同一个函数被多次声明,后面的声明就会覆盖前面的声明。

圆括号运算符,return 语句和递归

调用函数时,要使用圆括号运算符。圆括号之中,可以加入函数的参数。

JavaScript 引擎遇到return语句,就直接返回return后面的那个表达式的值,后面即使还有语句,

return语句不是必需的,如果没有的话,该函数就不返回任何值,或者说返回undefined

函数可以调用自身,这就是递归(recursion)。下面就是通过递归,计算斐波那契数列的代码。

function fib(num) {
  if (num === 0) return 0;
  if (num === 1) return 1;
  return fib(num - 2) + fib(num - 1);
}

fib(6) // 8

第一等公民

JavaScript 语言将函数看作一种值,与其它值(数值、字符串、布尔值等等)地位相同。凡是可以使用值的地方,就能使用函数。

函数名的提升

注意,如果像下面例子那样,采用function命令和var赋值语句声明同一个函数,由于存在函数提升,最后会采用var赋值语句的定义。

var f = function () {
  console.log('1');
}

function f() {
  console.log('2');
}

f() // 1

函数的属性和方法

name 属性

函数的name属性返回函数的名字。

function f1() {}
f1.name // "f1"

如果是通过变量赋值定义的函数,那么name属性返回变量名。

var f2 = function () {};
f2.name // "f2"

length 属性

函数的length属性返回函数预期传入的参数个数,即函数定义之中的参数个数。

length属性提供了一种机制,判断定义时和调用时参数的差异,以便实现面向对象编程的“方法重载”(overload)。

toString()

利用这一点,可以变相实现多行字符串。

var multiline = function (fn) {
  var arr = fn.toString().split('\n');
  return arr.slice(1, arr.length - 1).join('\n');
};

function f() {/*
  这是一个
  多行注释
*/}

multiline(f);
// " 这是一个
//   多行注释"

函数作用域

定义

作用域(scope)指的是变量存在的范围。在 ES5 的规范中,JavaScript 只有两种作用域:一种是全局作用域,变量在整个程序中一直存在,所有地方都可以读取;另一种是函数作用域,变量只在函数内部存在。ES6 又新增了块级作用域,

函数内部的变量提升

var命令声明的变量,不管在什么位置,变量声明都会被提升到函数体的头部。

函数本身的作用域

函数本身也是一个值,也有自己的作用域。它的作用域与变量一样,就是其声明时所在的作用域,与其运行时所在的作用域无关。

参数

概述

函数运行的时候,有时需要提供外部数据,不同的外部数据会得到不同的结果,这种外部数据就叫参数。

参数的省略

函数参数不是必需的,JavaScript 允许省略参数。

传递方式

函数参数如果是原始类型的值(数值、字符串、布尔值),传递方式是传值传递(passes by value)。这意味着,在函数体内修改参数值,不会影响到函数外部。

var p = 2;

function f(p) {
  p = 3;
}
f(p);

p // 2

但是,如果函数参数是复合类型的值(数组、对象、其他函数),传递方式是传址传递(pass by reference)。也就是说,传入函数的原始值的地址,因此在函数内部修改参数,将会影响到原始值。 注意,如果函数内部修改的,不是参数对象的某个属性,而是替换掉整个参数,这时不会影响到原始值。

var obj = [1, 2, 3];

function f(o) {
  o = [2, 3, 4];
}
f(obj);

obj // [1, 2, 3]

同名参数

如果有同名的参数,则取最后出现的那个值。

arguments 对象

arguments对象包含了函数运行时的所有参数

严格模式下,arguments对象与函数参数不具有联动关系。也就是说,修改arguments对象不会影响到实际的函数参数。

var f = function(a, b) {
  'use strict'; // 开启严格模式
  arguments[0] = 3;
  arguments[1] = 2;
  return a + b;
}

f(1, 1) // 2

需要注意的是,虽然arguments很像数组,但它是一个对象。数组专有的方法(比如sliceforEach),不能在arguments对象上直接使用。

如果要让arguments对象使用数组方法,真正的解决方法是将arguments转为真正的数组。下面是两种常用的转换方法:slice方法和逐一填入新数组。

var args = Array.prototype.slice.call(arguments);

// 或者
var args = [];
for (var i = 0; i < arguments.length; i++) {
  args.push(arguments[i]);
}

函数的其他知识点

闭包

函数f2就在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,对f1就是不可见的。这就是 JavaScript 语言特有的"链式作用域"结构(chain scope),子对象会一级一级地向上寻找所有父对象的变量。所以,父对象的所有变量,对子对象都是可见的,反之则不成立。

既然f2可以读取f1的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!

function f1() {
  var n = 999;
  function f2() {
    console.log(n);
  }
  return f2;
}

var result = f1();
result(); // 999

闭包的最大用处有两个,一个是可以读取外层函数内部的变量,另一个就是让这些变量始终保持在内存中,即闭包可以使得它诞生环境一直存在。

闭包使得内部变量记住上一次调用时的运算结果。

function createIncrementor(start) {
  return function () {
    return start++;
  };
}

var inc = createIncrementor(5);

inc() // 5
inc() // 6
inc() // 7

上面代码中,start是函数createIncrementor的内部变量。通过闭包,start的状态被保留了,每一次调用都是在上一次调用的基础上进行计算。从中可以看到,闭包inc使得函数createIncrementor的内部环境,一直存在。所以,闭包可以看作是函数内部作用域的一个接口。

为什么闭包能够返回外层函数的内部变量?原因是闭包(上例的inc)用到了外层变量(start),导致外层函数(createIncrementor)不能从内存释放。只要闭包没有被垃圾回收机制清除,外层函数提供的运行环境也不会被清除,它的内部变量就始终保存着当前值,供闭包读取。

闭包的另一个用处,是封装对象的私有属性和私有方法。

function Person(name) {
  var _age;
  function setAge(n) {
    _age = n;
  }
  function getAge() {
    return _age;
  }

  return {
    name: name,
    getAge: getAge,
    setAge: setAge
  };
}

var p1 = Person('张三');
p1.setAge(25);
p1.getAge() // 25

注意,外层函数每次运行,都会生成一个新的闭包,而这个闭包又会保留外层函数的内部变量,所以内存消耗很大。因此不能滥用闭包,否则会造成网页的性能问题。

立即调用的函数表达式(IIFE)

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

甚至像下面这样写,也是可以的。

!function () { /* code */ }();
~function () { /* code */ }();
-function () { /* code */ }();
+function () { /* code */ }();

通常情况下,只对匿名函数使用这种“立即执行的函数表达式”。它的目的有两个:一是不必为函数命名,避免了污染全局变量;二是 IIFE 内部形成了一个单独的作用域,可以封装一些外部无法读取的私有变量。

eval 命令

eval命令接受一个字符串作为参数,并将这个字符串当作语句执行。

eval('var a = 1;');
a // 1

上面代码将字符串当作语句运行,生成了变量a。 如果eval的参数不是字符串,那么会原样返回。

eval(123) // 123

eval没有自己的作用域,都在当前作用域内执行,因此可能会修改当前作用域的变量的值,造成安全问题。

var a = 1;
eval('a = 2');

a // 2

8.数组

定义

数组(array)是按次序排列的一组值。每个值的位置都有编号(从0开始),整个数组用方括号表示。

数组的本质

本质上,数组属于一种特殊的对象。typeof运算符会返回数组的类型是object

length 属性

数组的length属性,返回数组的成员数量。

清空数组的一个有效方法,就是将length属性设为0。

由于数组本质上是一种对象,所以可以为数组添加属性,但是这不影响length属性的值。

var a = [];

a['p'] = 'abc';
a.length // 0

a[2.1] = 'abc';
a.length // 0

in 运算符

检查某个键名是否存在的运算符in,适用于对象,也适用于数组。

for...in 循环和数组的遍历

for...in循环不仅可以遍历对象,也可以遍历数组,毕竟数组只是一种特殊对象。

但是,for...in不仅会遍历数组所有的数字键,还会遍历非数字键。不推荐

数组的遍历可以考虑使用for循环或while循环。

数组的forEach方法,也可以用来遍历数组

数组的空位

使用delete命令删除一个数组成员,会形成空位,并且不会影响length属性。

var a = [1, 2, 3];
delete a[1];

a[1] // undefined
a.length // 3

数组的某个位置是空位,与某个位置是undefined,是不一样的。如果是空位,使用数组的forEach方法、for...in结构、以及Object.keys方法进行遍历,空位都会被跳过。

类似数组的对象

“类似数组的对象”的根本特征,就是具有length属性。

典型的“类似数组的对象”是函数的arguments对象,以及大多数 DOM 元素集,还有字符串。

数组的slice方法可以将“类似数组的对象”变成真正的数组。

var arr = Array.prototype.slice.call(arrayLike);

除了转为真正的数组,“类似数组的对象”还有一个办法可以使用数组的方法,就是通过call()把数组的方法放到对象上面。

function print(value, index) {
  console.log(index + ' : ' + value);
}

Array.prototype.forEach.call(arrayLike, print);