JS语法特性1

前言

作为一名后端开发，很少会写前端代码，如果掌握一些前端小技巧，会让自己写出的前端代码更加优雅。

一、循环

1、一般循环语法

for (var i = 0; i < 5; i++) {
  // Will execute 5 times
}

2、循环数组的语法

for (let value of array) {
  // do something with value
}

3、循环对象属性的语法

for (let property in object) {
  // do something with object property
}

注意关键字 of 与关系字 in 的不同，用的少的话很容易搞混。
其实循环数组也可以用 in 关键字，这种方式了解即可，不推荐：

for (let value in array) {
  // do something with value
  // 此时 value 不是数组的元素，而是索引！！！
}

4、forEach语法，这种用法推荐：

['dog', 'cat', 'hen'].forEach(function(currentValue, index, array) {
  // Do something with currentValue or array[index]
});

等价于：

['dog', 'cat', 'hen'].forEach((currentValue, index, array)=>{
  // Do something with currentValue or array[index]
});

二、&& 和 ||

&& 和 || 都是短路逻辑操作符，后面表达式执行与否取决与前面表达式的结果。

1、&& 可用来判空

var name = o && o.getName();

如果 o 不为空，则 name 赋 o.getName() 的值。如果 o 为空，则 name 赋 o 的值，也是空。

2、|| 可用来缓存

var name = cachedName || (cachedName = getName());

如果 cacheName 缓存不为空，则返回缓存的值。如果 cacheName 为空，则用 getName() 更新缓存，再返回 cacheName 的值。

三、…variable 展开符号

1、…args 用来接收未被捕获的所有变量，args是Array类型。

function avg(...args) {
  var sum = 0;
  for (let value of args) {
    sum += value;
  }
  return sum / args.length;
}

avg(2, 3, 4, 5); // 3.5

下面 args 接收的是除 firstValue 之外的参数。

function avg(firstValue,...args) {
  var sum = 0;
  for (let value of args) {
    sum += value;
  }
  return sum / args.length;
}

avg(2, 3, 4, 5); // 4

2、函数调用时使用展开操作符

function avg(...args) {
  var sum = 0;
  for (let value of args) {
    sum += value;
  }
  return sum / args.length;
}

let numbers = [2, 3, 4, 5]
avg(...numbers); // 3.5

总结

这篇文章的小技巧内容不多，方便大家记忆，大家都会的我都去掉了。