前端要学会“偷懒”（前端 教程）

这是一篇干货，也可能让你看的很乏味。我们技术人员经常会陷入自己技术认知中，前端技术在不断优化和进步，之前需要十几行代码才能完成的任务，现在可能需要1行代码搞定。作者会整理前端的一些“捷径”，让你学会“偷懒”，让我们的代码变的更简洁。

• ES6的箭头函数

//es5
var fun=function(){
}
//es6
var fun=()=>{
}

• JS的find方法

//需求：有一个list数组，找到list数组中name是张三的对象的年龄
let list=[
{name:'张三',age:11},
{name:'李四',age:12},
{name:'王五',age:14}]

//笨写法
let age=0
for(let i=0;i<list.length;i++){
    if(list[i].name=='张三'){
        age=list[i].age
        return
    }
}
console.log(age)

//使用find方法
let age=list.find(item=>item.name=='张三').age
console.log(age)

• ES6的对象之中，直接写变量

//ES5
let color="red"
let model={red:red}
//ES6
let color="red"
let model={red}

• JS擅用&&和||

//普通写法
if(a){
  console.log("你很棒")
}
//精简写法
a&&console.log("你很棒")

//普通写法
if(a){
  b=a
}else{
  b="默认"
}
//精简写法
b=a||"默认"

• ES6的不定参数

//ES5
function sum () {
  let num = 0
  // arguments是伪数组使用数组方法需要先转换为数组
  Array.prototype.forEach.call(arguments, function (item) {
    num += item * 1
  })
  return num
}
console.log(sum(1,2,3))//输出6
//ES6
//es6中不建议使用arguments,故使用展开运算符存储参数
function sum2 (...nums) {
  let num = 0
  nums.forEach((item) => {
    num += item
  })
  return num
}
console.log(sum(1,2,3))//输出6

• 三元运算符

//笨写法
let a=-1
let b
if(a>0){
    b=a
}else{
    b=0
}
console.log(b)//输出0

//三元运算
let a=-1;
let b=a>0?a:0;
console.log(b)//输出0

• 方法默认参数

//笨写法
function fun(a){
    if(!a){
        a="默认参数"
    }
    console.log(a)
}
fun()//输出默认参数

//精简写法
function fun(a='默认参数'){
    console.log(a)
}
fun()//输出默认参数

• Math.max函数使用

//需求：找到数组中最大的数
//笨写法
var numbers = [1,12,3,2,13,4];
var max = 0;
for(var i=0;i<numbers.length;i++){
  if(numbers[i] > max){
    max = numbers[i];
  }
}
console.log(max);//输出13

//其次写法
var numbers = [3,342,23,22,124];
numbers.sort(function(a,b){return b - a});
console.log(numbers[0]);

//精简写法
Math.max(1,12,3,2,13,4)//return 13

• Object.assign赋值新对象

//需求将obj1对象赋值给obj2
var obj1 = { a: 1 };

//错误写法
var obj2 = obj1;
obj1.a=2;
console.log(obj2);//输出{"a":2}

//笨写法
var obj2={}
for( var key in obj1 ){
    obj2[key]=obj1[key]
}
console.log(obj2);//输出{"a":1}

//精简写法
var obj2 =Object.assign({}, obj1);
console.log(obj2);//输出{"a":1}

The END

如果您觉得这篇内容对您有帮助，我想请你帮我两个小忙：

1、给作者点个赞，分享让更多的人也能看到这篇文章

2、关注头条号「前端百思说」，加入我们一起学习

点赞、转发、关注头条号，私信“学习资料”向小编索取更多VUE相关的资料