我是靠谱客的博主 干净大象,最近开发中收集的这篇文章主要介绍ES6中定义变量以及简介,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

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)
	}

最后

以上就是干净大象为你收集整理的ES6中定义变量以及简介的全部内容,希望文章能够帮你解决ES6中定义变量以及简介所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

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

评论列表共有 0 条评论

立即
投稿
返回
顶部