ES6知识点总结

最新推荐文章于 2022-04-03 12:09:16 发布

对面_阿紫

最新推荐文章于 2022-04-03 12:09:16 发布

阅读量132

点赞数

文章标签： html es6

本文链接：https://blog.csdn.net/m0_49707537/article/details/120789217

版权

1.变量声明关键字

1.var 全局变量，会变量提升

2.let 局部变量，跟var类似，区别在于只能局部发挥作用，即在一对{}内发挥作用，并且不会变量提升，不能重复声明

3.const 声明的变量类型一般为常量，并且必须赋值，变量名必须得大写

2.结构

1.数组

1.通俗的来说，可以简单地理解为把数组或对象解析为单独的变量

2.基本格式：

var [a,b,,c='defalut',...res]=arr

解析：逗号表示下一位，...res表示数组里剩余的所有元素，并且只能放在数组的末尾位置，c='default'表示默认值

3.交换变量

[a,b]=[b,a]

2.结构

基本格式：

var {name,age,say='你好',...res}

注意：对象里的属性名没有顺序之分

3.字符串

3.1.字符串模板

基本格式：`${js变量}`，里面可以实现换行，添加特殊符号等操作

      var obj = { name: "张三", age: 18 };
      var str4 = "大家好，他是" + obj.name + "今年" + obj.age + "岁";
      console.log(str4);
      var str5=`大家好，他是${obj.name}，今年${obj.age}`
      console.log(str5);

3.2.遍历 for of

      var str = "党在我心，强国有我";
      // 01 for of 遍历str
      for (let s of str) {
        console.log(s);
      }

3.3.检测检测主要有三种方法：返回true/false

3.3.1.include(sub)检测是否包含

 var str = "党在我心，强国有我";
      // 02 includes包含  
      console.log(str.includes("我的")); //false
      console.log(str.includes("我")); //true

3.3.2.startWith(sub)检测以...开头

 var str = "党在我心，强国有我";
      // 02 startsWith以...开头 

      console.log(str.startsWith("wo")); //false
      console.log(str.startsWith("党")); //true

3.3.3.endtWith(sub)检测以...结尾

 var str = "党在我心，强国有我";
      // 02  endsWith以...结尾
      console.log(str.endsWith("wo")); //false
      console.log(str.endsWith("我")); //true

3.4去空白

3.4.1trim()去掉两端空白

      // 03 es5去掉空白 trim去掉两端空白 
      var str1 = "  党在我心，强国有我  ";
      console.log(str1);
      console.log(str1.trim());

3.4.2trimLeft()去掉左边空白、trimRight()去掉右边空白

    // 03  trimLeft去掉左边空白 trimRight去掉右边空白
      var str1 = "  党在我心，强国有我  ";
      console.log(str1);
      console.log(str1.trimLeft());
      console.log(str1.trimRight());

3.5字符串重复

      // 05 repeat重复
      var str2 = "你好啊\n";
      console.log(str2.repeat(6));

3.6填充 .padEnd(次数，内容)

      // 06 padStart开头填充 padEnd结尾填充
      var str3 = "8987";
      console.log(str3.padStart(8, "0"));
      console.log(str3.padEnd(8, "0"));
      console.log("LOVE".padEnd(10, "-"));

4.数组高阶方法

4.1forEach()遍历

      // 01 forEach遍历
      var arr = [1, 3, 5, 9];
      //   item 遍历的元素，index元素的下标，self当前的数组
      arr.forEach(function (item, index, self) {
        console.log(index, item, self);
      });

4.2map()映射

//   02 map映射,从现有数组映射出新的数组
      var arr = [1, 3, 5, 9];
      var arr2 = arr.map(function (item, index, self) {
        return item * 100 + "￥";
      });
      console.log(arr);
      console.log(arr2);

4.3filter()过滤



      //   03 filter 过滤
      var arr = [1, 3, 5, 9];
      var arr3 = [20, 1, 5, 36, 45];
      var arr4 = arr3.filter(function (val) {
        // 当返回的值为真，当前元素保留
        // 当返回的值为假，当前元素被过滤
        return val > 5;
      });
      console.log(arr4);

4.4reduce()累计


      //   04 reduce 累计
      var arr = [1, 3, 5, 9];
      var all = arr.reduce(function (res, val, index, self) {
        return res * 10 + val;
        // return res+val
      });
      console.log(all);
      // 1 1+3  1*10+3
      // 2 4+5  13*10+5
      // 3 9+9  135*10+9

4.5some()有一个



      // 05 some 检测只要有一个符合就返回true
      var arr = [1, 3, 5, 9];
      var res = arr.some(function (item) {
        return item > 10;
      });
      console.log(res); //false

4.6every()每一个



      //   06 every 检测都是（每个符合都符合最终返回true）
      var arr = [1, 3, 5, 9];
      var result = arr.every(function (item) {
        return item > 5;
      });
      console.log(result); //false

4.7find()查找元素

      // 07 查找数据中第一个大于10的数据
      // find查找元素
      var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
      var n = arr.find((item) => item > 10);
      console.log("第一位数字：" + n);

4.8findIndex()查找元素下标


      //  08 findIndex查找元素下标
      var arr = [1, 8, 6, 3, 4, 20, 45, 0, 12];
      var ind = arr.findIndex((item) => item > 10);
      console.log("下标:" + ind);

5.箭头函数

// 01 箭头函数省略function

// 02 =>左边参数

// 03 箭头右边函数体、返回值

// 04 传参两个或以上参数加括号

// 05 如果函数体有多行需要加上花括号花括号里需要有return

// 06 如果返回的是一个对象，则用（）包裹

      var obj = {
        name: "张三",
        age: 20,
        grow: function () {
          // 谁调用setInterval谁是this
          // 箭头函数的this指向函数的上一层作用域this
          window.setInterval(() => {
            console.log(this);
            this.age++;
            console.log(this.name + "已经" + this.age + "啦！");
          }, 1500);
        },
      };
      obj.grow();

6.函数

     function fn(a = 5, b = 6) {
        alert(a + b);
      }

      //   调用拓展参数
      var ps = ["你好", "朱一龙", "今天天气很好", "要一起出来玩吗?"];
      function meeting(p1, p2, p3, p4) {
        var str = `该怎么说呢？${p1},${p2},${p3},${p4}`;
        console.log(str);
      }
      //  ps数组展开，传入
      meeting(...ps);

      //   定义：不定参
      // 参数不一定...数组来接收
      function add(...arg) {
        var res = arg.reduce((a, b) => a + b);
        console.log(res);
      }
      add(1, 2, 3, 4);

7.对象：对象简写和对象动态属性

      // 对象简写
      var name = "张三";
      var age = 22;
      var say = function () {
        alert(`大家好，我是${this.name}`);
      };
      var obj = {
        name,
        age,
        say,
        doit() {
          alert(this);
        },
      };
      console.log(obj);

      //   动态属性（对象属性可以通过js拼接）
      var nick = "hello";
      var myobj = {
        name: "张三",
        [nick + "说话"]: "你好",
      };
      console.log(myobj);

8.类：定义类、实例化类、实例化类中的this

面向对象特点： 01 继承（extends） 02封装(constructor) 03动态() 04接口


      // 人
      //   定义类
      class Prerson {
        //   构造函数
        constructor(name, age) {
          // 类中的this指向的类实例
          this.name = name;
          this.age = age;
        }
        eat() {
          alert("我不喜欢今天的天气");
        }
      }

      // 实例化类
      //   p1 p2称为实例，实例对象
      var p1 = new Prerson("张三", 30);
      var p2 = new Prerson("李四", 22);

      // 老师
      // extends 继承
      class Teach extends Prerson {
        constructor(name, age, major) {
          super(name, age);
          this.major = major;
        }
        teach() {
          console.log(`我要去给学生上课${this.major}课程`);
        }
      }
      // 实例化老师
      var t1 = new Teach("居老师", 26, "生物");
      var t2 = new Teach("温老师", 22, "物理");
      console.log(t1);
      console.log(t2);

9.模块

9.1 导入：

import{name,fun,Square from './api.js'}

别名as,*代表所有
import*api from './api.js'
api.name;api.fun()

9.2 导出：

export{name,fun,Squaer} 导出多次

export default Squart 默认只能导出一次

10.set：没有重复元素的集合（数组）

      // set数组去重
      var arr = [1, 15, 16, 1, 2, 5, 1, 2, 3, 2, 3];
      var arr2 = [...new Set(arr)];
      console.log(arr2);
      //   实例化set
      var s1 = new Set([1, 8, 9, 8]);
      for (let s of s1) {
        console.log(s);
      }
      s1.add("love");
      s1.delete(8);
      console.log(s1.has("love"));
      console.log("长度：", s1.size, s1);

对面_阿紫

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6知识点总结

1.变量声明关键字1.var 全局变量，会变量提升2.let 局部变量，跟var类似，区别在于只能局部发挥作用，即在一对{}内发挥作用，并且不会变量提升，不能重复声明3.const 声明的变量类型一般为常量，并且必须赋值，变量名必须得大写2.结构1.数组1.通俗的来说，可以简单地理解为把数组或对象解析为单独的变量2.基本格式：var [a,b,,c='defalut',...res]=arr解析：逗号表示下一位，...res表示数组里剩余的所有元素，并且只能放在数组..
复制链接

扫一扫