我爲何建議前端將Python 做爲第二語言？

前言

「如何擺脫不停切圖的困局？」

這不是一篇製造焦慮的文章，而是充滿真誠建議的Python推廣文。

當談論到編程入門語言時，大多數都會推薦Python和JavaScript。

實際上，兩種語言在方方面面都很是強大。

而現在咱們熟知的ES6語言，不少語法都是借鑑Python的。

有一種說法是 「能用js實現的，最後必定都會用js實現。」

那麼這裏能夠說：「能跟python長得像的，最後必定會像python。」

1. Python和ES6語法差異

1. 基本類型

值得注意的是，儘管二者都是動態類型，但python鏈接時並不會自動轉換類型。

// JavaScript
let coerced = 1;
let concatenated = coerced + 'string';
複製代碼

// Python
not_coerced = 1
concatenated = not_coerced + 'string'
複製代碼

直接報錯：TypeError: cannot concatenate 'str' and 'int' objects

只有提早把num轉換爲字符串類型才能正確運行

# Python
not_coerced = 1
concatenated = str(not_coerced) + 'string'
複製代碼

2. Functions ormethods?

在JavaScript和Python中，函數和條件的結構極爲類似。例如：

// JavaScript
function drSeuss(catInTheHat, thing1, thing2) {
  if (catInTheHat == true &&
    thing1 == true &&
    thing2 == true) {
    console.log('is cray');
  } else if (catInTheHat != true) {
    console.log('boring');
  } else {
    console.log('so boring');
  }
}
複製代碼

# Python
def dr_seuss(cat_in_the_hat, thing1, thing2):
  if cat_in_the_hat == True and
    thing2 == True and
    thing2 == True:
    print 'is cray'
  elif cat_in_the_hat != True:
    print 'boring'
  else:
    print 'so boring'
複製代碼

但在JavaScript中，「methods」的通俗定義是指語言規範中內置的方法，例如：Function.prototype.apply（）。

在MDN上有對兩者的解釋：

在大多數方面，Functions和methods相同，但有兩個主要區別：

• methods能夠被隱式傳遞到調用該methods的對象上。
• methods可以對類中包含的數據進行操做。

然鵝，在JavaScript中，「類」只是語法糖的存在，稍後咱們再進行對比。

3. 模板字符串

在模板字符串上，JavaScript以前是領先於python的。

// JavaScript
let exclamation = 'Whoa!';
let sentence = `They are really similar to Python.`;
 
console.log(`Template Literals: ${exclamation} ${sentence}`);
複製代碼

# python
print '打印: {} {}'.format('Whoa.', 'Quite!')
# 打印: Yup. Quite!
複製代碼

{}充當佔位符。 這種語法被詬病頗多，因而在後來的Python3.6版本中，又提供了一種字符串格式化語法——f-strings。

直接對比：

name = "Tom"
age = 3
print(f"他叫 {name}, {age} 歲")
# "他叫Tom, 3 歲"
複製代碼

4. 參數默認值

JavaScript再次完美「借鑑」Python:

// JavaScript
function nom(food="ice cream") {
  console.log(`Time to eat ${food}`);
}
 
nom();// Time to eat ice cream
複製代碼

# Python
def nom(food="ice cream"):
  print 'Time to eat {}'.format(food)
 
nom() # Time to eat ice cream
複製代碼

5. 其他參數和* args

Rest參數語法，使咱們能夠將不定數量的參數表示爲數組，傳入函數中。

• 在Python中，它們稱爲* args
• 在JavaScript中...xxx就表示爲其他參數。

// JavaScript
function joke(question, ...phrases) {
  console.log(question);
  for (let i = 0; i > phrases.length; i++) {
    console.log(phrases[i]);
  }
}

let es6Joke = "Why does JS single out one parameter?"
joke(es6Joke, "Because it doesn't", 'really like', 'all the REST of them!');
 
// Why does JS single out one parameter?
// Because it doesn't // really like // all the REST of them! 複製代碼

# Python
def pirate_joke(question, *args):
  print question
  for arg in args:
    print arg
 
python_joke = "What's a Pyrate's favorite parameter?"
 
pirate_joke(python_joke, "*args!", "*arrgs!", "*arrrgs!")
 
# What's a Pyrate's favorite parameter?
# *args!
# *arrgs!
# *arrrgs!
複製代碼

6. Classes：類

衆所周知，ES6類其實是語法糖。 Python具備內置的類，能夠快速，輕鬆地進行面向對象的編程。

而JavaScript原型鏈繼承，是每一個前端的必須課。

// JavaScript
class Mammal {
  constructor() {
    this.neocortex = true;
  }
}
 
class Cat extends Mammal {
  constructor(name, years) {
    super();
    this.name = name;
    this.years = years;
  }
 
  eat(food) {
    console.log('nom ' + food);
  }
}
複製代碼

# Python
class Mammal(object):
  neo_cortex = True
 
class Cat(Mammal):
  def __init__(self, name, years):
    self.name = name
    self.years = years
 
  def eat(food):
    print 'nom %s' % (food)
 
fry_cat = Cat('Fry', 7)
fry_cat.eat('steak')
複製代碼

平心而論，Python的寫法更優雅。。。

7. Modules and import：模塊

ES6的模塊語言借鑑於python，卻優秀於它。 二者之間有一些區別：

1. JavaScript導入是靜態的；Python是動態的。
2. JavaScript模塊必須顯式導出。在Python中，全部模塊都可導入。
3. JavaScript具備默認導出的概念。Python沒有。

# python
import mymodule
mymodule.myfunc()
複製代碼

// javascript
import * as myalias from "./mymodule";
myalias.myfunc();
複製代碼

1. 導入分模塊

在javascript中，咱們想導入分模塊直接解構賦值就能夠了

// javascript
import { myvar, myfunc } from "./mymodule";
console.log(myvar);
myfunc();
複製代碼

而在python，其語義則相反：

# python
from mymodule import myvar, myfunc
print myvar
myfunc()
複製代碼

2. 導出空函數

如何想導出一段空函數，python須要用到「pass「關鍵詞佔位，避免運行出錯。 mymodule.py:

# python
def myfunc(): pass

// javascript
export function myfunc() {}
複製代碼

更多詳細對比能夠看這篇： Modules and import in ES6 for Python developers

2. 前端如何優雅學會Python？

許多前端對Python的熱情始於好奇，終於停滯。

距離實幹作開發有技術差距，也無人指點提帶，也不知當下水平能幹嗎？就在這樣的疑惑循環中，編程技能止步不前，而爬蟲是最好的進階方向之一。

網絡爬蟲是Python比較經常使用的一個場景，國際上，google在早期大量地使用Python語言做爲網絡爬蟲的基礎，帶動了整個Python語言的應用發展。

就我我的發展而已，我也十分推薦以爬蟲爲應用入門，緣由有幾項：

• 爬蟲是針對web頁面的一種應用技術，前端能夠無痛銜接不少知識。
• 爬蟲的第一步是獲取頁面源碼，而後作信息抽取。其中針對dome節點的class/id選擇，前端無需再度學習。

• 爬蟲中的虛擬登陸及Selenium，能夠提高前端對於自動化測試的理解。
• 爬蟲的最終形態是搜索引擎，當中的SEO是每一個前端都須要關注的點兒。
• 在瞭解搜索引擎爬蟲的過程當中，前端能夠搞清楚服務端渲染SSR和單頁應用CSR的不一樣做用。

爬蟲分兩種方式：面向頁面和麪向接口

• 面向頁面，前端天然輕車熟路。
• 面向接口，須要瞭解到如何用抓包軟件(Fiddler/Charles)。
• 在這過程當中，又能學會一項技能 - 抓包。之後不用再看着Network傻傻刷新了。

始於爬蟲，卻不止於爬蟲：

爬蟲—> 數據清洗 -> 數據庫操做 -> 數據清洗 -> 數據挖掘 -> 數據分析 ...

這一條鏈下去，你能夠學到很是很是多的知識：

Scrapy爬蟲框架，Redis分佈式事務，數據處理Pandas，天然語言分析NLP，完整實現數據可視化等等....

關於語言的討論，我很是贊同李兵老師的這段話：

3. 潘石屹都在學Python

因而我又建了一個適合前端看的python公衆號。

別猶豫了，快來和勸退師一塊兒玩耍吖。～

小號- Python勸退師（會陸續更新）

4. 後記&引用

• Modules and import in ES6 for Python developers
• How Python can help you learn ES6）

❤️ 看完三件事

若是你以爲這篇內容對你挺有啓發，我想邀請你幫我三個小忙：

1. 點贊，讓更多的人也能看到這篇內容（收藏不點贊，都是耍流氓 -_-）
2. 關注公衆號「前端勸退師」，不按期分享原創知識。
3. 也看看其它文章

• Chrome Devtools 高級調試指南（新）
• JavaScript 工具函數大全（新）
• 「React Hooks」120行代碼實現一個交互完整的拖拽上傳組件
• 「React Hooks」160行代碼實現動態炫酷的可視化圖表 - 排行榜

也能夠來個人 GitHub博客裏拿全部文章的源文件：

前端勸退指南：github.com/roger-hiro/…