JavaScript作为最常用的前端开发语言,一直以来的发展都不错,也是作为后端Java的必学技能,所以一名优秀的Java开发人员是可以从事前端方面的工作,并且能与后端达成更加友好的团队合作效果,提升工作效率。目前企业也在倾向于选择后端人员兼任前端工作,提升后端的待遇,也为公司缩减人工成本,投入到企业领域。
如果你想提升你的JavaScript技能,成为更好的开发人员,那么可以继续看下去,分享几个代码技巧,大家一起学习,共同进步!
1、用数据即时创建和填充数组
1.// nooby
2.const array = new Array(3);
3.for(let i=0; i < array.length; i++){
4. array[i] = i;
5.}
6.
7.
8.console.log(array) // [ 0, 1, 2 ]
9.
10.
11.// pro
12.const filledArray = new Array(3).fill(null).map((_, i)=> (i));
13.console.log(filledArray) // [ 0, 1, 2 ]
2、轻松地将对象转换为数组
您可以使用展开运算符将数组转换为对象。
1.// nooby
2.let arr = ["v1", "v2", "v3"];
3.let objFromArray = {};
4.
5.
6.for (let i = 0; i < arr.length; ++i) {
7. if (arr[i] !== undefined) {
8. objFromArray[i] = arr[i];
9. }
10.}
11.
12.
13.// { '0': 'v1', '1': 'v2', '2': 'v3' }
14.console.log(objFromArray)
15.
16.
17.// pro
18.let objFromArrayPro = {...arr};
19.
20.
21.// { '0': 'v1', '1': 'v2', '2': 'v3' }
22.console.log(objFromArrayPro)
3、创建并填充指定大小的数组
您可以使用带有两个参数的 Array() 构造函数来创建和填充指定大小和值的数组:大小和值,或者对空数组使用 Array.fill() 方法。
1.// nooby
2.const size = 5;
3.const defaultValue = 0;
4.const arr = []
5.for(let i = 0; i < size; i++){
6. arr.push(defaultValue)
7.}
8.console.log(arr);
9.
10.
11.// pro
12.const size = 5;
13.const defaultValue = 0;
14.const arr = Array(size).fill(defaultValue);
15.console.log(arr); // [0, 0, 0, 0, 0]
4、用更好的参数改进函数
不要使用单个多个参数,而是使用参数对象。在函数定义中解构它以获得所需的属性。
1.// nooby
2.function upload(user, resourceId, auth, files) {}
3.
4.
5.upload(...); // need to remember the order
6.
7.
8.// pro
9.function upload(
10. { user, resourceId, auth, files } = {}
11.) {}
12.
13.
14.const uploadObj = {
15. user: 'me',
16. resourceId: uuid(),
17. auth: 'token',
18. files: []
19.}
20.
21.
22.upload(uploadObj);
5、Null 和 Undefined 在 JavaScript 中是不同的
Null 和 undefined 是两个不同的值,表示没有值。
- null => 是的,这是一个值。Undefined 不是
- 将 null 想象成在一个空盒子前面
- 把 undefined 想象成在没有盒子的前面
1.const fnExpression = (s = 'default stringy') => console.log(s);
2.
3.
4.fnExpression(undefined); // default stringy
5.fnExpression(); // default stringy
6.
7.
8.fnExpression(null); // null
以上是今天分享的JavaScript技能小技巧,代码可以直接用哦。如果想就学习更多开发技能,可以持续关注我们!