前端知识整理(一)

通过使用 ES6+ 的新特性,简化原有的代码操作

获取URL参数

以往的方式可能是通过正则来匹配获取url里面的参数, 现在我们有新的方法啦~

1
URLSearchParams

使用 URLSearchParams 查询参数的方式:

1
2
3
4
5
6
7
8
// url 参数   ?a=1&b=2&token=3
// 现在这么获取

let urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.has('a')); // true 判断是否有 a 这个参数
console.log(urlParams.get('a')); // 1 获取 a 参数的值
console.log(urlParams.toString()); // "?a=1&b=2&token=3"
console.log(urlParams.append('q', 4)); // 实际查询参数为 "?a=1&b=2&token=3&q=4"

Set

Set 能够高效的提高代码性能

主要好处

  • 查看元素: 使用indexOf()includes()检查数组中的项是否存在是比较慢的。
  • 删除元素: 在Set中,可以根据每项的的 value 来删除该项。在数组中,等价的方法是使用基于元素的索引的splice()。与前一点一样,依赖于索引的速度很慢。
  • 保存 NaN: 不能使用indexOf()includes() 来查找值 NaN,而 Set 可以保存此值。
  • 删除重复项: Set对象只存储惟一的值,如果不想有重复项存在,相对于数组的一个显著优势,因为数组需要额外的代码来处理重复。

时间复杂度
数组用来搜索元素的方法时间复杂度为0(N)。换句话说,运行时间的增长速度与数据大小的增长速度相同。
相比之下,Set用于搜索、删除和插入元素的方法的时间复杂度都只有O(1),这意味着数据的大小实际上与这些方法的运行时间无关。

Array 相比 Set 的速度测试

1
2
3
4
5
6
7
let result;
console.time('Array');
result = arr.indexOf(123123) !== -1;
console.timeEnd('Array');
console.time('Set');
result = set.has(123123);
console.timeEnd('Set');

  • Array: 0.173ms
  • Set: 0.023ms

Set 实现 交集 并集 差集

1
2
3
4
5
6
7
8
9
10
let set1 = new Set([1, 2, 3])
let set2 = new Set([4, 3, 2])

let intersect = new Set([...set1].filter(value => set2.has(value)))
let union = new Set([...set1, ...set2])
let difference = new Set([...set1].filter(value => !set2.has(value)))

console.log(intersect) // Set {2, 3}
console.log(union) // Set {1, 2, 3, 4}
console.log(difference) // Set {1}

flat

flat(depth) 方法会递归到指定深度将所有子数组连接,并返回一个新数组, depth指定嵌套数组中的结构深度,默认值为1,不管多少层则可以用Infinity关键字作为参数

1
2
3
4
5
[1, 2, [3]].flat(1) // [1, 2, 3]

[1, 2, [3, [4]]].flat(2) // [1, 2, 3, 4]

[1, 2, [3, [4, [5]]]].flat(Infinity) // [1, 2, 3, 4, 5]

flat()有兼容性问题, 不建议使用

结构赋值

两边模式相同,左边就可以顺序赋予相应值

1
let [a, b] = [1, 2];

对象的结构赋值,常见于 import 引用包的时候.

1
import { Vuex, mapState } from 'vuex';

另外可以快速的交换两个变量的值

1
2
3
let a = 1;
let b = 2;
[a, b] = []

新增函数库

Number
1
2
Number.isInteger(Infinity); // => false
Number.isNaN('NaN'); // => false

另外还有两个小改动:两个全局函数 parseInt() 与 parseFloat() 被移植到 Number 中。

String
1
2
3
4
'abcde'.includes('cd'); // => true
'abc'.repeat(3); // => 'abcabcabc'
'abc'.startsWith('a'); // => true
'abc'.endsWith('c'); // => true
  • inclueds() 方法用来判断一个字符串中是否存在指定字符串
  • repeat() 方法用来重复一个字符串生成一个新的字符串
  • startsWith() 方法用来判断一个字符串是否以指定字符串开头,可以传入一个整数作为第二个参数,用来设置查找的起点,默认为 0,即从字符串第一位开始查找
  • endsWith() 与 startsWith() 方法相反
Array
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
Array.from(document.querySelectorAll('*')); // => returns a real array.
[0, 0, 0].fill(7, 1); // => [0, 7, 7]
[1, 2, 3].findIndex(function(x) {
return x === 2;
}); // => 1
['a', 'b', 'c'].entries(); // => Iterator [0: 'a'], [1: 'b'], [2: 'c']
['a', 'b', 'c'].keys(); // => Iterator 0, 1, 2
['a', 'b', 'c'].values(); // => Iterator 'a', 'b', 'c'
// Before
new Array(); // => []
new Array(4); // => [,,,]
new Array(4, 5, 6); // => [4, 5, 6]
// After
Array.of(); // => []
Array.of(4); // => [4]
Array.of(4, 5, 6); // => [4, 5, 6]

首先是 from() 方法,该方法可以将一个类数组对象转换成一个真正的数组。还记得我们之前常写的 Array.prototype.slice.call(arguments) 吗?现在可以跟他说拜拜了~
之后的 fill() 方法,用来填充一个数组,第一个参数为将要被填充到数组中的值,可选第二个参数为填充起始索引(默认为 0),可选第三参数为填充终止索引(默认填充到数组末端)。
findIndex() 用来查找指定元素的索引值,入参为函数,函数形参跟 map() 方法一致,不多说。最终输出符合该条件的元素的索引值。
entries()、keys()、values() 三个方法各自返回对应键值对、键、值的遍历器,可供循环结构使用。
最后一个新增的 of() 方法主要是为了弥补 Array 当做构造函数使用时产生的怪异结果。


咸鱼也要有梦想,万一实现了呢
0%