JavaScript ES6 复习(第 1 部分)

let, const, var

	let	const	var
作用域	block	block	function
重新赋值	yes	no	yes
重新声明	no	no	yes

对象

在下面的对象中，walk 和 talk 被称为方法，可以用两种方式声明

walk 和 talk 都是一样的，但其声明不同

const person = {

    name: "Dork",
    walk: function () {
        console.log('Walk')
    }
    talk() {
        console.log('Talk')
    }
}

person.walk 不会调用该函数，只有 person.walk() 会调用该函数

const newWalk = person.walk;

这里我们得到了 walk 的引用，newWalk 也变成了一个方法
console.log(walk) → 在控制台中记录该函数

console.log(walk) → 调用该函数

要访问对象中的项目，我们使用以下内容：

• person.talk()
• person[“name”]

我们仅当我们从其他地方获取密钥时才使用第二种方法（例如通过某些表单从用户那里获取 name 键名】）

const keyName = "name";
person[keyName.value];

this

this 关键字指向特定对象或提供对该特定对象的引用

在对象外部使用 this 关键字调用函数作为独立函数，返回全局对象

全局对象也称为窗口对象

javascript 中的每个函数都是一个对象

使用 bind 关键字将 this 关键字指向特定对象

const newWalk = person.walk.bind(person);

现在 newWalk 函数指向名为 Dork 的 person 对象，同时将其记录在控制台中

console.log(newWalk()) → 将 person 对象记录在控制台中

箭头函数

普通函数

const square = function (number) {
    return number * number;
};

箭头函数

const square = (number) => {
    return number * number;
};

const square = (number) => number * number;

第二个更受欢迎

箭头函数模板

const <function_name> = <parameters, ....> => {
    <code>
    <return statement>
}

箭头函数的一个很好的用例

const jobs = [
    { id: 1, isActive: true },
    { id: 2, isActive: true },
    { id: 3, isActive: false },
];

这里过滤出 isActive 值为真的 job，并存储在 ActiveJobs 变量中

传递给函数的参数是 jobs，函数返回值为真的作业。isActive 的 job

普通函数

const ActiveJobs = jobs.filter(function (job) {
    return job.isActive;
});

使用箭头函数

const ActiveJobs = jobs.filter((job) => job.isActive);

或

const ActiveJobs = jobs.filter((jobs) => {
    return jobs.isActive;
});

模板字符串

与使用 + 连接字符串相比，模板字符串可以以更好的方式完成这项工作

const name = "Dork";
const message = "Hello " + name + "! How are you?";

// 我们可以使用模板字符串
const templateStringMessage = `Hello ${name}! How are you?`;

对于模板字符串，我们使用 `（反引号）而不是 "（引号），并且变量放在 ${} 内