ES6 初探

最新推荐文章于 2022-05-20 15:50:46 发布

赵sir来了

最新推荐文章于 2022-05-20 15:50:46 发布

阅读量285

点赞数

分类专栏： ES6 前端必会文章标签： ES6

本文链接：https://blog.csdn.net/qq_43389371/article/details/89296902

版权

ES 6

变量声明

区别

var
- 函数作用域，可重新赋值，可重复声明，有变量提升
let
- 块级作用域，不可重新赋值，不可重复声明，没有变量提升（因为零时性死区）

应用场景

let 取代 IIFE(立即执行函数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<button class="but">1</button>
<button class="but">2</button>
<button class="but">3</button>
<script>
var but = document.getElementsByClassName('but');
for (var i = 0; i <but.length ; i ++) {
    
    (function (i) {
    
        but[i].onclick = function () {
    
            console.log(i);
        }
    })(i);
}
</script>
</body>
</html>

补充：

块级作用域：
- {} 是块级作用域，里面声明的变量，只会在这个{} 中有效，出来 {} 就无效了

IIFE（立即执行函数）:

浏览器解析到 IIFE 就立即执行函数，叫做立即执行函数

//用法一：
(function (i) {
       
	//your code
})(i);
//用法二：
(function (i) {
       
	//your code
}(i));

应用场景：防止污染全局作用域

变量提示：
- 这是 ES 5 的知识，这里不多赘述
- 如果有什么明白，请看：https://developer.mozilla.org/zh-CN/docs/Glossary/Hoisting

总结

在使用时，应尽量使用 let 避免使用 var

常量声明

const
- 块级作用域，只可以赋值一次，不可修改
- 注意 : 如果 const 是一个对象，在没有改变其栈内存（指针）中的值，是可以对对象的属性进行修改，增加，删除

补充：

如果连属性的值你都不想将其修改，你可以使用：

const obj = Object.freeze(对象名)

freeze 是冻结的含义

箭头函数

箭头函数其实就是匿名函数

声明

(参数列表)=>{
   
    // Your Code
}

优点

箭头函数与 function 相比有很多优势：

简明的语法
可以隐式返回
不绑定 this

如何简明

参数列表中只有一个参数，就可以把参数列表两旁的圆括号省略

参数=>{
   
    // Your Code
}

隐式返回

如果{}里面只有一个 return ，箭头后面花括号可以省略

(参数列表)=>语句

不绑定 this

箭头函数的作用域指向的是父级作用域

缺点

因为箭头函数的作用域的特性，在以下几个方面不易使用

沿用之前的对象方法的调用
需要绑定 this 值的时候
箭头函数没有arguments,但 ES 6 有 ...args

参数默认值

用法

function add (a = 1, b = 2) {
   
    return a+b;
}

add()						//返回 3
add(3)						//返回 5
add(,3)						//返回 报错
add(undefined,3)			//返回 5
add(null,3)					//返回 0

模板字符串

模板字符串就是：```(反引号)`

用法

let a = 1;
let b = 2;
console.log(`${
     a} + ${
     b} = ${
     a+b}`);

在模板字符串中可以使用${} 来引用变量的值

注意在模板字符串中：

可以使用三元表达式
可以嵌套模板字符串

剩余参数

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

最低0.47元/天解锁文章

赵sir来了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 初探

ES 6变量声明区别var函数作用域，可重新赋值，可重复声明，有变量提升let块级作用域，不可重新赋值，不可重复声明，没有变量提升（因为零时性死区）应用场景let 取代 IIFE(立即执行函数)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
复制链接

扫一扫