(二)JavaScript的数据类型

最新推荐文章于 2021-09-28 17:44:13 发布

lyj_010

最新推荐文章于 2021-09-28 17:44:13 发布

阅读量184

点赞数

分类专栏： js学习文章标签： JavaScript 基本数据类型

本文链接：https://blog.csdn.net/lyj_010/article/details/102661950

版权

js学习专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一、引入JavaScript代码

　　在网页中引入JavaScript代码的三种方式：

在HTML页面中嵌入 JavaScript 代码，使用 <script> 标签元素；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        alert("hello world!");
    </script>
</body>
</html>

在HTML的标签中直接嵌入 JavaScript 代码；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <input type="button" value="button" onclick="alert('hello world!')"/>
</body>
</html>

在js文件中编写 JavaScript 代码，并在HTML的页面中引入js文件；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script src="./alert.js"></script>
</body>
</html>

　　alert.js

alert("hello world!");

二、数据类型

　　JavaScript 是一种弱类型或者说动态语言。这意味着你不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

弱类型语言：数据类型可以被忽略的语言，一个变量可以赋不同数据类型的值；
动态语言：运行期间才做数据类型检查的语言，即动态类型语言编程时，永远不用给任何变量指定数据类型。该语言会在第一次赋值给变量时，在内部将数据类型记录下来；

　　JavaScript中有6种数据类型：数字（number）、字符串（string）、布尔值（boolean）、未定义（undefined）、空（null）、对象（Object）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var num = 1;
        var flag = true;
        var str = "hello world";
        var nullObj = null;
        var obj = new Object();
        var ud;

        console.log("num", typeof num);
        console.log("flag", typeof flag);
        console.log("str", typeof str);
        console.log("nullObj", typeof nullObj);
        console.log("obj", typeof obj);
        console.log("ud", typeof ud);
    </script>
</body>
</html>

输出结果：

1、number类型

　　JavaScript 只有一种数字类型，不区分整数和浮点数，它在内部被表示为64位的浮点数，和Java的double数字类型一样。虽然这提供了很大的方便，避免了一大堆因数字类型导致的错误，但是也不可避免地会存在类型不安全的问题。

1.1 整数

　　JavaScript的整数表示共有四种字面量格式，是十进制、二进制、八进制、十六进制。但在进行算术计算时，所有以二进制、八进制和十六进制表示的数值最终都将被转换成十进制数值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script>
        var num1 = 10;  // 十进制
        var num2 = 0b1010;  // 二进制
        var num3 = 012; // 八进制
        var num4 = 0xa; // 十六进制

        console.log(num1, num2, num3, num4);
    </script>
</body>
</html>

输出结果：

1.2 浮点数

　　 Number的实现遵循 IEEE 754 标准，使用 64 位固定长度来表示，也就是标准的 double 双精度浮点数，这样的存储结构优点是可以归一化处理整数和小数，节省存储空间。
　　 64位比特又可分为三个部分：

符号位S：第 1 位是正负数符号位（sign），0代表正数，1代表负数；
指数位E：中间的 11 位存储指数（exponent），用来表示次方数；
尾数位M：最后的 52 位是尾数（mantissa），超出的部分自动进一舍零；

　　当我们计算 0.1 + 0.2 时，会先将 0.1 和 0.2 转为二进制后再进行相加，最后再将结果转回十进制，这个过程就会存在浮点数误差问题（具体可参考文末链接）。

<script>
    console.log(0.1 + 0.2 == 0.3);  // false
    console.log(0.1 + 0.2); // 0.30000000000000004
</script>

1.3 数字属性

Number.MAX_SAFE_INTEGER：JavaScript 中最大的安全整数 (2^53 - 1)。
Number.MIN_SAFE_INTEGER：JavaScript 中最小的安全整数 (-(2^53 - 1))。
Number.MAX_VALUE：能表示的最大正数。最小的负数是 -MAX_VALUE。
Number.MIN_VALUE：能表示的最小正数即最接近 0 的正数 (实际上不会变成 0)。最大的负数是 -MIN_VALUE。
Number.NaN（Not a Number）：特殊的“非数字”值。可以使用 isNaN() 全局函数来判断一个值是否是非数字。
Number.NEGATIVE_INFINITY（-Infinity）：特殊的负无穷大值，在溢出时返回该值。
Number.POSITIVE_INFINITY（Infinity）：特殊的正无穷大值，在溢出时返回该值。
Number.prototype：Number 对象上允许的额外属性。

2、string类型

　　和其他语言不同，JavaScript的字符串不区分单引号和双引号。需要注意的是JavaScript的隐式转换，+运算符既可数字相加，也可以字符串相加。- * / 这些运算符只会针对number类型，故转换的结果只能是转换成number类型。

    <script>
        var strb = "b";
        var str10 = "10";
        // NaN 9 "1010" 100 5
        console.log(strb - 1, str10 - 1, str10 + 10, str10 * 10, str10 / 2);
    </script>

2.1 String方法

String.fromCharCode() ：通过一串 Unicode 创建字符串。
String.fromCodePoint() ：通过一串码点创建字符串。
String.raw() ：通过模板字符串创建字符串。

2.2 String实例属性

String.prototype.constructor：用于创造对象的原型对象的特定的函数。
String.prototype.length：返回了字符串的长度。
N：只读，用于访问第N个位置的字符，其中N是小于 length 和 0之间的正整数。

2.3 String原型方法

String.prototype.charAt()：从一个字符串中返回指定的字符。

	str.charAt(index)

String.prototype.charCodeAt()：返回表示给定索引的字符的Unicode的值。

	str.charCodeAt(index)

String.prototype.codePointAt()：返回使用UTF-16编码的给定位置的值的非负整数。

	str.codePointAt(pos)

String.prototype.concat()：连接两个字符串文本，并返回一个新的字符串。

	str.concat(string2, string3[, ..., stringN])

String.prototype.includes()：判断一个字符串里是否包含其他字符串。

	// searchString：搜索的字符串
	// position：可选。搜寻的起始索引位置，默认值为0
	// 返回值：包含返回 true，否则返回 false
	str.includes(searchString[, position])

String.prototype.endsWith()：判断一个字符串的是否以给定字符串结尾，结果返回布尔值。

	// searchString：要搜索的字符串
	// length：可选。作为 str 的长度。默认值为 str.length。
	// 返回值：true / false
	str.endsWith(searchString[, length])

String.prototype.indexOf()：从字符串对象中返回首个被发现的给定值的索引值，如果没有找到则返回-1。

	str.includes(searchString[, position])

String.prototype.lastIndexOf()：从字符串对象中返回最后一个被发现的给定值的索引值，如果没有找到则返回-1。

	// fromIndex：可选，从 str 的第fromIndex位开始向左回向查找
	str.lastIndexOf(searchValue[, fromIndex])

String.prototype.localeCompare()：返回一个数字，表示是否引用字符串在排序中位于比较字符串的前面，后面，或者二者相同。

	// 如果引用字符存在于比较字符之前则为负数，之后则为正数，相等的时候返回 0 
	referenceStr.localeCompare(compareString[, locales[, options]])

String.prototype.match()：返回一个字符串匹配正则表达式的的结果。

	// regexp：一个正则表达式对象
	str.match(regexp)

String.prototype.normalize()：返回调用字符串值的Unicode标准化形式。

	// form："NFC", "NFD", "NFKC",  "NFKD" , 默认值为 "NFC"
	str.normalize([form]);

String.prototype.padEnd()：在当前字符串尾部填充指定的字符串，直到达到指定的长度。返回一个新的字符串。

	// targetLength：需要填充到的目标长度
	// padString 可选，填充字符串，缺省值为 " "（U+0020）
	str.padEnd(targetLength [, padString])

String.prototype.padStart()：在当前字符串头部填充指定的字符串，直到达到指定的长度。返回一个新的字符串。

	str.padStart(targetLength [, padString])

String.prototype.repeat()：返回指定重复次数的由元素组成的字符串对象。

	// count：[0, +∞) 
	// 返回值： 包含指定字符串的指定数量副本的新字符串
	let resultString = str.repeat(count);

String.prototype.replace()：返回一个由替换值（replacement）替换一些或所有匹配的模式（pattern）后的新字符串。

	str.replace(regexp|substr, newSubStr|function)

String.prototype.search()：对正则表达式和指定字符串进行匹配搜索，返回第一个出现的匹配项的下标。

	str.search(regexp)

String.prototype.slice()：摘取一个字符串区域，返回一个新的字符串。

	// beginIndex：开始索引，如果值为负数，会被当做 strLength + beginIndex 
	// endIndex：可选，结束索引
	str.slice(beginIndex[, endIndex])

String.prototype.split()：通过分离字符串成字串，将字符串对象分割成字符串数组。

	// separator：指定表示每个拆分应发生的点的字符串。
	// limit：一个整数，限定返回的分割片段数量。
	str.split([separator[, limit]])

String.prototype.startsWith()：用来判断当前字符串是否以另外一个给定的子字符串开头，并根据判断结果返回 true 或 false。

	str.startsWith(searchString[, position])

String.prototype.substring()：返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

	// indexStart：需要截取的第一个字符的索引
	// indexEnd：可选。结束索引，不包含以该数字为索引的字符
	str.substring(indexStart[, indexEnd])

String.prototype.toLocaleLowerCase()：根据任何指定区域语言环境设置的大小写映射，返回调用字符串被转换为小写的格式。

	// locale 可选， 指明要转换成小写格式的特定语言区域
	str.toLocaleLowerCase()
	str.toLocaleLowerCase(locale) 
	str.toLocaleLowerCase([locale, locale, ...])

String.prototype.toLocaleUpperCase()：使用本地化（locale-specific）的大小写映射规则将输入的字符串转化成大写形式并返回结果字符串。

	str.toLocaleUpperCase()
	str.toLocaleUpperCase(locale) 
	str.toLocaleUpperCase([locale, locale, ...])

String.prototype.toLowerCase()：将调用该方法的字符串值转为小写形式，并返回。

	str.toLowerCase()

String.prototype.toString()：返回指定对象的字符串形式。

	str.toString()

String.prototype.toUpperCase()：返回一个将调用字符串转换为大写形式的值。

	str.toUpperCase()

String.prototype.trim()：从字符串的开始和结尾去除空格。

	str.trim()

String.prototype.trimStart() ：从字符串的左侧去除空格。trimLeft()是别名。

	str.trimStart();
	str.trimLeft();

String.prototype.trimEnd()：从字符串的右侧去除空格。trimRight() 是别名。

	str.trimEnd();
	str.trimRight();

String.prototype.valueOf()：返回一个String对象的原始值。

	str.valueOf()

String.prototype[@@iterator]()：返回一个新的Iterator对象，它遍历字符串的代码点，返回每一个代码点的字符串值。

	string[Symbol.iterator]

3、boolean类型、undefined类型、null类型

　　 JavaScript中的boolean类型，与其他语言一样，也是只有 true 和 false 两个值。
　　当我们只声明一个变量，并且不对它进行赋值时，此时变量类型就是 undefined ，例如“var a；”。
　　当我们对一个变量赋 null 值时，此时变量的类型就为 null，例如“var a = null；”。

undefined 和 null 的区别：

null 表示"没有对象"，即该处不应该有值；
undefined 表示"缺少值"，就是此处应该有一个值，但是还没有定义。

4、object类型

　　 JavaScript中的所有对象都来自 Object；所有对象从Object.prototype继承方法和属性，尽管它们可能被覆盖。

5、Array对象

　　 Array 对象是用于构造数组的全局对象，数组是类似于列表的高阶对象。

5.1 Array属性

Array.length：返回或设置一个数组中的元素个数。
Array.prototype：表示 Array 构造函数的原型。
Array.prototype[@@unscopables]：包含了所有 ES2015 (ES6) 中新定义的且并未被更早的 ECMAScript 标准收纳的属性名。

5.2 Array方法

Array.from()：从一个类似数组或可迭代对象创建一个新的，浅拷贝的数组实例。

	// arrayLike 想要转换成数组的伪数组对象或可迭代对象。
	// mapFn 可选 如果指定了该参数，新数组中的每个元素会执行该回调函数。
	// thisArg 可选 执行回调函数 mapFn 时 this 对象。
	// 返回值 新的数组实例
	Array.from(arrayLike[, mapFn[, thisArg]])

Array.isArray()：用于确定传递的值是否是一个 Array。

	// 返回值 true / false
	Array.isArray(obj)

Array.of()：创建一个具有可变数量参数的新数组实例。

	// elementN 任意个参数，将按顺序成为返回数组中的元素。
	// 返回值 新的 Array 实例。
	Array.of(element0[, element1[, ...[, elementN]]])

Array.concat() ：用于合并两个或多个数组。

	// valueN 可选 将数组和/或值连接成新数组。
	// 如果省略了valueN 参数，则concat会返回一个它所调用的已存在的数组的浅拷贝。
	var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])

Array.copyWithin()：浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

	// target 复制序列到该位置
	// start 开始复制元素的起始位置
	// end 开始复制元素的结束位置
	arr.copyWithin(target[, start[, end]])

Array.entries()：返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。

	arr.entries()

Array.every()：测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

	// callback 用来测试每个元素的函数，它可以接收三个参数：
	// 		element 用于测试的当前值。
	// 		index可选 用于测试的当前值的索引。
	// 		array可选 调用 every 的当前数组。
	// thisArg 执行 callback 时使用的 this 值。
	arr.every(callback[, thisArg])

Array.fill()：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。

	// value 用来填充数组元素的值。
	// start 可选 起始索引，默认值为0。
	// end 可选 终止索引，默认值为 this.length。
	arr.fill(value[, start[, end]])

Array.filter()：创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

	var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])

Array.find()：返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

	arr.find(callback[, thisArg])

Array.findIndex()：返回数组中满足提供的测试函数的第一个元素的索引，否则返回-1。

	arr.findIndex(callback[, thisArg])

Array.flat()：会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

	// depth 可选 指定要提取嵌套数组的结构深度，默认值为 1。
	var newArray = arr.flat([depth])

Array.flatMap()：首先使用映射函数映射每个元素，然后将结果压缩成一个新数组。

	var new_array = arr.flatMap(function callback(currentValue[, index[, array]]) {
	    // 返回新数组的元素
	}[, thisArg])

Array.forEach()：对数组的每个元素执行一次提供的函数。

	arr.forEach(callback[, thisArg]);

Array.includes()：用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false。注意：对象数组不能使用includes方法来检测。

	// valueToFind 需要查找的元素值。
	// fromIndex 可选 从fromIndex 索引处开始查找 valueToFind。
	arr.includes(valueToFind[, fromIndex])

Array.indexOf()：返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

	arr.indexOf(searchElement[, fromIndex])

Array.join()：将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

	// separator 可选 指定一个字符串来分隔数组的每个元素。
	arr.join([separator])

Array.keys()：返回一个包含数组中每个索引键的Array Iterator对象。

	arr.keys()

Array.lastIndexOf()：返回指定元素在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。

	arr.lastIndexOf(searchElement[, fromIndex])

Array.map()：创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

	var new_array = arr.map(function callback(currentValue[, index[, array]]) {
	 // Return element for new_array 
	}[, thisArg])

Array.pop()：从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

	arr.pop()

Array.push()：将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

	arr.push(element1, ..., elementN)

Array.reduce()：对数组中的每个元素执行一个由您提供的reducer函数(从左到右)，将其结果汇总为单个返回值。

	// accumulator 累计器累计回调的返回值; 
	// initialValue 可选 作为第一次调用 callback函数时的第一个参数的值。
	arr.reduce(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Array.reduceRight()：接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

	arr.reduceRight(callback(accumulator, currentValue[, index[, array]])[, initialValue])

Array.reverse()：将数组中元素的位置颠倒，并返回该数组。

	arr.reverse()

Array.shift()：从数组中删除第一个元素，并返回该元素的值。

	arr.shift()

Array.slice()：返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。

	arr.slice([begin[, end]])

Array.some()：测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值。

	arr.some(callback(element[, index[, array]])[, thisArg])

Array.sort()：用原地算法对数组的元素进行排序，并返回数组。

	// compareFunction 可选 用来指定按某种顺序进行排列的函数。
	// 如果省略，元素按照转换为的字符串的各个字符的Unicode位点进行排序。
	// 		firstEl 第一个用于比较的元素。
	// 		secondEl 第二个用于比较的元素
	arr.sort([compareFunction])

Array.splice()：通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。

	// start 指定修改的开始位置（从0计数）
	// deleteCount 可选 整数，表示要移除的数组元素的个数。
	// item1, item2, ... 可选 要添加进数组的元素,从start 位置开始。如果不指定，则 splice() 将只删除数组元素。
	array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

Array.toLocaleString()：返回一个字符串表示数组中的元素。

	arr.toLocaleString([locales[,options]]);

Array.toString()：返回一个字符串，表示指定的数组及其元素。

	arr.toString()

Array.unshift()：将一个或多个元素添加到数组的开头，并返回该数组的新长度

	arr.unshift(element1, ..., elementN)

Array.values() ：返回一个新的 Array Iterator 对象，该对象包含数组每个索引的值

	arr.values()

三、类型转换

　　 JavaScript 变量可以转换为新变量或其他数据类型：

通过使用 JavaScript 函数；
通过 JavaScript 自身自动转换；

1、其他类型转换为字符串

　　全局方法 String() 可以将其他类型值转换为字符串，也可以调用其他类型值的toString()方法将自身转为字符串。

    <script>
    	// 数字转换为字符串
        console.log(String(10));    // 10
        console.log((10.5).toString()); // 10.5
        // 布尔值转为字符串
        console.log(String(true));  // true
        console.log(false.toString());  // false
        // undefined 和 null 转为字符串
        console.log(String(null));  // null
        console.log(String(undefined)); // undefined

        // null和undefined没有toString()方法
        console.log(null.toString());   // 报错
        console.log(undefined.toString());  // 报错
    </script>

2、其他类型转换为数字

　　全局函数parseInt()、parseFloat()可以分别将值转换为整数和浮点数，也可以使用Number()的强制类型转换，还可以通过运算符进行隐式转换。

    <script>
        // 字符串转为数字
        // parseXXX()会将字符串尽量转为数字，从第一个数字字符到第一个非数字字符前面
        console.log(parseInt("10"));    // 10
        console.log(parseInt("10.55")); // 10
        console.log(parseInt("10ab10"));    // 10
        console.log(parseInt("a10b"));  //NaN
        console.log(parseFloat("10.55ab")); // 10.55

        // Number()是将整个值转为数字，比较严格
        console.log(Number("10.55ab")); // NaN
        console.log(Number("10.55"));   // 10.55

        // 布尔值转为数字
        console.log(Number(false)); // 0
        console.log(Number(true));  // 1

        // undefined、null转为数字
        console.log(Number(null));  // 0
        console.log(Number(undefined)); // NaN
    </script>