著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
初识ES6
ES6：最新版的JS，ECMAScript标准 JavaScript语言(实现)，它还有多种称呼：
- ECMAScript6.0
- ECMA6
- ES6
变量
var——重复定义不报错；没有块级作用域；不能限制修改
let——变量，不能重复定义，有块级作用域
const——常量，不能重复定义，有块级作用域
函数+参数
箭头函数的简写方式：
- 只有一个参数，()可以省
- 只有一个语句，还是return，{}可以省
数组
| 方法名 | 作用 | 例子 |
| map | 映射 | [31, 56, 89, 67] => [不及格, 不及格, 及格, 及格] |
| reduce | 汇总 | [..., ..., ...] => xx |
| filter | 过滤 | [x, x, x, x, x, x] => [x, x, x...] |
| forEach | 迭代、遍历 |
字符串
字符串模板 "xxx" 'xxx' `x${变量}xx
es6面向对象
- class
- super
- extends
promise——解决异步
什么是同步——只有操作完事了，才往下执行，一次只能做一个事儿
什么是异步——这个操作进行中，其他操作也能开始，一次可以做多个事儿
异步的优势：1.用户体验好； 2.高效
同步的优势：简单
没用es6异步例子：
$.ajax({ url: '/get_banners', type: 'post', dataType: 'json', success(){ $.ajax({ url: '/get_hot', type: 'post', dataType: 'json', success(){ $.ajax({ url: '/get_list', type: 'post', dataType: 'json', success(){ $.ajax({ url: '/get_hot', type: 'post', dataType: 'json', success(){ }, error(){ alert('读取失败'); } }) }, error(){ alert('读取失败'); } }) }, error(){ alert('读取失败'); } }) }, error(){ alert('读取失败'); } })
同步例子：
let banners=$.ajax('/get_banners'); let hot=$.ajax('/get_hot'); let list=$.ajax('/get_list'); let hot=$.ajax('/get_hot');
使用es6-Promise异步例子
# 创建Promise对象 let p=new Promise(function (resolve, reject){ # 异步代码... }); # 使用Promise对象 p.then(()=>{}, ()=>{});
<script> let p=new Promise(function (resolve, reject){ $.ajax({ url: 'data/1.txt', dataType: 'json', success(arr){ resolve(arr); }, error(err){ reject(err); } }); }); p.then(arr=>{ alert('成功了'+arr); }, err=>{ alert('失败了'); }); </script>
# 多个异步方法一起调用 Promise.all([p, p2, p3, ...]).then()
深入ES6——generator，模块化与babel
generator——特殊的函数
普通函数： 一直执行到头，就像飞机一样，起飞就不能随便降落
generator： 中间可以暂停，就像出租车，想到哪里就到哪里
# 方法名前面加上 * 号就是generator function *show(){ xxxx xxx let data1 = yield $.ajax('a.txt'); #暂停一会去调用ajax做别的事情，就像乘客中途想上WC，让出租车等一会一样 xxxx xxx xxx let data2 = yield $.ajax('b.txt'); xxxx xxxx }
下面再看一个generator例子，先异步获取返回值结果，判断后再进行其他异步逻辑调用，使用generator这么写，如下：
runner(function *(){ let data1=$.ajax(); if(xxx){ let data1=$.ajax(); let data1=$.ajax(); let data1=$.ajax(); let data1=$.ajax(); }else{ let data1=$.ajax(); let data1=$.ajax(); let data1=$.ajax(); } });
以上写法如果换成es6之前的写法，可能得这么写，颇为复杂晦涩
$.ajax({ success(){ if(xxx){ $.ajax({ success(){ $.ajax({ success(){ $.ajax({ success(){ } }) } }) } }else{ $.ajax({ success(){ $.ajax({ success(){ $.ajax({ success(){ } }) } }) } } }) } })
async/await
- Promise本质：等待异步操作结束
- generator本质：无感处理异步操作
- async本质：官方runner
以下是相同功能的不同代码实现——基于runner和async
## runner && yield runner(function *(){ xxx let 结果1=yield 异步操作1; xxx let 结果2=yield 异步操作2; xxx }); ## async && await (async ()=>{ xxx let 结果1=await 异步操作1; xxx let 结果2=await 异步操作2; xxx })();
模块
模块化的几种实现方式
- 民间的——sea.js、require.js、CMD、AMD
- nodejs模块化
- ES6模块化
模块的定义与调用
# 1.定义模块 mod1.js define(function (require, exports, module){ exports.a=12; exports.b=5; }); # 2.引用模块 1.html seajs.use(['xxx.js', 'xxx.js', ...], function (mod1, mod2, ...){ console.log(mod1.a); });
以下演示些简写的语法：
let a=12; let b=5; # 1.key和value一样，简写 let json={a, b}; # 2.函数 { show: function (){ ... }, show2: function (){ ... } } # 函数简写 { show(){ ... }, show2(){ ... } }
如果引用模块，有以下两种情况:
- html->js， 使用use
- js->js，使用require
node的模块化：
- 没有define
- exports、require、module
- 引用自定义模块，模块基本放到node_modules文件夹里，引用前面加 ./
#输出 exports.xx=xxx; module.exports={x, x, x}; #引入 let mod=require('./aaa.js');
ES6模块化： 参考文档
- import
- export
#输出 export {x, x, x}; #引入 import mod from "./xxx.js"
软件的使用
- Atom编辑器（webStorm、sublime也可，其他就算了）
- 集成服务器环境Windows-wamp、Mac-xampp、Linux-Nginx（有其他惯用的也可以，但要求支持PHP、MySQL）
- VMware虚拟机、Docker 容器
- putty、winSCP（Mac用yummy FTP、Linux直接ssh）
- git for windows（Mac用git-scm、Linux直接yum/apt）
- Node.js
- phonegap-cli
- MongoDB
- Navicat for MySQL
- Chrome、Firefox
- APICloud Studio 2
- bower—前台包管理器
想到的有这些，还有一些其他的小的软件
npm
| 使用场景 | 功能 | 使用率 |
| 后台语言 | 操作数据、接口 | 35% |
| 工具 | WebPack、grunt、爬虫 | 65% |
npm(Node Package Manager) 作为包管理工具，可以自动解决依赖，自动下载，但是下载比较麻烦，在国内速度较慢。可以使用cnpm代替npm，关于如何是用cnpm代替npm，可以参考这篇文章淘宝 NPM 镜像
使用npm
npm i [xxx] cnpm i -g bower # npm 后台包管理器 # bower 前台包管理器 npm i -g phonegap@6.5.2 npm i -g n # n---升级node本身
数据交互
web端与服务端数据交互的几种方式：
- http协议
- form
- ajax——官方、不能跨域；单向传输
- jsonp——民间、跨域；不推荐
- websocket——双向传输
http协议——协议
- 无状态
- 请求过程：发送连接请求、响应接受、发送请求
- 消息分两块：头、身子（head、dody）
解决http缓存的几种方案：
- 野路子——随机数
- 官方——3个头
htttp和httpsHTTP和HTTPS详解HTTP与HTTPS握手的那些事
| http版本 | 特性 |
| http 1.0 | 短连接 |
| http 1.1 | 主流 长连接——keep alive |
| http 2.0 |
form最重要
<form action="1.php" method="get" enctype="multipart/form-data"> 用户：<input type="text" name="username"><br> 密码：<input type="password" name="password"><br> <input type="submit" value="提交"> </form>
- action——提交到哪儿
- method——GET/POST/PUT/DELETE/HEAD
| method | 数据格式 | 说明 | 大小 |
| GET | 把数据放在url里面传输 | 数据量很小、缓存、看得见 | <=32K |
| POST | 放在body里 | 数据量大、不会缓存、看不见 | <=1G |
- GET——获取东西
- POST、PUT——发送东西 大量发送
- DELETE——删除
- HEAD——让服务器只发送头回来就行(不需要内容)
- name——名字
- enctype
| value | 数据格式 | 说明 |
| application/x-www-form-urlencoded | 名字=值&名字=值&... | 默认、小数据 |
| multipart/form-data | 分块 | 文件上传、大数据 |
ajax原理——XMLHttpRequest
ajax好再哪里：用户体验、性能高。原生的ajax写法如下所示：
<script> window.onload=function (){ let oBtn=document.getElementById('btn1'); oBtn.onclick=function (){ # 1.创建对象 let xhr=new XMLHttpRequest(); //alert(xhr.readyState); 0 # 2.连接 xhr.open('GET', 'data/1.txt', true); //alert(xhr.readyState); 1 # 3.发送 xhr.send(); # 4.接收 xhr.onreadystatechange=function (){ if(xhr.readyState==4){ if( (xhr.status>=200 && xhr.status<300)|| xhr.status==304 ){ console.log(xhr); alert('成功'); }else{ alert('失败'); } } }; }; }; </script> # 接收响应数据： # xhr.responseText 文本数据 # xhr.responseXML xml数据
上述代码中的 onreadystatechange = on ready state change（当通信状态改变）
readyState值说明
| 值 | 状态 | 说明 |
| 0 | 初始状态 | xhr对象刚创建完 |
| 1 | 连接 | 连接到服务器 |
| 2 | 发送请求 | 刚刚send完 |
| 3 | 接收完成 | 头接收完了 |
| 4 | 接收完成 | 体接收完了 |
status——http状态码
| 值 | 描述 |
| 1xx | 消息 |
| 2xx | 成功 |
| 3xx | 重定向 |
| 301 Moved Permanently | 永久重定向——下回不会再找他了 |
| 302 Move temporarily | 临时重定向——下回依然会请求服务器 |
| 304 Not Modified | 缓存 |
| 4xx | 请求错误 |
| 5xx | 服务端错误 |
| 6xx+ | 自定义 |
为什么要重定向，经常听到这个词
如果我们访问这个网址taobao.com，会发现不同的访问终端最终会被重定向到对应该终端的一个网址，如下所示：
PC端访问->302->www.taobao.com
手机端访问->302->m.taobao.com
操作json字符串
- eval()——不安全；eval 是把字符串当命令来执行。如果字符串是靠外界参数拼接的时候，如果过滤不好，就容易混入恶意代码被执行，更多说明
- 前端安全
1. JSON.stringify()——{a: 12, b: 5} => "{"a": 12, "b": 5}" 2. JSON.parse()——"{"a": 12, "b": 5}" => {a: 12, b: 5}
跨域
- ajax不允许跨域
- jsonp——不要用
- WebSocket——双向、跨域
什么是ajax2.0——ajax2.0的理解与应用实例三种ajax上传文件方法
json标准格式
- key必须用引号包起来
- 双引号
{"a": 12, "name": 'blue'}
什么是沙箱机制
隔离出来虚假系统
c的数组和js的数组有啥区别
c数组——是空间；没有结尾、没有长度、没有操作(移动指针)；固定长
JS数组——是对象；相关操作api；可变长
链表和数组
| 类型 | 长度 | 扩展 | 时间复杂度 | 索引 | 时间复杂度 |
| 链表 | 可变长 | 可以随意扩展 | O(1) | 不擅长 | O(n) |
| 数组 | 固定长 | 不擅长扩展 | O(n) | 擅长 | O(1) |
上面所说的固定长如果想变长，必须重新开辟一块内存空间，然后把之前数组中的内容一个个复制到新的数组中，复制完成后之前老的固定数组所占用的内存空间就就可以释放了。
