前端之ES6新特性

一只爱吃萝卜的小兔子

已于 2022-07-06 16:00:22 修改

阅读量958

点赞数 1

分类专栏：前端基础文章标签：前端 es6 javascript

于 2022-07-03 09:36:33 首次发布

本文链接：https://blog.csdn.net/weixin_46372074/article/details/125281638

版权

前端基础专栏收录该内容

53 篇文章 4 订阅

订阅专栏

学习ES6到11版本的新特性

ECMA

ECMA是一个致力于信息和通信系统标准化的行业协会。

1.let

变量用let就好

不允许重复声明
块级作用域
不存在变量提升
不影响作用域链

let a; //声明一个
let b, c; //声明多个
let d = "",
  e = 520,
  f = [],
  g = true; //声明并赋值

let实例

<!DOCTYPE html>
<html lang="en">
  <head>

    <title>点击变红</title>
    <style>
      .item {
        /* margin-top: 5px; */
        display: inline-block;
        height: 20px;
        width: 40px;
        border: 1px solid black;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item"></div>
      <div class="item"></div>
      <div class="item"></div>
    </div>
    <script>
      const items = document.querySelectorAll(".item");
      for (let i = 0; i < items.length; i++) {
        items[i].onclick = function () {
          items[i].style.background = "red";
          console.log("i:", i);
        };
      }
    </script>
  </body>
</html>

2.const 声明常量

声明对象、数组类型使用 const，非对象类型声明选择 let

声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块级作用域
可以修改数组内的值和对象内的属性（常量地址没有改变）

const 实例

      const arr = [1, 2, 3, 4];
      console.log(arr);
      arr.push(5);
      arr.unshift(0);
      console.log(arr);
      arr.pop();
      arr.shift();
      console.log(arr);

在这里插入图片描述

3.解构赋值

频繁使用对象方法、数组元素，就可以使用解构赋值形式。

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为 解构赋值。

      const family = ["爸爸", "妈妈", "儿子", "女儿"];
      // 对数组进行解构赋值
      let [arr1, arr2, arr3, arr4] = family;
      console.log(arr1);
      console.log(arr2);
      console.log(arr3);
      console.log(arr4);

      const person = {
        name: "程序员",
        age: 18,
        func: () => {
          console.log("new 一个女朋友");
        },
      };
      // 对对象进行解构赋值
      let { name, age, func } = person;
      console.log(name);
      console.log(age);
      func();

在这里插入图片描述

4.模板字符串反引号

字符串中可以出现换行符
可以使用 ${变量名} 形式输出变量

      // 包含换行符
      let str1 = `春晓
春眠不觉晓，处处闻啼鸟。
夜来风雨声，花落知多少。`;
      console.log(str1);

      //字符串与变量拼接
      let str2 = `接下来由我朗诵一首古诗:${str1}`;
      console.log(str2);

在这里插入图片描述

5.简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。
简化了对象内的方法写法

      let name = "我是小白兔呀";
      let sayHello = () => console.log(`你好啊!${name}`);
      const person = {
        name,
        // 等价于 name:name
        // 属性名和属性值,名相同可以缩写
        sayHello,
        sayByeBye() {
          console.log(`再见了!${name}`);
        },
      };
      console.log("person:", person);
      person.sayHello();
      person.sayByeBye();

在这里插入图片描述

6.箭头函数 =>

适用于与this无关的回调,有关this的回调用匿名函数
call：调用一个对象的一个方法，用另一个对象替换当前对象。

箭头函数 this 始终指向声明时所在作用域下 this 的值
箭头函数不能作为构造函数实例化对象

      // 无参
      let fn = () => {
        console.log("无参箭头函数");
      };
      // 有参
      let fn2 = (a) => console.log(`有参箭头函数,${a}`);
      fn();
      fn2(1);
      console.log("--------------------------------------------------");

      // 箭头函数 this 始终指向声明时所在作用域下 this 的值
      // call 用另一个对象替换当前对象,对箭头函数无效
      let person = {
        name: "小明",
        age: 18,
      };
      let f = () => console.log(this);
      let f2 = function () {
        console.log(this);
      };
      f();
      f2();
      f.call(person);
      f2.call(person);

在这里插入图片描述

实例

1.改变dom的属性

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 100px;
        height: 100px;
        background-color: aqua;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const div = document.querySelector("div");
      // console.log(div);
      div.addEventListener("click", function () {
        setTimeout(() => {
          this.style.background = "pink";
        }, 1000);
      });
    </script>
  </body>
</html>

2.筛选偶数

      let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
      let res = arr.filter((item) => item % 2 === 0);
      console.log("res:", res);

9.函数形参初始值

ES6 允许给函数参数设置默认值，当调用函数时不给实参，则使用参数默认值。默认写后面。

      let add = function (a, b, c) {
        return a + b + c;
      };
      console.log(add(1, 2, 3));
      console.log(add(1, 2));
      console.log("--------------------------------------------------");
      add = function (a = 1, b = 1, c = 1) {
        return a + b + c;
      };
      console.log(add(1, 2, 3));
      console.log(add(1, 2));

在这里插入图片描述
与解构赋值结合

      let person = {
        name: "小白兔",
        age: 18,
      };
      function show({ name = "老灰兔", age = 80 }) {
        console.log(name);
        console.log(age);
      }
      show({});
      console.log("--------------------------------------------------");
      show(person);

在这里插入图片描述

10.rest参数(…args获取剩余参数替代 argument)

rest参数获取函数实参 ( 替代argument )

      function show() {
        console.log("arguments获取实参:", arguments);
      }
      show(1, 2, 3);

      function show2(...args) {
        console.log("rest获取实参:", args);
      }
      show2(1, 2, 3);

在这里插入图片描述

rest参数必须放在最后, 他包含从当前位置开始到最后一个参数
rest剩余的意思
rest用来替代arguments
用途，arguments获取到的是对象，而rest 获取的是数组，方便调用数组对应的api方法，例如filter some every map

11.扩展运算符 …对象

在计算机的角度来说, 数组也是对象
扩展运算符可以将对象(包括数组)解包。

// 数组(或对象)合并  
let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];
let arr3 = [...arr1, ...arr2];
console.log("合并结果:", arr3);
// 数组克隆
let arr4 = [...arr3];
console.log("克隆结果:", arr4);
// 将伪数组转化为真正的数组
const divs = document.querySelectorAll("div");
console.log(divs);
let divArr = [...divs];
console.log(divArr);

在这里插入图片描述

…深层拷贝对象

JSON.parse(JSON.stringify(obj))是目前比较常用的深拷贝方法之一

      var x = {
        name: "苏金凤",
        age: 18,
        description: {
          height: 170,
          weight: 50,
          hobby: {
            game: "王者",
            sport: "乒乓球",
          },
        },
      };
      var xCopy = { ...x };
      console.log(xCopy);

在这里插入图片描述

12.Symbol 表示独一无二的值

在这里插入图片描述

它是 JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。
(其余六种：usonb —— undefined, String, Object, null, Number, boolean）

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用 Reflect.ownKeys 来获取对象的所有键名

      // Symbol的三种创建方法
      // 第一种 描述为空
      let s1 = Symbol();
      let s2 = Symbol();
      console.log(s1, s2, typeof s1, s1 === s2);
      console.log();

      //  第二种添加描述字符串
      let s3 = Symbol("001");
      let s4 = Symbol("001");
      console.log(s3, s4, typeof s3, s3 === s4);
      console.log();

      // 第三中Symbol.for(key);
      // 找得到key,返回对应symbol,否则新建 key相同的 Symbol 具有相同的实体。
      let s5 = Symbol.for("2");
      let s6 = Symbol.for("2");
      console.log(s5, s6, typeof s5, s5 === s6);
      console.log();

在这里插入图片描述

Symbol 的使用

Symbol基本使用及常用内置符号 csdn作者:YK菌

就是给对象添加Symbol属性
但是不知道里面有没有同名的属性或方法

用法一：
在对象1里添加属性或方法
1.声明一个对象2
2.在对象2内添加Symbol属性
3.用对象2的Symbol属性添加属性或方法

      // 用法一:
      let person = {
        name: "陈大",
        age: 18,
        showName() {
          console.log(this.name);
        },
      };
      person.showName();
      console.log("--------------------------------------------------");

      // 添加showName,showAge函数,可能用同名函数在里面(对象太大,不好找)
      let methods = {
        showName: Symbol(),
        showAge: Symbol(),
      };
      person[methods.showAge] = function () {
        console.log(this.age);
      };
      person[methods.showName] = function () {
        console.log(this.name);
      };
      // 调用
      person[methods.showName]();
      person[methods.showAge]();

注：调用时，不可以用点的方式了，只能用[]的方式了.
在这里插入图片描述

用法二：

let say = Symbol("say");
      let age = Symbol("age");
      let dog = {
        name: "小白",
        age: 3,
        [say]: function () {
          console.log(this.name);
        },
        [age]: function () {
          console.log(this.age);
        },
      };
      dog[say]();
      dog[age]();
      
      // 这样也可以读取
      // let dog = {
      //   name: "小白",
      //   age: 3,
      //   [Symbol.for("say")]: function () {
      //     console.log(this.name);
      //   },
      //   [Symbol.for("age")]: function () {
      //     console.log(this.age);
      //   },
      // };
      // console.log(dog);
      // dog[Symbol.for("say")]();
      // dog[Symbol.for("age")]();

13.迭代器

在这里插入图片描述

1. 迭代器原理

在这里插入图片描述

      const arr = [];//对象只读属性用readonly修饰, 只读变量用const修饰; 对象地址不可变,但内容可以
      arr.push("西施");
      arr.push("杨玉环");
      arr.push("貂蝉");
      arr.push("王昭君");
      console.log(arr);

      let iterator = arr[Symbol.iterator]();
      console.log(iterator);
      console.log(iterator.next()); //第一次next, 返回第一个value,和done
      console.log(iterator.next());
      console.log(iterator.next());
      console.log(iterator.next());
      console.log(iterator.next()); // 结束返回值

      // for of 是根据iterator封装的, 取出的元素是value
      for (let e of arr) {
        console.log(e);
      }

      // for in 下标
      for (let e in arr) {
        console.log(e);
      }

在这里插入图片描述

2. 迭代器用法 —— 自定义遍历数据（遍历对象内的某个数组）

箭头函数:

      const person = {
        name: "小小",
        age: 18,
        sex: "女",
        hobby: ["乒乓球", "羽毛球", "王者荣耀", "荒野求生"],
        [Symbol.iterator]() {
          // 迭代器遍历索引
          let index = 0;

          // let _this = this;
          return {
            next: () => { //箭头函数写法(没有this,向外层寻找this)
              if (index < this.hobby.length) {
                const res = { value: this.hobby[index], done: false };
                index++;
                return res;
              } else {
                return { value: undefined, done: true };
              }
            },
          };
        },
      };
      for (let e of person) console.log(e);

匿名函数:

      const person = {
        name: "小小",
        age: 18,
        sex: "女",
        hobby: ["乒乓球", "羽毛球", "王者荣耀", "荒野求生"],
        [Symbol.iterator]() {
          // 迭代器遍历索引
          let index = 0;

          let _this = this;
          return {
            next: function () {   // 等价 next() 
              if (index < _this.hobby.length) {
                const res = { value: _this.hobby[index], done: false };
                index++;
                return res;
              } else {
                return { value: undefined, done: true };
              }
            },
          };
        },
      };
      for (let e of person) console.log(e);

结果都是:
在这里插入图片描述

一只爱吃萝卜的小兔子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
前端之ES6新特性

ECMA是一个致力于信息和通信系统标准化的行业协会。let实例2.const 声明常量声明对象、数组类型使用 const，非对象类型声明选择 let频繁使用对象方法、数组元素，就可以使用解构赋值形式。ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值。适用于与this无关的回调,有关this的回调用匿名函数call：调用一个对象的一个方法，用另一个对象替换当前对象。1.改变dom的属性2.筛选偶数9.函数形参初始值ES6 允许给函数参数设置默认值，当
复制链接

扫一扫