Fe14-1
JS 的歷史現狀和未來
JS 已經 20 年了
現狀是各家在瞎搞
typescript
xxscript
jsx
- 重要的還是編程能力
簡化問題的能力
快速開發(fā)的能力
解決別人不能解決的問題的能力
'gua' == name
strcmp("gua", name) == 0
var stringEqual = function(a, b) {
return strcmp(a, b) == 0
}
stringEqual('gua', name)
什么是 ES6 有什么新東西
- ES6（ECMAScript 6） 是 JavaScript 的第 6 個版本
為什么要叫 ES6 不叫 JS6 呢
因為你沒資格給它取名字
let
const
模板字符串
Set 類型(集合)
Map 類型
...
類似 Python 的解包
函數默認參數
可變參數
箭頭函數(這就是個垃圾)
新增函數
var 是以函數為單位限制作用于的修飾符號
var foo = function() {
if(true) {
var foo1 = 1
let foo2 = 2
}
log('foo1', foo1)
log('foo2', foo2)
}
log(foo1)
let
let 就是限制作用域在 {} 內的 var
for(let i = 0; i < 3; i++) {
log(i)
}
log(i)
// 結果是 undefined
for(var i = 0; i < 3; i++) {
log(i)
}
log(i)
if(true) {
let aa = 1
log(aa)
}
log(aa)
if(true) {
var a = 1
log(a)
}
log(a)
const
const 用來聲明一個不可賦值的變量
變量的值只能在聲明的時候賦予
const a = 1
a = 2 // 錯誤
// 下面的不是賦值 是操作 所以是可以的
const arr = [1, 2]
arr.push(3)
// [1, 2, 3]
Set
Set 在其他語言里面稱為集合
是一種和 Array 相似的數據結構
不同之處在于, Set 中的元素都是不重復的
用法如下
var s = new Set()
// add 方法添加元素, 和 push 一樣
s.add(1)
s.add(2)
// has 方法檢查元素是否在 set 中
s.has(1) // true
s.has(3) // false
// size 屬性相當于 length
s.size // 2
// delete 方法刪除一個元素
s.delete(1)
s.has(1)
s.size // 1
set 類型的主要作用是去重, 我們作業(yè)中
做過的 union 等函數都是 set 的標配
函數, 不過在 js 中需要手動實現那些函數
Map
Map 和 Object 很相似
在其他語言中 通常會有 dict 和 object 兩種數據結構
現在 js 也有獨立的 dict 那就是 Map(其實沒多好用)
用法如下
var m = new Map()
// set 方法增加一個值
m.set('name', 'gua')
// get 屬性得到一個值
m.get('name')
// 看起來是比 Object 惡心多了.....
let o = {}
o.name = 'gua'
o.name
...
... 叫擴展符號, 作用是把數組解開成單獨的元素
var a1 = [1, 2, 3]
var a2 = [...a1, 4]
// 結果是 [1, 2, 3, 4]
...可以用來傳參
var a1 = [1, 2, 3]
log(...a1)
// 相當于 log(1, 2, 3)
// 類似于 log.apply(window, a1)
解包
解包是其他語言(Python) 中學過來的特性, 見下方例子
var [a, b] = [1, 2]
// a b 分別被賦值為 1 2
// 相當于下面的老代碼
var arr = [1, 2]
var a = arr[0]
var b = arr[1]
使用這個語法可以一行代碼給多個變量賦值
所以也就可以一行代碼交換變量值
[a, b] = [b, a]
函數默認參數
函數默認參數我們之前已經直接用過了, 不再講
var foo = function(a, name='gua') {
log(a, name)
}
可變參數
用 ... 語法可以實現可變長度的參數
多余的參數會被放進 args 數組中
args 是任意的變量名
var foo = function(a, ...args) {
log(a, args.length)
}
foo(1, 2, 3, 4)
箭頭函數(這就是個垃圾)
箭頭函數就是匿名函數定義的簡化版, 宣稱能使得代碼更簡潔
實際上就是純粹的垃圾
箭頭函數的 this 值是綁定了的
箭頭函數沒有 arguments 對象
如果要多參數, 必須用 ...
語法如下
(參數1, 參數2) => { 語句 }
(參數1, 參數2) => 語句
// 上面兩行相當于下面這函數
function(參數1, 參數2) {
return 語句
}
// 如果只有一個參數，圓括號可省略的
(參數1) => { 語句 }
參數1 => { 語句 }
// 但是如果沒有參數, 必須需要使用圓括號
() => { 語句 }
// 例子
var a1 = [1, 2, 3]
// 下面兩個等價
var a2 = a1.map(function(n){
return n * n
})
var a3 = a1.map( n => n * n )
n => n * n
// 上面 1 行等價于下面 3 行
function(n) {
return n * n
}
var foo = function(a) {
return function(b) {
return a + b
}
}
調用方式如下
var c = foo(1)
c(2)
也可以寫在一行
foo(1)(2)
上面等價于下面
a => b => a + b
新增函數
新增函數例如 includes 我們早就用過了, 所以不用提
CSS 最基礎的套路
