let、const、箭头函数、this指向

最新推荐文章于 2024-06-04 15:17:26 发布

thanksKlan

最新推荐文章于 2024-06-04 15:17:26 发布

阅读量637

点赞数 2

文章标签： javascript

本文链接：https://blog.csdn.net/hasakizzz66/article/details/108137762

版权

本文探讨了JavaScript中的let、const、箭头函数以及this的指向问题。let和const在块级作用域中声明变量，let允许修改，const则不可。箭头函数简化了函数表达式，并具有特定的this指向规则。此外，还介绍了模板字符串、解构赋值、展开运算符、函数参数默认值和对象简写等ES6特性。

摘要由CSDN通过智能技术生成

let、const、和var的区别

1、let、const不允许声明相同的变量

2、let、const 声明变量没有预解析所以不能在声明之前使用

3、let 、const 声明的变量受所有的 { }所限制在{ }里面声明的变量在外面不能使用

let 和 const 的区别

1、let声明的变量在声明之后可以修改，const 声明的常量在声明之后不能修改

2、let声明的变量声明的时候可以不赋值，const 声明的常量，声明的时候必须要赋值

页面上是变量多还是常量多？

常量多

用法 const box =document.getElementById(‘box’)

箭头函数

实际就是对函数表达式的简写

var fn = function (){

return 132

}

var res =fn()

console.log(res)

可以简写成

var fn = () =>{

return 123

}

1、当 () 里面的参数只有一个的时候（）可以省略没有参数或者有多个参数的时候（）不能省略

2、当函数体内只有一句代码的时候并且这一句代码要作为函数的返回值使用 { }可以省略并且是会把这句代码直接当作函数的返回值返回，如果只有一句代码，你并不想作为返回值返回，就不要省略{}

var fn = function(a){

return a //左边就等同于 var fn = a =>a

}

var fn =(a,b) => {

return a + b //左边等同于 var(a,b) =>a+b

}

var fn = a => console.log(a) //左边等同于 var fn = a =>{return console.log(a)}

箭头函数参数问题

var fn = () =>{ console.log(arguments)

} fn(1,2,3)

//箭头函数没有arguments

模板字符串

模板字符串里面可以加动态数据可以是常量也可以是变量 ${}

模板字符串可以换行

使用的是 ``键(反引号)

例

<!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>
    <table>
        <thead>
            <tr>
                <td>序号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>操作</td>
            </tr>
            <tbody>

            </tbody>
        </thead>
    </table>
    <script>
        var arr = [{
   
                name: 'Jack',
                age: 12,
                gender: '男'
            }, {
   
                name: 'Rose',
                age: 12,
                gender: '女'
            }, {
   
                name: 'Tim',
                age: 56,
                gender: '男'
            }

        ]
        var tbody = document.querySelector('tbody')
        for