ES6中定义变量以及简介

78 阅读 0 评论 52 点赞

我是靠谱客的博主干净大象，这篇文章主要介绍ES6中定义变量以及简介，现在分享给大家，希望可以做个参考。

1、变量 let 和常量 const

(1)原来定义变量 var 存在的的问题

复制代码

1
2
3
4
① 可以重复声明，没有报错和警告
② 无法限制修改
③没有块级作用域， { }

(2)let 和 const

复制代码

1
2
3
4
5
6
① 不能重复声明
② 都是块级作用域, { } 块内声明的，块外无效
③ let 是变量，可以修改
④ const 是常量，不能修改
⑤ 块级作用域举例

复制代码

<!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>
    <script>
        window.onload= function () {
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i=0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }*/
            //弹出结果是 2 2 2
            /* 解决方式为 闭包
            var aBtn = document.getElementsByTagName('input')
            for (var i = 0; i < aBtn.length; i++) {
                // 封装到函数里，限制作用域
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }*/
            
            //用let定义变量直接解决上面的问题
            var aBtn = document.getElementsByTagName('input')
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }
            // 弹出结果为 0 1 2
            
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<!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>
    <script>
        window.onload= function () {
            /*
            var aBtn = document.getElementsByTagName('input')
            for (var i=0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }*/
            //弹出结果是 2 2 2
            /* 解决方式为 闭包
            var aBtn = document.getElementsByTagName('input')
            for (var i = 0; i < aBtn.length; i++) {
                // 封装到函数里，限制作用域
                (function (i) {
                    aBtn[i].onclick = function () {
                        alert(i)
                    }
                })(i)
            }*/
            
            //用let定义变量直接解决上面的问题
            var aBtn = document.getElementsByTagName('input')
            for (let i = 0; i < aBtn.length; i++) {
                aBtn[i].onclick = function () {
                    alert(i)
                }
            }
            // 弹出结果为 0 1 2
            
        }
    </script>
</head>
<body>
    <input type="button" value="按钮1">
    <input type="button" value="按钮2">
    <input type="button" value="按钮3">
</body>
</html>

原来用 var 的方式，结果弹出的都是 3
或者将变量封装到函数里，限制作用域，但比较麻烦
用 let 最简单，直接 var 改 let，解决作用域问题

2、ECMAScript 和 JavaScript

(1 )ECMA 是标准，JS 是实现
ECMAScript 简称 ECMA 或 ES

历史版本

复制代码

1
2
3
4
5
①1996, ES1.0 Netscape 将 JS 提交给 ECMA 组织，ES 正式出现
②1999, ES3.0 被广泛支持
③2011, ES5.1 成为 ISO 国际标准
④2015, ES6.0 正式发布

(2) ES6兼容性
ES6(ES2015) 支持的环境 IE10+, Chrome, FireFox, 移动端, NodeJS

(3) 解决不兼容办法，编译、转换

在线转换
或者提前编译
Babel 中文网

Babel 入门教程阮一峰
Babel 是一个 JavaScript 编译器
一个广泛使用的转码器，可以将ES6代码转为ES5代码，从而在现有环境执行
现在就用 ES6 编写程序，而不用担心现有环境是否支持。

3、ES7 预览（ES2017）的新增内容（简单了解）

（1）数组
arr.includes() 数组是否包含某个东西
数组的 arr.keys(), arr,entries()
for … in 遍历数组下标 key
for … of 遍历数组值 value, 不能用于json

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let arr = ['a', 'b', 'c']
console.log(arr.includes(1))

for (let i in arr) {
    console.log(i) // 循环的时下标 key
}

for (let i of arr) {
    console.log(i) // 循环的是值 value
}
for (let i of arr.keys()) {
    console.log('>'+i)
}
for (let [key, value] of arr.entries()) {
    console.log('>' + key + value)
}

let json = { a: 12, b: 5, c: 7 }
for (let i in json) {
    console.log(i)
}

（2）字符串
padStart()/padEnd() 指定宽度，不够就补空格或指定字符
console.log(’=’ + ‘abcd’.padStart(6, ‘0’) + ‘=’)
console.log(’=’ + ‘abcd’.padEnd(6, ‘0’) + ‘=’)
=00abcd=
=abcd00=
容忍度

[1, 2, 3,] 老版数组最后不能有逗号，新的可以有
函数参数最后多的逗号也可以

**（3）async await
和 generator yield 类似，是它的语法糖
generator 不可以写成箭头函数， async 可以

复制代码

1
2
3
4
5
6
	async function show() {
	    console.log(1)
	    await
	    console.log(2)
	}

最后

以上就是干净大象最近收集整理的关于ES6中定义变量以及简介的全部内容，更多相关ES6中定义变量以及简介内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：面试题
浏览次数：78 次浏览
发布日期：2023-12-08 21:40:35
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_23_o_6_f1_14_jk0.html

ES6中定义变量以及简介

1、变量 let 和常量 const

2、ECMAScript 和 JavaScript

3、ES7 预览（ES2017）的新增内容（简单了解）

最后

评论列表共有 0 条评论

发表评论取消回复

ES6中定义变量以及简介

1、变量 let 和 常量 const

2、ECMAScript 和 JavaScript

3、ES7 预览（ES2017）的新增内容（简单了解）

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

微信扫一扫：分享

1、变量 let 和常量 const

发表评论取消回复