视频来源:石川blue讲解
参考笔记:https://github.com/able8/hello-es6
1.ES6怎么来的
ECMAScript 和 JavaScript:
1.ECMA 是标准,JS 是实现
2.ECMAScript 简称 ECMA 或 ES
历史版本:
1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织,ES 正式出现
1999, ES3.0 被广泛支持
2011, ES5.1 成为 ISO 国际标准
2015, ES6.0 正式发布
2.ES6兼容性
ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS
解决不兼容办法,编译、转换
1在线转换(例如引入browser.js);
2.或者提前编译
Babel 中文网
Babel 入门教程 阮一峰
Babel 是一个 JavaScript 编译器
一个广泛使用的转码器,可以将ES6代码转为ES5代码,从而在现有环境执行
现在就用 ES6 编写程序,而不用担心现有环境是否支持
ES6:变量、函数、数组、字符串、面向对象、Promise、generator、模块化等
3.变量 let 和 常量 const
var 的问题:
1.可以重复声明,没有报错和警告
2.无法限制修改
3.没有块级作用域, { }
let 和 const:
1.不能重复声明(let a=5; let a=3 报错 不能重复声明,const同理)
2.都是块级作用域, { } 块内声明的,块外无效
3.let 是变量,可以修改(let a=5; a=3 没问题 可以修改)
4.const 是常量,不能修改
块级作用域举例:
1.原来用 var 的方式,结果弹出的都是 3
2.或者将变量 封装到函数里,限制作用域,但比较麻烦
3.用 let 最简单,直接 var 改 let,解决作用域问题
Document
4.函数-箭头函数
箭头函数:
把之前的函数模型改成了(小括号 箭头 大括号),也就是function一去,换成箭头=>,而且只有一个参数时候()可以省略,只有一个return语句时候{}可以省略。
箭头函数,就是函数的简写:
1.如果只有一个参数,() 可以省
2.如果只有一个return语句,{}可以省
// 普通函数
function name() {
}
// 箭头函数,去掉 function, 加上 =>
() => {
}
//对比
let show1 = function () {
console.log('abc')
}
let show2 = () => {
console.log('abc')
}
show1() // 调用函数
show2()
let show4 = function (a) {
return a*2
}
let show5 = a => a * 2 //简洁,类似python lambda 函数
console.log(show4(10))
console.log(show5(10))
5.函数-参数
1参数扩展/展开 …args
2.默认参数
参数扩展(…)作用:收集剩余的参数;展开数组(相当于把数组内容取出来展开)
//...args 就是剩余参数(但是必须是最后一个参数位置)
function show(a, b, ...args) {
console.log(a)
console.log(b)
console.log(args)
}
console.log(show(1, 2, 3, 4, 5))
//展开数组(...arr1就是把arr1数组内容取出来展开)
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3) //1 2 3 4 5 6
//默认参数
function show2(a, b=5, c=8) {
console.log(a, b, c)
}
show2(88, 12)
6.解构赋值
let [a, b, c] = [1, 2, 3]
console.log(a, b, c)
let {x, y, z} = {x: 1, y: 2, z: 3}
console.log(x, y, z)
let [json, arr, num, str] = [{ a: 1, b: 2 }, [1, 2, 3], 8, 'str']
console.log(json, arr, num, str)
解构赋值:
1.左右两个边结构必须一样(数组对数组,对象对对象,JSON对JSON,例如 [] = {}时就结构不一样了)
2.右边必须是个东西(东西:数组、对象、JSON等,例如{5,12}就不对,不是数组也不是JSON)
3.声明和赋值赋值不能分开,必须在一句话里(let [a,b];[a,b]=[5,12];)
7.数组
数组:
1.新增4个方法(map、reduce、filter、forEach)
2.map( 映射 )一个对一个
let arr = [12, 5, 8]
let result = arr.map(function (item) {
return item*2
})
let result2 = arr.map(item=>item*2) // 简写
console.log(result)
console.log(result2)
let score = [18, 86, 88, 24]
let result3 = score.map(item => item >= 60 ? '及格' : '不及格')
console.log(result3)
// 结果
[ 24, 10, 16 ]
[ 24, 10, 16 ]
[ '不及格', '及格', '及格', '不及格' ]
3.reduce (汇总) 一堆出来一个(用于比如,算个总数,算个平均)
参数含义是:tmp 上次结果,item当前数,index次数1开始,因为是循环计算,所以会产生tmp上次临时结果,那么这次要计算的是item。
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
//tmp 上次结果,item当前数,index次数1开始
console.log(tmp, item, index)
return tmp + item
})
console.log(result)
var arr = [1, 3, 5, 7]
var result = arr.reduce(function (tmp, item, index) {
if (index != arr.length - 1) { // 不是最后一次
return tmp + item
} else {
return (tmp + item)/arr.length
}
})
console.log(result) // 平均值
4.filter (过滤器) 保留返回值为true的
var arr = [12, 4, 8, 9]
var result = arr.filter(item => (item % 3 === 0) ? true : false)
console.log(result)
var result = arr.filter(item => item % 3 === 0)
console.log(result)
var arr = [
{ title: '苹果', price: 10 },
{ title: '西瓜', price: 20 },
]
var result = arr.filter(json => json.price >= 20)
console.log(result)
5.forEach (循环迭代)
var arr = [12, 4, 8, 9]
var result = arr.forEach(item => console.log(item))
var result = arr.forEach((item, index)=>console.log(item, index))
8.字符串
1.多了两个新方法:startsWith、endsWith
var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true
2.字符串模版:使用反引号,${变量}、可以折行
let a = 12
let str1 = `asdf${a}`
console.log(str1)
let title = '标题'
let content = '内容'
let str = `
${title}
${content}
`
/*之前拼接的过程
str = `\
`+title+`
\
'+contenr+'
\
`;
*/
console.log(str)
标题
内容
9.面向对象-基础
原来写法:
1.类和构造函数一样
2.属性和方法分开写的
// 老版本 (类和构造函数一样)
function User(name, pass) {
this.name = name
this.pass = pass
}
// 属性和方法分开写的
User.prototype.showName = function () {
console.log(this.name)
}
User.prototype.showPass = function () {
console.log(this.pass)
}
var u1 = new User('able', '1233')
u1.showName()
u1.showPass()
// 老版本继承
function VipUser(name, pass, level) {
User.call(this, name, pass) //通过call()继承构造器内容
this.level = level
}
//基础继承方法
VipUser.prototype = new User()
VipUser.prototype.constructor = VipUser
//添加自己的方法
VipUser.prototype.showLevel = function () {
console.log(this.level)
}
var v1 = new VipUser('blue', '1234', 3)
v1.showName()
v1.showLevel()
新版面向对象:
1.有了 class 关键字、构造器
2.class 里面直接加方法
3.继承,super 超类==父类
class User {
constructor(name, pass) {
this.name = name
this.pass = pass
}
showName() {
console.log(this.name)
}
showPass() {
console.log(this.pass)
}
}
var u1 = new User('able2', '111')
u1.showName()
u1.showPass()
// 新版本继承
class VipUser extends User {
constructor(name, pass, level) {
super(name, pass)
this.level = level
}
showLevel(){
console.log(this.level)
}
}
v1 = new VipUser('blue', '123', 3)
v1.showLevel()
10.面向对象应用
React:
1.用于构建用户界面的 JavaScript 库
2.组件化,一个组件就是一个 class
3.JSX == bable == browser.js
11.json
JSON 格式:
1.JavaScript Object Notation 的缩写,是一种用于数据交换的文本格式
2.JSON 是 JS对象 的严格子集
3.JSON 的标准写法
4.只能用双引号({"a": 12, "b": 4, "c": "abc"}或者{"a": "abc","b": 5}
)
5.所有的key都必须用双引号包起来
JSON 对象:
1.JSON 对象是 JavaScript 的原生对象,用来处理 JSON 格式数据,有两个静态方法
2.JSON.parse(string) :接受一个 JSON 字符串并将其转换成一个 JavaScript 对象。
3.JSON.stringify(obj) :接受一个 JavaScript 对象并将其转换为一个 JSON 字符串。
JSON字符串(我们一般用的JSON格式也就是JSON字符串):{"a": 12, "b": 4, "c": "abc"}
JavaScript对象:{a: 12, b: 5}
JavaScript对象:
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
//本例使用函数来构造对象:
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
var myFather=new person("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
JSON.parse(string)和JSON.stringify(obj) :
var json = {a: 12, b: 5}
var str = 'hi,' + JSON.stringify(json)
var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json))
console.log(str)
console.log(url)
var str = '{"a": 12, "b": 4, "c": "abc"}'
var json = JSON.parse(str)
console.log(json)
hi,{"a":12,"b":5}
http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D
{ a: 12, b: 4, c: 'abc' }
JSON简写:
1.名字一样
2.方法
//名字一样,JSON简写
let json = {a:a,b:b};
let json = {a,b};
//JSON里面方法可以简写
let json = {
a:12,
show:function(){
}
}
//简写(新版本面向对象里面函数写法也类似,省略function)
let json = {
a:12,
show(){
}
}
对象(object):
1.是 JavaScript 语言的核心概念,也是最重要的数据类型
2.对象就是一组“键值对”(key-value)的集合,是一种无序的复合数据集合
3.对象的所有键名都是字符串, 所以加不加引号都可以
4.如果键名是数值,会被自动转为字符串
5.对象的每一个键名又称为“属性”(property),它的“键值”可以是任何数据类型
6.如果一个属性的值为函数,通常把这个属性称为“方法”,它可以像函数那样调用
7.in 运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值
8.for…in循环用来遍历一个对象的全部属性
JSON对象 简写:
1.key-value 一样时可以简写
2.里面函数可以简写, 去掉
var a = 12, b = 5
console.log({a:a, b:b})
console.log({a, b})
console.log({a, b, c:"c"})
console.log({ a, b, show(){ console.log('a') }})
{ a: 12, b: 5 }
{ a: 12, b: 5 }
{ a: 12, b: 5, c: 'c' }
{ a: 12, b: 5, show: [Function: show] }
12.Promise
异步和同步:
1.异步,操作之间没有关系,同时执行多个操作, 代码复杂
2.同步,同时只能做一件事,代码简单
Promise 对象:
1.用同步的方式来书写异步代码
2.Promise 让异步操作写起来,像在写同步操作的流程,不必一层层地嵌套回调函数
3.改善了可读性,对于多层嵌套的回调函数很方便
4.充当异步操作与回调函数之间的中介,使得异步操作具备同步操作的接口
Promise 也是一个构造函数:
1.接受一个回调函数f1作为参数,f1里面是异步操作的代码
2.返回的p1就是一个 Promise 实例
3.所有异步任务都返回一个 Promise 实例
4.Promise 实例有一个then方法,用来指定下一步的回调函数
function f1(resolve, reject) {
// 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成,就会执行f2。
Promise 使得异步流程可以写成同步流程
// 传统异步写法
step1(function (value1) {
step2(value1, function(value2) {
step3(value2, function(value3) {
step4(value3, function(value4) {
// ...
});
});
});
});
// Promise 的写法
(new Promise(step1))
.then(step2)
.then(step3)
.then(step4);
Promise使用示例:
Promise.all(promiseArray)方法:
1.将多个Promise对象实例(比如上面的实例p,可以有p1,p2等)包装,生成并返回一个新的Promise实例
2.promise数组中所有的promise实例都变为resolve的时候,该方法才会返回
3.并将所有结果传递results数组中
4.promise数组中任何一个promise为reject的话,则整个Promise.all调用会立即终止,并返回一个reject的新的promise对象
var p1 = Promise.resolve(1),
p2 = Promise.resolve(2),
p3 = Promise.resolve(3);
Promise.all([p1, p2, p3]).then(function (results) {
console.log(results); // [1, 2, 3]
});
Promise.all(promiseArray)使用实例:
//改进后代码
//改进后代码 因为$.ajax({url:'',dataType:'json'}); 返回值是Promise对象,所以代码可以进一步简化
Promise.race([p1, p2, p3]):
1.Promse.race就是赛跑的意思
2.哪个结果获得的快,就返回那个结果
3.不管结果本身是成功状态还是失败状态
13.generator-认识生成器函数
generator 生成器函数:
1.普通函数,一路到底
2.generator函数,中间可以停,到哪停呢,用 yield 配合,交出执行权
3.yield 有 放弃、退让、退位的意思
4.需要调用next()方法启动执行,需要遇到 yield 停, 踹一脚走一步
5.generator函数前面加一个 * 两边可以有空格,或靠近函数或function
6.背后实际生成多个小函数,实现走走停停
function show() {
console.log('a')
console.log('b')
}
show() // 普通函数
function *show2() {
console.log('1')
yield
console.log('2')
}
let genObj = show2()
genObj.next() // 1
genObj.next() // 2
genObj.next() // 最后了,没有结果
普通函数一路到底,generator函数中间能停,然后next一次执行一次。
yield暂停原理:背后实际生成多个小函数,实现走走停停
function *show(){
alert("a");
yield; //暂时不向下执行,使函数可以暂停
alert("b");
}
//生成多个小函数
function show_1(){
alert("a");
}
function show_2(){
alert("b");
}
genObj.next(); //show_1
genObj.next(); //show_2
14.generator-yield是啥
yield:
1.既可传参,又可以返回
2.第一个next()传参无效,只用来启动
3.var a = yield最初的值靠传参,yield 10(10是上一步返回值,可以类比洗好的菜)最后的value需要return返回
function *show(a,b){
console.log(a,b); //最初的值靠传参
alert('a');
yield 12;
alert('b');
return 55; //最后的value需要return返回
}
let gen = show(1,2);
let res1 = gen.next();
console.log(res1); //{value:12,done:false}
let res2 = gen.next();
console.log(res2); //{value:55,done:true}
如果函数前漏掉 *:
1.就是普通函数
2.如果有yield会报错, ReferenceError: yield is not defined
3.yield 只能在Generator函数内部使用
function * show() {
console.log('1')
var a = yield
console.log('2')
console.log(a)
}
// yield 传参
var gen = show()
gen.next() // 1
gen.next() // 2 和 undefined 因为没有传参,yield没有返回值
var gen = show()
gen.next(10) // 1 第一次执行到yield,但没有执行赋值
gen.next(20) // 2 和 20
function* show2() {
console.log('1')
yield 10
console.log('2')
}
// yield 返回
var gen = show2()
var res1 = gen.next()
console.log(res1) // { value: 10, done: false } false表示函数没有走完
var res2 = gen.next()
console.log(res2) // { value: undefined, done: true } 最后的value需要return返回
yield可以类比做菜过程:
var a = yield(a是上一步返回的值赋给新的一步)最初的值靠传参,yield 10(10是上一步返回值,可以类比洗好的菜)最后的value需要return返回
15.generator-实例
function *(){
let data1 = yield $.ajax({url:'data/1.txt',dataType:'json'});
let data2 = yield $.ajax({url:'data/2.txt',dataType:'json'});
let data3 = yield $.ajax({url:'data/3.txt',dataType:'json'});
console.log(data1,data2,data3);
}
异步:
1.回调
2.Promise
3.generator
4.async/await
5.发布订阅模式
// 回调
$.ajax({
url:xxx,
dataType:'json',
success(data2){
$.ajax({
url:xxx,
dataType:'json'
success(data3){
alert('完成');
},error(){
alert('错了');
}
});
},
error(){
alert('错了');
}
});
//Promise
//generator
runner(function *(){
let data1 = yield $.ajax({url:xxx,dataType:'json'});
let data2 = yield $.ajax({url:xxx,dataType:'json'});
let data3 = yield $.ajax({url:xxx,dataType:'json'});
});
Promise 适合一次读一组
generator 适合逻辑性的
// 带逻辑-generator
runner(function * () {
let userData = yield $.ajax({url: 'getUserData',dataType:'json'})
if (userData.type == 'VIP') {
let items = yield $.ajax({url: 'getVIPItems',dataType:'json'})
} else {
let items = yield $.ajax({url: 'getItems',dataType:'json'})
}
})
//带逻辑-Promise
Promise.all([
$.ajax({url:'getUserData',dataType:'json'})
]).then(results=>{
let userData = results[0];
if(userData.type == 'VIP'){
Promise.all([
$.ajax({url:'getVipItem',dataType:'json'})
]).then(results=>{
let items = results[0];
},err=>{
alert('错了');
});
}
},err=>{
alert('失败');
})
// yield 实例,用同步方式写异步
server.use(function * () {
let data = yield db.query(`select * from user_table`)
this.body = data
})
koa使用generator示例:
16.ES7 预览
数组:
1.arr.includes() 数组是否包含某个东西
2.数组的 arr.keys(), arr,entries()
3.for … in 遍历数组 下标 key
4.for … of 遍历数组 值 value, 不能用于json
let arr = ['a', 'b', 'c']
console.log(arr.includes(1))
for (let i in arr) {
console.log(i) // 循环的时下标 key
}
for (let i of arr) {
console.log(i) // 循环的是值 value
}
for (let i of arr.keys()) {
console.log('>'+i)
}
for (let [key, value] of arr.entries()) {
console.log('>' + key + value)
}
let json = { a: 12, b: 5, c: 7 }
for (let i in json) {
console.log(i)
}
字符串:
padStart()/padEnd() 指定宽度,不够就补空格或指定字符
console.log('=' + 'abcd'.padStart(6, '0') + '=')
console.log('=' + 'abcd'.padEnd(6, '0') + '=')
=00abcd=
=abcd00=
容忍度:
1.[1, 2, 3,] 老版数组最后不能有逗号,新的可以有
2.函数参数最后多的逗号也可以
async await:
1.和 generator yield 类似
2.generator 不可以写成箭头函数, async 可以
async function show() {
console.log(1)
await
console.log(2)
}