一般在學習前端的時候，我們會從html、css、js三大件入手，題主也是如此，但是為什麼js這麼難學，那是因為題主可能對js這門語言的基本知識掌握不夠深入，另外一個對於語法糖的使用感到特別晦澀。現在我就來一點點剖析js，讓題主從剖析中找到解決方法吧！

js令人感到晦澀點

我們看看js最最簡單的賦值：

var js;

js = 1;

var result += js;

我們不知道這個'js'變量在賦值之前到底是什麼類型，賦值過後才明白是個number，而且對應於強語言比如java ，你不知道這個number 是 Int Float 或者是double。這點很雞肋。並且我分不清result 是常量還是變量，這在js語法裡面界限也比較模糊，所以很多新手完全被概念模糊了。

再來看看定義域：

var context = this;

function fun(){

var inner = this;

var outer = context;

}

定義域的this 指代範圍不同，在不同方法中不能直接通過this獲得整體js的上下文，這在開發中特別容易弄錯導致各種各樣的奇葩問題。

最後再看看語法糖：

var myFun = function(num){}

var context = this;

function use(){

myFun(10086);

window.myFun

= context.myFun;

}

語法糖可以讓人迷糊，這裡myFun可能在初學者中及其容易弄混淆。“它到底是帶參能還是不帶參？”初學者一定會問這樣的問題。

由於js語法模糊，語法糖特別能讓人混淆，定義域不明確而且定義屬性難以琢磨，使得初學者們望而卻步。那麼怎樣才能讓初學者們獲得興趣構建自己的應用呢？

直接上手vue、react等commonJS、ES6語法

時下es6語法流行，讓js有了特別靈活且更好的語法糖。直接上手vue、react等項目能讓自己養成一個良好的書寫代碼的習慣，自己分塊，分清晰各類語法的用法特別好，而且編程思想特別清晰，比起一般的js要強太多。現在當下也是非常流行這類js代碼。

賦值：

let change ;

const constant = 1;

change += constant;

let為定義變量，const為定義常量，在常量與變量中很明確誰是誰。

定義域：以vue項目為例：

export default {
data() {return {}},
methods:{

other(){}
use(){

this.other()

}
},

created(){

this.other()

},

mounted(){

this.other()

}

}

直接以this來使用other方法，這個this就是vue的上下文，無論在生命週期哪個裡面都能夠使用。

直接學習TypeScript

TypeScript 是JavaScript的超集，其語法類似於C#，由C#之父Anders Hejlsberg開發，有類，有接口，有泛型，每個語法糖都特別規範。TypeScript特別適合寫大型項目，維護起來非常方便，幾個moudle相互引用，provider注入，@viewChild註解等各種語法糖都十分先進能讓你學到非常多的東西，其代表框架是Angular 2+，現在都angular版本都快到8了，可以好好的去學習學習，antd也是非常好的前端框架。

HTML和CSS是用來展現內容的技術，作用就像word裡的“格式”；而js是編程語言，就像word裡的vba（宏）。前者很多人都能掌握，而後者沒有一定的邏輯思維是沒辦法學好的。再舉個例子，HTML/CSS就像高中時的“文科”，JS就像“理科”。