1. 转字符串
1const input = 123; 2 3console.log(input + ''); // '123' 4console.log(String(input)); // '123' 5console.log(input.toString()); // '123' 6
2. 转数字
1const input = '123'; 2 3console.log(+input); // 123 4console.log(Number(input)); // 123 5console.log(parseInt(input)); // 123
3.转布尔值
1const input = 1; 2 3// 方案1 -使用双感叹号(!!)转换为布尔值 4console.log(!!input); // true 5 6// 方案2 - 使用 Boolean() 方法 7console.log(Boolean(input)); // true
4.字符串'false'有问题
1const value = 'false'; 2console.log(Boolean(value)); // true 3console.log(!!value); // true 4 5// 最好的检查方法 6console.log(value === 'false');
- null vs undefined
null是一个值，而undefined不是一个值。null就像一个空盒子，而undefined没有盒子。
1const fn = (x = '默认值') => console.log(x); 2 3fn(undefined); // 默认值 4fn(); // 默认值 5 6fn(null); // null
如果传递null，则不采用默认值，而传递undefined或不传递任何参数时，采用默认值。
6. 真值和虚值
虚值：false,0, "",null,undefined和NaN。
真值："Values",0",{},[]。
7. const 声明变量哪些类型可以被更改
如果值不想被改变时，可以使用 const:
1const name = '前端小智'; 2name = '王大冶'; // 报错 3 4const list = []; 5list = [1]; // 报错 6 7const obj = {}; 8obj = { name: '前端小智' }; // 报错
但用 const 声明的引用类型，它里面值是可以被更改的：
1const list = []; 2list.push(1); // 可以工作 3list[0] = 2; // 可以工作 4 5const obj = {}; 6obj['name'] = '前端小智'; // 可以工作
8. 三等号和双等号的区别
1// 双等号 - 将两个操作数转换为相同类型,再比较 2console.log(0 == 'o'); // true 3 4// 三等号 - 不转换为相同类型 5console.log(0 === '0'); // false
9. 接收参数更好的方式
1function downloadData(url, resourceId, searchTest, pageNo, limit) {} 2 3downloadData(...); // need to remember the order
更简单的方法
1function downloadData( 2{ url, resourceId, searchTest, pageNo, limit } = {} 3) {} 4 5downloadData( 6 { resourceId: 2, url: "/posts", searchText: "WebDev" } 7);
10.把普通函数改成箭头函数
1const func = function() { 2 console.log('a'); 3 return 5; 4}; 5func();
可以改写成
1const func = () => (console.log('a'), 5); 2func();
11.从箭头函数返回对象/表达式
const getState = (name) => ({name, message: 'Hi'});
12. 将 set 转换为数组
1const set = new Set([1, 2, 1, 4, 5, 6, 7, 1, 2, 4]); 2console.log(set); // Set(6) {1, 2, 4, 5, 6, 7} 3 4set.map((num) => num * num); // TypeError: set.map is not a function
转换为数组
const arr = [...set]
13.检查值是否为数组
1const arr = [1, 2, 3]; 2console.log(typeof arr); // object 3console.log(Array.isArray(arr)); // true
14. 获取对象的所有键
1cosnt obj = { 2 name: "前端小智", 3 age: 16, 4 address: "厦门", 5 profession: "前端开发", 6}; 7 8console.log(Object.keys(obj)); // name, age, address, profession
15.双问号语法
1const height = 0; 2 3console.log(height || 100); // 100 4console.log(height ?? 100); // 0
这个 ?? 的意思是，如果 ?? 左边的值是 null 或者 undefined，那么就返回右边的值。
16. map()
map() 方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
1const numList = [1, 2, 3]; 2 3const square = (num) => { 4 return num * num 5} 6 7const squares = numList.map(square); 8 9console.log(squares); // [1, 4, 9]
17. try..catch..finally
1const getData = async () => { 2 try { 3 setLoading(true); 4 const response = await fetch( 5 "https://jsonplaceholder.typicode.com/posts" 6 ); 7 const data = await response.json(); 8 setData(data); 9 } catch (error) { 10 console.log(error); 11 setToastMessage(error); 12 } finally { 13 setLoading(false); // 不管是否报错，最后都会执行 14 } 15}; 16 17getData();
18. 解构
1const response = { 2 msg: "success", 3 tags: ["programming", "javascript", "computer"], 4 body: { 5 count: 5 6 }, 7}; 8 9const { 10 body: { 11 count, 12 unknownProperty = 'test' 13 }, 14} = response; 15 16console.log(count, unknownProperty); // 5 'test'
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
最后
说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。
我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。
我可以将最近整理的前端面试题免费分享出来，其中包含HTML、CSS、JavaScript、服务端与网络、Vue、浏览器、数据结构与算法等等，还在持续整理更新中，希望大家都能找到心仪的工作。
有需要的朋友【点击我】免费获取。
篇幅有限，仅展示部分截图：
