HTML的基础事件

1. onmouseover、onmouseout表示JS事件的鼠标移入鼠标移出
2. document.getElementById('id') JS中选择HTML的ID元素

   <input type="checkbox" onmouseover="document.getElementById('div1').style.display='block';"
       onmouseout="document.getElementById('div1').style.display='none';">
   

   JS的函数

   <script>
   function 函数名(){
        代码;
    }
   </script>
   

为a链接添加JS

<a href="javascript:">链接</a> 留空则代表链接不跳转

唯一例外,JS修改class时需写成className

<script>
    function toRed() {
        var oDiv = document.getElementById('div1');
        oDiv.className = 'box';
    }
</script>

两种操作属性的方法

1. 以.号后跟属性名 如：oTxt.value = '大大'
2. 方括号内加属性名(一般用于变量传参时) 如：oTxt['value'] = '大大'

提取行间事件,(如写在head头里需加window.onload)

<script>
    var oBtn = document.getElementById('btn1');

    oBtn.onclick = function () {
        alert('a');
    };
</script>

this代表当前发生事件的元素

this.className = 'active';

innerHTML代表元素的内容(可以识别HTML代码)

oBtn.onclick = function () {
                oDiv.innerHTML = oTxt.value;
            }

字符串转数字

parseInt() 转成整数
parseFloat() 转成浮点数

• 箭头函数

  1. 如果只有一个参数, ()可以省
  2. 如果只有一个return，{}可以省

  普通函数
  function 名字() {
          ...
  }
  
  箭头函数
  ()=>{
          ...
  }
  
  

• 参数扩展(...变量)

  //在函数中接收剩余变量
  function show(a, b, ...args) {
          alert(a);
          alert(b);
          alert(args);
      }
  
      // 展开数组
      let arr4 = [1, 2, 3];
      function show(a, b, c) {
          alert(a);
          alert(b);
          alert(c);
      }
      show(...arr4);//等同于show(1, 2, 3)
  
  

• 解构赋值

  1. 左右两边结构必须一样
  2. 右边必须是个合法的东西
  3. 声明和赋值不能分开（必须在一句话里完成）

  // let arr = [1, 2, 3];
  // let a = arr[0];
   // let b = arr[1];
  // let c = arr[2];
  等同于：
  let [a, b, c] = [1, 2, 3];
  json赋值:
  let {a, c, d} = {a: 12, c: 5, d: 6};
  也可以：
  let [{a,b}, [n1, n2, n3], num, str] = [{a: 12, b: 5}, [12, 5, 8], 8, 'cxzcv']
  

• map

  let arr = [12, 5, 8];
      let result = arr.map( item => item*2);
      alert( result);
  

• reduce

  let arr = [12, 69, 180, 8763];
      let result = arr.reduce(function (tmp, item, index) {
          if (index != arr.length - 1) {
              return tmp + item
          } else {
              return (tmp + item)/arr.length;
          }
          return a + b ;
  });
  alert(result);
  

• filter

  let arr = [12, 5, 8, 99, 27, 36, 75];
  let result = arr.filter(item => {
          if (item%3 == 0) {
              return true;
          } else {
              return false;
          }
  });
  箭头函数简写为
  let result = arr.filter(item => item%3 == 0);
  alert(result);
  

• forEach

  let arr = [12, 5, 8, 9];
  
      arr.forEach(item => {
          alert(item);
      });
  

1. startsWith与endWith

   let str = 'www.dadas1.txt';
   
   alert(str.startsWith('www'));
   alert(str.endsWith('.txt'));
   

2. 字符串模板

   ``表示反单引号，通过${变量}符号拼接变量

   let a = 12;
   let str = `a${a}bc`;
   alert(str);//a12bc
   

• 创建

class User {
        constructor(name, pass) {
            this.name = name;
            this.pass = pass;
        }
        showName() {
            alert(this.name);
        }
        showPass() {
            alert(this.pass);
        }
    }

var u1 = new User('blue', '123456');
u1.showName();
u1.showPass();

• 继承

class VipUser extends User{
        constructor(name, pass, level) {
            super(name, pass);
            this.level = level;
        }
        showLevel() {
            alert(this.level);
        }
    }
    var u1 = new VipUser('blue', '123456', 99);
    u1.showLevel();

1. 组件化-class
2. JSX JSX == babel == browser.js

• json的标准写法

  1. 只能用双引号
  2. 所有的名字都必须用引号包起来

• json对象转字符串

  let json = {a: 12, b: 5};
  let str = 'http://it.kaikeba.com/path/user?data=' + encodeURIComponent(JSON.stringify(json));
  alert(str);
  

• 字符串转json

  let str = '{"a": 12, "b": 5, "c": "abc"}';
  let json = JSON.parse(str);
  console.log(json)
  

• 简写

  1. 普通属性(key与value一样时可以写一个)

  let a = 12;
  let b = 5;
  
  let json = {a, b};//相当于{a: a, b: b}
  console.log(json);
  

  ​ b. 方法简写(可以省略: function)

  let json = {
          a: 12,
          // show: function(){
          //     alert(this.a);
          //
          // },
          show() {
              alert(this.a);
          }
      };
  

• 例子

function createPromise(url) {
        return new Promise(function (resolve, reject) {
            //resolve-成功，reject失败
            $.ajax({
                url,
                dataType: 'json',
                success(arr) {
                    resolve(arr);
                },
                error() {
                    reject();
                }
            });
        })
    }

    Promise.all([
        createPromise('data/arr.txt'),
        createPromise('data/json.txt')
    ]).then(function (arr) {
        let [res1, res2] = arr;

        alert('全部成功');
        alert(res1);
        alert(res2);
    }, function () {
        alert('至少有一个失败了');
    });

• 更加优化例子

  Promise.all([
          $.ajax({url: 'data/arr.txt', dataType: 'json'}),
          $.ajax({url: 'data/json.txt', dataType: 'json'})
      ]).then(function (results) {
          let [arr, json] = results;
          alert('成功了');
          console.log(arr, json);
      }, function () {
          alert('失败了');
      })
  

• 例子

function *show() {
        alert('a');
        yield;
        alert('b');
    }
    let genObj = show();
    genObj.next();
    genObj.next();

• yield

  可以传参也可以返回