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有内建的遍历机制
网友评论