JS方法小记
2018 javascript关于 JS 的一些方法
- 自定义排序
- Array.includes 处理多重条件
- Array.every 和 Array.some 处理条件
- 接收参数的方式
- 对象转数组
- 数组的判断
- 检查是否为工作日
- concat 和 push
- 返回从 0 开始的数组
- 中断 forEach
- 中断 for 循环
- 千分位分隔符
- for…in 与 for…of
- JS 中常用的按位运算应用
- 在 Array.map 使用 async/await
自定义排序
function customSort<T>(
group: { [key: string]: T }[],
arr: T[],
key: string,
): { [key: string]: T }[] {
return group.sort((a, b) => {
return arr.indexOf(a[key]) - arr.indexOf(b[key]);
});
}
示例如下:
const arr = ['foo', 'bar', 'baz'];
const group = [
{
key: 'bar',
value: 1,
},
{
key: 'foo',
value: 2,
},
{
key: 'baz',
value: 3,
},
{
key: 'foo',
vlaue: 4,
},
];
const sortGroup = customSort(group, arr, 'key');
// [{value: 2, key: 'foo'}, {value: 4, key: 'foo'},
// {value: 1, key: 'bar'}, {value: 3, key: 'baz'}]
Array.includes 处理多重条件
function func(arg) {
if (arg === 'A' || arg === 'B' || arg === 'C') {
/* do something */
}
}
function func(arg) {
const arr = ['A', 'B', 'C'];
if (arr.includes(arg)) {
/* do something */
}
}
Array.every 和 Array.some 处理条件
const arr = [
{ name: 'AA', age: 10 },
{ name: 'BB', age: 20 },
{ name: 'CC', age: 30 },
];
// 满足全部条件
const bool = arr.every((item) => item.name === 'AA');
// 满足部分条件
const bool = arr.some((item) => item.age < 35);
接收参数的方式
function func(url, res, search, page, limit) {} // 需要记住参数顺序
function func({ url, res, search, page, limit }) {} // 不需要记住参数顺序,记参数名称
对象转数组
const nubmers = {
one: 1,
two: 2,
};
const key = Object.keys(numbers); // ['one', 'two']
const value = Object.values(numbers); // [1, 2]
const entry = Object.entries(numbers); // [['one': 1], ['two', 2]]
数组的判断
- 判断是否为数组:
Array.isArray()
- 类数组转化数组:
Array.from()
检查是否为工作日
const isWeekday = (date) => date.getDay() % 6 !== 0;
concat 和 push
push 修改源数组,concat 返回新数组,concat 可以连接数组。
var arr = [1, 2];
arr.push(3); // arr: [1, 2, 3]
arr.push([4, 5]); // arr: [1, 2, 3, [4, 5]]
var arr = [1, 2];
var arrA = arr.concat(3); // arr: [1, 2]; arrA: [1, 2, 3];
var arrB = arr.concat([4, 5]); // arr: [1, 2]; arrB: [1, 2, 4, 5];
返回从 0 开始的数组
Array.from(Array(5).keys()); //[0, 1, 2, 3, 4]
中断 forEach
使用 splice 删除剩余项,中断 forEach 的循环。⛔该方法会改变原数组,请慎用
const arr = [1, 2, 3, 4, 5];
arr.forEach((item, idx) => {
if (item === 3) {
arr.splice(idx + 1, arr.length - idx);
// arr.length = 0; // 甚至可以直接清空数组
}
console.log(item);
});
// 1, 2, 3
console.log(arr); // [1, 2, 3]
中断 for 循环
使用 break 打断 for 循环
const arr = [1, 2, 3, 4, 5];
for (k in arr) {
console.log(arr[k]);
if (arr[k] === 3) {
break;
}
}
// 1, 2, 3
千分位分隔符
function _comma(number) {
return number.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,');
}
for…in 与 for…of
for…in 迭代对象的可枚举字符串属性,包括原型链上可枚举的属性。
for (variable in object) statement;
for…of 语句是为了方便迭代迭代器。对象 object
是不可迭代的,迭代 object
会报错 Error: object is no iterable
for (variable of iterable) statement;
JS 中常用的按位运算应用
在 Array.map 使用 async/await
在使用 forEach 或者 map 等数组遍历的方式,遇到异步调用的函数,直接使用 async/await 的话,会得到一个 Promise<T>[]
的结果。
通过使用 Promise.all
可以得到异步返回的结果
var arr = [1, 2, 3, 4, 5];
var results: number[] = await Promise.all(arr.map(async (item): Promise<number> => {
await callAsynchronousOperation(item);
return item + 1;
}));