javascript的8种使用技巧

只是一个程序员

已于 2024-08-16 10:29:53 修改

阅读量135

点赞数 3

文章标签：前端 javascript

于 2024-08-16 10:29:11 首次发布

本文链接：https://blog.csdn.net/weixin_42206276/article/details/141251571

版权

javascript的8种使用技巧

使用计算属性名来动态设置对象属性。

const propName = 'age';
const person = {
  name: 'John',
  [propName]: 30
};

字符串方法：includes()、startsWith()、endsWith()

const str = 'Hello, World!';
console.log(str.includes('World')); // true
console.log(str.startsWith('Hello')); // true
console.log(str.endsWith('!')); // true

使用 setTimeout 和 setInterval

setTimeout(() =&gt; {
  console.log('2 秒后执行');
}, 2000);

const intervalId = setInterval(() =&gt; {
  console.log('每 3 秒执行一次');
}, 3000);

克隆对象和数组

const original = { name: 'John', age: 30 };
const clone = { ...original };
const arr = [1, 2, 3];
const arrClone = [...arr];

使用 for…of 循环进行迭代
使用 for…of 循环对数组、字符串和其他可迭代对象进行更易读的迭代。
```
const numbers = [1, 2, 3, 4, 5];

for (const number of numbers) {
  console.log(number);
} 
```

数组方法：map()、filter()、reduce()

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num =&gt; num * 2);
const evens = numbers.filter(num =&gt; num % 2 === 0);
const sum = numbers.reduce((total, num) =&gt; total + num, 0);

空值合并运算符 ??
空值合并运算符 (??) 可以在左侧操作数为 null 或 undefined 时返回右侧操作数。
```
const user = { name: 'John' };
const name = user.name ?? 'Guest'; 
```
可选链 ?.
可选链允许你安全地访问深层嵌套的属性，而无需检查每个引用是否有效。
```
let name = movie.director?.name;
```
等价于
```
let name;
if (movie.director != null) {
  name = movie.director.name;
}
```
?.通过减少两行代码简化getDirector()函数，这就是为什么我喜欢可选链的原因。