ES6核心语法二

最新推荐文章于 2024-06-14 10:54:41 发布

我本浪人--游吟世间

最新推荐文章于 2024-06-14 10:54:41 发布

阅读量159

点赞数 1

分类专栏：前端开发文章标签： ES6核心语法二

本文链接：https://blog.csdn.net/qq_41760521/article/details/101510797

版权

前端开发专栏收录该内容

31 篇文章 0 订阅

订阅专栏

传统字符串：

传统字符串的问题：多行字符串问题、字符串中使用变量

传统字符串拼接会出现许多问题，例如需要使用“ ”来连接字符串，以及在换行上容易出现许多问题。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <ul id="myul"></ul>
    <script>
        const data = [{
            name: "lisa"
        }, {
            name: "luna"
        }, {
            name: "nana"
        }];
        //data数组中包含三个对象，每个对象都包含name属性
        const ul = document.getElementById('myul');
        let html = "";
        for (let i = 0; i < data.length; i++) {
            html += "<li>" + data[i].name + "</li>"
        }
        ul.innerHTML = html;
    </script>
</body>

</html>

运行结果：

模板字符串：

在ES6中引出了模板字符串，将上述demo可以改写为：（实现相同的效果，使字符串拼接更加灵活）

 html += `<li>${data[i].name}</li>`//此时使用反引号

此时若出现换行情况不需要向传统字符串一样，再增加“ ”来连接字符串，即如下形式也是可以的：

      html += `
            <li
            >${data[i].name}
            </li>
            `

箭头函数：

在ES5中定义函数：

function fn(){
            
}

在ES6中定义函数：

()=>{
            
}
//箭头函数

  const fn2 = () => {
            console.log("hello world!");
  }
  fn2();//结果为“hello world!”

箭头函数与普通函数区别：

①：this指向问题

②：不能使用arguments；arguments变量的作用是获取实参

③：不能当做构造函数

LG①:

        var id = 1; //一个变量
        var obj = { //一个对象
            id: 2
        }

        function fn() {
            setTimeout(function() {
                console.log(this);
                console.log(this.id);
            }, 100)
        }
        fn.call(obj); //通过.call的方式调用fn()函数，改变this指向

结果：（由于setTimeout是异步方法，在此为100ms以后执行fn()。当前this指向的是系统本身window，所以this.id指向的是全局变量id。）

        var id = 1; //一个变量
        var obj = { //一个对象
            id: 2
        }

        function fn() {
            setTimeout(() => {
                console.log(this);
                console.log(this.id);
            }, 100)
        }
        fn.call(obj); //通过.call的方式调用fn()函数，改变this指向
        //注：
        //箭头函数是没有this指向的，借助父级的this

结果：（此时this指向的是obj对象）

验证：

        var id = 1; //一个变量
        var obj = { //一个对象
            id: 2
        }

        function fn() {
            let that = this;
            setTimeout(() => {
                console.log(this === this);
                console.log(this.id);
            }, 100)
        }
        fn.call(obj); //通过.call的方式调用fn()函数，改变this指向

结果：（结果表明箭头函数的this指向和父级的this指向是一致的）

LG②:

 const fn2 = () => {
     console.log(arguments);
 }
 fn2(1, 2, 3, 4);

结果：

  function fn() {
            console.log(arguments);
  }
  fn(1, 2, 3, 4);

结果：

LG③：

 function fn() {}
 console.log(new fn(1, 2, 3, 4));

结果：

 const fn2 = () => {
 }
 console.log(new fn2(1, 2, 3, 4));

结果：

我本浪人--游吟世间

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6核心语法二

传统字符串：传统字符串的问题：多行字符串问题、字符串中使用变量传统字符串拼接会出现许多问题，例如需要使用“ ”来连接字符串，以及在换行上容易出现许多问题。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="view...
复制链接

扫一扫

专栏目录