前端基础知识必知必会

数学函数

Math.max(1,2)
2
Math.min(1,2)
1
// x 的 y 次幂（次方）
Math.pow(2,3);
8
// 向下取整
Math.floor(2.9)
2
// 四舍五入取整
Math.round(2.4)
2
Math.round(2.5)
3
// 向上取整
Math.ceil(2.1)
3
(3 % 2) === 1 // 判断3是奇数
true
(2 % 2) === 0 // 判断2是偶数
true

位运算

(3 & 1) === 1 // 判断3是奇数
true
(2 & 1) === 0 // 判断2是偶数
true
// 仅取整数部分
~~1.2
1
~~-1.2
-1
// 9 乘以 2
9 << 1
18
// 9 除以 2，并向下取整
9 >> 1
4
// 计算2的3次幂（次方）
1 << 3
8
// 相当于
Math.pow(2,3);
8

二维数组（矩阵matrix）

// 初始化一个 2行4列 的二维数组，以0填充
let matrix = new Array(2).fill().map(() => new Array(4).fill(0));
console.info(matrix);
1.  (2) [Array(4), Array(4)]
1.  1.  0: (4) [0, 0, 0, 0]
    1.  1: (4) [0, 0, 0, 0]
    1.  length: 2
    1.  [[Prototype]]: Array(0)
// 获取行数
matrix.length
2
// 获取列数
matrix[0].length
4
// 双循环遍历二维数组，会打印8个 0
for(let r of matrix) {
    for(let c of r) {
        console.info(c);
    }
}
// 设置从0开始第6个位置的值为1
let c = matrix[0].length;
let i = ~~(6 / c);
let j = 6 - (i * c);
matrix[i][j] = 1;
console.info(matrix);
1.  (2) [Array(4), Array(4)]
1.  1.  0: (4) [0, 0, 0, 0]
    1.  1: (4) [0, 0, 1, 0]
    1.  length: 2
    1.  [[Prototype]]: Array(0)

slice 和 splice

// 从start开始，截取到end - 1，如果没有end，则截取到左后一个元素，不影响原数组
let initArr = [1,2,3,4,5,6];
let sliceArr = initArr.slice(2, 5);
console.info(sliceArr);
(3) [3, 4, 5]
console.info(initArr);
(6) [1, 2, 3, 4, 5, 6]
// 从start索引开始，截取num个元素，并插入item1、item2到原数组里，影响原数组
let spliceArr = initArr.splice(2, 3);
console.info(spliceArr)
(3) [3, 4, 5]
console.info(initArr);
(3) [1, 2, 6]

substring 和 substr

// 返回从start位置开始到end位置的子串（不包含end），不影响原字符串
let str = 'abcdefg';
str.substring(2, 5);
'cde'
// 返回从start位置开始length长度的子串，不影响原字符串
str.substr(2, 3);
'cde'
console.info(er);
abcdefg

数组

// fill：填充数组
// join：用处：将数组用分隔符拼成字符串，分隔符默认为,
// flat: 扁平化
const testArr = [1, [2, [3, 4, 5]]];
testArr.flat().flat()
[1, 2, 3, 4, 5]
const testArr1 = [[1, 2], [3, 4]];
testArr1.flat();
[1, 2, 3, 4]

对象

let map = {
    "book": "19",
    "computer": "4999"
}
// entries：将对象转成键值对数组
console.log(Object.entries(map))
1.  (2) [Array(2), Array(2)]
1.  1.  0: (2) ['book', '19']
    1.  1: (2) ['computer', '4999']
    1.  length: 2
    1.  [[Prototype]]: Array(0)
// 遍历键值对
Object.entries(map).map(([key, value] = [...item]) => console.log(`${key}: ${value}`))
book: 19
computer: 4999
// keys：将对象的key转成一个数组合集
console.log(Object.keys(map))
['book', 'computer']
// values：将对象的所有值转成数组合集
console.log(Object.values(map))
['19', '4999']

Object Map Set 简单对比

	Object	Map	Set
概念	对象	在Map中，每一对数据的格式都为键值对的形式。是为了快速搜索和查找数据而生的。Map 类似于对象	Set 类似于数组，成员值唯一。
键（key）的类型	只能是字符串，数字或者 Symbol	任何类型
插入时的顺序	不会完全保持	保持其插入时的顺序
读取长度	Object.keys(obj).length	.size()
可迭代对象	for in 来访问或 Object.keys(o)、Object.values(o)、Object.entries(o) 来取得表示键或值的数字	for of 或 .forEach() 方法来迭代
使用JSON 进行文件传输	支持	不支持，需要使用 .toJSON() 方法，然后在 JSON.parse() 中传入复原函数来将其复原。
创建	const obj = {}; // 对象字面量	const map = new Map(); // 调用构造函数	let set = new Set();
新增和修改	obj.k = 1; 或 obj['k'] = 2;	map.set('k', 1);	set.add('b');
读取	obj.k; 或 obj['k']	map.get('k');
删除	delete obj.k; // 存在很多性能问题	map.delete('k');	set.delete('b');
判断对象内是否含有该值	null	map.has('b');	set.has('b');

Set使用场景

1. 数组去重 [...new Set(arr)] 
2. 取并集 new Set([...set1, ...set2]) 
3. 取交集 new Set([...set1].filter(x => set2.has(x))) 
4. 取差集 new Set([...set1].filter(x => !set2.has(x)))