JavaScript —— 常用对象

JavaScript 常用对象

4.1. 对象的基本概念

JavaScript 对象是拥有属性和方法的数据。所有对象的基类是 Object。

对象的声明

let obj = {
    name: "timor",
    age: 18
};

在上述代码中，声明了一个对象，拥有两个属性，分别是 name 和 age.
name 属性的值是：字符串 timor, age 属性的值是：整数 18

根据定义，JavaScript 对象是拥有属性和方法的数据，但是在 obj 中，没有显示声明方法，那她为什么被称之为 js 对象呢？

那是因为它继承自 Object 类，即便没有显示声明，也会有可以使用的函数。
我们可以使用 instanceof 关键字来判断 obj 是否是 Object 的实例：

console.log(obj instanceof Object);// 输出 true

例如 hasOwnProperty 方法是继承自 Object 的函数，用于检测某个对象是否拥有某个属性：

console.log(obj.hasOwnProperty("name"));// 输出 true
console.log(obj.hasOwnProperty("height"));// 输出 false

当然，我们也可以为对象显示声明方法：

let obj = {
    name: "timor",
    age: 18,
    speak: function () {
        console.log("I`m speaking...");
    }
};

obj.speak();

而在编写对象的方法的时候，我们一般会将 function 关键字省略。等效写法如下所示：

let obj = {
    name: "timor",
    age: 18,
    speak() {
        console.log("I`m speaking...");
    }
};

obj.speak();

属性的访问

一般地，我们认为 “JavaScript 对象是键值对的容器”。
键值对通常写法为 name : value (键与值以冒号分割)。
可以类比是 Java 中的 Map 和 Python 中的 Dict。

在访问对象的属性的时候，一般采用如下两种方式：

obj.name

或

obj["name"]

tips: 使用 for/in 可以遍历对象所有属性

for(let key in obj) {
    let value = obj[key];
    console.log(key, value);
}

this 指向

在 js 中，存在 this 关键字，它是永远存在的，只是在不同的作用域中，它的指向不同而已。

思考1：如果在对象的方法中输出 this，它应该指向的是什么？
思考2：如果在对象的方法在定义的形式上不一样，this 的指向会发生变化吗？

function fun1() {
    console.log(this);
};
let obj = {
    name: "timor",
    age: 18,
    speak() { console.log(this); },
    fun1,
    fun2: function () { console.log(this); },
    fun3: () => console.log(this)
};
// 测试调用：
obj.fun1();         // 指向 obj
obj.fun2();         // 指向 obj
obj.fun3();         // 指向全局的 Window 对象
// 直接在外部输出 this
console.log(this);  // 指向全局的 Window 对象

由此，可以得到一个结论：使用箭头函数是不会改变作用域的，在箭头函数中中所处于的域和 obj 所处的域是同一个域。

4.2. 数学对象（Math）

随机数

使用 Math 的 random 函数可以产生随机浮点数，其值域在 [0, 1) 区间。

let r = Math.random();

向下取整

使用 Math 的 floor 函数可以将浮点数向下取整。

let r = Math.floor(3.6); // r = 3

向上取整

使用 Math 的 ceil 函数可以将浮点数向上取整。

let r = Math.ceil(3.2); // r = 4

四舍五入

使用 Math 的 ceil 函数可以将浮点数向上取整。

let a = Math.round(3.4); // a = 3
let b = Math.round(3.5); // b = 4
let c = Math.round(3.6); // c = 4

绝对值

使用 Math 的 abs 函数可以将浮点数向上取整。

let r = Math.abs(-1); // r = 1

4.3. 日期对象（Date）

创建日期对象

在 Date 的构造函数上依次传递日期相关参数可以构造指定日期的对象，
需要注意的是，月份是从 0 开始计算的。

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

如果在构造函数上并未指定任何参数，则构造的是当前日期的对象

// 当前日期
let now = new Date();

// 指定日期为 2020-2-15 12:30:20
let that = new Date(2020, 1, 15, 12, 30, 20);

获取日期数据

let date = new Date();
// 从 Date 对象以四位数字返回年份。
console.log(date.getFullYear());
// 从 Date 对象返回月份 (0 ~ 11)，一月份的值是 0
console.log(date.getMonth());
// 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
console.log(date.getDate());
// 从 Date 对象返回一周中的某一天 (0 ~ 6)。星期日是第一天，值为 0
console.log(date.getDay());
// 返回 Date 对象的小时 (0 ~ 23)。
console.log(date.getHours());
// 返回 Date 对象的分钟 (0 ~ 59)。
console.log(date.getMinutes());
// 返回 Date 对象的秒数 (0 ~ 59)。
console.log(date.getSeconds());
// 返回 Date 对象的毫秒(0 ~ 999)。
console.log(date.getMilliseconds());
// 返回 1970 年 1 月 1 日至今的毫秒数
console.log(date.getTime());

设置日期数据

上述 date 对象的一系列 get 方法都有其对应的 set 方法。
通过 set 方法修改了天数会改变月份或者年份，那么日期对象会自动完成这种转换。

4.4. 字符串对象（String）

在 JavaScript 中，用成对的单引号和双引号都表示字符串字面量。

console.log("hello string");
console.log('hello string');

使用长度属性 length 来计算字符串的长度：

console.log("hello".length); // 输出 5

模板字符串

在 ES6 中，新增了以反引号表示字符串的方式, 相比较单引号和双引号而言，它能支持在字符串中接受换行符。类似 python 中的三引号。

console.log(`
反引号中的 JavaScript 字符串
`);

同时，它还能接受在字符串中存在变量：

let name = "timor";
let age = 18;
console.log(`我的名字是：${name}，我今年 ${age} 岁啦!`);

甚至于，还能接受一些函数的调用，能够将函数返回值放置到指定位置

console.log(`Math.random is ${Math.random()}.`);

字符串函数

indexOf(searchString) 来定位字符串中某一个指定的字符首次出现的位置，如果没找到则返回 -1。

console.log("hello".indexOf("l")); // 输出 2

lastIndexOf(searchString) 方法在字符串末尾开始查找字符串出现的位置。，如果没找到则返回 -1。

console.log("hello".lastIndexOf("l")); // 输出 3

replace(searchValue, replaceValue) 方法在字符串中用某些首次出现字符替换另一些字符。

console.log("hello".replace("l", "r")); // 输出 herlo

replaceAll(searchValue, replaceValue) 方法在字符串中用某些出现字符全部替换另一些字符。

console.log("hello".replaceAll("l", "r")); // 输出 herro

toUpperCase() / toLowerCase() 将字符串转大小写

console.log("Hello".toUpperCase()); // 输出 HELLO
console.log("Hello".toLowerCase()); // 输出 hello

split() 函数用于按照特定切割符来切割字符串

console.log("Hello World".split(" ")); // 输出 ["Hello", "World"]

4.5. 数组对象（Array）

创建数组

let arrs = new Array();

或

let arrs = [];

因为 js 变量不是强类型的，所以，js 数组中允许不同类型的数据共存, 如下所示：

let arrs = [10, false, 3.14, "Hello", {name: "timor"}, (a, b) => a + b];

访问数组

获取数组的长度，可以使用 length 属性

console.log(arrs.length);

通过下标可以获取或修改指定元素，
如果执行的下标超出了数组下标最大值，则会新增该元素，数组自动扩容，空缺的下标使用 undefined 补充。

let arrs = [10, false, 3.14, "Hello", {name: "timor"}, (a, b) => a + b];
console.log(arrs[2]); // 输出 3.14
arrs[2] = 3.14159;
console.log(arrs[2]); // 输出 3.14
console.log(arrs.length); // 输出 6
arrs[8] = 2020;
console.log(arrs[7]); // 输出 undefined
console.log(arrs[8]); // 输出 2020
console.log(arrs[9]); // 输出 undefined
console.log(arrs.length); // 输出 9

通过 indexOf() 方法可返回数组中某个指定的元素位置，如果没找到指定元素则返回 -1。

console.log(arrs.indexOf(10)); // 输出 0
console.log(arrs.indexOf("10")); // 输出 -1

通过 pop() 方法可以删除数组的最后一个元素并返回删除的元素。

let nums = [11, 22, 33, 44];
let r = nums.pop();
console.log(r); // 输出 44
console.log(nums); // 输出 [11, 22, 33]

通过 shift() 方法可以删除并返回数组的第一个元素。

let nums = [11, 22, 33, 44];
let r = nums.shift();
console.log(r); // 输出 11
console.log(nums); // 输出 [22, 33, 44]

通过 push() 方法可以向数组的末尾添加一个或更多元素，并返回新的长度。

let nums = [11, 22, 33, 44];
let r = nums.push(55);
console.log(r); // 输出 5
console.log(nums); // 输出 [11, 22, 33, 44, 55]

通过 unshift() 方法可以向数组的开头添加一个或更多元素，并返回新的长度。

let nums = [11, 22, 33, 44];
let r = nums.unshift(55);
console.log(r); // 输出 5
console.log(nums); // 输出 [55, 11, 22, 33, 44]

通过 splice(startIndex, ?deleteCount, …items) 方法可以从数组中指定下标开始删除指定个数个元素。
并在删除之后，从该下标中间插入指定一个或多个元素。如果不指定需要删除的个数，则一直删除到数组末尾。

let nums = [11, 22, 33, 44];
let r = nums.splice(1, 1);
console.log(r); // 输出 [22]
console.log(nums); // 输出 [11, 33, 44]

通过 sort(?compareFunction) 方法可以对数组的元素进行排序。默认排序顺序为按字母升序。
如果需要对数字进行排序，需要手动编写比较的函数

let nums = ["HTML", "CSS", "JavaScript"];
nums.sort();
console.log(nums); // 输出 ["CSS", "HTML", "JavaScript"]
nums = [77, 22, 343, 100];
nums.sort();
console.log(nums); // 输出 [100, 22, 343, 77]
nums.sort((x, y) => x - y);
console.log(nums); // 输出 [22, 77, 100, 343]

通过 reverse() 方法可以反转数组的元素顺序。

let nums = [77, 22, 343, 100];
nums.reverse();
console.log(nums); // 输出 [100, 343, 22, 77]

通过 join() 方法可以把数组的所有元素放入一个字符串。默认合并符号是逗号

let nums = [77, 22, 343, 100];
let s = nums.join();
console.log(s); // 输出 77,22,343,100
s = nums.join("|");
console.log(s); // 输出 77|22|343|100

通过 isArray() 方法可以判断对象是否为数组。

let nums = [77, 22, 343, 100];
console.log(Array.isArray(nums)); // 输出 true
nums = 3.14;
console.log(Array.isArray(nums)); // 输出 false

模拟 VUE 案例

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fake Vuetitle>
    <script>
		let fakeVue = {
		    template: `
		    

		        我的名字是：{{name}}，我今年 {{age}} 岁啦
		    

		    `,
		    data() {
		        return {
		            name: "Timor", age: 18
		        };
		    },
		    render() {
		        let html = this.template;
		        let data = this.data();
		        for (let key in data) {
		            let value = data[key];
		            html = html.replaceAll("{{" + key + "}}", value);
		        }
		        return html;
		    }
		};
    script>
head>

<body>
    <div id="app">div>
    <script>
        app.innerHTML = fakeVue.render();
    script>
body>

html>