初识 ES6 - JS 学习笔记

初识 ES6 - JS 学习笔记

虽然 ES8 已经发布,但是以我的基础来说还是从 ES6 (ECMAScript 2015) 开始,此番就跟着 JavaScript by Example 这本书来学习,随手记点笔记,以期长点记性。

class

这算是 ES6 的新特性了,在 JavaScript 中用 class ,有助于我们将代码模块化。例如:

class ToDoClass {
  constructor() {
    console.log("Hello world!")
  }
}

window.addEventListener('load', function() {
  var toDo = new ToDoClass();
});

load 事件会在资源加载完后执行。

Arrow functions

也可以将上面代码改写成 ES6 的箭头函数的形式:

let ToDo;
window.addEventListener("load", () => {
  toDo = new ToDoClass();
})

要注意,箭头函数的 this 对象继承自其 parent,而不是与它自己绑定。

let a = x => {}
let sum = (x, y) => x + y; // 单行返回可省略 return 和 {}

let, var 以及 const

ES6 中推荐使用 let 来声明变量,let 限制变量的作用域在 {} 中,而这个 {} 可以是在一个函数体内,也可以是其内包含其他的 {}。而 var 的作用域是在一个函数体内。

let 一个很有用的地方就是定义 for 循环中的变量,for(let i=0; i<5; i++) {},那么这个 i 只能在此循环中起作用,在该循环外可以放心使用 i 作为变量名了。

constlet 类似,只是 const 声明的变量其值不能再改变。需注意,虽然 const 整体不能改变,但是其属性仍然可以变:

const a = 5;
a = 7; // 这就不行了

const b = {
  a: 1,
  b: 2
};
b = {a: 2, b: 1}; // 这也不行
b.a = 2; // 这个却可以,因为只改了其具体属性而不是整体

在 ES6 中,应该完全放弃使用 var,而使用 const 声明不需要改变的值,用 let 声明需要改变的变量。

Template literals

经常会在 JavaScript 中生成一些很长的 html 字符串,若是用 + 和各种 \ 换行,会很容易弄错。ES6 引入了一种类似与 markdown 中 fence code block 的方式来处理跨行的字符串:

let html = `
<div>
	<li>${myVar}<li>
</div>
`

还能在其中使用 ${} 的方式引用变量,这样方便多了。

绑定 Enter 按键

除了常见的点击事件,按键事件也是需要考虑的,最常见的莫过于回车、Ctrl + s 这些:

document.getElementById('someId').addEventListener('keypress', event => {
  if(event.keyCode == 13) {
    // some function
  }
});

这里,回车的 keyCode 是 13,所以绑定这个即可。其他按键见下表1

KeyCodeKeyCodeKeyCode
backspace8e69numpad 8104
tab9f70numpad 9105
enter13g71multiply106
shift16h72add107
ctrl17i73subtract109
alt18j74decimal point110
pause/break19k75divide111
caps lock20l76f1112
escape27m77f2113
page up33n78f3114
page down34o79f4115
end35p80f5116
home36q81f6117
left arrow37r82f7118
up arrow38s83f8119
right arrow39t84f9120
down arrow40u85f10121
insert45v86f11122
delete46w87f12123
048x88num lock144
149y89scroll lock145
250z90semi-colon186
351left window key91equal sign187
452right window key92comma188
553select key93dash189
654numpad 096period190
755numpad 197forward slash191
856numpad 298grave accent192
957numpad 399open bracket219
a65numpad 4100back slash220
b66numpad 5101close braket221
c67numpad 6102single quote222
d68numpad 7103  

说不定以后也会来参考这个表。当然还有交互式的,可以去 http://keycode.info 体验一下,按下按键显示相应的 keyCode。

好了,今天就看这点点,还有其他实验要去做,希望能每天累计一点点吧。以上。

参考:

avatar

Frank Lin

Code learning...