ES6总结3

156 阅读3分钟

一 .Symbol

1.基本数据类型
  ES5: number string boolean undefined null 
  ES6:symbol
引用数据类型
  数组 对象
 2.//  symbol 是独一无二的
    let aaa = Symbol();
    console.log(aaa);//Symbol

    let bbb = Symbol();//Symbol
    console.log(bbb);

    console.log(aaa === bbb); // false
    console.log(Object.is(aaa,bbb)); //false 
 3.   let xxx = Symbol();
        let obj = {
            name: 'zs',
            age: 18,
            weight: '80kg',
            [xxx]: '183cm',
            [Symbol('x1')]: '18级'
        }
    获取对象中属性的方法:
    console.log(obj.name)
    console.log(obj[xxx])//注意[xxx] 在obj是表达式引入  获取直接 xxx  obj[key]
    再设置一个Symbol
     obj[Symbol('x2')] = 'abc'
 4. 在循环中symbol类型的属性无法拿到    

二. set

1.
  let a1 = [2,1,3,2,4,5,1,4];  
  let s1 = new Set(a1); // 类数组  2 1 3 4 5
  let a2 = [...s1]; // 类数组 -> 数组  2 1 3 4 5
 2.  set类型数据 用add方法添加数据 
  console.log(s1.add(9)); // 2 1 3 4 5 9
  s1.size  //可以拿到sat类型数据长度
3 . delete() 删除数据 => boolean
console.log(s1.delete(4)) // true
console.log(s1.delete(0)) // false
console.log(s1) // 2 1 3 5 9
4.  has() 判断是否含有某个数据 => boolean
console.log(s1.has(8)) // false
5 . s1.clear()清空数据

三.map

 let tmp = new Map();
// set() 设置数据
tmp.set('name', 'xm');
tmp.set('age', 20)
// size 长度
console.log(tmp.size)
console.log(tmp)
// get() 获取数据
console.log(tmp.get('name'))
// has() => boolean
console.log(tmp.has('height'))

tmp.set('height','183')
tmp.set('weight', 70)

tmp.set('weight', 80)
console.log(tmp)

// delete() 删除数据 => boolean
// console.log(tmp.delete('age'))
// console.log(tmp)

// tmp.clear()
// console.log(tmp)

四.ajax:在不更新整个页面的情况下,更新部分数据,异步加载数据。

ajax原理

 1.创建 XMLHttpRequest 对象
var xmlhttp; //(实例化对象)
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp = new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

 2.向服务器发送请求
/*
   open 第一个参数请求类型 GET POST
        第二个参数请求地址
        第三个参数是否是异步操作
*/
//  规定请求的类型、URL 以及是否异步处理请求。
xmlhttp.open("GET", "Data.json", true);
// 将请求发送到服务器。
xmlhttp.send();

3.响应
// onreadystatechange: 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
xmlhttp.onreadystatechange = function () {
  // 当 readyState 等于 4 且状态为 200 时,表示响应已就绪
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    // xmlhttp.responseText;
    // 返回的信息是json(字符串类型)
    console.log(xmlhttp.responseText)
    // 转换成对象类型 便于后续使用
    let res = JSON.parse(xmlhttp.responseText)
    console.log(res)
  }
}

/*
  readyState:
    0: 请求未初始化
    1: 服务器连接已建立
    2: 请求已接收
    3: 请求处理中
    4: 请求已完成,且响应已就绪
*/

https://www.cnblogs.com/smile6542/p/11969936.html
  200: ok
  304: Not Modified  客户端有缓存的文档并发出了一个条件性的请求(一般是提供If-Modified-Since头表示客户只想比指定日期更新的文档)。服务器告诉客户,原来缓冲的文档还可以继续使用。
  400: Bad Request 请求出现语法错误
  404: 找不到资源
  500: 服务器错误
  505: HTTP Version Not Supported 服务器不支持请求中所指明的HTTP版本

  query ajax 的应用等

五。Promise

1.Promise异步请求回调函数的定义方法
   //方法 一  p1.then(f1).catch(f2)
      let p1 = new Promise(function(resolve, reject) {
        
        console.log('开始发送请求1');
        setTimeout(() => {
          let tag = true
          if(tag) {
            let obj = {
              name: 'zs',
              age: 18
            }
            resolve(obj)
          } else {
            reject()
          }

        }, 1500)

      }).then(function(obj) {
        console.log(obj)
        console.log('请求1成功')

      }).catch(function() {

        console.log('请求1失败')

      })

方法二 // p1.then(f1,f2) let p2 = new Promise((resolve, reject) => {

        console.log('开始发送请求1')

        setTimeout(() => {
          let tag = false;

          if(tag) {
            resolve()
          } else {
            reject()
          }

        }, 2000)

      }).then(function(){

        console.log('请求1成功')

      }, function() {

        console.log('请求1失败')

      })
2.Promise异步请求回调函数的嵌套调用
    let p1 = new Promise((resolve, reject) => {

        console.log('开始发送请求1')
        setTimeout(() => {
          let tag = false
          if (tag) {
            resolve()
          } else {
            reject()
          }
        }, 1000)

      }).then(() =>{
        
        console.log('请求1成功')
        
        return new Promise((resolve, reject) => {
          console.log('开始发送请求2')

          setTimeout(() => {

            let tmp = false 

            if (tmp) {
              resolve()
            } else {
              reject()
            }

          }, 2000)
        })


      }, () => {
                          //这里的结构  只能用p1.then(f1,f2)
        console.log('请求1失败')
        // return Promise.reject()
        return new Promise(()=>{})

      }).then(() => {
        console.log('请求2成功')
      }).catch(() => {
        console.log('请求2失败')
      })    //整个结构就是  p1.then().then().catch()
3.Promise下的两种方法
 //所有Promise对象执行完成之后执行
    Promise.all([p1, p2, p3]).then(() => {
      console.log('okokok')
    })
//第一个Promise对象执行后执行
Promise.race([p1,p2,p3]).then(() => {
  console.log('1111')
})