ES基础知识

ES6介绍

• ES6历史

  1996年11月，JavaScript的创造者Netscape公司，决定将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成 为国际标准。次年，ECMA发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。

• ES6是什么？

  • ECMA-262 的第六次变更，所有以前按照惯例称为es6，ES2015
  • ECMAScript和JavaScript的关系是，前者是后者的规格，后者是前者的一种实现。在日常场合，这两个词是可以互换的。
  • 2015年6月，ECMAScript 6正式通过，成为国际标准。
  • Node.js是JavaScript语言的服务器运行环境。它们对ES6的支持度，比浏览器更高。通过它们，可以体验更多ES6的特性。
  • 这个标准的牛逼之处就在于会逐步统一前端，因为新增加的module,异步编程，Generator函数这些东西在angular中和node中都有很好的实现了。

ECMAScript6 语法

ES6的学习站点:
各个浏览器对ES6的支持 http://kangax.github.io/compat-table/es6/
学习站点 http://es6.ruanyifeng.com/#README

为什么要学习ES6

• ES6也叫ECMAScript2015,2015-6月正式发布，向下兼容ES5.1
• ES6来编写Node.js程序
• ES6让JavaScript语言能够开发复杂应用程序

严格模式

• ES5中出现的模式

• 严格模式的目的：

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

  • 消除代码运行的一些不安全之处，保证代码运行的安全；

  • 提高编译器效率，增加运行速度；

  • 为未来新版本的Javascript做好铺垫

  • 参考
    严格模式的限制

    严格模式的限制

• 开启严格模式

  • 在作用域的最上面 “use strict”
    • js文件的最开头
    • function的开头

变量和常量

• 变量 let

  • 没有变量提升，必须先定义再使用
  • 有块级作用域
  • 解决问题

  window.onload = function () {
              var ul = document.getElementById("list");
              var lis = ul.getElementsByTagName("li");
              for(let i = 0, length=lis.length; i < length; i--) {
                  lis[i].onclick = function () {
                      console.log(i);
                  }
              }
          }
  

• 常量 const

  • 常量一旦赋值，不能改变
  • 有块级作用域
  • 没有变量提升，先定义再使用
  • 不可以重复定义
  • 必须有初始值，否则报错
  • 在Node.js中，所有接收require()获得的对象都使用const修饰

string 的扩展方法

• string的扩展方法
  • includes() 返回布尔值，是否包含，第二个参数从第几个位置开始查找
  • startsWith() 返回布尔值，是否以…开头，第二个参数从第几个位置开始查找
  • endsWith() 返回布尔值，是否以…结尾，第二个参数, 前n个字符以…结尾
  • repeat() 重复次数
• 模板
  • 示例1：

  let name = "steve jobs";
  let str = `hello ${name}`;
  

  • 示例2：

  let obj = {name:"jobs", age: 18, salary: 1};
  
  let template = `
      姓名：${obj.name}
  年龄：${obj.age}
  工资：${obj.salary}
  `.trim();
  

箭头函数

• 箭头函数
  • 格式： => (读作：goesto) 左边是参数，右边是方法体
  • 演变：function f(x,y) {} -----> 演变成箭头函数
    (x, y) => {}
    语法格式简单
  • 箭头函数的几种形式：

    • 没有参数:

        let f1 = () => console.log('hello');
         f1();
      

    • 有一个参数

        let f1 = a => ++a;
        console.log(f1(5))
      

    • 有多个参数 (a,b) => a - b;

    • 方法体有多条语句 (a,b) => { a=1; b=2; console.log(a-b)};

  • 箭头函数的注意事项
    • 箭头函数不会影响this的指向
    • 箭头函数根本没有自己的this，箭头函数内部的this就是外层代码块的this
    • 箭头函数中没有arguments对象，箭头函数内部的arguments指向外层函数的arguments
    • 不可以当做构造函数

"use strict";
let obj = {};
obj.sayHi = function(){
    console.log(this);
    let f1 = () => {
        console.log(this);
    }
    f1();
}
obj.sayHi();

Promise

promise是为了解决回调地狱(callback hell)。
promise是一个容器，容器中有3种状态

• pending 默认，进行中
• resolved 已完成
• rejected 已失败

回调地狱示例:代码不易维护…

'use strict';

const fs = require('fs');
fs.readFile('./1.txt', 'utf8', (err, data) => {
  console.log(data);
  fs.readFile('./2.txt', 'utf8', (err, data) => {
    console.log(data);
    fs.readFile('./3.txt', 'utf8', (err, data) => {
      console.log(data);
    })
  })
})

promise基本使用:

"use strict";

const fs = require("fs");

new Promise((resolved, rejected) => {
    fs.readFile("./1.txt", "utf8", (err, data) => {
        if (err) {
            rejected(err);//rejected 对应then的第二个参数
            console.log("出错啦");
        }
        //如果出错，resolved不会执行
        resolved(data);//resolved 对应then的第一个参数
        console.log("可以输出！");
    })
}).then((data) => {
    console.log("xxxxxxxxxxx");
    console.log(data);
    //这里可以return 任何东西
    return 123;
}, (err) => {
    console.log(err);
});

封装读取文件的promise对象:

'use strict';
const fs = require('fs');
//封装读取文件的promise对象
function readFile(path) {
  return new Promise((resolved, rejected) => {
    fs.readFile(path, 'utf8', (err, data) => {
      if(err) {
        rejected(err);
      }

      resolved(data);
    })
  })
}
readFile('./1.txt')
.then((data) => {
  console.log(data);
  return readFile('./2.txt');
}, (err) => {
  console.log(err);
})
.then((data) => {
  console.log(data);
  return readFile('./3.txt');
})
.then((data) => {
  console.log(data);
})

在jQuery中的ajax中使用promise

jQuery里的ajax封装了promise
$.ajax();返回的是一个promise对象。
所以可以在后面.then
使用promise能保证发送请求的顺序~

  <script src="jquery.js"></script>
  <script>
    $.ajax({
      type: 'get',
      url: 'http://182.254.146.100/admin/posts',
      dataType: 'json'
    })
    .then((data) => {
      console.log(data);
      return $.ajax({
        type:'get',
        url: 'http://182.254.146.100/posts/count',
        dataType: 'json'
      })
    }).then((data) => {
      console.log(data);
    }) 
  </script>

通过promise 封装ajax :

    //通过promise 封装ajax
    function ajax(url) {
      return new Promise((resolved, rejected) => {
        //发送ajax请求
        let xhr = new XMLHttpRequest();
        xhr.open('get', url, true);
       
        xhr.onreadystatechange = function() {
          if(xhr.readyState === 4 ) {
            if(xhr.status === 200) {
              resolved(xhr.responseText);
            }else{ 
              rejected();
            }
          }
        }
        xhr.send();
      })
    }
    ajax('http://182.254.146.100/admin/posts')
    .then((data) => {
      console.log(data);
      return ajax('http://182.254.146.100/posts/count');
    }, () => {
      console.log('失败');
    })
    .then((data) => {
      console.log(data);
    }, () => {
      console.log('失败');
    })