【Javascript】Es6的知识与技巧（示例）

敦厚的曹操

已于 2022-01-25 15:25:13 修改

阅读量1k

点赞数 1

分类专栏： 6.【jquery】 3.【javascript】文章标签： javascript 前端开发语言

于 2022-01-25 12:44:33 首次发布

本文链接：https://blog.csdn.net/dxnn520/article/details/122683056

版权

6.【jquery】同时被 2 个专栏收录

96 篇文章 0 订阅

订阅专栏

3.【javascript】

88 篇文章 1 订阅

订阅专栏

一、var、const、let三者的区别

var:变量

const:常量

let：块级变量（只在if\for\函数等块级内有效）

二、通过${}调用变量拼接

<!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>
  </head>
  <body>
    es6的特性
    <p></p>
  </body>

  <script>
    var name = "张飞";
    var sex = "男生";
    var age = 20;

    // 原js操作样式
    document.write("我叫" + name + "，我是" + sex + "，今年" + age + "岁<br>");
    // Es6操作样式
    document.write(`我叫${name}，我是${sex}，今年${age}岁`);
  </script>
</html>

三、从数组、对象、函数中解析变量

<!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>
  </head>
  <body>
    es6的特性
    <p></p>
  </body>

  <script>
        // Es6解析数组

        var num = [111, 222, 333, 444, 555];
        [a, b, , , e] = num;
        document.write(a + "," + b + "," + e + "<br>");

        // Es6解析对象

        var obj = { name: "张飞", sex: "男", old: 18 };
        var { name, old } = obj;
        document.write(name + "," + old+"<br>");

        // Es6解析函数内传参变量

        function dog() {
          let name = "花花";
          let color = "黑色";
        //   return {name,color};
        return{name,color}
        }
        var {name,color}=dog(); 
        document.write(name+","+color);
  </script>
</html>

四、对象中函数与函数外变量的调用

<!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>
  </head>
  <body>  </body>

  <script>
    var obj = {
      name: "张飞",
      getName:function(){
          return this.name;
      },
      getName2(){
        document.write("执行getName2的结果："+this.getName());
        return "";
      }
    }
    document.write(obj.getName()+"<br>")
    document.write(obj.getName2())
    // console.log(obj.getName2());
  </script>
</html>

五、Es6中forEach循环遍历数组

<!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>
  </head>
  <body></body>

  <script>
    var arr = ["a", "b", "c", "d", "e"];

    // 原js循环遍历
    for (let i = 0; i < arr.length; i++) {
      document.write(arr[i] + ",");
    }
    document.write("<br>");
    // Es6中forEach循环遍历
    arr.forEach((item, index) => {
      document.write(item + ",");
    });
  </script>
</html>

六、实现两个数组合并

<!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>
  </head>
  <body></body>

  <script>
    var arr1 = ["a", "b", "c", "d", "e"];
    var arr2 = [1, 2, 3, 4, 5];

    var arr3 = [...arr1,...arr2];
    console.log(arr3);

  </script>
</html>