${content}
14 | ` 15 | console.log(str) -------------------------------------------------------------------------------- /9.js: -------------------------------------------------------------------------------- 1 | /* 2 | function User(name, pass) { 3 | this.name = name 4 | this.pass = pass 5 | } 6 | 7 | User.prototype.showName = function () { 8 | console.log(this.name) 9 | } 10 | User.prototype.showPass = function () { 11 | console.log(this.pass) 12 | } 13 | 14 | var u1 = new User('able', '1233') 15 | u1.showName() 16 | u1.showPass() 17 | 18 | */ 19 | class User { 20 | constructor(name, pass) { 21 | this.name = name 22 | this.pass = pass 23 | } 24 | showName() { 25 | console.log(this.name) 26 | } 27 | showPass() { 28 | console.log(this.pass) 29 | } 30 | } 31 | 32 | var u1 = new User('able2', '111') 33 | u1.showName() 34 | u1.showPass() -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 able8 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # hello-es6 2 | 3 | ES6 各种新语法 入门了解 石川blue讲解 4 | 5 | 视频地址 6 | 7 | - [b站：深入解读ES6系列](https://www.bilibili.com/video/av20327829/) 8 | 9 | 看视频整理要点笔记: 10 | 11 | ---- 12 | 13 | - [hello-es6](#hello-es6) 14 | - [1.ES6怎么来的](#1es6%E6%80%8E%E4%B9%88%E6%9D%A5%E7%9A%84) 15 | - [2.ES6兼容性](#2es6%E5%85%BC%E5%AE%B9%E6%80%A7) 16 | - [3.变量 let 和 常量 const](#3%E5%8F%98%E9%87%8F-let-%E5%92%8C-%E5%B8%B8%E9%87%8F-const) 17 | - [4.函数-箭头函数](#4%E5%87%BD%E6%95%B0-%E7%AE%AD%E5%A4%B4%E5%87%BD%E6%95%B0) 18 | - [5.函数-参数](#5%E5%87%BD%E6%95%B0-%E5%8F%82%E6%95%B0) 19 | - [6.解构赋值](#6%E8%A7%A3%E6%9E%84%E8%B5%8B%E5%80%BC) 20 | - [7.数组](#7%E6%95%B0%E7%BB%84) 21 | - [8.字符串](#8%E5%AD%97%E7%AC%A6%E4%B8%B2) 22 | - [9.面向对象-基础](#9%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1-%E5%9F%BA%E7%A1%80) 23 | - [10.面向对象应用](#10%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1%E5%BA%94%E7%94%A8) 24 | - [11.json](#11json) 25 | - [12.Promise](#12promise) 26 | - [13.generator-认识生成器函数](#13generator-%E8%AE%A4%E8%AF%86%E7%94%9F%E6%88%90%E5%99%A8%E5%87%BD%E6%95%B0) 27 | - [14.generator-yield是啥](#14generator-yield%E6%98%AF%E5%95%A5) 28 | - [15.generator-实例](#15generator-%E5%AE%9E%E4%BE%8B) 29 | - [16.ES7 预览](#16es7-%E9%A2%84%E8%A7%88) 30 | 31 | ---- 32 | 33 | ## 1.ES6怎么来的 34 | 35 | - ECMAScript 和 JavaScript 36 | - ECMA 是标准，JS 是实现 37 | - ECMAScript 简称 ECMA 或 ES 38 | 39 | - 历史版本 40 | - 1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现 41 | - 1999, ES3.0 被广泛支持 42 | - 2011, ES5.1 成为 ISO 国际标准 43 | - 2015, ES6.0 正式发布 44 | 45 | ## 2.ES6兼容性 46 | 47 | - ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS 48 | - 解决不兼容办法，编译、转换 49 | - 在线转换 50 | - 或者提前编译 51 | 52 | - [Babel 中文网](https://www.babeljs.cn) 53 | - [Babel 入门教程 阮一峰](http://www.ruanyifeng.com/blog/2016/01/babel.html) 54 | - Babel 是一个 JavaScript 编译器 55 | - 一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行 56 | - 现在就用 ES6 编写程序，而不用担心现有环境是否支持 57 | 58 | ## 3.变量 let 和 常量 const 59 | 60 | - var 的问题 61 | - 可以重复声明，没有报错和警告 62 | - 无法限制修改 63 | - 没有块级作用域， `{ }` 64 | 65 | - let 和 const 66 | - 不能重复声明 67 | - 都是块级作用域, `{ }` 块内声明的，块外无效 68 | - let 是变量，可以修改 69 | - const 是常量，不能修改 70 | 71 | - 块级作用域举例 72 | - 原来用 var 的方式，结果弹出的都是 3 73 | - 或者将变量 封装到函数里，限制作用域，但比较麻烦 74 | - 用 let 最简单，直接 var 改 let，解决作用域问题 75 | 76 | ```html 77 | 78 | 79 | 80 | 81 | 82 | 83 |${content}
302 | ` 303 | console.log(str) 304 |内容
307 | ``` 308 | 309 | ## 9.面向对象-基础 310 | 311 | - 原来写法 312 | - 类和构造函数一样 313 | - 属性和方法分开写的 314 | 315 | ```js 316 | // 老版本 317 | function User(name, pass) { 318 | this.name = name 319 | this.pass = pass 320 | } 321 | 322 | User.prototype.showName = function () { 323 | console.log(this.name) 324 | } 325 | User.prototype.showPass = function () { 326 | console.log(this.pass) 327 | } 328 | 329 | var u1 = new User('able', '1233') 330 | u1.showName() 331 | u1.showPass() 332 | // 老版本继承 333 | function VipUser(name, pass, level) { 334 | User.call(this, name, pass) 335 | this.level = level 336 | } 337 | VipUser.prototype = new User() 338 | VipUser.prototype.constructor = VipUser 339 | VipUser.prototype.showLevel = function () { 340 | console.log(this.level) 341 | } 342 | 343 | var v1 = new VipUser('blue', '1234', 3) 344 | v1.showName() 345 | v1.showLevel() 346 | 347 | ``` 348 | 349 | - 新版面向对象 350 | - 有了 class 关键字、构造器 351 | - class 里面直接加方法 352 | - 继承，super 超类==父类 353 | 354 | ```js 355 | class User { 356 | constructor(name, pass) { 357 | this.name = name 358 | this.pass = pass 359 | } 360 | 361 | showName() { 362 | console.log(this.name) 363 | } 364 | showPass() { 365 | console.log(this.pass) 366 | } 367 | } 368 | 369 | var u1 = new User('able2', '111') 370 | u1.showName() 371 | u1.showPass() 372 | 373 | // 新版本继承 374 | class VipUser extends User { 375 | constructor(name, pass, level) { 376 | super(name, pass) 377 | this.level = level 378 | } 379 | showLevel(){ 380 | console.log(this.level) 381 | } 382 | } 383 | 384 | v1 = new VipUser('blue', '123', 3) 385 | v1.showLevel() 386 | ``` 387 | 388 | ## 10.面向对象应用 389 | 390 | - [React](https://www.reactjscn.com) 391 | - 用于构建用户界面的 JavaScript 库 392 | - 组件化，一个组件就是一个 class 393 | - JSX == bable == browser.js 394 | 395 | ## 11.json 396 | 397 | - JSON 格式 398 | - JavaScript Object Notation 的缩写，是一种用于数据交换的文本格式 399 | - JSON 是 JS对象 的严格子集 400 | - JSON 的标准写法 401 | - 只能用双引号 402 | - 所有的key都必须用双引号包起来 403 | 404 | - JSON 对象 405 | - JSON 对象是 JavaScript 的原生对象，用来处理 JSON 格式数据，有两个静态方法 406 | - JSON.parse(string) ：接受一个 **JSON 字符串**并将其转换成一个 JavaScript **对象**。 407 | - JSON.stringify(obj) ：接受一个 JavaScript **对象**并将其转换为一个 **JSON 字符串**。 408 | 409 | ```js 410 | var json = {a: 12, b: 5} 411 | var str = 'hi,' + JSON.stringify(json) 412 | var url = 'http://www.xx.com/' + encodeURIComponent(JSON.stringify(json)) 413 | console.log(str) 414 | console.log(url) 415 | 416 | var str = '{"a": 12, "b": 4, "c": "abc"}' 417 | var json = JSON.parse(str) 418 | console.log(json) 419 | hi,{"a":12,"b":5} 420 | http://www.xx.com/%7B%22a%22%3A12%2C%22b%22%3A5%7D 421 | { a: 12, b: 4, c: 'abc' } 422 | ``` 423 | 424 | - 对象（object） 425 | - 是 JavaScript 语言的核心概念，也是最重要的数据类型 426 | - 对象就是一组“键值对”（key-value）的集合，是一种无序的复合数据集合 427 | - 对象的所有键名都是字符串, 所以加不加引号都可以 428 | - 如果键名是数值，会被自动转为字符串 429 | - 对象的每一个键名又称为“属性”（property），它的“键值”可以是任何数据类型 430 | - 如果一个属性的值为函数，通常把这个属性称为“方法”，它可以像函数那样调用 431 | - in 运算符用于检查对象是否包含某个属性（注意，检查的是键名，不是键值 432 | - for...in循环用来遍历一个对象的全部属性 433 | 434 | - 对象 简写 435 | - key-value 一样时可以简写 436 | - 里面函数可以简写, 去掉 437 | 438 | ```js 439 | var a = 12, b = 5 440 | console.log({a:a, b:b}) 441 | console.log({a, b}) 442 | console.log({a, b, c:"c"}) 443 | console.log({ a, b, show(){ console.log('a') }}) 444 | { a: 12, b: 5 } 445 | { a: 12, b: 5 } 446 | { a: 12, b: 5, c: 'c' } 447 | { a: 12, b: 5, show: [Function: show] } 448 | ``` 449 | 450 | ## 12.Promise 451 | 452 | - 异步和同步 453 | - 异步，操作之间没有关系，同时执行多个操作， 代码复杂 454 | - 同步，同时只能做一件事，代码简单 455 | 456 | - Promise 对象 457 | - 用同步的方式来书写异步代码 458 | - Promise 让异步操作写起来，像在写同步操作的流程，不必一层层地嵌套回调函数 459 | - 改善了可读性，对于多层嵌套的回调函数很方便 460 | - 充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口 461 | 462 | - Promise 也是一个构造函数 463 | - 接受一个回调函数f1作为参数，f1里面是异步操作的代码 464 | - 返回的p1就是一个 Promise 实例 465 | - 所有异步任务都返回一个 Promise 实例 466 | - Promise 实例有一个then方法，用来指定下一步的回调函数 467 | 468 | ```js 469 | function f1(resolve, reject) { 470 | // 异步代码... 471 | } 472 | var p1 = new Promise(f1); 473 | p1.then(f2); // f1的异步操作执行完成，就会执行f2。 474 | ``` 475 | 476 | - Promise 使得异步流程可以写成同步流程 477 | 478 | ```js 479 | // 传统写法 480 | step1(function (value1) { 481 | step2(value1, function(value2) { 482 | step3(value2, function(value3) { 483 | step4(value3, function(value4) { 484 | // ... 485 | }); 486 | }); 487 | }); 488 | }); 489 | 490 | // Promise 的写法 491 | (new Promise(step1)) 492 | .then(step2) 493 | .then(step3) 494 | .then(step4); 495 | ``` 496 | 497 | - Promise.all(promiseArray)方法 498 | - 将多个Promise对象实例包装，生成并返回一个新的Promise实例 499 | - promise数组中所有的promise实例都变为resolve的时候，该方法才会返回 500 | - 并将所有结果传递results数组中 501 | - promise数组中任何一个promise为reject的话，则整个Promise.all调用会立即终止，并返回一个reject的新的promise对象 502 | 503 | ```js 504 | var p1 = Promise.resolve(1), 505 | p2 = Promise.resolve(2), 506 | p3 = Promise.resolve(3); 507 | Promise.all([p1, p2, p3]).then(function (results) { 508 | console.log(results); // [1, 2, 3] 509 | }); 510 | ``` 511 | 512 | - Promise.race([p1, p2, p3]) 513 | - Promse.race就是赛跑的意思 514 | - 哪个结果获得的快，就返回那个结果 515 | - 不管结果本身是成功状态还是失败状态 516 | 517 | ## 13.generator-认识生成器函数 518 | 519 | - generator 生成器函数 520 | - 普通函数，一路到底 521 | - generator函数，中间可以停，到哪停呢，用 yield 配合，交出执行权 522 | - yield 有 放弃、退让、退位的意思 523 | - 需要调用next()方法启动执行，需要遇到 yield 停, 踹一脚走一步 524 | - generator函数前面加一个 `*` 两边可以有空格，或靠近函数或`function` 525 | - 背后实际生成多个小函数，实现走走停停 526 | 527 | ```js 528 | function show() { 529 | console.log('a') 530 | console.log('b') 531 | } 532 | show() // 普通函数 533 | 534 | function *show2() { 535 | console.log('1') 536 | yield 537 | console.log('2') 538 | } 539 | let genObj = show2() 540 | genObj.next() // 1 541 | genObj.next() // 2 542 | genObj.next() // 最后了，没有结果 543 | ``` 544 | 545 | ## 14.generator-yield是啥 546 | 547 | - `yield` 548 | - 既可传参，又可以返回 549 | - 第一个`next()`传参无效，只用来启动 550 | 551 | - 如果函数前漏掉 `*` 552 | - 就是普通函数 553 | - 如果有`yield`会报错， `ReferenceError: yield is not defined` 554 | - yield 只能在Generator函数内部使用 555 | 556 | ```js 557 | function * show() { 558 | console.log('1') 559 | var a = yield 560 | console.log('2') 561 | console.log(a) 562 | } 563 | // yield 传参 564 | var gen = show() 565 | gen.next() // 1 566 | gen.next() // 2 和 undefined 因为没有传参，yield没有返回值 567 | var gen = show() 568 | gen.next(10) // 1 第一次执行到yield，但没有执行赋值 569 | gen.next(20) // 2 和 20 570 | 571 | function* show2() { 572 | console.log('1') 573 | yield 10 574 | console.log('2') 575 | } 576 | // yield 返回 577 | var gen = show2() 578 | var res1 = gen.next() 579 | console.log(res1) // { value: 10, done: false } 580 | var res2 = gen.next() 581 | console.log(res2) 582 | // { value: undefined, done: true } 最后的value需要return返回 583 | ``` 584 | 585 | ## 15.generator-实例 586 | 587 | - Promise 适合一次读一组 588 | - generator 适合逻辑性的 589 | 590 | ```js 591 | // 带逻辑-generator 592 | runner(function * () { 593 | let userData = yield $.ajax({url: 'getUserData'}) 594 | 595 | if (userData.type == 'VIP') { 596 | let items = yield $.ajax({url: 'getVIPItems'}) 597 | } else { 598 | let items = yield $.ajax({url: 'getItems'}) 599 | } 600 | }) 601 | ``` 602 | 603 | ```js 604 | // yield 实例，用同步方式写异步 605 | server.use(function * () { 606 | let data = yield db.query(`select * from user_table`) 607 | this.body = data 608 | }) 609 | ``` 610 | 611 | ## 16.ES7 预览 612 | 613 | - 数组 614 | - `arr.includes()` 数组是否包含某个东西 615 | - 数组的 arr.keys(), arr,entries() 616 | - for ... in 遍历数组 下标 key 617 | - for ... of 遍历数组 值 value, 不能用于json 618 | 619 | ```js 620 | let arr = ['a', 'b', 'c'] 621 | console.log(arr.includes(1)) 622 | 623 | for (let i in arr) { 624 | console.log(i) // 循环的时下标 key 625 | } 626 | 627 | for (let i of arr) { 628 | console.log(i) // 循环的是值 value 629 | } 630 | for (let i of arr.keys()) { 631 | console.log('>'+i) 632 | } 633 | for (let [key, value] of arr.entries()) { 634 | console.log('>' + key + value) 635 | } 636 | 637 | let json = { a: 12, b: 5, c: 7 } 638 | for (let i in json) { 639 | console.log(i) 640 | } 641 | ``` 642 | 643 | - 字符串 644 | - padStart()/padEnd() 指定宽度，不够就补空格或指定字符 645 | 646 | ```js 647 | console.log('=' + 'abcd'.padStart(6, '0') + '=') 648 | console.log('=' + 'abcd'.padEnd(6, '0') + '=') 649 | =00abcd= 650 | =abcd00= 651 | ``` 652 | 653 | - 容忍度 654 | - [1, 2, 3,] 老版数组最后不能有逗号，新的可以有 655 | - 函数参数最后多的逗号也可以 656 | 657 | - async await 658 | - 和 generator yield 类似 659 | - generator 不可以写成箭头函数， async 可以 660 | 661 | ```js 662 | async function show() { 663 | console.log(1) 664 | await 665 | console.log(2) 666 | } 667 | ``` -------------------------------------------------------------------------------- /tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | let score = [18, 86, 88, 24] 2 | score.map() --------------------------------------------------------------------------------