从零学习Nodejs(六)(最新详解版)JS对象(Number String Arrary)

JavaScript 是一种面向对象的编程语言，在 JavaScript 中几乎所有的东西都是对象。因此，要想有效的使用 JavaScript，首先需要了解对象的工作原理以及如何创建并使用对象

我们可以将对象看作是一个属性的无序集合，每个属性都有一个名称和值（键/值对）。对象类似与数组，不同的是对象中的索引是自定义的，例如 name（姓名）、age（年龄）、gender（性别）等。

---

JS 创建对象

您可以使用花括号 { } 来创建对象，{ } 中用来定义对象中的属性。属性是一个个键:值 对的组合，其中键（属性名称）始终是字符串类型的，而值（属性值）则可以是任意类型，例如字符串、数组、函数或其它对象等。不同的属性之间使用逗号进行分隔。

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        document.write(this.name);
    }
};

  提示：在对象中定义的函数通常被称为方法。

上面示例中创建了一个名为 person 的对象，该对象中包含三个属性 name、age、gender 和一个方法 displayName()。displayName() 方法中的 this.name 表示访问当前对象中的 name 属性，会被 JavaScript 解析为 person.name。

在定义对象时，属性名称虽然是字符串类型，但通常不需要使用引号来定义，但是以下三种情况则需要为属性名添加引号：

• 属性名为 JavaScript 中的保留字；
• 属性名中包含空格或特殊字符（除字母、数字、_ 和 $ 以外的任何字符）；
• 属性名以数字开头。

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};

---

访问对象的属性

要访问或获取属性的值，您可以使用 对象名.属性名 或者 对象名["属性名"] 的形式，如下例所示：

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        document.write(this.name);
    }
}
document.write("姓名：" + person.name + "
");   // 输出：姓名：Peter
document.write("年龄：" + person["age"]);          // 输出：年龄：28

在访问对象属性时，使用 对象名.属性名 的形式更易于代码的编写，但并不是所有情况下都可以使用。如果属性名中包含空格或者特殊字符，则不能使用 对象名.属性名 的形式来访问对象属性，必须使用 对象名["属性名"] 的形式才行，如下例所示：

var person = {
    "first name": "Peter",
    "current age": 28,
    gender: "Male"
};
document.write(person["first name"]);   // 输出：Peter
document.write(person.current age);     // 报错：missing ) after argument list

使用 对象名["属性名"] 的形式访问对象属性相对比较灵活，您除了可以直接通过属性名访问属性外，还可以将属性名称赋值给变量，然后再通过这个变量来访问属性的值，如下所示：

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};
var key = "age";
document.write(person[key]); // 输出：28

---

设置修改对象的属性

使用 对象名.属性名 或者 对象名["属性名"] 的形式除了可以获取对象的属性值外，也可以用来设置或修改对象的属性值，如下例所示：

var person = {
    name: "Peter",
    age: 28,
    gender: "Male"
};
person.phone = "19912345678";
person.age = 20;
person["name"] = "Peter Parker";
for (var key in person) {
    document.write(key + "：" + person[key] + "
")
}

输出结果如下所示：

name：Peter Parker
age：20
gender：Male
phone：19912345678

---

JS 删除对象的属性

您可以使用 delete 语句来删除对象中的属性

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    phone: "15012345678"
};
delete person.gender;
delete person["phone"];
for (var key in person) {
    document.write(key + "：" + person[key] + "
")
}

输出结果如下所示：

name：Peter
age：28

提示：delete 语句是从对象中删除指定属性的唯一方式，而将属性值设置为 undefined 或 null 仅会更改属性的值，并不会将其从对象中删除。

---

JS 调用对象的方法

var person = {
    name: "Peter",
    age: 28,
    gender: "Male",
    displayName: function() {
        document.write(this.name);
    }
};
person.displayName();       // 输出：Peter
person["displayName"]();    // 输出：Peter

---

JS Number对象

在 JavaScript 中您可以使用十进制、十六进制或八进制表示法来表示整数或浮点数。与其它编程语言不同，JavaScript 中的数字并不区分整数和浮点数，统一使用 IEEE754 标准（二进制浮点数算术标准）的 64 位浮点格式表示数字，能表示的最大值（Number.MAX_VALUE）为 ±1.7976931348623157e+308，最小值（Number.MIN_VALUE）为 ±5e-324。

var x = 123;    // 整数
var y = 3.14;   // 浮点数
var z = 0xff;   // 十六进制数：255

对于比较大的数字可以使用指数表示法来表示，例如 6.02e+23 等于 6.02 x 10²³

var x = 1.57e4;     // 等于 15700
var y = 4.25e+6;    // 等于 4250000
var z = 4.25e-6;    // 等于 0.00000425

提示：JavaScript 中能够表示的最大的整数是 2⁵³ - 1，即 9007199254740991，能够表示的最小整数是 -(2⁵³ - 1)，即 -9007199254740991。

也可以使用八进制或十六进制表示法来表示数字，其中八进制表示法使用 0 作为前缀，十六进制表示法使用 0x 作为前缀

var a = 0377;     // 等于 255
var b = 0123;     // 等于 83
var c = 0xff;     // 等于 255
var d = 0xb4;     // 等于 180

---

±Infinity（无穷）

Infinity 是一个特殊的值，表示无穷大。当一个表达式的运算结果超过了 JavaScript 所能表示的数字上限或下限时，JavaScript 就会使用 Infinity 或 -Infinity 表示这个结果，其中 Infinity 表示正无穷大，-Infinity 表示负无穷大。

var a = 5 / 0;      // 等于 Infinity
var b = -5 / 0;     // 等于 -Infinity

---

NaN（非数字）

NaN 同样是 JavaScript 中的一个特殊值，用来表示某个值不是数字。NaN 不等于（通过 ==、!=、===、!=== 比较）其它任何值（包括另外一个 NaN 值），使用 isNaN() 函数可以判断一个数是否为 NaN。

以下几种操作会返回 NaN：

• 使用函数无法将参数转换为数字时会返回 NaN，例如 parseInt("abc")、new Number("abc")；
• 结果不是实数的数学运算，例如 Math.sqrt(-1)；
• 任何操作数中包含 NaN 的表达式，例如 5 * NaN；
• 涉及字符串的非加法运算，且字符串无法自动转换为数字，例如 "foo" / 5。

---

Number 对象

Number 对象是原始数值的包装对象，创建 Number 对象的语法格式如下：

var myNum = new Number(value);
var myNum = Number(value);

其中 value 为要创建的 Number 对象的数值，若 value 为一个非数字的值，则会尝试将其转换为数字，若转换失败则会返回 NaN。

当 Number() 函数和 new 运算符一起使用时，会创建一个新的 Number 对象。如果不用 new 运算符，把 Number() 当作一个函数来调用，则会将其中的参数转换为一个数值，并且返回这个值（如果转换失败，则返回 NaN）。

var a = new Number("123");
var b = Number("456");
var c = 789;
var d = new Number("abc");
document.write(typeof a + "
");      // 输出：object
document.write(typeof b + "
");      // 输出：number
document.write(typeof c + "
");      // 输出：number
document.write(d + "
");             // 输出：NaN

---

Number 属性

Number 对象中提供了一些属性，如下表所示：

属性	描述
Number.MAX_VALUE	JavaScript 中所能表示的最大值
Number.MIN_VALUE	JavaScript 中所能表示的最小值
Number.NaN	非数字
Number.NEGATIVE_INFINITY	负无穷，在溢出时返回
Number.POSITIVE_INFINITY	正无穷，在溢出时返回
Number.EPSILON	表示 1 与 Number 所能表示的大于 1 的最小浮点数之间的差
Number.MIN_SAFE_INTEGER	最小安全整数，即 -9007199254740991
Number.MAX_SAFE_INTEGER	最大安全整数，即 9007199254740991

---

Number 方法

除了属性外，Number 对象中还提供了一些方法，如下表所示：

方法	描述
Number.parseFloat()	将字符串转换成浮点数，和全局方法 parseFloat() 作用相同
Number.parseInt()	将字符串转换成整型数字，和全局方法 parseInt() 作用相同
Number.isFinite()	判断 Number 对象是否为有穷数
Number.isInteger()	判断 Number 对象是否为整数
Number.isNaN()	判断 Number 对象是否为 NaN 类型
vNumber.isSafeInteger()	判断 Number 对象是否为安全整数，即范围为 -(2⁵³ - 1)到 2⁵³ - 1 之间的整数
Number.toString()	把 Number 对象转换为字符串，使用指定的基数
Number.toLocaleString()	把 Number 对象转换为字符串，使用本地数字格式顺序
Number.toFixed()	把 Number 对象转换为字符串，结果的小数点后有指定位数的数字
vNumber.toExponential()	把 Number 对象的值转换为指数计数法
Number.toPrecision()	把 Number 对象格式化为指定的长度
Number.valueOf()	返回一个 Number 对象的基本数字值

---

JS String 对象

JavaScript String 对象用于处理字符串，其中提供了大量操作字符串的方法，以及一些属性

创建 String 对象的语法格式如下：

var val = new String(value);
var val = String(value);

其中参数 value 为要创建的字符串或字符串对象。
JavaScript 中，字符串和字符串对象之间能够自由转换，因此不论是创建字符串对象还是直接声明字符串类型的变量，都可以直接使用字符串对象中提供的方法和属性。

---

String 对象中的属性

下表中列举了 String 对象中提供的属性及其描述信息：

属性	描述
constructor	获取创建此对象的 String() 函数的引用
length	获取字符串的长度
prototype	通过该属性您可以向对象中添加属性和方法

示例代码如下：

var str = new String('JavaScript');
String.prototype.name = null;
str.name = "Hello World!";
document.write(str.constructor + "
");       // 输出：function String() { [native code] }
document.write(str.length + "
");            // 输出：10
document.write(str.name);                       // 输出：Hello World!

---

String 对象中的方法

下表中列举了 String 对象中提供的方法及其描述信息：

方法	描述
anchor()	创建一个 HTML 锚点，即生成一个标签，标签的 name 属性为 anchor() 方法中的参数
big()	用大号字体显示字符串
blink()	显示闪动的字符串
bold()	使用粗体显示字符串
charAt()	返回在指定位置的字符
charCodeAt()	返回指定字符的 Unicode 编码
concat()	拼接字符串
fixed()	以打字机文本显示字符串
fontcolor()	使用指定的颜色来显示字符串
fontsize()	使用指定的尺寸来显示字符串
fromCharCode()	将字符编码转换为一个字符串
indexOf()	检索字符串，获取给定字符串在字符串对象中首次出现的位置
italics()	使用斜体显示字符串
lastIndexOf()	获取给定字符串在字符串对象中最后出现的位置
link()	将字符串显示为链接
localeCompare()	返回一个数字，并使用该数字来表示字符串对象是大于、小于还是等于给定字符串
match()	根据正则表达式匹配字符串中的字符
replace()	替换与正则表达式匹配的子字符串
search()	获取与正则表达式相匹配字符串首次出现的位置
slice()	截取字符串的片断，并将其返回
small()	使用小字号来显示字符串
split()	根据给定字符将字符串分割为字符串数组
strike()	使用删除线来显示字符串
sub()	把字符串显示为下标
substr()	从指定索引位置截取指定长度的字符串
substring()	截取字符串中两个指定的索引之间的字符
sup()	把字符串显示为上标
toLocaleLowerCase()	把字符串转换为小写
toLocaleUpperCase()	把字符串转换为大写
toLowerCase()	把字符串转换为小写
toUpperCase()	把字符串转换为大写
toString()	返回字符串
valueOf()	返回某个字符串对象的原始值

var str = new String('JavaScript教程');
document.write(str.anchor("myanchor") + "
");     // 生成一段 HTML 代码：JavaScript教程
document.write(str.big() + "
");                  // 生成一段 HTML 代码：JavaScript教程
document.write(str.blink() + "
");                // 生成一段 HTML 代码：JavaScript教程
document.write(str.bold() + "
");                 // 生成一段 HTML 代码：JavaScript教程
document.write(str.charAt(10) + "
");             // 获取 str 中的第 11 个字符，输出：教
document.write(str.charCodeAt(10) + "
");         // 获取 str 中第 11 个字符的 Unicode 编码，输出：25945
document.write(str.concat(" String 对象") + "
"); // 将字符串“ String 对象”拼接到字符串 str 之后，输出：JavaScript教程 String 对象
document.write(str.fixed() + "
");                // 生成一段 HTML 代码：JavaScript教程
document.write(str.fontcolor("red") + "
");       // 生成一段 HTML 代码：JavaScript教程
document.write(str.fontsize(2) + "
");            // 生成一段 HTML 代码：JavaScript教程
document.write(String.fromCharCode(72,69,76,76,79) + "
");             // 将 Unicode 编码转换为具体的字符，输出：HELLO
document.write(str.indexOf("Script") + "
");             // 获取字符串“Script”在 str 中首次出现的为，输出：4
document.write(str.italics() + "
");                     // 生成一段 HTML 代码：JavaScript教程
document.write(str.lastIndexOf("a") + "
");              // 获取字符串“a”在 str 中最后一次出现的位置，输出 3
document.write(str.link("http://c.biancheng.net/") + "
");  // 生成一段 HTML 代码：JavaScript教程
document.write(str.localeCompare("JavaScript") + "
");       // 比较字符串对象与给定字符串，返回：1
document.write(str.match(/[abc]/g) + "
");                   // 根据正则 /[abc]/g 检索 str，返回：a,a,c
document.write(str.replace(/[abc]/g, "Y") + "
");            // 使用字符串“Y”替换正则 /[abc]/g 匹配的字符，返回：JYvYSYript教程
document.write(str.search(/[Script]/g) + "
");               // 获取与正则匹配的字符串首次出现的位置，返回：4
document.write(str.slice(6,11) + "
");           // 截取字符串（获取 str 中第 7 到第 11 个字符），返回：ript教
document.write(str.small() + "
");               // 生成一段 HTML 代码：JavaScript教程
document.write(str.split("a") + "
");            // 根据“a”将字符串 str 拆分为数组，返回：J,v,Script教程
document.write(str.strike() + "
");              // 生成一段 HTML 代码：JavaScript教程
document.write(str.sub() + "
");                 // 生成一段 HTML 代码：JavaScript教程
document.write(str.substr(3, 7) + "
");          // 从第 4 个字符开始，向后截取 7 个字符，返回：aScript
document.write(str.substring(3, 7) + "
");       // 截取字符串（获取 str 中第 4 到第 7 个字符），返回：aScr
document.write(str.sup() + "
");                 // 生成一段 HTML 代码：JavaScript教程
document.write(str.toLocaleLowerCase() + "
");   // 返回：javascript教程
document.write(str.toLocaleUpperCase() + "
");   // 返回：JAVASCRIPT教程
document.write(str.toLowerCase() + "
");         // 返回：javascript教程
document.write(str.toUpperCase() + "
");         // 返回：JAVASCRIPT教程
document.write(str.toString() + "
");            // 返回：JavaScript教程
document.write(str.valueOf() + "
");             // 返回：JavaScript教程

---

1. 特殊字符

通过前面的学习我们知道，可以使用单引号和双引号来定义字符串，但如果字符串中也需要添加单引号或双引号该怎么办呢？我们可以使用反斜线\来转义字符串中的引号

var str1 = "He said \"Goodbye\"";
var str2 = 'it\'s okay';

除了单引号和双引号外，JavaScript 中还提供了一些能够使用反斜线转义的特殊字符

代码	输出	代码	输出
'	单引号	\r	回车
"	双引号	\t	tab
\	反斜线本身	\b	空格
\n	换行	\f	换页

---

JS Array对象

数组是值的有序集合，数组中的每个值称为一个元素，每个元素在数组中都有一个数字位置，称为索引，索引从 0 开始，依次递增。在 JavaScript 中，您可以使用 Array 对象定义数组，此外，Array 对象中还提供了各种有关数组的属性和方法。
创建 Array 对象的语法格式如下：

var arr = new Array(values);
var arr = Array(values);

其中，values 为数组中各个元素组成的列表，多个元素之间使用逗号分隔。

除了可以使用 Array() 函数来定义数组外，您也可以直接使用方括号[ ]来定义数组，[ ]中为数组中的各个元素，多个元素之间使用逗号,进行分隔。示例代码如下：

var fruits = [ "apple", "orange", "mango" ];
console.log(fruits);        // 输出：(3) ["apple", "orange", "mango"]

您可以通过数组的索引来访问数组中的各个元素，示例代码如下：

var fruits = [ "apple", "orange", "mango" ];
document.write(fruits[0] + "
");     // 输出：apple
document.write(fruits[1] + "
");     // 输出：orange
document.write(fruits[2] + "
");     // 输出：mango

---

Array 对象中的属性

下表中列举了 Array 对象中提供的属性及其描述信息：

属性	描述
constructor	返回创建数组对象的原型函数
length	设置或返回数组中元素的个数
prototype	通过该属性您可以向对象中添加属性和方法

var cars = new Array("Saab", "Volvo", "BMW");
Array.prototype.name = null;
cars.name = "JavaScript";
document.write(cars.constructor + "
");      // 输出：function Array() { [native code] }
document.write(cars.length + "
");           // 输出：3
document.write(cars.name + "
");  

---

Array 对象中的方法

下表中列举了 Array 对象中提供的方法及其描述信息：

方法	描述
concat()	拼接两个或更多的数组，并返回结果
copyWithin()	从数组的指定位置拷贝元素到数组的另一个指定位置中
entries()	返回数组的可迭代对象
every()	检测数值元素的每个元素是否都符合条件
fill()	使用一个固定值来填充数组
filter()	检测数值元素，并返回符合条件所有元素的数组
find()	返回符合传入函数条件的数组元素
findIndex()	返回符合传入函数条件的数组元素索引
forEach()	数组每个元素都执行一次回调函数
from()	通过给定的对象中创建一个数组
includes()	判断一个数组是否包含一个指定的值
indexOf()	搜索数组中的元素，并返回它所在的位置
isArray()	判断对象是否为数组
join()	把数组的所有元素放入一个字符串
keys()	返回数组的可迭代对象，包含原始数组的键（key）
lastIndexOf()	搜索数组中的元素，并返回它最后出现的位置
map()	通过指定函数处理数组的每个元素，并返回处理后的数组
pop()	删除数组的最后一个元素并返回删除的元素
push()	向数组的末尾添加一个或更多元素，并返回数组的长度
reduce()	累加（从左到右）数组中的所有元素，并返回结果
reduceRight()	累加（从右到左）数组中的所有元素，并返回结果
reverse()	反转数组中元素的顺序
shift()	删除并返回数组的第一个元素
slice()	截取数组的一部分，并返回这个新的数组
some()	检测数组元素中是否有元素符合指定条件
sort()	对数组的元素进行排序
splice()	从数组中添加或删除元素
toString()	把数组转换为字符串，并返回结果
unshift()	向数组的开头添加一个或多个元素，并返回新数组的长度
valueOf()	返回数组对象的原始值

var fruits = ["Orange", "Banana", "Apple", "Papaya", "Mango"];
document.write(fruits.entries() + "
");              // 返回：[object Array Iterator]
document.write(fruits.includes("Apple") + "
");      // 返回：true
document.write(fruits.fill("grape") + "
");          // 返回：grape,grape,grape,grape,grape
var fruits = ["Orange", "Banana", "Apple", "Papaya", "Mango"];
document.write(fruits.indexOf("Mango") + "
");               // 返回：4
document.write(Array.isArray(fruits) + "
");                 // 返回：true
document.write(fruits.join("-") + "
");                      // 返回：Orange-Banana-Apple-Papaya-Mango
document.write(fruits.lastIndexOf("Banana") + "
");          // 返回：1
document.write(fruits.pop() + "
");                          // 返回：Mango
document.write(fruits.push("Watermelon") + "
");             // 返回：5
document.write(fruits.unshift("Lemon","Pineapple") + "
");   // 返回：7
document.write(fruits.slice(1, 5) + "
");                    // 返回：Pineapple,Orange,Banana,Apple
document.write(fruits.sort() + "
");                         // 返回：Apple,Banana,Lemon,Orange,Papaya,Pineapple,Watermelon
document.write(fruits.valueOf() + "
");                      // 返回：Apple,Banana,Lemon,Orange,Papaya,Pineapple,Watermelon

---

读后有收获可以请作者喝咖啡