ECMAScript 相关介绍

ECMA : （European Computer Manufacturers Association） 欧洲计算机制造协会

ECMAScript : 是由ECMA国际通过 ECMA-262 标准化的脚本程序设计语言

学习ES6

  • ES6的版本变动内容最多，最具有里程碑意义
  • ES6加入了许多新的语法特性， 编程实现更简单，高效
  • ES6是前端发展趋势， 就业必备技能

    ES6 新特性

变量

ES6新添加的两个定义变量的关键字 let const

let

  1. // 声明变量
  2. let a;
  3. let b, c;
  4. let e = 100;
  5. let f = 123, g = 'yellowsea', h = [];

let特性

  • 变量不能重复的声明
  • 块级作用域 全局， 函数， eval
  • 不存在变量提升
  • 不影响作用域链
  1.  // let 特性
  2. //1. 变量不能重复的声明
  3.  let star = 'yellowsea';
  4.  let star = 'test1';   //err  重复声明
  6.  //2. 块级作用域  全局， 函数，  eval
  7. // if else while  for
  8.  {
  9.      let girl = 'newTest';
  10.  }
  11.  console.log(girl);  // err : girl is not defined
  14. //3. 不存在变量提升
  15.  console.log(song);
  16.  let song = 'test1';  //  err：   Cannot access 'song' before initialization
  19. //4. 不影响作用域链
  20. {
  21.     let school = 'test';
  22.     function test1() {
  23.         console.log(school);
  24.     }
  25.     test1(); // test
  26. }

实例

  1. const items = document.getElementsByClassName('item');
  3. // 使用 var 定义变量时 
  4. for (var i = 0; i < items.length; i++) {
  5.     items[i].onclick = function() {
  6.         // 修改点击item 的颜色
  7.         // this.style.backgroundColor = 'pink';  // 可以修改
  8.         items[i].style.backgroundColor = 'pink';  //  Cannot read properties of undefined (reading 'style')
  9.     }
  10. }
  11. console.log(window.i); // 3
  13. /**
  14. * 因为使用了var， var i 进行3次循环， i变成了3;
  15. * var 是全局作用域的， 会将var i = 3 绑定到 window 上；
  16. * 点击 item 时，执行 回调函数，回调函数中的items[i], i 是没有在函数中定义的，所以它会去window 上去找i
  17. * 此时的window.i = 3 ;  items[3]没有;  所以会报错
  18. */
  1. // 使用 let 时 ， 没有发生报错， 因为let 具有块级作用域。声明的i是 互不影响的
  2. for (let i = 0; i < items.length; i++) {
  3.     items[i].onclick = function() {
  4.         // 修改点击item 的颜色
  5.         // this.style.backgroundColor = 'pink';  // 可以修改
  6.         items[i].style.backgroundColor = 'pink';
  7.     }
  8. }

const

const 常量 ： 值不能修改的量 叫常量

  1. // 常量 ： 值不能修改的量  叫常量
  2. const NAME = 'yellowsea';  // 定义常量一般要大写

const 特性

  1. //1. 声明常量 一定要赋值
  2. const A;   // 报错
  5. //2. 一般定义常量使用大写 （潜规则）
  6. const a = 100 ; // 可以不用也不会报错， 书写标准
  9. //3. 常量的值不能修改
  10. NAME = 'YELLOWSEA'; // 报错
  13. //4. const 具有块级作用域
  14. {
  15.     const PLAYER_NAME = 'UZI';
  16. }
  17. console.log(PLAYER_NAME); // 报错
  19. //5. 对于数组和对象的元素修改， 不算做对常量的修改， 不会报错
  20. const TEAM = ['UZI', 'MLXG', 'Ming','Letme'];
  21. // TEAM.push('Meiko'); // 没有报错， 因为这个常量所指向的地址没有发生改变，所以不会报错
  22. // TEAM = 100;  // 报错 ， 常量所指向的地址值发生了改变
  24. const PERSON = {
  25.     Id: 123,
  26.     Name: 'yellowsea',
  27. }
  28. PERSON.Name = 'Hidie'; // 修改对象数据
  29. console.log(PERSON);  // {Id: 123, Name: 'Hidie'}

对象的简化写法

ES6 允许在大括号里面，直接写入变量和函数， 作为对象的属性方法 ， 这样书写更加简洁

// 同名在定义对象中可以简化

  1. let name = 'Yellowsea';
  2. let change = function() {
  3.     console.log('change 方法');
  4. }
  6. const school = {
  7.     // name: name,  可以简化
  8.     // 同名可以简化 
  9.     name,
  10.     change,
  12.     // 写在对象中额方法 简化
  13.     // improve: function() {}
  14.     improve() {
  15.         console.log('这是简化后的方法');
  16.     }
  17. }
  18. console.log(school);
  19. school.improve();

模板字符串

`` ES6 引入新的声明字符串方法

  1. //1 声明
  2. let str = `这是一个字符串`;
  3. console.log(str, typeof str);
  6. //2. 内容中可以直接出现换行符
  7. let str = `<ul>
  8.     <li>test1</li>
  9.     <li>test2</li>
  10.     <li>test3</li>
  11.     </ul>`
  13. // 3. 变量拼接  ${}
  14. let test = 'Yellowsea';
  15. let out = `Name is ${test}`;
  16. console.log(out);

解构赋值

ES6 允许按照一定模式从数组和对象中提取值， 对变量进行赋值， 称为解构赋值

  1. // 数组的解构赋值 
  2. const F4 = ['001', '002', '003'];
  3. let [a,b,c] = F4;  // 解构 
  4. console.log(a);
  5. console.log(b);
  6. console.log(c);
  1. //2. 对象的解构
  2. const zhao = {
  3.     name: '赵本山',
  4.     age: '不详',
  5.     xiaopin: function () {
  6.         console.log('演小品');
  7.     }
  8. };
  9. // 对象单独解构    解构时 变量名必须相同
  10. let {xiaopin} = zhao;
  11. xiaopin();
  13. // 
  14. let {name, age, xiaopin} = zhao;
  15. console.log(name);
  16. console.log(age);
  17. console.log(xiaopin);
  18. xiaopin();  // 演小品

箭头函数

ES6 允许使用 箭头 => 定义函数

  1. // 声明函数
  2. let fn = function () {  // 普通定义函数
  3. }
  6. // 使用箭头函数
  7. let  Fn = (a, b) => {
  8.     return a + b;
  9. }
  10. Fn(1,2);  // 3

箭头函数的特性

  • 箭头函数没有自己的this， 使用时， this是它的上一级（this指向它的上一级）
  • 不能作为构造函数实例化对象
  • 不能使用 arguments 变量
  • 箭头函数的简写
  1. // 1. this  是静态的， this 始终指向函数声明时在作用域下的this的值
  3. function getName() {
  4.     console.log(this.name);
  5. }
  7. let getName2  = () =>{
  8.     console.log(this.name);
  9. }
  11. // 设置window 对象的 name 属性
  12. window.name = 'yellowsea';
  13. const hidie = {
  14.     name: 'YELLOWSEA'
  15. }
  17. // 直接调用 , 全局，window下的name
  18. // getName();
  19. // getName2();
  21. //call 方法调用
  22. getName.call(hidie);  // YELLOWSEA
  23. getName2.call(hidie); //  yellowsea , 因为this没有改变，指向的全局作用域的window
  1. //2. 不能作为构造函数实例化对象
  2. let Person = (name,age) => {
  3.     this.name =  name;
  4.     this.age = age;
  5. }
  6. let me = new Person('hidie', 123);
  7. console.log(me); // 报错 ：  TypeError: Person is not a constructor
  1. //3. 不能使用 arguments 变量
  2. let newTest = () => {
  3.     console.log(arguments);
  4. }
  5. newTest(1,2,3); // ReferenceError: arguments is not defined at newTest
  1. // 4. 箭头函数的简写
  2. //      1） 省略小括号， 当形参有且只有一个的时候
  3. //     let add = (n) => {
  4. //         return  n + n;
  5. //     }
  6. let add = n => {
  7.     return n + n;
  8. }
  9. console.log(add(9));
  11. // 2) 省略花括号， 当代码体只有一条语句的时候，省略花括号，此时 return 也必须要省略
  12. // 而且语句的执行结果就是函数的返回值
  14. // let pow = n =>  {
  15. //     return n * n;
  16. // }
  17. let pow = n =>  n*n;
  18. console.log(pow(9));

// 实例

  1. // 需求-1 点击div 2s 后颜色变为pink
  3. // 获取元素
  4. const ad = document.getElementById('ad');
  5. // 绑定事件
  6. ad.addEventListener('click', function() {
  7.     setTimeout(() => {
  8.         // 箭头函数没有自己的this,会向外一层边找， 知道找到 window 下为止
  9.         // 或者可以这样理解箭头函数下的this ,  this永远都是定义函数下作用域的 this (谁调用this就是谁)
  10.         this.style.backgroundColor = 'pink';
  11.     },2000)
  12. })
  1. // 需求2  从数组中返回偶数的元素
  2. const arr = [1,6,12,45,100];
  3. const result = arr.filter(value => value % 2 === 0 );
  4. console.log(result);
  7. // 箭头函数适合于  this 无关的回调 ， 定时器， 数组的方法回调
  8. // 箭头函数不适合与  this 有关的回调 ， DOM事件的回调， 对象的方法
  10. {
  11.     name: 'Yellowsea';
  12.     // getName: function() {
  13.     //     this.name;  // this.name 指向的是 该作用域的name
  14.     // }
  15.     getName: () => {
  16.         this.name; // 此时的this.name 指向的是window 下的name
  17.     }
  18. }

函数参数设置默认值

ES6 允许给函数参数赋初始值

  1. //1. 形参初始值  具有默认值的参数， 一般位置靠后（潜规则）
  2. function add (a,b,c=10) { // 给c 设置默认值, 如果没有设置默认值，则为 undefined ;
  3.     return  a + b + c;
  4. }
  5. console.log(add(1,2,));
  7. //2. 与解构赋值结合
  8. function connect({host, username, password, port}) {
  9.     // let {host, username, password,port} = options;
  10.     console.log(host);
  11.     console.log(username, password);
  12.     console.log(port);
  13. }
  14. connect({
  15.     host:  '',
  16.     username: 'root',
  17.     password: 'root',
  18.     port: 3306,
  19. })

rest参数

ES6 引入 rest 参数， 用于获取函数的实参， 用来代替 arguments(用来获取函数在调用时的实参)

  1. function data() {
  2.     console.log(arguments);  //此时的arguments 是一个对象
  3. }
  4. data('test1','test2','test3');
  1. // rest 参数
  2. function data(...args) {
  3.     console.log(args); // rest参数 返回的是一个数组，可以使用数组中的一系列方法
  4.     // 例如使用 数组返回的 forEach方法
  5.     args.forEach(value => console.log(value));
  6. }
  7. data('test1','test2','test3');
  9. // 注意 ，如果你的参数由多个，  rest 参数必须要放到最后
  10. function fn(a,b, ...args) {
  11.     console.log(a,b,args);
  12. }
  13. fn(1,2,3,4,1);

扩展运算符

… 扩展运算符 ， 能够将 数组 转换为逗号分隔的 参数序列

  1. const  Arr = ['test1', 'test2', 'test3']; // => test1, test2, test3
  3. function Test() {
  4.     console.log(arguments);
  5. }
  6. Test(...Arr); // 相当于 Test('test1','test2','test3');  // 扩展运算符
  9. // 扩展运算符 和  rest 参数 相比
  11. // 扩展运算符 用来 调用函数的 实参里  进行对  数组 | 对象的 解构
  12. //  rest 用在调用函数的形参里， 用于对参数设置默认值

扩展运算符的应用

  1. //  1. 数组的合并
  2. let strArr1 = ['1','2','3','4'];
  3. let strArr2 = ['a','b','c','d','e'];
  4. // 默认方法
  5. const result =  strArr1.concat(strArr2);
  8. // 使用扩展运算符 ... 方法
  9. const newArr = [...strArr1, ...strArr2];
  10. console.log(newArr);
  13. //2. 数组的克隆
  14. const kelongArr = ['A','B','C','D'];
  15. const kelongNewArr = [...kelongArr];
  16. console.log(kelongNewArr);
  19. // 3. 将伪数组转为真正的数组
  20. const divs = document.querySelectorAll('div'); // divs : NodeList 类型
  21. const div = [...divs];  // div   Array 类型
  22. console.log(div);

Symbol

ES6 引入了一种新的原始类型 Symbol , 表示独一无二的值, 是JS语言的第七种类型

Symbol特点

  1. /**
  2.  *     1. Symbol的值是唯一的,用来解决命名冲突问题
  3.  *     2. Symbol值不能与其他类型进行运算
  4.  *     3. Symbol定义的对象属性不能使用for...in 循环遍历，但是可以使用 Reflect.ownKeys来获取对象的所有键名
  5.  * @type {symbol}
  6.  */
  1. // 创建Symbol
  2. let s = Symbol();
  3. console.log(s, typeof s);
  5. let s2 = Symbol('Yellowsea');
  6. let s3 = Symbol('Yellowsea');
  7. console.log(s2 === s3);  // false
  10. // 使用 Symbol.for 创建
  11. let s4 = Symbol.for('yellowsea');
  12. let s5 = Symbol.for('yellowsea');
  13. console.log(s4 === s5);  // true
  16. // 不能与其他数据进行运算
  17. // let result1 = s + s2;

// Symbol 内置属性

  1. // 1. Symbol.hasInstance 检测类型 与 instanceof 配合使用
  3. class Person {
  4.     static [Symbol.hasInstance](param) { // 自己去控制类型的检测
  5.         console.log(param);  // param 表示正在检测的数据类型
  6.         console.log('被用来检测类型了')
  7.         // return false;
  8.         // return true;
  9.     }
  10. }
  12. let o = {};
  13. console.log(o instanceof Person); // false
  16. //2. Symbol.isConcatSpreadable 给一个布尔值
  17. // 表示该对象使用 concat()时，是否可以展开
  19. const arr1 = [1,2,3];
  20. const arr2 = [4,5,6];
  21. arr2[Symbol.isConcatSpreadable] = false;  // arr2 不允许被展开
  22. console.log(arr1.concat(arr2));  // [1, 2, 3, Array(3)]

// Symbol 创建对象属性

  1. // Symbol 给对象添加一个独一无二的值
  2. let game = {
  3.     name: "game1",
  4.     up: function() {},
  5.     down(){
  7.     },
  8. };
  10. // 声明一个对象
  11. let methods = {
  12.     up: Symbol(),
  13.     down: Symbol()
  14. }
  16. // 给game 中添加方法  (安全添加方法 )
  17. game[methods.up] = function() {
  18.     console.log('这是up 方法')
  19. }
  20. game[methods.down] = function() {
  21.     console.log('这是down 方法')
  22. }
  24. console.log(game);
  27. // 方法二
  28. let youxi = {
  29.     name: '三国杀',
  30.     [Symbol('sha')]() {
  31.         console.log('杀')
  32.     },
  33.     [Symbol('shan')]() {
  34.         console.log('闪')
  35.     }
  36. }
  38. console.log(youxi);

迭代器

迭代器（iterator）是一种接口，任何数据只要有了 iterator 接口， 就可以完成遍历操作

ES6 创造了一种新的遍历命令 for..of 循环， iterator 接口主要供for…of 消费 （for…of 直接遍历出值， 而for…in遍历得到的是下标）

原生就局具备 iterator 接口的数据 （可以使用for…of 遍历）

例如 ： Array Arguments Set Map String TypedArray NodeList

  1.  * 工作原理
  2.  * 1. 创建一个指针对象，指向当前数据结构的起始位置
  3.  * 2. 第一次调用对象的next方法， 指针自动指向数据结构的第一个成员
  4.  * 3. 接下来不断调用 next() 方法， 指针一直往后移动， 知道指向最后一个成员
  5.  * 4. 每调用next方法返回一个包含 value 和 done 属性对象

迭代器的作用 ： 需要自定义遍历数据的时候，要想到迭代器

  1. // 例子 声明数组
  2. let lizi = ['yellowsea','世利', 'Hidie'];
  3. console.log(lizi);
  4. // 在它的原型上具有 Symbol(Symbol.iterator): ƒ values()  方法
  5. // 所以可以使用 for...of 进行遍历直接获取值
  6. for ( let v of lizi) {
  7.     console.log(v);
  8. }
  10. //分析原理
  12. //1. 创建对象
  13. let iterator = lizi[Symbol.iterator]();  //Symbol.iterator 是一个方法
  14. // 查看
  15. console.log(iterator); // 身上具有next() 方法
  17. //2. 调用 next() 方法
  18. console.log(iterator.next()); // 指针自动指向 数据结构的下一个成员
  19. console.log(iterator.next());
  20. console.log(iterator.next()); // {value: 'Hidie', done: false}
  21. console.log(iterator.next());
  22. //每次返回都包含value | done 属性，  {value: undefined, done: true}

// 迭代器运用

迭代器自定义遍历数据

  1. // 声明一个对象
  2. const obj = {
  3.     name: '001',
  4.     arr: [
  5.         'test1','test2','test3','test4'
  6.     ],
  8.     // 实现能够循环遍历  (根据原理实现)
  10.     // 定义 iterator 接口 
  11.     [Symbol.iterator]() {
  12.         // 控制对 arr 的数据获取
  13.         let index = 0;  // 设置索引值
  14.         let _this = this;
  16.         // 返回一个指针对象
  17.         return {
  19.             // 指针对象中具有一个next() 方法
  20.             next() {
  21.                 // 返回一个具有 value 和 done 的属性对象
  23.                 // 控制下标，返回结果
  24.                 if ( index < _this.arr.length ) {
  25.                     //返回数据
  26.                     const result = {value: _this.arr[index], done: false}
  27.                     index++; // 下标自增
  28.                     return result; // 返回结果
  29.                 }else {
  30.                     return {value: undefined, done: true}  // 遍历完成
  31.                 }
  32.             }
  33.         }
  34.     }
  35. }
  36. // 需求，使用for...of 遍历， 每次循环返回arr数组中的属性值
  37. // 使用for...of 遍历
  38. // for (let v of obj) {
  39. //     console.log(v); // Uncaught TypeError: obj is not iterable
  40. //                     // obj 没有 iterator 接口类型
  41. // }
  44. // 完成自定义遍历 , 完全按照我们的意愿进行遍历,  这就是迭代器的作用
  45. for (let v of obj) console.log(v);
  46. // 'test1','test2','test3','test4'

生成器

生成器函数 Es6 提供的一种异步编程的解决方案

  1. // 生成器, 其实就是一个特殊的函数
  2. // 异步编程  纯回调函数
  4. // 定义函数
  5. function * gen() {   // 使用 function * 函数名  的语法定义生成器 
  7.     // console.log('Hello generator');
  8.     // 里面可以定义 yield 语句
  9.     /* yield 算是函数代码分隔符 */
  10.     // console.log(111);
  11.     yield 'test1';
  12.     // console.log(222);
  13.     yield 'test2';
  14.     // console.log(333);
  15.     yield 'test3';
  16.     // console.log(444);
  17. }
  19. // 执行
  20. let iterator = gen();
  21. console.log(iterator); //输出的其实是一个 迭代器对象,原型中具有一个next() 方法
  23. //运行
  24. // iterator.next();  // Hello generator
  25. // iterator.next();
  26. // iterator.next();
  27. // iterator.next();
  28. // iterator.next();
  30. // 循环输入
  31. for (let v of gen()) {
  32.     console.log(v); // test1 test2 test3
  33.     // 所以循环遍历生成器, 输出(执行)的是 yield 语句的代码块
  34. }

生成器函数参数

  1. function * gen(args) {
  2.     console.log(args);  // 可以进行传参
  4.     let one = yield  111;
  5.     console.log(one); //  BBB,  第二个next的参数
  6.     let tow = yield  222;
  7.     console.log(tow)  // CCC , 第三个next 的参数
  8.     let three = yield  333;
  9.     console.log(three) // DDD, 第四个 next方法 的参数
  10. }
  12. //执行获取迭代器对象
  13. // 传参
  14. let iterator = gen('AAA');
  15. console.log(iterator.next());
  16. // next 方法 可以传入实参
  17. console.log(iterator.next("BBB")); // 第二次调用的next方法传入的参数, 会作为第一个yield语句返回的结果;
  18. console.log(iterator.next("CCC")); // 第三次调用的next方法传入的参数, 会作为第二个yield语句返回的结果;
  19. console.log(iterator.next("DDD"));

生成器实例

  1. // 异步编程   文件操作   网络操作 ajax request
  4. // 需求  1s 后 输出  111  2s 后输出 222 3s 后输出 333
  6. // 回调地狱
  7. // setTimeout(() => {
  8. //     console.log(111)
  9. //     setTimeout(()=> {
  10. //         console.log(222)
  11. //         setTimeout(()=> {
  12. //             console.log(333)
  13. //         }, 3000)
  14. //     }, 2000)
  15. // },1000)
  19. // 使用生成器
  20. function one() {
  21.     setTimeout(() => {
  22.         console.log(111)
  23.         iterator.next();  // 执行下一步
  24.     },1000)
  25. }
  27. function two() {
  28.     setTimeout(() => {
  29.         console.log(222)
  30.         iterator.next(); // 执行下一步
  31.     },2000)
  32. }
  33. function three() {
  34.     setTimeout(() => {
  35.         console.log(333)
  36.         iterator.next(); // 执行下一步
  37.     },3000)
  38. }
  40. // 定义生成器函数
  41. function * gen() {
  42.     // 语句
  43.     yield one();
  44.     yield two();
  45.     yield three();
  46. }
  48. // 执行
  49. let iterator = gen();
  50. iterator.next();  // 首次执行 next()

// 实例2

  1. //模拟获取  用户数据  订单数据  商品数据   获取数据,进行操作
  3. //异步获取
  5. function getUsers () {
  6.     setTimeout(() => {
  7.         let data = "用户数据"
  8.         iterator.next(data);  // 调用 next()方法时, 传入 data 数据,  yield 接收到数据 ,进而操作数据
  9.     }, 1000)
  10. }
  12. function getOrders () {
  13.     setTimeout(() => {
  14.         let data = "订单数据"
  15.         iterator.next(data);
  16.     }, 1000)
  17. }
  19. function getGoods () {
  20.     setTimeout(() => {
  21.         let data = "商品数据"
  22.         iterator.next(data);
  23.     }, 1000)
  24. }
  26. // 定义生成器
  27. function * gen() {
  28.     let users = yield getUsers();
  29.     console.log(users);
  30.     let orders = yield getOrders();
  31.     console.log(orders);
  32.     let goods = yield getGoods();
  33.     console.log(goods);
  34. }
  35. // 执行生成器
  36. let iterator = gen();
  37. iterator.next();
  39. // 异步处理数据

Promise

Promise 是 ES6 引入的异步编程的新解决方案 , 语法上 Promise 是一个构造函数用来封装异步函并可以获取其成功或或者失败的结果

// 创建 Promise

  1. // 实例化 Promise 对象
  2. const p = new Promise(function(resolve,reject){
  3.     setTimeout(() => {
  4.         let data = '用户数据'
  5.         // 如果成功, 调用 resolve
  6.         // resolve(data);
  8.         //如果失败, 调用 reject
  9.         let err = '获取数据失败';
  10.         reject(err);
  11.     }, 1000)
  12. });
  15. // 调用  promise 对象的 then 方法
  16. // p.then() 回调方法 , 给出两个参数, 一个是成功的函数,  一个是失败的函数
  17. p.then(function(value){
  18.     // 第一个参数;  成功的回调 ,  value 异步请求成功后，获取的数据 
  19.     console.log(value)
  20. }, function(reason) {
  21.     // 第二个参数; 失败的回调
  22.     console.log(reason)
  23. })

promise封装读取文件

  1. // Promise封装读取文件
  2. //1.  引入  fs 模块
  3. const fs = require('fs');
  5. //2. 使用 fs模块 调用方法 读取文件
  6. // fs.readFile('./result/test.md', (err,data) => {
  7. //     // 如果失败, 抛出错误
  8. //     if (err) throw err;
  9. //
  10. //     // 成功状态, 输入内容
  11. //     console.log(data.toString());  //<Buffer,  使用 toString() 方法进行转化
  12. // });
  15. //3. 使用 Promise 调用 fs 读取文件内容， 封装 （读取文件内容-> 异步操作）
  16. const p = new Promise(function (resolve, reject) {
  17.     fs.readFile('./result/test.md', (err, data) => {
  18.         // 如果失败, 调用 reject 改变 p 的返回值
  19.         if (err) reject(err);
  20.         // 如果成功
  21.         resolve(data);
  22.     })
  23. })
  25. // 调用 Promise,  通过 p.then() 回调处理结果
  26. p.then((value) => {console.log(value.toString())}, (reason) => {console.log('读取失败')})

Promise封装Ajax请求

  1. // https://api.oick.cn/dutang/api.php
  4. // 默认的 Ajax 发起请求
  6. // //1. 创建对象
  7. // const xhr =  new XMLHttpRequest();
  8. //
  9. // //2 初始化
  10. // xhr.open('GET', 'https://api.oick.cn/dutang/api.php');
  11. //
  12. // //3, 发送
  13. // xhr.send();
  14. //
  15. // //4, 绑定事件,处理响应结果
  16. // xhr.onreadystatechange  = function () {
  17. //     // 判断
  18. //     if (xhr.readyState === 4) {
  19. //         // 判断响应码 200 ~ 299
  20. //         if ( xhr.status >= 200  && xhr.status < 300) {
  21. //             // 表示成功
  22. //             console.log(xhr.response);
  23. //         }else {
  24. //             console.log(xhr.status);
  25. //         }
  26. //     }
  27. // }
  29. // 使用 Promise  发起请求
  31. const p = new Promise((resolve, reject) => {
  32.     //1. 创建对象
  33.     const xhr =  new XMLHttpRequest();
  35.     //2 初始化
  36.     xhr.open('GET', 'https://api.oick.cn/dutang/api.php');
  38.     //3, 发送
  39.     xhr.send();
  41.     //4, 绑定事件,处理响应结果
  42.     xhr.onreadystatechange  = function () {
  43.         // 判断
  44.         if (xhr.readyState === 4) {
  45.             // 判断响应码 200 ~ 299
  46.             if ( xhr.status >= 200  && xhr.status < 300) {
  47.                 // 表示成功
  48.                 // console.log(xhr.response);
  49.                 resolve(xhr.response);  // 返回给实例化对象p
  50.             }else {
  51.                 // 表示失败
  52.                 // console.log(xhr.status);
  53.                 reject(xhr.status);
  54.             }
  55.         }
  56.     }
  57. });
  60. // 实例化对象p  处理响应结果
  61. // 指定回调
  62. p.then((value)=>{
  63.     console.log(value);
  64. }, (reason)=> {
  65.     console.log('获取数据失败',reason)
  66. });

promise.prototype.then方法

  1. // 创建 Promise 对象
  2. const p = new Promise((resolve, reject) => {
  3.     setTimeout(() => {
  4.         // resolve('这是用户数据');
  5.         reject("出错了")
  6.     }, 1000)
  7. });
  9. // 调用 then 方法
  11. // 查看 then 的返回结果
  13. /**
  14.      * 调用then 方法 then 方法的返回结果是 Promise 对象, 对象状态由回调函数的执行结果决定
  15.      *
  16.      * 1. 如果回调函数中返沪的结果是 非 promise 类型的属性 , 状态为 成功
  17.      *
  18.      */
  19. const result = p.then(value => {
  20.     console.log(value)
  21.     // 1. 非 promise 类型属性
  22.     // return 213;  // 状态是成功的
  24.     // 2. 是promise 对象
  25.     // return new Promise((resolve, reject) => {
  26.     //     resolve('ok');
  27.     // })
  29.     //3. 抛出错误
  30.     throw new Error('出错了')
  31. }, reason => {
  32.     console.warn(reason)
  33. })
  36. // 所以可以利用 then 的返回值 可以 进行链式调用
  38. // 链式调用
  39. // p.then(value => {
  40. //
  41. // }).then(value => {
  42. //
  43. // })
  46. console.log(result)

Promise对象catch方法

  1. const p = new Promise((resolve, reject) => {
  2.     // 设置 p 对象的状态为失败， 并设置失败的值
  3.     reject('出错了')
  4. })
  6. // 通常使用 p.then 方法 指定失败的回调
  7. // p.then(value => {}, reason => {
  8. //     console.log(reason);
  9. // })
  11. // 使用 catch 方法
  12. // 只获取出错的回调
  13. p.catch(reason => {
  14.     console.log(reason)
  15. })

总要：Promise的链式调用

（套娃）实例

// 这种场景使用在 读取用户数据 之后 才能读取用户的订单 用户商品管理 等等操作
// 遇到时候 可以想到使用 Promise

  1. // Promise实践-读取多个文件内容
  3. const fs = require('fs')
  5. // 默认一个文件内容
  6. fs.readFile('./result/test.md', (err, data) => {
  7.     console.log(data.toString())
  8. })
  10. // 使用 Promise 读取多个内容
  12. const p = new Promise((resolve, reject) => {
  13.     // 读取第一个文件
  14.     fs.readFile('./result/test.md', (err, data) => {
  15.         resolve(data)
  16.     })
  17. })
  19. p.then(value => {  // value 是第一个文件内容
  20.     // 使用 p.then 的返回可以是一个 Promise 的特性可以读取第二个文件内容
  21.     return  new Promise((resolve, reject) => {
  22.         fs.readFile('./result/test2.md', (err, data) => {
  23.             // 返回 第一个文件内容  和 第二个文件内容
  24.             resolve([value, data]);
  25.         })
  26.     })
  27. }).then(value => {  //链式调用,  此时的value 是 [value, data]
  28.     return new Promise((resolve, reject) => {
  29.         // 读取第三个文件内容
  30.         fs.readFile('./result/test3.md', (err, data) => {
  31.             // 压入操作
  32.             value.push(data);
  33.             resolve(value);
  34.         })
  35.     })
  36. }).then(value => {  // 这里就是3个文件的内容了
  37.     console.log(value.join('\r\n'))  // 打印输出
  38. })

Set 和 Map

Set 方法

Set ES6 提供的新的数据结构 Set 集合 ， 类似数组， 但集合中的成员值都是唯一的

Set实现了 iterator 接口， 所以可以使用 … | for…of 进行遍历

  1.  * Set 的属性和方法
  2.  * size : 返回集合元素的个数
  3.  * add :  增加一个新的元素， 返回当前集合
  4.  * delete : 删除元素， 返回 boolean值
  5.  * has : 检测集合中是否包含某个元素， 返回 boolean值
  6.  * clear : 清空集合元素
  1. // 声明一个 Set 集合
  2. let s = new Set();
  3. // console.log(s, typeof s); // Set(0) {size: 0} 'object'
  5. // 使用 Set 的属性方法
  6. let s2 =  new Set(['test1', 'test2','test3']);
  8. // 个数
  9. console.log(s2.size);
  11. // 添加
  12. s2.add('test4');
  14. // 删除
  15. s2.delete('test2');
  17. // 检测
  18. console.log(s2.has('test3'));  // 返回一个boolean 值
  20. // 清空集合
  21. // s2.clear();
  23. //使用 for...of 遍历
  24. for (let v of s2) console.log(v);
  26. // 使用  扩展运算符 展开集合
  27. console.log(...s2); 
  29. console.log(s2);

// set实践

  1. let arr = [1,23,1,21,21,3,31,23,1,1,2,3];
  2. //1. 数组去重
  3. let result = [...new Set(arr)]; 
  4. // Set特性，在Set集合中元素只能出现一次. |  使用 ... 展开Set集合，保存为数组
  5. console.log(result);
  7. //2. 交集
  8. let arr2 = [1,2,3,2,1,2];
  9. let result = [...new Set(arr)].filter(item => {  // arr 去重然后循环过滤
  10.     let s2 = new Set(arr2);  // arr2 去重
  11.     // s2.has(item) 判断s2中是否由 item ,  可以获取交集的元素
  12.     return s2.has(item)
  13. })
  14. console.log(result);
  16. //简化
  17. let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
  18. console.log(result);
  22. //3. 并集
  23. // 使用 [...new Set(arr)]   转为一个数组
  24. let union = [...new Set([...arr, ...arr2])];
  25. console.log(union);
  27. //4. 差集 (交集取反 )
  29. let diff  =  [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
  30. console.log(diff);

Map 方法

Map ES6提供的Map数据结构。 它类似于对象， 也是键值对的集合。

但是“键”的范围不限于字符串， 各种类型的值（包括对象）都可以当作键。

Map具有 iterator 接口， 可以使用 … | for…of 进行遍历

  1.  * Map 具有的属性方法
  2.  * size : 返回Map的个数
  3.  * set : 增加一个元素， 返回当前的Map
  4.  * get : 返回键名对象的键值
  5.  * has ： 检测Map中是否含有某个元素， 返回 boolean 值
  6.  * clear : 清空Map集合， 返回 undefined
  7.  * keys() : 获取所有的key名
  1. // 声明 Map
  2. let m = new Map();
  4. console.log(m, typeof m); // Map(0) {size: 0} 'object'
  7. // Map 属性方法
  9. //1. 添加属性  set(key, value ) 形式
  10. m.set('name', "yellowsea");
  11. m.set('change', function() {console.log('这是change方法')}); // key 和 value 不仅仅是字符串，
  12. let key =  {
  13.     school: 'HIdie'
  14. };
  15. m.set(key, ['test1', 'test2', 'test3']);
  18. // 删除 键
  19. // m.delete('name');
  21. // 检测
  22. console.log(m.has(key));  // true
  25. // 获取 键值value
  26. console.log(m.get('name')); // 通过 key 获取 value 的值
  27. console.log(m.get(key));
  30. // 遍历
  31. console.log(...m); // 展开
  32. for (let v of m.keys()) console.log(v);
  34. // 清空
  35. // m.clear();
  38. console.log(m);

Class 类

ES6 引入了Class类这个概念，作为对象的模板 。 通过class关键字可以定义类。

基本上ES6的class可以看作只是一个语法糖，它的绝大多数功能ES5都可以做到 。 新的class 写法只是让对象原型的写法更加清晰，更像面向编程的语法而已

  1.  * 知识点
  2.  * class 声明类
  3.  * constructor 定义构造函数初始化
  4.  * extends 继承父类
  5.  * super 调用 父级构造方法
  6.  * static 定义静态方法和属性
  7.  * 父类方法可以重写

ES5通过构造函数 实现的类方法

  1. //手机
  2. function Phone (brand, price) {
  3.     this.brand = brand;
  4.     this.price = price;
  5. }
  7. // 添加方法  (在原型上)
  8. Phone.prototype.call = function () {
  9.     console.log('这是call 方法 ');
  10. }
  12. // 实例化对象
  13. const  Huawei = new Phone('华为',2000);
  14. Huawei.call();
  15. console.log(Huawei);

ES6使用class 构造类

  1. // 使用 ES6 的 class 构造类
  2. class Phone {
  3.     // 构造方法, 必须使用 constructor()方法，不能修改，自动执行（在new Phone的时候执行）
  4.     constructor(brand, price) {
  5.         this.brand = brand;
  6.         this.price = price;
  7.     }
  9.     // 定义方法
  10.     call(a) {  // 必须使用该语法在class中定义方法，不能使用 ES5的对象完整形式
  11.         console.log('这是call 方法 ', a);
  12.     }
  13. }
  14. const onePlus = new Phone('1+手机', 1000);
  15. onePlus.call('test');
  16. console.log(onePlus);

class类静态属性

  1. /// Class静态成员
  3. // ES5 的静态成员
  5. function Phone() {
  7. }
  8. // 这样在写属性在 构造函数 对象 上的属性， 实例化对是无法查看到的
  9. // 这种属性叫做静态属性
  10. Phone.name = 'test';
  11. Phone.change = function () {
  12.     console.log('这是change 方法');
  13. }
  14. // 如果在构造函数原型上 添加的属性 就可以看到
  15. Phone.prototype.size = '123';
  17. // console.log(Phone.name);
  18. Phone.change();
  22. // 实例化对象
  23. let  nokia = new Phone();
  24. console.log(nokia.name);  // undefined  , 实例化对象出来的， 是无法获取到构造函数中的静态属性
  25. console.log(nokia.size);
  28. // ES6 
  29. // Class 定义静态属性
  30. class Shouji {
  31.     static mingzi = "手机";
  32. static change() {
  33.     console.log('静态属性方法')
  34. }
  35. }
  36. // 实例化对象
  37. const sj = new Shouji();
  38. console.log(sj.mingzi); // undefined ,   实例化对象出来的， 是无法获取到Class中的静态属性

class构造函数继承

ES5构造函数继承

  1. // 回顾 ES5 构造函数 的继承
  2. function Phone (brand, price) {
  3.     this.brand = brand;
  4.     this.price = price;
  5. }
  6. // 原型添加属性
  7. Phone.prototype.call = function () {console.log('我可以打电话')}
  9. // 子类
  10. // 只能手机
  11. function SmartPhone (brand, price, color, size) {
  12.     // Phone通过call方法改变它的this值 ; 实现子类调用父类方法 进行初始化
  13.     Phone.call(this, brand,price);  // this 是指向 SmartPhone
  15.     //子类属性初始化
  16.     this.color = color;
  17.     this.size = size;
  18. }
  20. // 设置子级构造函数的原型  实例化 指向 父级构造函数
  21. SmartPhone.prototype = new Phone;  // 子级就可以访问到父级的方法
  22. // 校正
  23. SmartPhone.prototype.constructor = SmartPhone;
  25. // 声明子类方法
  26. SmartPhone.prototype.photo = function () {
  27.     console.log('我可以拍照')
  28. }
  30. SmartPhone.prototype.playGame = function () {
  31.     console.log('我可以打游戏');
  32. }
  34. // 实例化子类方法
  35. const sj = new SmartPhone("这是手机",12312, 'back', '5.5');
  36. console.log(sj);
  37. sj.call();
  38. sj.playGame();
  39. sj.photo();

ES6 class 继承

  1. // Class 的继承
  3. class  Phone {
  4.     // 构造方法
  5.     constructor(brand, price) {
  6.         this.brand = brand;
  7.         this.price = price;
  8.     }
  10.     //父类的方法
  11.     call() {
  12.         console.log('我可以大点话 ');
  13.     }
  14. }
  16. // 子类,    extends
  17. class SmartPhone extends Phone { // 子类必须使用 extends 指向父类
  18.     // 子类的构造方法
  19.     constructor (brand,price,color,size) {
  20.         // 注意点
  21.         super(brand,price)  // 必须通过  super 指向父类的constructor 方法，进行父类的属性的初始化
  22.         // super(brand,price) 相等于 ES5 中的 Phone.call(this,brand, price)
  23.         this.color = color;
  24.         this.size = size;
  25.     }
  27.     // 子类方法
  28.     photo() {
  29.         console.log('我可以拍照');
  30.     }
  32.     playGame() {
  33.         console.log('我可以打游戏');
  34.     }
  35. }
  38. //实例化对象
  39. const Xiaomi  = new  SmartPhone('小米手机', 2000, 'write', '5.5inch');
  40. console.log(Xiaomi);
  41. Xiaomi.call();

Class中Getter和Setter方法

  1. class Phone {
  2.     // get 方法 
  3.     get price() { // 只要实例化对象 读取了 price属性， 就睡调用 get price 这个方法
  4.         // 返回值就是 price 这个属性的值
  5.         return 'price的值'
  6.     }
  8.     // set 
  9.     //只要price属性被修改了，就会调用set 方法
  10.     set price(value) {// price 必须接收一个参数，为修改的值
  11.         console.log('price 被修改了 ');
  12.         return value
  13.     }
  14. }
  16. const s = new Phone();
  17. console.log(s.price)
  18. s.price = 'free';
  19. console.log(s)

ES6数值的扩展

  1. // Number 数值的扩展 
  3. //1. 二进制和八进制
  4. let b = 0b1010;  // 二进制
  5. let o = 0o777;  // 0o 表示八进制
  6. let d = 100;  // 十进制
  7. let x = 0xff;  // 十六进制
  8. console.log(b,o,d,x);  // 10 511 100 255
  11. //2. Number.isFinite 检测一个数值是否为有限数
  12. console.log(Number.isFinite(100))
  13. console.log(Number.isFinite(100/0))
  15. //3. Number.isNaN 检测一个数值是否为NaN
  16. console.log(Number.isNaN(3));
  18. //4. Number.parseInt  Number.parseFloat  字符串转为整数
  19. console.log(Number.parseInt('123123aaa'));
  20. console.log(Number.parseFloat('3.12生')); // float
  22. // 5. Number.isInteger 判断一个数是否为 整数
  23. console.log(Number.isInteger(123));
  24. console.log(Number.isInteger(12.3));
  26. //6. Math.trunc 将数字的小数部分抹掉
  27. console.log(Math.trunc(3.14));
  29. //7. Math.sign 判断一个数是否是 正数  零  负数
  30. console.log(Math.sign(100)) //1
  31. console.log(Math.sign(0)) // 0
  32. console.log(Math.sign(-100)) //-1

ES6对象的扩展

  1. // 对象扩展方法
  4. //1. Object.is 判断两个值是否完全相等
  5. console.log(Object.is(123,123));
  6. console.log(Object.is(NaN,NaN));
  9. //2. Object.assign 对象的合并
  10. const obj1 = {
  11.     username: 'yellowsea',
  12.     password: 'test1'
  13. }
  14. const obj2 = {
  15.     username: null,
  16.     password: null,
  17. }
  18. // Object.assign(参数1， 参数2)；  参数2会覆盖参数1， 后面的会覆盖前面的
  19. // console.log(Object.assign(obj1, obj2));
  21. Object.assign(obj1,{a:1,b:2,c:3});  //  合并
  22. console.log(obj1);
  25. //3.  Object.setPrototypeOf  设置原型对象
  26. // Object.getPrototypeOf 获取原型对象
  28. const school = {
  29.     name: "Yellowsea"
  30. }
  32. const className = {
  33.     name: ['test1', 'test2', 'test3']
  34. }
  35. // 设置原型对象 ,   Object.setPrototypeOf(对象原型, 设置原型对象上的数据);
  36. Object.setPrototypeOf(school, className);
  37. console.log(Object.getPrototypeOf(school));  // 获取原型 信息
  38. console.log(school);