深入解读ES6系列(全18讲)

字数统计: 3.1k字   |   阅读时长≈ 15分

教程地址

1. ES6怎么来的

  • ECMAScript 和 JavaScript

    • ECMA 是标准，JS 是实现
    • 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

  • 解决不兼容办法，编译、转换

    • 在线转换
    • 或者提前编译

  • Babel 中文网

    • Babel 入门教程 阮一峰
    • Babel 是一个 JavaScript 编译器
    • 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
    • 现在就用 ES6 编写程序，而不用担心现有环境是否支持

3. ES6精髓

  1. 变量
  2. 函数
  3. 数组
  4. 字符串
  5. 面向对象
  6. Promise
  7. generator
  8. 模块化

4. 变量

  • var 的问题

    • 可以重复声明，没有报错和警告
    • 无法限制修改
    • 没有块级作用域， { }

  • let 和 const

    • 不能重复声明
    • 都是块级作用域, { } 块内声明的，块外无效
    • let 是变量，可以修改
    • const 是常量，不能修改

  • 块级作用域举例

    • 原来用 var 的方式，结果弹出的都是 3
    • 或者将变量 封装到函数里，限制作用域，但比较麻烦
    • 用 let 最简单，直接 var 改 let，解决作用域问题
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        window.onload= function () {
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i=0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }*/
            var aBtn = document.getElementsByTagName('input')
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i = 0; i < aBtn.length; i++) {
                // 封装到函数里，限制作用域
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }*/
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

4.函数-箭头函数

  • 箭头函数，就是函数的简写
    • 如果只有一个参数，() 可以省
    • 如果只有一个return，{}可以省
1
2
3
4
5
6
7
8
// 普通函数
function name() {

}
// 箭头函数，去掉 function， 加上 =>
() => {

}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
let show1 = function () {
    console.log('abc')
}

let show2 = () => {
    console.log('abc')
}

show1() // 调用函数
show2()
----------------------------------------------

let arr = [12, 5, 8, 99, 33, 14, 26];
arr.sort(function (n1, n2) {
    return n1-n2;
})
箭头函数：
arr.sort((n1,n2) => {
     return n1-n2;
})
简写：省去return
arr.sort((n1,n2) => n1-n2)
----------------------------------------------

let show4 = function (a) {
    return a*2
}
简写：
let show5 = a => a * 2  //简洁，类似python lambda 函数

console.log(show4(10))
console.log(show5(10))

5.函数-参数

  • 参数扩展／展开 ...args
    • 收集剩余的参数，必须当到最后一个参数位置
    • 展开数组，简写，效果和直接把数组的内容写在这儿一样
  • 默认参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function show(a, b, ...args) {
    console.log(a)
    console.log(b)
    console.log(args)
}
console.log(show(1, 2, 3, 4, 5))
------------------------------------------------------------
let arr1 = [1, 2, 3]
let arr2 = [4, 5, 6]
let arr3 = [...arr1, ...arr2]
console.log(arr3)

function show(a,b,c) {
    alert(a);
    alert(b);
    alert(c);
}
show(1,2,3);    //1——>2——>3
show(...arr1);	//1——>2——>3
------------------------------------------------------------
默认参数：没有传值的时候，使用默认参数
function show2(a, b=5, c=8) {
    console.log(a, b, c)
}
show2(88, 12)

6.解构赋值

1
2
3
4
5
6
7
8
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
      2
      3
      4
      5
      6
      7
      声明和赋值不能分开的意思：
      这样写，会报错：
      let [a, b];
      [a, b] = [12, 5];

      要写在一起：
      let [a, b] = [12, 5];

7.数组

  • 新增4个方法（map, reduce, filter, forEach)
  • map 映射 一个对一个
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 ]
[ '不及格', '及格', '及格', '不及格' ]
  • reduce 汇总 一堆出来一个
    • 用于比如，算个总数，算个平均
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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)  // 平均值
  • filter 过滤器 保留为true的
1
2
3
4
5
6
7
8
9
10
11
12
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)
  • forEach 循环迭代
1
2
3
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.字符串

  • 多了两个新方法
    • startsWith
    • endsWith
1
2
3
4
var url = 'http://qq.com'
console.log(url.startsWith('http'))
console.log(url.endsWith('com'))
// 都是 true
  • 字符串模版
    • 使用反单引号，${变量}
    • 可以折行
1
2
3
4
5
6
7
8
9
10
11
12
13
14
let a = 12
let str1 = `asdf${a}`
console.log(str1)

let title = '标题'
let content = '内容'
let str = `<div>
<h1>${title}</h1>
<p>${content}</p>
`
console.log(str)
<div>
<h1>标题</h1>
<p>内容</p>

9.面向对象-基础

  • 原来写法
    • 类和构造函数一样
    • 属性和方法分开写的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 老版本
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)
    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()
  • 新版面向对象
    • 有了 class 关键字、构造器和类分开了
    • class 里面直接加方法
    • 重点是继承，super 超类==父类
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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)
    }
}

var v1 = new VipUser('blue', '123', 3)
v1.showLevel()

10.面向对象应用

  • React
    • 用于构建用户界面的 JavaScript 库
    • 组件化，一个组件就是一个 class
    • JSX == babel == browser.js
    • JSX (js扩展版)

使用的时候，引入react.js，react-dom.js，browser.js。

>
1
2
3
4
注意type写babel
<script type="text/babel">

</script>

11.json

  • JSON 格式
    • JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式
    • JSON 是 JS对象 的严格子集
    • JSON 的标准写法
    • 只能用双引号
    • 所有的key都必须用双引号包起来
  • JSON 对象
    • JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法
    • JSON.parse(string) ：接受一个 JSON 字符串并将其转换成一个 JavaScript对象。
    • JSON.stringify(obj) ：接受一个 JavaScript对象 并将其转换为一个 JSON 字符串。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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 str0 = '{a: 12, b: 4, c: "abc"}'
var json = JSON.parse(str0)——》这样会报错

json的标准写法：
1、只能用双引号
2、所有的属性都必须要用引号包起来
{a:12, b:5} ×
{"a":12, "b":5}√

{a:'abc', b:5} ×
{"a":"abc", "b":5}√

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' }
  • 对象（object）
    • 是 JavaScript 语言的核心概念，也是最重要的数据类型
    • 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合
    • 对象的所有键名都是字符串, 所以加不加引号都可以
    • 如果键名是数值，会被自动转为字符串
    • 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型
    • 如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用
    • in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值
    • for…in循环用来遍历一个对象的全部属性
  • 对象 简写
    • key-value 一样时可以简写
    • 里面函数可以简写, 去掉
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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] }
----------------------------------------------------------------------
let a = 12; let b = 5;
let json = {a: a, b: b};
key-value 一样时可以简写:
let json = {a, b};
----------------------------------------------------------------------
方法: function 一块删
show:function() {....}
show() {.....}

12.Promise

(消除异步操作)

  • 异步和同步
    • 异步，操作之间没有关系，同时执行多个操作， 代码复杂
    • 同步，同时只能做一件事，代码简单
  • Promise 对象
    • 用同步的方式来书写异步代码
    • Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数
    • 改善了可读性，对于多层嵌套的回调函数很方便
    • 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口
  • Promise 也是一个构造函数
    • 接受一个回调函数f1作为参数，f1里面是异步操作的代码
    • 返回的p1就是一个 Promise 实例
    • 所有异步任务都返回一个 Promise 实例
    • Promise 实例有一个then方法，用来指定下一步的回调函数
1
2
3
4
5
6
7
8
9
10
11
let p = new Promise(function (resolve, reject)) {
	//异步代码
	//resolve——成功了
	//reject——失败了
}
-----------------------------------------------------------------------
function f1(resolve, reject) {
  // 异步代码...
}
var p1 = new Promise(f1);
p1.then(f2); // f1的异步操作执行完成，就会执行f2。
  • Promise 使得异步流程可以写成同步流程
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 传统写法
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.all(promiseArray)方法
    • 将多个Promise对象实例包装，生成并返回一个新的Promise实例
    • promise数组中所有的promise实例都变为resolve的时候，该方法才会返回
    • 并将所有结果传递results数组中
    • promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
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({
	p1,p2
}).then(function () {
	alert("全都成功了");
}, function () {
	alert("至少有一个失败了");
)


function createPromise(url) {
	return new Promise(function (resolve, reject)) {
        //异步代码
        //resolve——成功了
        //reject——失败了
    }
}
Promise.all({
	createPromise('路径1')
	createPromise('路径2')
}).then(function (arr) {
	let[res1,res2] = arr;
	
	alert("全都成功了");
	alert(res1);
	alert(res2);
}, function () {
	alert("至少有一个失败了");
)

  • Promise.race([p1, p2, p3])
    • Promse.race就是赛跑的意思
    • 哪个结果获得的快，就返回那个结果
    • 不管结果本身是成功状态还是失败状态
赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

主要涉及技术