共计 3141 个字符,预计需要花费 8 分钟才能阅读完成。
作者:Mehul Lakhanpal
译者:前端小智
起源:dev
点赞再看 ,微信搜寻【大迁世界】 关注这个没有大厂背景,但有着一股向上踊跃心态人。本文
GitHub
https://github.com/qq44924588… 上曾经收录,文章的已分类,也整顿了很多我的文档,和教程材料。**
最近开源了一个 Vue 组件,还不够欠缺,欢送大家来一起欠缺它,也心愿大家能给个 star 反对一下,谢谢各位了。
github 地址:https://github.com/qq44924588…
1. 转字符串
const input = 123;
console.log(input + ''); //'123'console.log(String(input)); //'123'console.log(input.toString()); //'123'
2. 转数字
const input = '123';
console.log(+input); // 123
console.log(Number(input)); // 123
console.log(parseInt(input)); // 123
3. 转布尔值
const input = 1;
// 计划 1 - 应用双感叹号 (!!) 转换为布尔值
console.log(!!input); // true
// 计划 2 - 应用 Boolean() 办法
console.log(Boolean(input)); // true
4. 字符串 'false'
有问题
const value = 'false';
console.log(Boolean(value)); // true
console.log(!!value); // true
// 最好的查看办法
console.log(value === 'false');
- null vs undefined
null
是一个值,而 undefined
不是一个值。null
就像一个空盒子,而 undefined
没有盒子。
const fn = (x = '默认值') => console.log(x);
fn(undefined); // 默认值
fn(); // 默认值
fn(null); // null
如果传递 null,则不采纳默认值,而传递 undefined
或不传递任何参数时,采纳默认值。
6. 真值和虚值
虚值:false
,0
, ""
,null
,undefined
和NaN
。
真值:"Values"
,0"
,{}
,[]
。
7. const 申明变量哪些类型能够被更改
如果值不想被扭转时,能够应用 const
:
const name = '前端小智';
name = '王大冶'; // 报错
const list = [];
list = [1]; // 报错
const obj = {};
obj = {name: '前端小智'}; // 报错
但用 const 申明的援用类型,它外面值是能够被更改的:
const list = [];
list.push(1); // 能够工作
list[0] = 2; // 能够工作
const obj = {};
obj['name'] = '前端小智'; // 能够工作
8. 三等号和双等号的区别
// 双等号 - 将两个操作数转换为雷同类型, 再比拟
console.log(0 == 'o'); // true
// 三等号 - 不转换为雷同类型
console.log(0 === '0'); // false
9. 接管参数更好的形式
function downloadData(url, resourceId, searchTest, pageNo, limit) {}
downloadData(...); // need to remember the order
更简略的办法
function downloadData({ url, resourceId, searchTest, pageNo, limit} = {}) {}
downloadData({ resourceId: 2, url: "/posts", searchText: "WebDev"}
);
10. 把一般函数改成箭头函数
const func = function() {console.log('a');
return 5;
};
func();
能够改写成
const func = () => (console.log('a'), 5);
func();
11. 从箭头函数返回对象 / 表达式
const getState = (name) => ({name, message: 'Hi'});
12. 将 set
转换为数组
const set = new Set([1, 2, 1, 4, 5, 6, 7, 1, 2, 4]);
console.log(set); // Set(6) {1, 2, 4, 5, 6, 7}
set.map((num) => num * num); // TypeError: set.map is not a function
转换为数组
const arr = [...set]
13. 查看值是否为数组
const arr = [1, 2, 3];
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true
14. 获取对象的所有键
cosnt obj = {
name: "前端小智",
age: 16,
address: "厦门",
profession: "前端开发",
};
console.log(Object.keys(obj)); // name, age, address, profession
15. 双问号语法
const height = 0;
console.log(height || 100); // 100
console.log(height ?? 100); // 0
这个 ??
的意思是,如果 ??
右边的值是 null
或者 undefined
,那么就返回左边的值。
16. map()
map()
办法创立一个新数组,其后果是该数组中的每个元素是调用一次提供的函数后的返回值。
const numList = [1, 2, 3];
const square = (num) => {return num * num}
const squares = numList.map(square);
console.log(squares); // [1, 4, 9]
17. try..catch..finally
const getData = async () => {
try {setLoading(true);
const response = await fetch("https://jsonplaceholder.typicode.com/posts");
const data = await response.json();
setData(data);
} catch (error) {console.log(error);
setToastMessage(error);
} finally {setLoading(false); // 不论是否报错,最初都会执行
}
};
getData();
18. 解构
const response = {
msg: "success",
tags: ["programming", "javascript", "computer"],
body: {count: 5},
};
const {
body: {
count,
unknownProperty = 'test'
},
} = response;
console.log(count, unknownProperty); // 5 'test'
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
原文:https://dev.to/318097/18-tips…
交换
文章每周继续更新,能够微信搜寻 【大迁世界】 第一工夫浏览,回复 【福利】 有多份前端视频等着你,本文 GitHub https://github.com/qq449245884/xiaozhi 曾经收录,欢送 Star。