前言

我们知道在系统开发中现在都流行前后端分离开发模式，这种分工的方式让效率更高的同时也提高了各自专注度和专业度。一般来讲后端需要考虑数据存储，数据计算，数据安全，网络通讯，业务逻辑等各种问题，前端更多的是关注数据的展现和用户的体验。所以整体上看前端的逻辑性要求没那么高。作为专业后端开发，笔者也有一定的前端基础，一般的业务开发是没有问题的，但是前端js那些变化莫测，太过于灵活和兼容考虑的语法让我有时候望而却步，实在没有那么多精力去学，当你为知道一个语法沾沾自喜的时候，别人已经用上了最新的语法了。所以有时候不想过多深入前端并不是因为它难，而是因为它语法太多样性，完全记不住啊，平时没有实际经验一般很难了解它全部的语法特性。

今天和各位后端伙伴盘点一下js哪些比较魔性的语法，一起看看你是否都知道这些语法呢？

变量作用范围

js中变量的作用范围有很多种定义，有点像JAVA中的变量范围private final public

var x = 1
let  x=1
const x =1

对象定义

// 1. {} 直接定义   
let obj = { a:1,b:2};

//2. 通过 new Object() 定义
let obj1=new Object();
       obj1.a =1;
	     obj1.b = 2;

// 3. 通过函数定义
 function Persion(a,b){
   this.a =a;
   this.b = b;
   this.say= function(){
      alert(this.a);
   }
  }
 var p =new Persion(1,2);

// 4. 通过class定义
class Persion {
  constructor(a, b) {
    this.a = a
    this.b = b
  }
  say() {
    return this.a + this.b
  }
}

let p = new Persion(3, 4)

一个对象有这么多的创建方式是不是让你眼花缭乱，特别最后一种咋看起来这么眼熟？没错，就是长得很像JAVA. 但是JAVA里面定义对象就只有class 一种方式啊，真为前端同学的学习能力点赞。

函数式语法

// 箭头语法
let say =(a)=>{
       alert(a)
  }
  say("a")

看到这个箭头语法，想起来JAVA中也有

  new Thread(() -> {
            System.out.println("hellow");
        }).start();

看起来是不是很像？js用的是 => JAVA用的是 -> ，注意看，做全栈的同学在这一个符号之差直接来回切换，挺费脑的。我之前就是因为这一个差别经常性的输错。

键/属性简略写法

印象中的js写一个json对象像下面这样的:

 var a =2
 var b =3
 var obj = {
  a: a,
  b: b,
}

可实际中很多前端同学是这样写的：

let obj = {
  a,
  b,
}

是不是莫名其妙？咋连值都省了也行，我们不是一直以为花括号{} 里面就是键值对嘛，现在值看到键没有值啊。刚开始的时候看到这样的代码我还以为是语法错误呢，后面了解更深入后才觉得是我孤陋寡闻了，以前学的js好像白学了。vue项目中的网络请求，这个data当时我就是一头雾水，看到代码的时候还以为是写少了一个值呢。

函数定义方式

js中函数几乎就是核心，没有是函数做不了的，就像JAVA里面的class一样。记得刚学js的时候我们在对象中定义函数（你可以理解为JAVA中的方法）是这样的：

var obj = {
  sum: function (a,b) {
     return a+b;
  }
}

当然还可以这样写：

 var theFun = function(a,b){
   return a+b
 }
 var obj = {
  sum: theFun
}
alert(obj.sum(1,2))
alert(theFun.sum(1,2))

看到了function关键词了是不是,不过如果你关注vue的话，下面的代码估计更常见:

let obj = {
  sum(a,b) {
      return a+b ;
  }
}

但凡比较新的vue项目，你看到的都是上面这种写法，有图为证：

自解析赋值

js中定义一个变量存储另外一个变量的值一般是这样做的：

// 这是一个字符形式的对象
let  obj = { a:"hellow",b:"ok",c:"good",e:"nice" }
// 定义三个变量，分别是上面这个对象的三个变量的值
let a = obj.a
let b= obj.b
let c = obj.c

如果对象的属性很多，上面这种方式就会很繁琐，因此js对于这种场景又有了新的用法，可以直接像下面这样的写法：

let {a,b,c} = obj

是不是忽然觉得清爽很多，可是笔者不禁要问，要把前端语法记住得白不少头发才行吧，刚学会一种语法，没过几天你发现你的已经过时了

扩展语法 ...a

我们一般把这种语法交三点语法，这三点语法看似简单，功能却很强大。

三点语法可以直接把字符转成了数组

let a = "Bruce"
let arr = [...a]
alert(arr)

三点语法将数组合并，当初我也是第一次在vue项目里面看到的，那会就觉得云里雾里的，不知道... 这三点语法啥意思。

let a = [1,2,3,4]
let b =[5,6,7] 
let c = [...a,...b]

你还可以像下面这样用,这两种方式居然结果一样:

let a = [1,2,3,4]
let b =[5,6,7]
let c =a.concat(...b)

let a = [1,2,3,4]
let b =[5,6,7]
let c =a.concat(b)

三点语法除了合并数组，还可以合并对象：

 let obj1 = {a:1,b:2}
 let obj2 = {c:3,d:4}
 let all = {...obj1,...obj2}

三点语法还可以用在解构赋值

 let obj={a: "1",b: "2",c: "3",d: "4"}
 // ...others 包含了a以外的所有属性
 let {a, ...others} = obj
 console.log(a)
 console.log(others)

这个神奇的三点语法还有很多其他的用途这里就不一个一个列举了，记住啊，一定是三个小点，不能是一个，也不能是两个啊。说句实话，就一个三点符合就可以玩这么多花样，别说后端了，就是前端说不好也不能完全记住这些用法吧。

继承

没错，前端js也是可以有继承的，而且继承方式和后端JAVA语言特别的像

class Father{
  constructor(a, b) {
    this.a=a
	  this.b=b
  }
}

 class Son extends Father {
  constructor(a, b, c) {
    super(a, b)
    this.c = c
  }

  getVal() {
    // 直接可以访问父对象的属性
    return this.a * this.b * this.c
  }
}
let son = new Son(1,2,3)
alert(son.getVal())

js依托类和继承，那面向对象就不是嘴上说说的了，你还认为js是面向过程的语言吗？

循环处理

任何一门编程语言几乎都少了不了循环，形式不一样，但是要解决的问题是一样的，那就是不断的执行，直到符合某一个条件才退出循环。但是js 中的循环实在是有点多。

 let arr =[1,2,3,4,5,6,7]
 // 第一种
 for(let i=0;i<arr.length;i++){
  console.log(arr[i])
 }
//第二种
 for (let i of arr) {
  console.log(i)
 }
// 第三种
 arr.forEach(function(element, index) {
  console.log(`Index: ${index}, Element: ${element}`);
});

//第四种
 let arr ={a:"1",b:"2"}
 for (let i in arr) {
  console.log(i)
 }
// 第五种
  let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
  let newArr = arr.filter((item, i) => {
	   return item % 2 == 0
  })

js中还有很多各种各样的语法特性，特别是ES6出现后增加了很多面向对象以及更简化的语法特性。js让我最头疼的是一个功能它竟然有多种不同的语法形式，有时候不知道这种特性到底是好还是坏。很多编程语言其实是在严谨和灵活性之间取舍，就像JAVA大家一直诟病它呆板语法一成不变，但是它绝对是一门严谨的编程语言。

我学习前端的办法是边学边用，多看别人代码，多关注最新特性，先实现功能再考虑所谓最优最先进方式。单从语法上我反而觉得相比JS来说JAVA其实更容易学，毕竟就那种固定的语法，只不过JAVA的点不在语法上而是在它纯粹的面向对象这个特性上。