前端学习笔记

ES6

1、字符串

遍历字符串 for of

        let str ="hello"
        for(let i of str){
   
            console.log(i)
        }//h e l l o

模板字符串

模板字符串中的所有空格和换行行都会被保留

      let a = 9;
      console.log('小明今年' + a + '岁了'); //普通字符串
      console.log(`小明今年${
     a}岁了`); //模板字符串
      function f() {
   
        return '10';
      }
      console.log(`小明今年${
     f()}岁了`);
        

标签字符串

alert`hello word ` 

字符串新增的方法

includes（） strasWith() endsWith() repeat() padStart() padEnd() repaceAll() tirm() tirmStart() tirmEnd() at()

 let str1 = '好好学习，天天向上';
      console.log(str1.at(-3))//返回参数指定位置的字符
      console.log(str1.includes('好')); //是否包含某一字符串
      console.log(str1.startsWith('好')); //是否以这个字符开始
      console.log(str1.endsWith('好')); //是否以这个字符结束
      console.log(str1.repeat(6)); //重复几次
      console.log(str1.padStart('11', 12)); //12好好学习，天天向上 （不改变原字符串，第一个参数是补全后的长度）
      console.log(str1.padEnd('11', 90)); //好好学习，天天向上90
      console.log(str1.replaceAll('天', 'tian')); //替换所有匹配，不改变字符串
      let str3 = ' 12 ';
      console.log(str3);
      console.log(str3.trim()); //去除首尾空格
      console.log(str3.trimStart()); //去除开头空格
      console.log(str3.trimEnd()); //去除尾部空格

2、数组的扩展

flat() flatMap（）Array.of（）Array.from（）find（）findIndex（）fill（）values() keys() entries() includes()

      //多维数组转换为低位数组
      let arr = [1, 2, 3, [4, 5]];
      console.log(arr.flat());
      let arr1 = [1, 2, [3, 4, [5, 6]]];
      console.log(arr1.flat(2)); //参数为深度，是一个数字,表示要拉平两层嵌套数组
      let arr2 = [1, 2, 3, 4, 5];
      console.log(arr2.flatMap((x) => [x, x + 1])); //对原数组的每个成员执行一个函数

      console.log(Array.of(1, 2, 3)); //将一组值转换为数组
      let arr3 = 'hello';
      console.log(Array.from(arr3)); //将字符串转换为数组

      let arr4 = [1, 2, 3];
      console.log(
        arr4.find((value) => {
   
          return value > 2;
        }),
      );
      //用于查找满足特定条件的数组元素
      console.log(
        arr4.findIndex((value) => {
   
          return value > 2;
        }),
      );
      //用于查找满足特定条件的数组元素的索引位置

      let arr5 = [1, 2, 3];
      console.log(arr5.fill(3)); //[3,3,3]  用于填充一个数组
      for (let value of arr5.values()) {
   
        console.log(value);
      } //对数组的值进行遍历
      for (let key of arr5.keys()) {
   
        console.log(key);
      } //对数组的索引值进行遍历
      for (let [index, elem] of arr5.entries()) {
   
        console.log(index, elem);
      } //对数组的索引值和数值进行遍历

      console.log(arr5.includes(3)); //是否包含给定的值

3、 箭头函数

  let arr =[1,2,3,4]
      arr.forEach(function(a,index,arr){
   
          console.log(a,index,arr)
      })
      arr.forEach((a)=>{
   
        console.log(a)
      })

4、面向对象

可以使用class关键字声明一个类，之后以这个类来实例化对象
类抽取了对象的公共部分，它泛指一大类
对象特指某一个，通过类实例化一个对象
constructor()方法是类的构造函数，用于传递参数，返回实例化对象，通过new命令生成对象实例时，自动调用该方法

      class Star {
   
        constructor(uname) {
   
          this.uname = uname;
        }
        sing(song){
   
            console.log("我爱唱歌")
            console.log(this.uname+song)
        }
      }
      let ldh = new Star('刘德华');
      console.log(ldh)
      ldh.sing("冰雨")

extends继承

      class Father {
   
        constructor() {
   }
        money() {
   
          console.log(100);
        }
      }
      class Son extends Father{
   

      }
      let son=new Son()
      son.money()//100

supper关键字可以访问和调用父类上的函数，可以调用父类构造函数，也可以调用父类普通函数
继承中，如果实例化子类输出一个方法，先看子类有没有这个方法，如果有就先执行子类，如果子类没有，就去找父类的（就近原则）

（1）
    class Father{
   
        constructor(x,y){
   
            this.x=x
            this.y=y
        }
        money(){
   
            console.log(this.x+this.y)
        }
    }
    class Son extends Father{
   
        constructor(x,y){
   
           super(x,y)
        }
    }
    let father = new Father(1,2)
    let son = new Son(2,3)
    father.money()
    son.money()

（2）
    class Father{
   
        say(){
   
            return "我是爸爸"
        }
    }
    class Son extends Father{
   
        say(){
   
            // console.log("儿子")
            console.log(super.say()+"的儿子")
        }
    }
    let son = new Son()
    son.say()//我是爸爸的儿子

子类在构造函数中使用super，必须放到this前面（必须先调用父类的构造函数，在使用子类的构造方法）

      class Father {
   
        constructor(x, y) {
   
          this.x = x;
          this.y = y;
        }
        jia(x, y) {
   
          console.log(this.x + this.y);
        }
      }
      class Son extends Father{
   
        constructor(x, y) {
   
            super(x,y)
          this.x = x;
          this.y = y;
          
        }
        jian(x, y) {
   
          console.log(this.x - this.y);
        }
      }
      let son =new Son(5,2)
      son.jia()//7

注意：
在ES6中类没有变量提升，必须先定义类，才能实例化对象
类里面的属性和方法一定要加this使用
constructor里面的this指向的是创建的实例对象
方法里面的this指向的是这个方法的调用者

5、ajax

客户端给服务端发送消息，以及接收响应的工具

优势:
1、原生js就可以使用
2、用户体验感好（不需要刷新页面就可以更新数据)
3、减轻服务端和宽带的负担
4、搜索引擎的支持度不够，因为数据都不在页面上，搜索引擎搜索不到

      //创建对象
      const xhr = new XMLHttpRequest();
      //初始化，设置请求和方法
      xhr.open('get', './05_lx.php');
      //发送
      xhr.send();
      //on when 当什么什么时候
      //readystate 是xhr对象中的属性 表示状态0，1，2，3，4
      xhr.onreadystatechange = function () {
   
        if ((xhr.readyState == 4) & (xhr.status == 200)) {
   
          console.log(xhr.status); //状态码
          console.log(xhr.statusText); //状态字符串
          console.log(xhr