es6 语法简单使用2

简介: es6 语法简单使用

迭代器

//声明一个数组
  const xiyou = ['唐总','孙悟空','猪八戒','沙僧']
  console.log(xiyou);
  //使用for  of  遍历
  for(let v of xiyou){
    console.log(v); // 唐总,孙悟空,猪八戒,沙僧  键值
  }
  for(let v in xiyou){
    console.log(v);  //0,1,2,3   键名
  let iterator = xiyou[Symbol.iterator]();
  console.log(iterator);
  //调用对象的next  方法
  // console.log(iterator.next());
  // console.log(iterator.next());
  // console.log(iterator.next());
  // console.log(iterator.next());
迭代器的应用:
  //迭代器的应用  -->  自定义遍历数据的时候,需要用到迭代器
  const banji = {
    name: '终极一班',
    stus:[
    'xiaoxia',
    'xiaozhang',
    'knight',
    'zhangzhang'
    ],
    [Symbol.iterator](){
    //索引变量
       let index = 0;
    let _this = this;
    return {
      next: function(){
      if (index < _this.stus.length) {
      const result = {
        value: _this.stus[index],
        done: false
        };
        index++;
        return result;
      }else{
        return {value: undefined,done:false}
      }
      }
    };
    }
  }

生成器函数 声明与调用

初体验:
//生成器其实就是一个特殊的函数
    // 异步编程   纯回调函数
    function * gen(){
    console.log("你好");
    //yield  函数代码的分隔符
    yield '小溪是我的朋友';
    console.log("小溪是我的朋友");
    yield '法外狂徒张三';
    console.log("法外狂徒张三");
    yield '就是牛,你怎么说?';
    console.log("就是牛");
    }
    let iterator = gen();
    console.log(iterator);
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    for (let v of gen() ) {
    console.log(v);
    }

生成器传参

//生成器函数参数
    function * gen(arg) {
    console.log(arg);
    let one = yield 111;
    console.log(one);
    let two = yield 222;
    console.log(two);
    let three = yield 333;
    console.log(three);
    }
    //获取迭代器对象
    let iterator =  gen('AAA');
    console.log(iterator.next());
    console.log(iterator.next('BBB'));
    console.log(iterator.next('CCC'));
    console.log(iterator.next());

Promise

promise  是es6 引入异步编程的新解决方案。语法上是promise是一个构造函数,用来封装异步操作并可以获取其成功或者失败的结果
1,Promise 构造函数: Promise(excutor) {},
2,Promise.prototype.then 方法
3,Promise.prototype.catch 方法
三种状态:
等待: (pending) , 已完成(fulfilled) , 已拒绝 (rejected) 
初识Promise :
//实例化Promise  对象
    const p = new Promise(function(resolve,reject){
    setTimeout(function(){
      //
      // let data = '数据库中的用户数据';
      // // 调用resolve方法,promise对象的状态就会变成成功
      // resolve(data);  
      let err = '数据读取失败';
      //调用reject  这个promise 的状态就会变成失败
      reject(err);
    },1000);
    });
    //调用Promise 的then  方法
    p.then(function(value){
    //成功
    console.log('我打印成功的数据',value)
    },function(reson){
    console.error('我打印失败的数据',reson)
    })

使用Promise 封装Ajax 请求

const p = new Promise((resolve ,reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open("Get","http://localhost:8083/personTest/getAllTest");
    xhr.send();
    xhr.onreadystatechange = function(){
      if(xhr.readyState === 4){
      //判断响应状态码
      if (xhr.status >= 200 && xhr.status <300){
        resolve(xhr.response);
      }else {
        //如果失败
        reject(xhr.status)
      }
      }
    }
    });
    p.then(function(vallue) {
    console.log(vallue);
    },function(reason){
    console.error(reason);
    })

Promise – then 方法

<script type="text/javascript">
    //创建 promise对象
    const p = new Promise((resolve,reject) =>{
    setTimeout(()=>{
      // resolve('用户数据');
      reject('读取用户数据失败了!');
    },1000)
    });
    //调用then  方法  then  方法的返回结果是promise
    // 对象,对象的状态是由回调函数的执行结果决定的
    const result =  p.then(value => {
    console.log(value);
    },reason =>{
    console.warn(reason);
    });  
    console.error(result);

Promise —Catch 方法

const p = new Promise((resolve,reject)=>{
    setTimeout(()=>{
      //设置P 对象的状态为失败
      reject('我出错了,咋办?');
    },1000)
    });
    // p.then(value=>{
    //  console.log(value);
    // },reason=>{
    //  console.warn(reason);
    // })
    p.catch(reason => {
    console.warn(reason);
    })

Set集合

let s = new Set();
    let s2 = new Set(['1','2','3','2'])
    console.warn(s2, typeof s);
    console.error(s2.size);
    s2.add('100');
    console.log(s2);
    for (let v of s2){
    console.log(v)
  }

Map集合

es 6提供了Map 数据结构,它类似于对象,也是键值对的集合,但是 “键” 的范围不限于字符串,各种类型的值,包括对象,都可以当作键, Map 也实现了iterator 接口,所有可以使用扩展运算符 【 … 】 和 for … of … 进行遍历,Map 的属性 和方法:

size  返回 Map 的元素个i数
set   增加一个新元素,返回当前的Map 
get   返回键名对象的键值
has   检测当前Map 中是否包含某个元素,返回 一个 boolen 值
clear 清空集合 ,返回 undefined  

class 类

知识点:

class 声明类
constructor  定义构造函数初始化
extends  继承父类
super  调用父类的构造方法
static  定义静态方法和属性
父类方法可以重写
            //es 6  类的声明
    //class
    class Phone{
     //构造方法  名字固定
     constructor(brand,price){
      this.brand = brand;
      this.price = price;
     }
     //方法
     call() {
      console.warn("我乐意打电话!");
     }
    }
    let onePlus = new Phone("iphone",100);
    console.warn(onePlus.call());
    console.error(onePlus);

类的静态成员

        class Person{
    //静态属性属于类而不属于实例化对象
    static name = '张大炮';
    static change(){
      console.warn("可以改变世界");
    }
    }
    let person = new Person();
    console.log(Person.name)
       console.log(Person.change());

es6 类继承

class Phone{
    constructor(brand,price){
     this.brand = brand;
     this.price = price;
    }
    call(){
     console.log("我雷了");
    }
   }
   class smartPhone extends Phone{
    constructor(brand,price,color,size){
     super(brand,price);
     this.color = color;
     this.size = size;
    }
    photo(){
     console.log("拍照");
    }
   }
   const xiaomi = new smartPhone('xiaomi',799,'yellow',6.7);
   console.log(xiaomi.photo());
.....

对象方法的扩展

// Objects.is  判断俩个值是否完全相等
    // console.warn(Object.is(120,120));
    // console.log(NaN === NaN);
    // console.log(Object.is(NaN,NaN));
    // Objects.assign  对象的合并
    const config1 = {
    host: 'localhost',
    port: '3306'
    };
    const config2 = {
    host : 'xilijun.com',
    port: '8888'
    }

模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来

模块化的好处: 1,防止命名冲突 2,代码复用 3,高维护性

模块功能主要由俩个命令构成: export 和 import

export 命令是用于规定模块的对外接口

.size = size;
}
photo(){
console.log(“拍照”);
}
}
const xiaomi = new smartPhone(‘xiaomi’,799,‘yellow’,6.7);
console.log(xiaomi.photo());
### 对象方法的扩展
```javascript
  // Objects.is  判断俩个值是否完全相等
    // console.warn(Object.is(120,120));
    // console.log(NaN === NaN);
    // console.log(Object.is(NaN,NaN));
    // Objects.assign  对象的合并
    const config1 = {
    host: 'localhost',
    port: '3306'
    };
    const config2 = {
    host : 'xilijun.com',
    port: '8888'
    }

模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来

模块化的好处: 1,防止命名冲突 2,代码复用 3,高维护性

模块功能主要由俩个命令构成: export 和 import

export 命令是用于规定模块的对外接口

import 命令是用于输入其他模块提供的功能

目录
相关文章
|
前端开发 JavaScript
|
6月前
|
存储 前端开发 JavaScript
ES6语法
ES6语法
63 0
|
JavaScript
ES6的基础用法
对js es6的用法进行简单介绍
|
网络架构
es6 语法简单使用1
es6 语法简单使用
72 0
|
JavaScript 前端开发
node.js入门学习(1): 让phpstorm配置支持ES语法,箭头函数正常代码格式化
node.js入门学习(1): 让phpstorm配置支持ES语法,箭头函数正常代码格式化
126 0
|
Web App开发 前端开发 JavaScript
ES9语法知识点回顾
ES9语法知识点回顾
260 31
|
JavaScript 前端开发 索引
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
JavaScript ES6语法学习笔记 03、ES6新增方法(一)
|
JavaScript 前端开发
JavaScript ES6语法学习笔记 03、ES6新增方法(二)
JavaScript ES6语法学习笔记 03、ES6新增方法(二)
JavaScript ES6语法学习笔记 03、ES6新增方法(二)