现代 JavaScript 参考(3)

举例来说,你在 myFunc 中使用 setTimeout 函数:

function myFunc() { this.myVar = 0; var that = this; // that = this 技巧 setTimeout( function() { // 在这个函数作用域中,一个新的 *this* 被创建 that.myVar++; console.log(that.myVar) // 1 console.log(this.myVar) // undefined -- 见上诉函数声明 }, 0 ); }

但是如果你使用箭头函数,this 是从它的外围作用域中抓取的:

function myFunc() { this.myVar = 0; setTimeout( () => { // this 值来自它的外围作用域, 在这个示例中,也就是 myFunc 函數 this.myVar++; console.log(this.myVar) // 1 }, 0 ); } 有用的资源 函数参数默认值

从 ES2015 JavaScript 更新之后开始,你可以通过下列的语法为函数的参数设定默认值:

function myFunc(x = 10) { return x; } console.log(myFunc()) // 10 -- 没有提供任何值,所以在 myFunc 中 10 做为默认值分配给 x console.log(myFunc(5)) // 5 -- 有提供一个参数值,所以在 myFunc 中 x 等于 5 console.log(myFunc(undefined)) // 10 -- 提供 undefined 值,所以默认值被分配给 x console.log(myFunc(null)) // null -- 提供一个值 (null),详细资料请见下文

默认参数应用于两种且仅两种情况:

没有提供参数

提供 undefined 未定义参数

换句话说,如果您传入 null ,则不会应用默认参数。

注意: 默认值分配也可以与解构参数一起使用(参见下一个概念以查看示例)。

扩展阅读

解构对象和数组

解构 (destructuring) 是通过从存储在对象或数组中的数据中提取一些值来创建新变量的简便方法。

举个简单的实例,destructuring 可以被用来解构函数中的参数,或者像是 React 项目中 this.props 这样的用法。

用示例代码说明

Object

我们考虑一下以下对象的所有属性:

const person = { firstName: "Nick", lastName: "Anderson", age: 35, sex: "M" }

不使用解构:

const first = person.firstName; const age = person.age; const city = person.city || "Paris";

使用解构,只需要 1 行代码:

const { firstName: first, age, city = "Paris" } = person; // 就是这么简单! console.log(age) // 35 -- 一个新变量 age 被创建,并且其值等同于 person.age console.log(first) // "Nick" -- 一个新变量 first 被创建,并且其值等同于 person.firstName A new variable first is created and is equal to person.firstName console.log(firstName) // Undefined -- person.firstName 虽然存在,但是新变量名为 first console.log(city) // "Paris" -- 一个新变量 city 被创建,并且因为 person.city 为 undefined(未定义) ,所以 city 将等同于默认值也就是 "Paris"。

注意: 在 const { age } = person; 中, const 关键字后的括号不是用于声明对象或代码块,而是 解构(structuring) 语法。

函数参数

解构(structuring) 经常被用来解构函数中的对象参数。

不使用解构:

function joinFirstLastName(person) { const firstName = person.firstName; const lastName = person.lastName; return firstName + '-' + lastName; } joinFirstLastName(person); // "Nick-Anderson"

在解构对象参数 person 这个参数时,我们可以得到一个更简洁的函数:

function joinFirstLastName({ firstName, lastName }) { // 通过解构 person 参数,我们分别创建了 firstName 和 lastName 这两个变数 return firstName + '-' + lastName; } joinFirstLastName(person); // "Nick-Anderson"

中使用解构,使得开发过程更加愉快:

const joinFirstLastName = ({ firstName, lastName }) => firstName + '-' + lastName; joinFirstLastName(person); // "Nick-Anderson"

Array

我们考虑一下以下数组:

const myArray = ["a", "b", "c"];

不使用解构:

const x = myArray[0]; const y = myArray[1];

使用解构:

const [x, y] = myArray; // 就是这么简单! console.log(x) // "a" console.log(y) // "b" 有用的资源 数组方法 – map / filter / reduce

map,filter 和 reduce 都是数组提供的方法,它们源自于 。

总结一下:

Array.prototype.map() 接受一组数组,在其元素上执行某些操作,并返回具有转换后的元素数组。

Array.prototype.filter() 接受一组数组,依照元素本身决定是否保留,并返回一个仅包含保留元素的数组。

Array.prototype.reduce() 接受一组数组,将这些元素合并成单个值(并返回)。

我建议尽可能地使用它们来遵循函数式编程 (functional programming) 的原则,因为它们是可组合的,简洁的且优雅的。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wywxjf.html