尚硅谷ES5_6_7教程
(01. 尚硅谷_ECMAScript入门介绍&)
01. 尚硅谷_ECMAScript入门介绍&
ECMAScript理解
测试
(02. 尚硅谷_ES5_严格模式&)
02. 尚硅谷_ES5_严格模式
雅阁模式禁止自定义函数中的this指向window
必须要使用var声明变量
创建eval作用域
对象不能有重名属性
01_严格模式
new时候this指向实例对象
eval定义的变量没有自己的作用域
(03. 尚硅谷_ES5_json对象扩展&)
03. 尚硅谷_ES5_json对象扩展&
02_JSON对象
(04. 尚硅谷_ES5_Object对象方法扩展&)
04. 尚硅谷_ES5_Object对象方法扩展&
原型里面的属性可以被继承
defineProperties扩展属性
03_Object扩展
对象本身两个方法回调
Title
(05. 尚硅谷_ES5_数组的扩展&)
05. 尚硅谷_ES5_数组的扩展&
prototype给实例增加属性
04_Array扩展
/*
需求:
1. 输出第一个6的下标
2. 输出最后一个6的下标
3. 输出所有元素的值和下标
4. 根据arr产生一个新数组,要求每个元素都比原来大10
5. 根据arr产生一个新数组, 返回的每个元素要大于4
*/
(06. 尚硅谷_ES5_call,apply,bind用法详解&)
06. 尚硅谷_ES5_call,apply,bind用法详解&
强制绑定this
foo.apply(obj,33) obj调用foo传递33参数，bind的this是调用的obj而不是window
05_Function扩展
(07. 尚硅谷_ES6_let const关键字&)
07. 尚硅谷_ES6_let const关键字&
不能重复声明，不存在var提升
01_let关键字
测试1
测试2
测试3
02_const关键字
(08. 尚硅谷_ES6_变量的解构赋值&)
08. 尚硅谷_ES6_变量的解构赋值&
解构的目标是对象，只能以对象来接收，对象中可以设置属性，{}相当于全局变量usernam必须是本来对象的属性obj.xxx
只需要一部分数据
数组的解构赋值，根据下标一一对应，与写的什么没有关系
直接使用，在函数内部声明了username与age直接使用即可。
03_变量的解构赋值
(09. 尚硅谷_ES6_模板字符串&)
09. 尚硅谷_ES6_模板字符串&
04_模板字符串
(10. 尚硅谷_ES6_对象的简写方式&)
10. 尚硅谷_ES6_对象的简写方式&
如果key与value一样，可以省略一个
去掉:和function
05_简化的对象写法
(11. 尚硅谷_ES6_箭头函数详解&)
11. 尚硅谷_ES6_箭头函数详解&
只有一条语句和表达式要省略大括号，自动返回计算结果
多条语句必须return要返回结果
箭头函数所处的对象就是this
06_箭头函数
测试箭头函数this_1
测试箭头函数this_2
与外层函数的this一样，常规函数this谁调用它this就是谁
外面是箭头函数，此时的this就是window
本质在window下定义的箭头函数
(12. 尚硅谷_ES6_三点运算符&)
12. 尚硅谷_ES6_三点运算符&
argument是伪数组不具备数组一般属性，value可以遍历比arguments方便
少了一个占位符2
07_3点运算符
把2，3，4，5放在1，6中间
...arr不是一个数组
(13. 尚硅谷_ES6_形参默认值&)
13. 尚硅谷_ES6_形参默认值&
08_形参默认值
(14. 尚硅谷_ES6_promise对象原理详解&)
14. 尚硅谷_ES6_promise对象原理详解&
Promise是同步执行，同步阻塞，同步函数中执行异步操作
成功调用resolve()，.then()有两个回调，根据promise返回的状态执行成功的回调与失败的回调
根据状态码成功resolve返回第一个回调
11_Promise对象
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调用属性值都是唯一值
对象实例
Symbol
(17. 尚硅谷_ES6_Symbol属性介绍_02&)
17. 尚硅谷_ES6_Symbol属性介绍_02&
Symbol不能被for in遍历出来
(18. 尚硅谷_ES6_iterator接口机制_01&)
18. 尚硅谷_ES6_iterator接口机制_01&
Iterator遍历器
arguments伪数组没有数组的一般方法可以使用for of遍历，普通对象没有interator接口
(21. 尚硅谷_ES6_Generator函数简介_01&)
21. 尚硅谷_ES6_Generator函数简介_01&
可暂停执行，生成指针对象，调用next执行内部的逻辑，普通js逻辑不会阻塞
指针执行最后返回函数的返回值，默认undefined
在哪暂停的，就在哪里启动，传入的参数就是返回值
Generator函数
// 对象的symbol.iterator属性 指向遍历器对象
// 案例练习
/*
* 需求：
* 1、发送ajax请求获取新闻内容
* 2、新闻内容获取成功后再次发送请求，获取对应的新闻评论内容
* 3、新闻内容获取失败则不需要再次发送请求。
*
* */
返回每一个yield对应的状态
$.get返回url，保证成功调用next()又能看到url
传递url，写在getNews中的SX.next()保证了上一次请求已经成功
传递的'aaa'就是返回的url
(24. 尚硅谷_ES6_async函数详解及应用_01&)
24. 尚硅谷_ES6_async函数详解及应用_01&
以同步流程表达异步操作
遇到await不会向下执行，直到等待完异步才会继续向下执行，await接收promise，async返回值是promise对象
async函数
普通函数await返回值就是当前函数执行完毕的返回值
调用成功状态的返回值
上面的异步任务执行成功以后才会执行下面的
返回值data作为resolve的参数
一旦状态为reject失败，后面await不会继续执行
失败会返回result为false
(26. 尚硅谷_ES6_class类使用详解&)
26. 尚硅谷_ES6_class类使用详解&
constructor中的属性都会放到类的原型上
12_class
extends实现类型继承，super调用父类构造方法
(27. 尚硅谷_ES6_字符串，数组的扩展&)
27. 尚硅谷_ES6_字符串，数组的扩展
01_字符串扩展
02_数值扩展
(28. 尚硅谷_ES6_数组方法的扩展&)
28. 尚硅谷_ES6_数组方法的扩展&
form包装完毕就有数组的真方法了
03_数组扩展
测试1
测试2
测试3
(29. 尚硅谷_ES6_对象方法的扩展&)
29. 尚硅谷_ES6_对象方法的扩展&
obj4是obj3的原型
04_对象扩展
(30. 尚硅谷_ES6_深度克隆_01&)
30. 尚硅谷_ES6_深度克隆_01&
输出wade堆栈模型
数组拷贝方法
对象的深度克隆
深拷贝
call绑定this，slice截取字符串最后一个可以使用-1
不能指向同一个内存地址，要继续遍历获取的value值
嵌套对象，result为最终克隆的数据
(32. 尚硅谷_ES6_set，map容器详解&)
32. 尚硅谷_ES6_set，map容器详解&
05_Set和Map数据结构
(33. 尚硅谷_ES6_for of用法详解&)
33. 尚硅谷_ES6_for of用法详解&
数组去重
06_for_of循环
按钮1
按钮2
按钮3
(34. 尚硅谷_ES7_方法介绍&)
34. 尚硅谷_ES7_方法介绍&
