五：前端笔记（2）

作者: YANG_c08b | 来源:发表于2018-12-19 19:32 被阅读0次

五：前端笔记（2）
2月14笔记
【App开发笔记】1.2笔记目录
前端笔记(2)
前端笔记2
前端测试
前端学习笔记五
Day1: 开班
HTML基础学习笔记
初始前端笔记之五

1.三点运算符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>3点运算符</title>
</head>
<body>
<!--
* 用途
1. rest(可变)参数
    * 用来取代arguments 但比 arguments 灵活,只能是最后部分形参参数
    function fun(...values) {
        console.log(arguments);
        arguments.forEach(function (item, index) {
            console.log(item, index);
        });
        console.log(values);
        values.forEach(function (item, index) {
            console.log(item, index);
        })
    }
    fun(1,2,3);
2. 扩展运算符
  let arr1 = [1,3,5];
  let arr2 = [2,...arr1,6];
  arr2.push(...arr1);
-->
<script type="text/javascript">
    function foo(a, ...value){
        console.log(arguments);
        // arguments.callee();
        console.log(value);
        /*arguments.forEach(function(item, index){
            console.log(item, index);
        })*/
        value.forEach(function(item, index){
            console.log(item, index);
        })
    }
    foo(2, 65, 33, 44);
    let arr = [1,6];
    let arr1 = [2,3,4,5];
    arr = [1, ...arr1, 6];
    console.log(arr);
    console.log(...arr);
</script>

</body>
</html>

2.对象的简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>简化对象的写法</title>
</head>
<body>
<script type="text/javascript">
    let username = 'kobe';
    let age = 40;
    let obj = {
        username,
        age,
        getName(){
            return this.username;
        }
    };
    console.log(obj);
    console.log(obj.getName());
</script>

</body>
</html>

3.Promise对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Promise对象</title>
</head>
<body>
<!--
1. 理解:
  * Promise对象: 代表了未来某个将要发生的事件(通常是一个异步操作)
  * 有了promise对象, 可以将异步操作以同步的流程表达出来, 避免了层层嵌套的回调函数(俗称'回调地狱')
  * ES6的Promise是一个构造函数, 用来生成promise对象的实例
2. 使用promise基本步骤(2步):
  * 创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态为 pending
      //执行异步操作
      if(异步操作成功) {
        resolve(value);//修改promise的状态为fullfilled
      } else {
        reject(errMsg);//修改promise的状态为rejected
      }
    })
  * 调用promise的then()
    promise.then(function(
      result => console.log(result),
      errorMsg => alert(errorMsg)
    ))
3. promise对象的3个状态
  * pending: 初始化状态
  * fullfilled: 成功状态
  * rejected: 失败状态
4. 应用:
  * 使用promise实现超时处理
  * 使用promise封装处理ajax请求
    let request = new XMLHttpRequest();
    request.onreadystatechange = function () {
    }
    request.responseType = 'json';
    request.open("GET", url);
    request.send();
-->
<script type="text/javascript">
        /*
    //创建promise对象
    let promise = new Promise((resolve, reject) => {
        //初始化promise状态：pending（初始化）
        console.log('111');
        //执行异步操作，通常是发送ajax请求、开启定时器
        setTimeout(() => {
            console.log('333');
            //根据异步任务的返回结果，去修改promise的状态
            //异步任务执行成功
            // resolve('哈哈');//修改promise的状态为fullfilled（成功状态）
            //异步任务执行失败
            reject('555');//修改promise的状态为rejected（失败状态）
        }, 2000);
    })
    console.log('222');
    promise
        .then((data) => {//成功的回调
            console.log(data, '成功了~~~');
        }, (error) => {//失败的回调
            console.log(error, '失败了~~~');
        });
    */
    //定义获取新闻的功能函数
    function getNews(url) {
        let promise = new Promise((resolve, reject) => {
            let xmlHttp = new XMLHttpRequest();
            console.log(xmlHttp, readystate);
            // 绑定readystate监听
            xmlHttp.onreadystatechange = function () {
                if (xmlHttp.readyState === 4) {
                    if (xmlHttp.status == 200) {
                        resolve(xmlHttp.responseText);
                    } else {
                        reject('暂时没有新闻内容');
                    }
                }
            };
            xmlHttp.open('GET', url);
            xmlHttp.send();
        })
        return promise;
    }

    getNews('http://localhost:30001/news?id=2')
        .then((data) => {
            console.log(data);
            // console.log(typeof data);
            // 准备获取评论内容的url
            let commentsUrl = JSON.parse(data).commentsUrl;
            let url = 'http://localhost:3000' + commentsUrl;
            // 发送请求获取评论内容
            return getNews(url);
        }, (error) => {
            console.log(error);
        })
        .then((data) => {
            console.log(data);
        }, () => {
        });
</script>
</body>
</html>

4.Symbol

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Symbol</title>
</head>
<body>
  <!--
    Symbol：
      概念：ES6中的添加了一种原始数据类型symbol(已有的原始数据类型：String, Number, boolean, null, undefined, 对象)
      特点：
        1、Symbol属性对应的值是唯一的，解决命名冲突问题
        2、Symbol值不能与其他数据进行计算，包括同字符串拼串
        3、for in, for of遍历时不会遍历symbol属性。
      使用：
        1、调用Symbol函数得到symbol值
          let symbol = Symbol();
          let obj = {};
          obj[symbol] = 'hello';
        2、传参标识
          let symbol = Symbol('one');
          let symbol2 = Symbol('two');
          console.log(symbol);// Symbol('one')
          console.log(symbol2);// Symbol('two')
        3、内置Symbol值
          * 除了定义自己使用的Symbol值以外，ES6还提供了11个内置的Symbol值，指向语言内部使用的方法。
          - Symbol.iterator
           * 对象的Symbol.iterator属性，指向该对象的默认遍历器方法
  -->
  <script type="text/javascript">
      // 创建symbol属性值
      let symbol = Symbol();
      // console.log(symbol);
      // Symbol()
      let obj = {username:'kebi',age:40};
      obj.sex = '男';
      obj[symbol] = 'hello';
      // console.log(obj);
  //    Object { username: "kebi", age: 40, sex: "男", Symbol(): "hello" }
      //for in、for of不能遍历symbol属性
      for(let i in obj){
          // console.log(i);
      }
      let symbol2 = Symbol('one');
      let symbol3 = Symbol('two');
      console.log(symbol2 == symbol3);
      console.log(symbol2,symbol3);
  //    Symbol(one) Symbol(two)
          //可以去定义常量
      const Person_key = Symbol('person_key');
      console.log(Person_key);
  //    Symbol(person_key)
  </script>
</body>
</html>

5.箭头函数

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>箭头函数</title>

</head>
<body>
    <button id="btn1">测试箭头函数this_1</button>
    <button id="btn2">测试箭头函数this_2</button>


<!--
* 作用: 定义匿名函数
* 基本语法:
  * 没有参数: () => console.log('xxxx')
  * 一个参数: i => i+2
  * 大于一个参数: (i,j) => i+j
  * 函数体不用大括号: 默认返回结果
  * 函数体如果有多个语句, 需要用{}包围，若有需要返回的内容，需要手动返回
* 使用场景: 多用来定义回调函数
* 箭头函数的特点：
    1、简洁
    2、箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候所处的对象就是它的this
    3、扩展理解： 箭头函数的this看外层的是否有函数，
        如果有，外层函数的this就是内部箭头函数的this，
        如果没有，则this是window。
-->
<script type="text/javascript">
    /*let fun= function(){
        console.log('我是函数');
    }*/
    /*
    let fun = () => console.log('我是箭头函数');
    fun();
    //形参的情况
    //1、没有形参的时候
    let fun1 = () => console.log('我是箭头函数');
    fun1();
    //2、只有一个形参的时候()可以省略
    let fun2 = a => console.log(a);
    fun2('aaa');
    //3、两个及两个以上的形参的时候()不能省略
    let fun3 = (x, y) => console.log(x, y);
    fun3(25, 36);
    //函数体的情况
    //1、函数体只有一条语句或者是表达式的时候{}可以省略-->会自动返回语句执行的结果，或者是表达式的结果
    // let fun4 = (x,y) => {return x + y};
    let fun4 = (x,y) => x + y;
    console.log(fun4(24, 36));
    //2、函数体不止一条语句或者表达式的情况
    let fun5 = (x, y) => {
        console.log(x, y);
        return x + y;
    }
    console.log(fun5(35, 49));
    */
    let btn1 = document.getElementById('btn1');
    let btn2 = document.getElementById('btn2');
    btn1.onclick = function(){
        alert(this);
        console.log(this);
    }
    btn2.onclick = () => {
        alert(this);
    }
    let obj = {
        name: '箭头函数',
        getName: () => {
            btn2.onclick = () => {
                console.log(this);
            }
        }
    }
    // 本质是 obj.getName = () => {};
    obj.getName();
</script>

</body>
</html>