初识 ES6

初识 ES6

日新月异

JavaScript Notes

2018.03.08

👣 #js #es6

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

class

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,在此页上按下按键会显示相应的 keyCode。

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

Ads by Google

林宏

Frank Lin

Hey, there! This is Frank Lin (@flinhong), one of the 1.41 billion . This 'inDev. Journal' site holds the exploration of my quirky thoughts and random adventures through life. Hope you enjoy reading and perusing my posts.

YOU MAY ALSO LIKE

Using Liquid in Jekyll - Live with Demos

Web Notes

2016.08.20

Using Liquid in Jekyll - Live with Demos

Liquid is a simple template language that Jekyll uses to process pages for your site. With Liquid you can output complex contents without additional plugins.

Practising closures in JavaScript

JavaScript Notes

2018.12.17

Practising closures in JavaScript

JavaScript is a very function-oriented language. As we know, functions are first class objects and can be easily assigned to variables, passed as arguments, returned from another function invocation, or stored into data structures. A function can access variable outside of it. But what happens when an outer variable changes? Does a function get the most recent value or the one that existed when the function was created? Also, what happens when a function invoked in another place - does it get access to the outer variables of the new place?

Hands on IBM Cloud Functions with CLI

Tools

2020.10.20

Hands on IBM Cloud Functions with CLI

IBM Cloud CLI allows complete management of the Cloud Functions system. You can use the Cloud Functions CLI plugin-in to manage your code snippets in actions, create triggers, and rules to enable your actions to respond to events, and bundle actions into packages.

TOC

Ads by Google