javascript笔记

有条件地向对象添加属性

使用展开运算符号(…)来有条件地向 JS 对象快速添加属性

1
2
3
4
5
6
const condition = true;
const person = {
id: 1,
name: 'John Doe',
...(condition && { age: 16 }),
};

检查属性是否存在对象中

使用 in 关键字来检查 JavaScript 对象中是否存在某个属性。

1
2
3
const person = { name: '前端', salary: 1000 };
console.log('salary' in person); // true
console.log('age' in person); // false

对象中的动态属性名称

使用动态键[‘key name’]设置对象属性:

1
2
3
4
5
6
7
const dynamic = 'flavour';
var item = {
name: '前端',
[dynamic]: '后端'
}
console.log(item); // { name: '前端', flavour: '后端' }

空值合并 ?? 操作符

当我们想检查一个变量是否为 null 或 undefined 时,??操作符很有用。当它的左侧操作数为null 或 undefined时,它返回右侧的操作数,否则返回其左侧的操作数。

1
2
3
4
5
6
7
8
9
const foo = null ?? 'Hello';
console.log(foo); // 'Hello'

const bar = 'Not null' ?? 'Hello';
console.log(bar); // 'Not null'

const baz = 0 ?? 'Hello';
console.log(baz); // 0

Object.entries

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const person = {
name: 'Midaoi',
age: 18
};

Object.keys(person).forEach((key) => {
console.log(`${key} is ${person[key]}`);
});

// 使用 entries 获取键和值
Object.entries(person).forEach(([key, value]) => {
console.log(`${key} is ${value}`);
});

replaceAll

在 JS 中,要将所有出现的字符串替换为另一个字符串,我们需要使用如下所示的正则表达式:

1
2
3
4
5
6
7
const str = 'Red-Green-Blue';

// 只规制第一次出现的
str.replace('-', ' '); // Red Green-Blue

// 使用 RegEx 替换所有匹配项
str.replace(/\-/g, ' '); // Red Green Blue

但是在 ES12 中,一个名为 replaceAll 的新方法被添加到 String.prototype 中,它用另一个字符串值替换所有出现的字符串。

1
str.replaceAll('-', ' '); // Red Green Blue

if…else…

1
2
3
4
5
6
7
8
9
10
// 冗余
let test: boolean;
if (x > 100) {
test = true;
} else {
test = false;
}

// 简洁
let test = x > 10;

数字组去重

1
2
[...new Set([2,"12",2,12,1,2,1,6,12,13,6])]
//[2, "12", 12, 1, 6, 13]

交换两个值

1
2
3
4
5
6
let a = 1;
let b = 2;

[b, a] = [a, b];

console.log(a, b);

数字金额千分位格式化

1
(100000000).toLocaleString(); //'100,000,000'

isInteger

1
Number.isInteger(1000);

生成指定范围随机数

1
randomNum = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;