ES6中定义变量以及简介

最新推荐文章于 2022-09-26 09:29:43 发布

dou_xiaobao

最新推荐文章于 2022-09-26 09:29:43 发布

阅读量263

点赞数

分类专栏：面试题 ES6 文章标签： es6 vue.js javascript

本文链接：https://blog.csdn.net/dou_xiaobao/article/details/109315519

版权

面试题同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

ES6

5 篇文章 0 订阅

订阅专栏

1、变量 let 和常量 const

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

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

(2)let 和 const

① 不能重复声明
② 都是块级作用域, { } 块内声明的，块外无效
③ 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>

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

2、ECMAScript 和 JavaScript

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

历史版本

①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

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 可以

	async function show() {
	    console.log(1)
	    await
	    console.log(2)
	}

dou_xiaobao

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ES6中定义变量以及简介

1、变量 let 和常量 const(1)原来定义变量 var 存在的的问题① 可以重复声明，没有报错和警告② 无法限制修改③没有块级作用域， { }(2)let 和 const① 不能重复声明② 都是块级作用域, { } 块内声明的，块外无效③ let 是变量，可以修改④ const 是常量，不能修改⑤ 块级作用域举例<!DOCTYPE html><html lang="en"><head> <meta charset="U
复制链接

扫一扫