ECMAScript5，6，7从基本语法到高级函数

 

尚硅谷ES5_6_7教程

(01. 尚硅谷_ECMAScript入门介绍&)

01. 尚硅谷_ECMAScript入门介绍&

  
  



测试

(02. 尚硅谷_ES5_严格模式&)

02. 尚硅谷_ES5_严格模式

雅阁模式禁止自定义函数中的this指向window

必须要使用var声明变量

创建eval作用域

对象不能有重名属性

new时候this指向实例对象

eval定义的变量没有自己的作用域

(03. 尚硅谷_ES5_json对象扩展&)

03. 尚硅谷_ES5_json对象扩展&

(04. 尚硅谷_ES5_Object对象方法扩展&)

04. 尚硅谷_ES5_Object对象方法扩展&

原型里面的属性可以被继承

defineProperties扩展属性

对象本身两个方法回调

(05. 尚硅谷_ES5_数组的扩展&)

05. 尚硅谷_ES5_数组的扩展&

prototype给实例增加属性

(06. 尚硅谷_ES5_call,apply,bind用法详解&)

06. 尚硅谷_ES5_call,apply,bind用法详解&

强制绑定this

foo.apply(obj,33) obj调用foo传递33参数，bind的this是调用的obj而不是window

(07. 尚硅谷_ES6_let const关键字&)

07. 尚硅谷_ES6_let const关键字&

不能重复声明，不存在var提升

  
  



测试1


测试2


测试3

(08. 尚硅谷_ES6_变量的解构赋值&)

08. 尚硅谷_ES6_变量的解构赋值&

解构的目标是对象，只能以对象来接收，对象中可以设置属性，{}相当于全局变量usernam必须是本来对象的属性obj.xxx

只需要一部分数据

数组的解构赋值，根据下标一一对应，与写的什么没有关系

直接使用，在函数内部声明了username与age直接使用即可。

(09. 尚硅谷_ES6_模板字符串&)

09. 尚硅谷_ES6_模板字符串&

(10. 尚硅谷_ES6_对象的简写方式&)

10. 尚硅谷_ES6_对象的简写方式&

如果key与value一样，可以省略一个

去掉:和function

(11. 尚硅谷_ES6_箭头函数详解&)

11. 尚硅谷_ES6_箭头函数详解&

只有一条语句和表达式要省略大括号，自动返回计算结果

多条语句必须return要返回结果

箭头函数所处的对象就是this

  
  



    测试箭头函数this_1
    测试箭头函数this_2

与外层函数的this一样，常规函数this谁调用它this就是谁

外面是箭头函数，此时的this就是window

本质在window下定义的箭头函数

(12. 尚硅谷_ES6_三点运算符&)

12. 尚硅谷_ES6_三点运算符&

argument是伪数组不具备数组一般属性，value可以遍历比arguments方便

少了一个占位符2

把2，3，4，5放在1，6中间

...arr不是一个数组

(13. 尚硅谷_ES6_形参默认值&)

13. 尚硅谷_ES6_形参默认值&

(14. 尚硅谷_ES6_promise对象原理详解&)

14. 尚硅谷_ES6_promise对象原理详解&

Promise是同步执行，同步阻塞，同步函数中执行异步操作

成功调用resolve()，.then()有两个回调，根据promise返回的状态执行成功的回调与失败的回调

根据状态码成功resolve返回第一个回调

 

get请求的参数是查询字符串req.query.id，post请求参数在请求体  req.query.body

var express = require('express');
var router = express.Router();

/* GET home page. */
router.get('/', function (req, res, next) {
    res.render('index', {title: 'Express'});
});

router.get('/news', function (req, res, next) {
    res.set('Access-Control-Allow-Origin', '*');
    var id = req.query.id;
    console.log('/news id='+id);
    var news = {
        id: id,
        title: 'news title1...',
        content: 'news content1...',
        commentsUrl: '/comments?newsId='+id
    };
    res.json(news);
});


router.get('/comments', function (req, res, next) {
    res.set('Access-Control-Allow-Origin', '*');
    console.log('/comments newsId=' + req.query.newsId);
    var newsId = req.query.newsId;
    var comments = [
        {
            id: 1,
            content: 'comment content1111...',
            newsId : newsId
        },
        {
            id: 2,
            content: 'comment content2222...',
            newsId : newsId
        }];
    res.json(comments);
});

module.exports = router;

bin/www

#!/usr/bin/env node

/**
 * Module dependencies.
 */

var app = require('../app');
var debug = require('debug')('es_server:server');
var http = require('http');

/**
 * Get port from environment and store in Express.
 */

var port = normalizePort(process.env.PORT || '3000');
app.set('port', port);

/**
 * Create HTTP server.
 */

var server = http.createServer(app);

/**
 * Listen on provided port, on all network interfaces.
 */

server.listen(port);
server.on('error', onError);
server.on('listening', onListening);

/**
 * Normalize a port into a number, string, or false.
 */

function normalizePort(val) {
  var port = parseInt(val, 10);

  if (isNaN(port)) {
    // named pipe
    return val;
  }

  if (port >= 0) {
    // port number
    return port;
  }

  return false;
}

/**
 * Event listener for HTTP server "error" event.
 */

function onError(error) {
  if (error.syscall !== 'listen') {
    throw error;
  }

  var bind = typeof port === 'string'
    ? 'Pipe ' + port
    : 'Port ' + port;

  // handle specific listen errors with friendly messages
  switch (error.code) {
    case 'EACCES':
      console.error(bind + ' requires elevated privileges');
      process.exit(1);
      break;
    case 'EADDRINUSE':
      console.error(bind + ' is already in use');
      process.exit(1);
      break;
    default:
      throw error;
  }
}

/**
 * Event listener for HTTP server "listening" event.
 */

function onListening() {
  var addr = server.address();
  var bind = typeof addr === 'string'
    ? 'pipe ' + addr
    : 'port ' + addr.port;
  debug('Listening on ' + bind);
}

可以修改为同步方式

onreadystatechange发送一次请求调用4次，有5种状态码，初始化为0，发送send为1，200和304成功状态码

获取的data是字符串，需要变为一个对象

可以继续链式调用

(16. 尚硅谷_ES6_Symbol属性介绍_01&)

16. 尚硅谷_ES6_Symbol属性介绍_01&

Symbol是原始数据类型，同一个Symbol调用属性值都是唯一值

对象实例

(17. 尚硅谷_ES6_Symbol属性介绍_02&)

17. 尚硅谷_ES6_Symbol属性介绍_02&

Symbol不能被for in遍历出来

(18. 尚硅谷_ES6_iterator接口机制_01&)

18. 尚硅谷_ES6_iterator接口机制_01&

arguments伪数组没有数组的一般方法可以使用for of遍历，普通对象没有interator接口

(21. 尚硅谷_ES6_Generator函数简介_01&)

21. 尚硅谷_ES6_Generator函数简介_01&

可暂停执行，生成指针对象，调用next执行内部的逻辑，普通js逻辑不会阻塞

指针执行最后返回函数的返回值，默认undefined

在哪暂停的，就在哪里启动，传入的参数就是返回值

返回每一个yield对应的状态

$.get返回url，保证成功调用next()又能看到url

传递url，写在getNews中的SX.next()保证了上一次请求已经成功

传递的'aaa'就是返回的url

(24. 尚硅谷_ES6_async函数详解及应用_01&)

24. 尚硅谷_ES6_async函数详解及应用_01&

以同步流程表达异步操作

遇到await不会向下执行，直到等待完异步才会继续向下执行，await接收promise，async返回值是promise对象

普通函数await返回值就是当前函数执行完毕的返回值

调用成功状态的返回值

上面的异步任务执行成功以后才会执行下面的

返回值data作为resolve的参数

一旦状态为reject失败，后面await不会继续执行

失败会返回result为false

(26. 尚硅谷_ES6_class类使用详解&)

26. 尚硅谷_ES6_class类使用详解&

constructor中的属性都会放到类的原型上

extends实现类型继承，super调用父类构造方法

(27. 尚硅谷_ES6_字符串，数组的扩展&)

27. 尚硅谷_ES6_字符串，数组的扩展

(28. 尚硅谷_ES6_数组方法的扩展&)

28. 尚硅谷_ES6_数组方法的扩展&

form包装完毕就有数组的真方法了

  
  


测试1


测试2


测试3

(29. 尚硅谷_ES6_对象方法的扩展&)

29. 尚硅谷_ES6_对象方法的扩展&

obj4是obj3的原型

(30. 尚硅谷_ES6_深度克隆_01&)

30. 尚硅谷_ES6_深度克隆_01&

输出wade堆栈模型

数组拷贝方法

深拷贝

call绑定this，slice截取字符串最后一个可以使用-1

不能指向同一个内存地址，要继续遍历获取的value值

嵌套对象，result为最终克隆的数据

(32. 尚硅谷_ES6_set，map容器详解&)

32. 尚硅谷_ES6_set，map容器详解&

(33. 尚硅谷_ES6_for of用法详解&)

33. 尚硅谷_ES6_for of用法详解&

数组去重

  
  





按钮1
按钮2
按钮3

(34. 尚硅谷_ES7_方法介绍&)

34. 尚硅谷_ES7_方法介绍&