ES6常用语法

著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

初识ES6

ES6：最新版的JS，ECMAScript标准 JavaScript语言(实现)，它还有多种称呼：

• ECMAScript6.0
• ECMA6
• ES6

变量

var——重复定义不报错；没有块级作用域；不能限制修改
let——变量，不能重复定义，有块级作用域
const——常量，不能重复定义，有块级作用域

函数+参数

箭头函数的简写方式：

1. 只有一个参数，()可以省
2. 只有一个语句，还是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
})();

模块

模块化的几种实现方式

1. 民间的——sea.js、require.js、CMD、AMD
2. nodejs模块化
3. 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的模块化：

1. 没有define
2. exports、require、module
3. 引用自定义模块，模块基本放到node_modules文件夹里，引用前面加 ./

#输出
exports.xx=xxx;
module.exports={x, x, x};
#引入
let mod=require('./aaa.js');

打包发布自己的nodejs包

ES6模块化： 参考文档

1. import
2. export

#输出
export {x, x, x};
#引入
import mod from "./xxx.js"

如何用babel编译ES6

软件的使用

1. Atom编辑器（webStorm、sublime也可，其他就算了）
2. 集成服务器环境Windows-wamp、Mac-xampp、Linux-Nginx（有其他惯用的也可以，但要求支持PHP、MySQL）
3. VMware虚拟机、Docker 容器
4. putty、winSCP（Mac用yummy FTP、Linux直接ssh）
5. git for windows（Mac用git-scm、Linux直接yum/apt）
6. Node.js
7. phonegap-cli
8. MongoDB
9. Navicat for MySQL
10. Chrome、Firefox
11. APICloud Studio 2
12. 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端与服务端数据交互的几种方式：

1. http协议
2. form
3. ajax——官方、不能跨域；单向传输
4. jsonp——民间、跨域；不推荐
5. websocket——双向传输

http协议——协议

1. 无状态
2. 请求过程：发送连接请求、响应接受、发送请求
3. 消息分两块：头、身子（head、dody）

解决http缓存的几种方案：

1. 野路子——随机数
2. 官方——3个头

htttp和https HTTP和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>

1. action——提交到哪儿

2. method——GET/POST/PUT/DELETE/HEAD

   method	数据格式	说明	大小
   GET	把数据放在url里面传输	数据量很小、缓存、看得见	<=32K
   POST	放在body里	数据量大、不会缓存、看不见	<=1G

   • GET——获取东西
   • POST、PUT——发送东西 大量发送
   • DELETE——删除
   • HEAD——让服务器只发送头回来就行(不需要内容)

3. name——名字

4. 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+	自定义

HTTP状态码大全

为什么要重定向，经常听到这个词
如果我们访问这个网址taobao.com，会发现不同的访问终端最终会被重定向到对应该终端的一个网址，如下所示：
PC端访问->302->www.taobao.com
手机端访问->302->m.taobao.com

操作json字符串

1. eval()——不安全；eval 是把字符串当命令来执行。如果字符串是靠外界参数拼接的时候，如果过滤不好，就容易混入恶意代码被执行，更多说明
2. JSON.stringify()——{a: 12, b: 5} => "{"a": 12, "b": 5}"
3. JSON.parse()——"{"a": 12, "b": 5}" => {a: 12, b: 5}

前端安全

1. 前台没有安全性；后台就有问题(注入)web注入
2. xss——跨站脚本攻击

跨域

• ajax不允许跨域
• jsonp——不要用
• WebSocket——双向、跨域

什么是ajax2.0——ajax2.0的理解与应用实例 三种ajax上传文件方法

json标准格式

1. key必须用引号包起来
2. 双引号

{"a": 12, "name": 'blue'}

什么是沙箱机制
隔离出来虚假系统

c的数组和js的数组有啥区别
c数组——是空间；没有结尾、没有长度、没有操作(移动指针)；固定长
JS数组——是对象；相关操作api；可变长

链表和数组

类型	长度	扩展	时间复杂度	索引	时间复杂度
链表	可变长	可以随意扩展	O(1)	不擅长	O(n)
数组	固定长	不擅长扩展	O(n)	擅长	O(1)

上面所说的固定长如果想变长，必须重新开辟一块内存空间，然后把之前数组中的内容一个个复制到新的数组中，复制完成后之前老的固定数组所占用的内存空间就就可以释放了。

分享

ES6语法详解(一)
javascript有用的代码片段
CSS盒模型深入
javascript数组去重
textarea文域高度自适应
javascript函数防抖