05.Es6入门学习笔记(阮一峰教程)

Es6学习笔记

一、let和const


1. let,const不存在变量提升,只在声明所在的块级作用域中有效。
var tmp = 123
if(true)
{
    let tmp = 'abc'
    console.log(tmp)
}
console.log(tmp)
2. Es5只有全局作用域和函数作用域,Es6添加了块级作用域
3. 考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。
4. 对于复合类型的变量,变量指向数据所在的地址,不保证该地址的数据不变,所以在将对象声明为常量时必须特别小心。
const foo = {name:'zhangsan'}
foo.age = 18
console.log(foo) // Object { name: "zhangsan", age: 18 }
5.let, const, class定义的全局变量与顶层对象脱钩

二、变量的解析赋值


1. 对象的解析赋值的内部机制,是先找到同名属性,然后再赋给对应的变量。真正被赋值的是后者,而不是前者。如:
var {foo:bar, bar:foo} = {foo:'hello', bar:'world'}
console.log(foo, bar) // 输出world hello

解析过程:先找到变量foo,其值为bar,将后面bar对应的值'world'赋给了foo。

2. 解析也可用于嵌套结构的对象,如
var obj = {p: ['hello', {y: 'world'}]}
var {p:[x, {y}]} = obj
console.log(x, y) // hello world

注意这里的p是模式,不是变量,因此不会被赋值

let node = {loc: {start: {line: 1, column: 5}}}
let {loc: { start: {line, column}}} = node
console.log(line, column) // 1, 5

这里loc和start都是模式,不会被赋值

3. 对象的解析赋值,可以很方便的将现有对象的方法,赋值到某个变量,如
let {log, sin, cos} = Math

上面代码将Math的对数,正弦,余弦三个方法赋值到了对应的变量上,使用起来就会方便很多。

4. 圆括号问题,解析赋值解析圆括号时很麻烦,只要由可能,就不要在模式中放置圆括号。另外:
* 变量声明语句中,不能带有圆括号
* 函数参数中,模式不能带有圆括号
* 赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号中

三、字符串的扩展


1. JS内部,字符以UTF-16的格式存储,每个字符固定为2个字节。对于那些需要4个字节存储的字符(Unicode码大于0xFFFF的字符),JS会认为它们是两个字符。
2. Es6提供的codePointAt方法,直接使用时参数也不能正确识别,如下面的字符串中,a的位置应该是1,但必须传入2才能取到字符,解决的办法是使用for...of循环,它能正确识别32位的UTF-16字符。
var s = "𠮷a"
console.log(s.codePointAt(0)) // 134071
console.log(s.codePointAt(1)) // 57271
console.log(s.codePointAt(2)) // 97
console.log(s.codePointAt(0).toString(16)) // 20bb7
console.log(s.codePointAt(2).toString(16)) // 61
for(let ch of s)
{
  console.log(ch.codePointAt(0).toString(16))// 20bb7  61
}
3. Es6中提供了另外操作32位的UTF-16的函数:String.fromCodePoint(), at(), includes(), startsWith(), endsWith()如
console.log(String.fromCodePoint(0x20BB7))

let s = 'Hello World!'
console.log(s.includes('W')) // true
console.log(s.startsWith('H')) // true
console.log(s.endsWith('d')) // false

当前的FireFox50.1和最新的360极速浏览器(内核为Chromium50.0.2661.102)均不支持at()函数

4.模板字符串
var s = `<span>这是一个
  模板字符串!
  </span>
`
console.log(s)

四、数值


1. 二进制和八进制的表示法分别使用前缀0b/0B和0o/0O。
2. 新的函数Number.isFinite(), Number.isNaN(), Number.parstInt(), Number.parseFloat(), Number.isInteger(),
console.log(Number.isInteger(3)) // true
console.log(Number.isInteger(3.0)) // true

在JS内部,整数和浮点数是同样的存储方法,所以3和3.0被视为同一个值。

3. 安全整数检测Number.isSafeInteger(), Number.MAX_SAFE_INTEGER, Number.MIN_SAFE_INTEGER。
console.log(Number.MAX_SAFE_INTEGER) // 9007199254740991
console.log(Number.MIN_SAFE_INTEGER) // -9007199254740991

在使用Number.isSafeInteger()时,不能只验证运算结果,而要同时验证参与运算的每个值。

4. ES6在Math对象上新增了17个与数学相关的方法。

五、数组


1. Array.from()用于将类似数组的对象(含有length属性)和可遍历的对象(包括ES6新增的数据结构Set和Map)转换为数组
let a = {'0':1, '1':2, '2':3, 'length':3}
console.log(Array.from(a)) // [1, 2, 3]
console.log([].slice.call(a)) // [1, 2, 3]

let s = new Set(['a', 'b', 'c'])
console.log(Array.from(s)) // ["a", "b", "c"]
2. Array.of()用来将一组值转换为数组,主要目的是弥补Array()和new Array()由于参数的不同导致的行为的差异,如
console.log(Array.of()) // []
console.log(Array.of(3)) // [3]
console.log(Array.of(3, 4)) // [3, 4]
console.log(Array()) // []
console.log(Array(3)) // [ , , ,]三个空的存储位置
console.log(Array(3, 4)) // [3, 4]
console.log(new Array()) //[]
console.log(new Array(3)) // [ , , , ]三个空的存储位置
console.log(new Array(3, 4)) // [3, 4]
3. 数组实例的copyWithin(),在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有成员)。
console.log([1,2,3,4,5].copyWithin(0, 3,4)) // 4,2,3,4,5
4. 数组实例的find()和findIndex()函数
console.log([1, 4, -2, 5].find((n) => n < 0))
5. 数组实例的includes()函数
console.log([1, 2, 3].includes(2))

同Set结构的has()方法一样,数组的includes()函数是用来查找值的;而Map结构的has()方法是用来查找键名的。

6. 由于空位的处理规则非常不统一,所以要避免出现空位的情况。

六、函数


1. 函数默认值
function log(x=0, y=0)
{
  console.log(x, y)
}
log()
2. 函数的length属性,表示该函数预期传入的参数个数。如果参数有默认值,则length不包含这个参数。同理,rest参数也不会计入length属性
3. 如果将参数默认值设为undefined,表明这个参数是可以省略的。
function foo(bar = undefined){......}
4. rest参数,形式为“...变量名“,用于获取函数的多余参数,这样就不需要使用arguments对象了。
function add(...args)
{
  let sum = 0;
  for(let v of args)
  {
    sum += v;
  }
  console.log(sum)
}
add(2,3,4)
5. 扩展运算符“...” ,它的作用是将一个数组转为用逗号分隔的参数序列。
console.log(...[1, 2, 3])

扩展运算符内部调用的是数据结构的Iterator借口,因此只要具有Iterator接口的对象,都可以使用扩展运算符,比如Map结构。

let map = new Map([
[1, 'one'],
[2, 'two'],
[3, 'three'],
])
console.log(...map.values()) // one two three
6. 箭头函数
var f = v => console.log(v);
f('hello world')
等价于
var f = function(v){
  console.log(v);
}

let f = n => n % 2 == 0;
等价于
let f = function(n)
{
  return n % 2 == 0
}

如果没有参数,或多个参数,就使用一个圆括号代表参数部分

var f = (name) => console.log('hello' + name)
f('world!')

var f = (string, name) => console.log(string + " " + name)
f('hello', 'world!')

感觉添加一个小括号比较好,这样可以统一起来

7.箭头函数中的this,指向固定化,并不是因为箭头函数内部有绑定this的机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this。
function foo()
{
  return () => {
    return () => {
      return () => {
        console.log('id:', this.id)
      }
    }
  }
}
var f = foo.call({id:1})
var t1 = f.call({id:2})()()
var t2 = f().call({id:3})()
var t3 = f()().call({id:4})

上面的代码中,只有一个this,就是函数foo的this,所以t1,t2,t3输出同样的结果,因为内部所以的箭头函数都没有自己的this,他们的this实际都是最外层foo函数的this。

长期以来,Js的this对象一直都是一个令人头疼的问题,在对象方法中使用this,必须非常小心,箭头函数“绑定”this,很大程度上解决了这个困扰。

7.尾调用优化和尾递归

七、对象,允许使用变量和函数,作为对象的属性和方法


1.简洁表示法
let birthday = '2010/10/10'
let Person = {
  name: '张三',
  birthday,
  happy() {console.log('Happy Birthday ' + this.name)}
}
Person.happy()
2.判断两个值是否相等使用Object.is()
3.Object.assign()方法用于对象的合并,将源对象source的所有可枚举属性,复制到目标对象target。
var target = {a: 1}
var source1 = {b: 2}
var source2 = {c: 3}
console.log(Object.assign(target, source1, source2))

var target = {a:{b:'222', d:'333'}}
var source = {a:{b:'hello'}}
console.log(Object.assign(target, source)) // {a: {b: 'hello'}}

如果目标对象与源对象有同名属性,或多个源对象有同名属性,则后面的属性会覆盖前面的属性

Object.assign方法是浅拷贝,如果源对象某个属性的值是对象,则目标对象拷贝得到的是这个对象的引用。

Object.assign()的用途

  • 为对象添加属性
  • 为对象添加方法
  • 克隆对象
  • 合并多个对象
  • 为属性指定默认值
4.遍历对象 Object.keys, Object.values, Object.entries
5.扩展运算符
let clone = {...a}
等价于
let clone = Object.assign({}, a)

八、Set和Map


1. Set类似于数组,但它的成员值都是唯一的。
* keys():返回键名的遍历器
* values():返回键值的遍历器
* entries():返回键值对的遍历器
* forEach():使用回调函数遍历每个成员
> 扩展运算符...内部使用for...of循环,所以也可以用于Set结构

九、一些不常用的功能


1. SIMD(Single Instruction/Multiple Data),即单指令,多数据

它是JS操作CPU对应指令的接口,可以使用一个指令,完成多个数据的运算,所以被广泛用于3D图形运算、物理模拟等运算量超大的项目之中。
SIMD是数据并行处理(parallelism)的一种手段,可以加速一些运算密集型操作的速度。

十、编程风格


1. let和const
  • let取代var
  • 所有的函数都应该设置为常量
  • 长远来看,JS可能会有多线程的实现,let表示的变量,这时let表示的变量,只应出现在单线程运行的代码中,不能是多线程共享的,这样有利于保证线程安全。
2. 字符串
  • 静态字符串一律使用单引号或反引号,不使用双引号
  • 动态字符串使用反引号
3.解构赋值
  • 使用数组成员对变量赋值时,优先使用解构赋值
  • 函数的参数如果是对象的成员,优先使用解构赋值
function getFullName({firstName, lastName}){ }
  • 如果函数返回多个值,优先使用对象的解构赋值,而不是数组的解构赋值
function getInput(input) {
    return { left, right, top, bottom};
}
4. 对象
  • 单行定义的对象,最后一个成员不以逗号结尾。多行定义的对象,最后一个成员以逗号结尾
  • 对象尽量静态化,一旦定义,就不得随意添加新的属性。如果添加属性不可避免,要使用Object.assign方法
  • 如果对象的属性名是动态的,可以在创造对象的时候,使用属性表达式定义。
const obj = {
    id: 5,
    name: 'Tom',
    [getKey('enabled')]: true,
};
5.数组
  • 使用扩展运算符(...)拷贝数组
  • 使用Array.from方法,将类似数组的对象转为数组
6.函数
  • 立即执行函数可以写成箭头函数的形式
(() => {
    console.log(' Hello World');
})();
  • 简单的、单行的、不会复用的函数,建议采用箭头函数。如果函数体较为复杂,行数较多,还是应该采用传统的函数写法
7. Map和Object
  • 只有模拟现实世界的实体对象时,才使用Object。如果只是需要key : value的数据结构,使用Map结构。因为Map有内建的遍历机制

8. 使用ESLint

推荐阅读更多精彩内容

  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    千机楼阅读 555评论 0 0
  • 三,字符串扩展 3.1 Unicode表示法 ES6 做出了改进,只要将码点放入大括号,就能正确解读该字符。有了这...
    eastbaby阅读 714评论 0 7
  • 从大哥大到单色屏,从彩色屏幕到智能手机,手机的变得轻薄,外观也随着人们的需求变大变小。仅仅是通讯功能的手机早已不能...
    onecharlotte阅读 25评论 0 0
  • 人人都希望自己有靠山,有了靠山,人就更有底气、更有自信,贵人无私相助、小人退避三舍,进则易成、退而能守,生活轻松自...
    易学斋国学文化阅读 848评论 0 0
  • 文/初明 来自遥远的夜空 在无光的地方向下飘游 黑色的光 黑色的花 黑色的叶 黑色的眼睛 天空洁净成一片黑色 晾在...
    吉林省初明阅读 39评论 1 1