您现在的位置是：亿华云 > 域名

十个你应该学会使用的现代JavaScript技巧

亿华云2025-10-03 02:20:25【域名】3人已围观

简介1、有条件地向对象添加属性我们可以使用扩展运算符 ... 来有条件地向 JavaScript 对象快速添加属性。constcondition=true;constperson={id:1,name:J

1、个应该学有条件地向对象添加属性

我们可以使用扩展运算符 ... 来有条件地向 JavaScript 对象快速添加属性。现代

const condition = true; const person = { id: 1,技巧 name: John Doe, ...(condition && { age: 16 }), };

如果每个操作数的计算结果都为真， && 运算符将返回最后计算的个应该学表达式。因此返回一个对象 { age: 16 }，现代然后，技巧将其扩展为 person 对象的个应该学一部分。

如果condition为 false，现代则 JavaScript 将执行以下操作：

const person = { id: 1,技巧 name: John Doe, ...(false), // evaluates to false }; // spreading false has no effect on the object console.log(person); // { id: 1, name: John Doe }

2、检查一个属性是个应该学否存在于一个对象中

你知道我们可以使用 in 关键字来检查 JavaScript 对象中是否存在属性吗?

const person = { name: John Doe, salary: 1000 }; console.log(salary in person); // returns true console.log(age in person); // returns false

3、对象中的现代动态属性名称

使用动态键设置对象属性很简单。只需使用 [key_name] 符号添加属性：

const dynamic = flavour; var item = { name: Biscuit,技巧 [dynamic]: Chocolate } console.log(item); // { name: Biscuit, flavour: Chocolate }

同样的技巧也可用于使用动态键引用对象属性：

const keyName = name; console.log(item[keyName]); // returns Biscuit

4、使用动态键进行对象解构

你知道可以解构一个变量并立即用 : 符号重命名它。个应该学但是现代，当你不知道键名或键名是技巧动态的时，你也可以解构对象的属性吗?

首先，让我们看看如何在解构(使用别名解构)时重命名变量。

const person = { id: 1, name: John Doe }; const { name: personName } = person; console.log(personName); // returns John Doe

现在，让我们使用动态键来解构属性：

const templates = { hello: Hello there, bye: Good bye }; const templateName = bye; const { [templateName]: template } = templates; console.log(template) // returns Good bye

5、空合并，?? 运算符

当你要检查变量是 null 还是 undefined 时，源码下载此?运算符很有用。当左侧为null或者undefined时，它返回右侧值，否则返回其左侧操作数。

const foo = null ?? Hello; console.log(foo); // returns Hello const bar = Not null ?? Hello; console.log(bar); // returns Not null const baz = 0 ?? Hello; console.log(baz); // returns 0

在第三个示例中，返回 0 是因为即使 0 在 JavaScript 中被认为是假的，它不是 null ，也不是undefined。你可能认为我们可以使用 || 运算符在这里，但这两者之间存在差异：

const cannotBeZero = 0 || 5; console.log(cannotBeZero); // returns 5 const canBeZero = 0 ?? 5; console.log(canBeZero); // returns 0

6、可选链接 (?.)

你是否也讨厌像TypeError：无法读取 null 的属性“foo”之类的错误。这对每个 JavaSript 开发人员来说都是头疼的问题。引入了可选链就是为了解决这个问题。让我们来看看：

const book = { id:1, title: Title, author: null }; // normally, you would do this console.log(book.author.age) // throws error console.log(book.author && book.author.age); // returns null (no error) // with optional chaining console.log(book.author?.age); // returns undefined // or deep optional chaining console.log(book.author?.address?.city); // returns undefined

你还可以使用具有以下功能的可选链接：

7、使用 !! 运算符进行布尔转换

该 !! 运算符可用于将表达式的结果快速转换为布尔值 true 或 false。就是这样：

const greeting = Hello there!; console.log(!!greeting) // returns true const noGreeting = ; console.log(!!noGreeting); // returns false

8、字符串和整数转换

使用 + 运算符快速将字符串转换为数字，如下所示：

const stringNumer = 123; console.log(+stringNumer); // returns integer 123 console.log(typeof +stringNumer); // returns number

要将数字快速转换为字符串，请使用 + 运算符后跟空字符串 ""：

const myString = 25 + ; console.log(myString); // returns 25 console.log(typeof myString); // returns string

这些类型转换非常方便，源码库但它们的清晰度和代码可读性较差。因此，在生产中使用它们之前，你可能需要考虑一下。但是，不要犹豫在代码中使用它们。

9、检查数组中的假值

你必须熟悉 filter、some 和 every 数组方法。但是，你也应该知道你可以只使用Boolean方法来测试真值：

const myArray = [null, false, Hello, undefined, 0]; // filter falsy values const filtered = myArray.filter(Boolean); console.log(filtered); // returns [Hello] // check if at least one value is truthy const anyTruthy = myArray.some(Boolean); console.log(anyTruthy); // returns true // check if all values are truthy const allTruthy = myArray.every(Boolean); console.log(allTruthy); // returns false

这是它的工作原理。正如我们所知，这些数组方法采用回调函数，因此我们将 Boolean方法作为回调函数传递。Boolean本身接受一个参数并根据参数的真实性返回 true 或 false。所以我们可以这样说：

myArray.filter(val => Boolean(val));

是不是和这个一样：

myArray.filter(Boolean);