ES6学习笔记
Object对象方法
{
// 用变量做对象的键
let a = 'c'
let obj = {
[a]: 'b'
}
console.log(obj)// {c: "b"}
}
{
let obj = {a: 1, b: 2}
console.log(Object.keys(obj))// ["a", "b"]
console.log(Object.values(obj))// [1, 2]
console.log(Object.entries(obj))// [["a", 1], ["b", 2]]
for(let [a, b] of Object.entries(obj)) {
console.log(a, b)// a 1 b 2
}
}Array对象方法
{
// 使用元素填充空数组
console.log(new Array(5).fill(0))// [0, 0, 0, 0, 0]
}
{
function foo(a, b, c) {
let argu = Array.from(arguments)// 将伪数组转换成数组(另外：[].slice.call(arguments)和[...arguments]也可以转换)
argu.forEach((val, key) => {
console.log(val)// 4 5 6
})
}
foo(4, 5, 6)
}
{
let arr = [4, 5, 6]
arr = arr.map((val, key) => {// 映射的使用
return val * 2
})
console.log(arr)// [8, 10, 12]
}
{
let arr = [4, 5, 6],
findVal = arr.find((val) => {// 寻找val大于4的值
return val > 4
}),
findIndex = arr.findIndex((val) => {// 寻找val大于4的值的下标
return val > 4
})
console.log(findVal, findIndex)// 5 1
}
{
// 在数组中寻找是否存在此值
let arr = [4, 5, 6]
console.log(arr.includes(5))// true
}
{
let a = 1,
d = 4
function fun(a, b = a, c = d) {// 注意作用域的范围
console.log(a, b, c)// 2 2 4
}
fun(2)
}Math对象方法
{
// 0b开头用来表示一个二进制数
console.log(0b101)// 5
// 0o开头用来表示一个八进制数
console.log(0o101)// 65
}
{
// 判断一个数、字符串是负数、零、正数还是非数字
console.log(Math.sign(-5))// -1
console.log(Math.sign(0))// 0
console.log(Math.sign(5))// 1
console.log(Math.sign('-5'))// -1
console.log(Math.sign('hvb'))// NaN
}
{
// 求3次立方根
console.log(Math.cbrt(8))// 2
}字符串方法
{
let str = 'logo.png',
a = str.includes('go'),// str是否包含'go'字符串
b = str.startsWith('lo'),// str是否以'lo'字符串开头
c = str.endsWith('.png')// str是否以'.png'字符串结尾
console.log(a, b, c)// true true true
}
{
let str = 'abc',
str2 = str.repeat(2)// 重复str字符串2次
console.log(str2)// abcabc
}
{
let str = '1',
a = str.padStart(2, '0')// 当str的长度不足2时，在前面自动补'0'
b = str.padEnd(2, '0')// 当str的长度不足2时，在后面自动补'0'
console.log(a, b)// 01 10
}
{
let month = `${(``+(new Date().getMonth()+1)).padStart(2, `0`)}月`// 获取当前月份，不足2位数时，自动补0
console.log(month)
}解构赋值
{
// 数组解构
let a, b, rest
[a, b, c=3, ...rest] = [1, 2, 4, 5, 6]
console.log(a, b, c, rest)// 1 2 4 [5, 6]
}
{
// 对象解构
let a, b
({a, b: c} = {a: 1, b: 2})
console.log(a, b, c)// 1 undefined 2
}
{
let data = {
name: 'hvb',
course: [
{ title: 'chinese', score: 90 },
{ title: 'english', score: 80 }
]
}
for (let i = 0; i < data.course.length; i++) {
let { [i]: { title, score } } = data.course// 通过i来定位当前要解构的是数组的哪一项
console.log(title, score)// chinese 90 english 80
}
}
{
// 实现2个值的互换
let a = 1,
b = 2;
[a, b] = [b, a]
console.log(a, b)// 2 1
}
{
// 通过解构函数的参数方便赋值
function foo({a, b=2}) {
console.log(a, b)// 1 2
}
foo({a: 1})
}默认参数
// 检查参数是否必填
function check() {
throw new Error('该参数必填')
}
function foo(a=check(), b=2) {
console.log(a + b)
}
foo(1)// 3
foo()// 抛出错误块级作用域{}
块级作用域易犯错误
// 使用var声明变量 var funArr = [] for(var i=0; i<2; i++) {// var声明变量使i变量提升且由于循环，最终会变成2 funArr.push(function() {// 这里添加到数组中的匿名函数在执行的时候，拿到的i是变量提升的那个值 console.log(i) }) } funArr[0]()// 2 funArr[1]()// 2 // 使用let声明变量 let funArr2 = [] for(let j=0; j<2; j++) {// let声明变量，会在每次循环中都创建一个块作用域，这个块作用域中的i每次都能确定 funArr2.push(function() {// 这里添加到数组中的匿名函数在执行的时候，拿到的i是当前块作用域中的i console.log(j) }) } funArr2[0]()// 0 funArr2[1]()// 1es6中可以直接使用{}创建一个块级作用域
{ let a = 1 console.log(a)// 1 { let a = 2 console.log(a)// 2 } }
独一无二的值Symbol
{
let a = Symbol()
let b = Symbol()
let c = Symbol.for('e')// 用'e'来标记这个独一无二的值
let d = Symbol.for('e')
console.log(a==b, c==d)// false true
}
{
// 用Symbol做的键不会重复
let a = Symbol.for('abc')
let obj = {
[a]: 1,
abc: 2
}
console.log(obj)// {abc: 2, Symbol(abc): 1}
// 直接遍历obj无法得到Symbol类型的键
for(let key in obj) {
console.log(key)// abc
}
let symbol = Object.getOwnPropertySymbols(obj)// 通过这个方法只可以拿到Symbol数组，然后可以正常遍历
console.log(symbol)// [Symbol(abc)]
let all = Reflect.ownKeys(obj)// 通过这个方法可以拿到既包含普通的键又包含Symbol键的数组，然后可以正常遍历
console.log(all)// ["abc", Symbol(abc)]
}新增数据结构set和map
{
// 声明时直接传入数组，用来生成组员
let a = new Set([1, 2])
// 通过add添加组员
a.add(3)
console.log(a)// Set(3) {1, 2, 3}
// 通过has验证是否含有此组员
console.log(a.has(2))// true
// 通过delete删除组员
a.delete(1)
console.log(a)// Set(2) {2, 3}
// 通过clear清空组员
a.clear()
console.log(a)// Set(0) {}
// 实例：数组去重
let arr = [1, 2, 3, 1]
let res = [...new Set(arr)]
console.log(res)// [1, 2, 3]
}
{
// 声明时直接传入二维数组，用来生成组员
let a = new Map([[1, 2], [3, 4]])
// 通过set添加组员
a.set('a', 'b')
console.log(a)// Map(3) {1 => 2, 3 => 4, "a" => "b"}
console.log(a.get(1))// 2
// 通过has验证是否含有此组员
console.log(a.has(3))// true
}
{
// obj set map作对比
let item = {a: 1},// 缓存的对象
obj = {},// 空对象(用来对比)
set = new Set(),// 空set(用来对比)
map = new Map()// 空map(用来对比)
// 添加一个组员
obj.a = 1
set.add(item)
map.set('a', 1)
console.log(obj, set, map)// {a: 1} Set(1) {Object {a: 1}} Map(1) {"a" => 1}
// 查看一个组员
console.log('a' in obj, set.has(item), map.has('a'))// true true true
// 修改一个组员
obj.a = 2
item.a = 2
map.set('a', 2)
console.log(obj, set, map)// {a: 2} Set(1) {Object {a: 2}} Map(1) {"a" => 2}
// 删除一个组员
delete obj.a
set.delete(item)
map.delete('a')
console.log(obj, set, map)// {} Set(0) {} Map(0) {}
// 由此可看，map和set的操作比较方便，所以建议在开发过程中，优先使用map数据结构，如果数据要求唯一性，那么使用set，放弃使用传统的数组和对象
}映射Reflect
{
let obj = {a: 1}
console.log(Reflect.get(obj, 'a'))// 1
Reflect.set(obj, 'a', 2)
console.log(obj)// {a: 2}
console.log(Reflect.has(obj, 'a'))// true
}对象代理new proxy()
简单示例
// 原对象 let Person = { name: 'hvb', sex: 'male' } // 代理对象 let person = new Proxy(Person, { get(target, key) { return Reflect.get(target, key)// target[key] }, set(target, key, value) { if(key == 'sex') { throw new Error('性别不允许修改') }else { return Reflect.set(target, key, value) } } }) person.name = 'hwj' console.log(person.name)// hwj person.sex = 'female'// 抛出错误通过对象代理给类属性增加验证规则
// 创建验证代理 function createValidator(target, rule) { return new Proxy(target, { set(target, key, value) { if(rule[key]) { if(rule[key].validate(value)) { return Reflect.set(target, key, value) }else { throw new Error(rule[key].message(key, value)) } }else { throw new Error(`属性${key}不存在`) } } }) } // 定义验证规则 let rule = { age: {// 年龄只能为数字 validate(val) { return /\d/.test(val) }, message(key, val) { return `属性${key}是年龄，不能为${val}` } } } class Person { constructor(name, age) { this.name = name this.age = age return createValidator(this, rule) } } let person = new Person('hvb', 22) person.age = 12 console.log(person.age)// 12 person.age = 'qwe'// 抛出错误
类class
{
class Person {
constructor(name='hvb') {
this.name = name
}
// getter
get longName() {
return 'long '+ this.name
}
// setter
set longName(value) {
return this.name = value
}
// 静态方法
static say() {
console.log('I am '+ this.name)// I am Person
}
}
// 静态属性
Person.age = 22
let person = new Person()
console.log(person.longName)// long hvb
person.longName = 'hwj'
console.log(person.longName)// long hwj
Person.say()
}import from (详见#12)
- import和export需要babel编译之后才能在浏览器运行，如果不想这么麻烦配置编译器，也可以直接写
，这样可以直接在script标签里面正常使用
import a from 'a.js';// node会在node_modules文件夹下寻找相应的模块
import a from './a.js;// node会在同级目录文件夹下寻找相应的模块rest和spread使用的都是…，但是注意其区别 (详见#3)
Object.assign是浅拷贝 (详见#4)
- 使用扩展运算符实现浅拷贝
var obj1 = {
a: 1,
b: 2
}
var obj2 = {
a: 3,
c: 4
}
var obj = { ...obj1, ...obj2 }
console.log(obj)// {a: 3, b: 2, c: 4}- jquery深度拷贝extend方法封装
- deep-assign
使用let重复声明同一个变量会报错 (详见#5)
箭头函数=>(lambda表达式) (详见#10)
this指向是不可改变的
正常函数写法
var sex = 'male'; function Foo() { console.log(this.sex); } Foo.call({sex: 'female'});// => female箭头函数写法
var sex = 'male'; var Foo = () => {console.log(this.sex)}; Foo.call({sex: 'female'});// => male // Foo的this指向全局，由于函数使用箭头函数写法，所以使用call无法改变this指向，依然输出male
直接返回对象要加()
var Foo = x => ({x: x}); console.log(Foo(2).x);// => 2箭头函数可以嵌套使用
正常函数写法
function A(a) { return { B: function(b) { return a+b; } } } console.log(A(1).B(2));// => 3箭头函数写法
var A = a => ({B: b => a+b}); console.log(A(1).B(2));// => 3
函数简写 (详见#11)
var obj = { sex: 'male', say: () => { console.log(this.sex); } } obj.say();// => undefined // 箭头函数的this指向它定义时所在的作用域，即全局var obj = { sex: 'male', say() { console.log(this.sex); } } obj.say();// => male // 简写函数的this指向对象obj本身其他
es6写法
var sex = 'male', age = 22, say = function(a, b) { return a+b; }; var f1 = () => ({sex, age}); var f2 = () => (sex, age); var f3 = () => (sex, age) => say(sex, age);编译成es5写法
var sex = 'male', age = 22, say = function say(a, b) { return a + b; }; var f1 = function f1() { return { sex: sex, age: age }; }; var f2 = function f2() { return sex, age; }; var f3 = function f3() { return function (sex, age) { return say(sex, age); }; };
参考文章
[#1] shim和polyfill有什么区别
[#2] shim和polyfill有什么区别?
[#3] ES6 Rest参数
[#4] ES2015系列(二) 理解Object.assign
[#5] 在JavaScript ES6中使用let和const定义变量
[#6] ES6详解六：赋值语法糖 destructing & spread
[#7] ES6中新增的数据结构Set与Map
[#8] 深入解读JavaScript中的Iterator和for-of循环
[#9] ES6详解八：模块（Module）！
[#10] ES6中箭头函数的使用
[#11] es6对象方法简写?
[#12] 关于ES6的 模块功能 Module 中export import的用法和注意之处
[#13] babel的polyfill和runtime的区别
[#14] 触摸ES6 - 模板字符串
async/await流程控制
- 给class添加异步方法
class Foo {
log() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(111)
}, 1000)
})
}
async say() {
return await this.log()
}
}
let f = new Foo()
f.say()
.then(data => {
console.log(data)
})promise化
var Promise = require('bluebird') var async = Promise.promisifyAll(require('async')) async.seriesAsync([(cb) => { cb(null, 1) }]) .then((data) => { console.log(data, 11) })
caolan/async
Async使用简介之流程控制
体验异步的终极解决方案-ES7的Async/Await