JavaScript技术干货第二弹,有需自取!

时间:2021-10-10 01:11:14

JavaScript技术干货第二弹,有需自取!

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);

5Null 和 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技能小技巧,代码可以直接用哦。如果想就学习更多开发技能,可以持续关注我们!

 JavaScript技术干货第二弹,有需自取!