ES6到底有哪些特性值得我们学习(1)

执行这段代码我们就会得到结果为2

var a = 1;

function b() {

// var a = 2

console.log(a);

}

b()

但是当我们把代码注释之后，我们就会发现结果变成了1。

作用域：当你在当前作业域找不到声明就会到父级的作用域去找，这样层层递进查找，最终形成了一个链，这就是作用域链。

let、var都是可用于声明变量的操作符，但是他们的区别就是var 存在作用域提升，而let仅限于当前作用域的使用，否则会报错。声明之前使用也会报错。

console.log(a)

let a

就会说 a is not defined

const用于声明常量，声明之后不可改，也不存在变量提升的问题，修改或声明前使用会报错。我们还要注意一点就是let和const声明之后不会挂在到window上面。

var a = 1

let b = 1

const c = 1

console.log(window.b) // undefined

console.log(window. c) // undefined

常考的面试题是，以下代码输出什么：

for (var i =0; i <5; i++) {

setTimeout(()=>{

console.log(i);

},i*1000)

}

//5 5 5 5 5

这就是块级作用域的问题，换成let声明就会输出0 1 2 3 4

总结一下：

• var存在变量提升，能在声明前使用。其他两个存在暂时性死区，不能声明前使用

• let 和 const基本一致，后者不能再次赋值

• 函数提升由于变量提升

箭头函数

箭头函数是ES6新增的一种函数写法，下面两种写法其实是一样的：

setTimeout(function(){

console.log(“Hello World!”);

},1000)

setTimeout(()=>{

console.log(“Hello World!”);

},1000)

它和普通函数有什么区别呢？

• 不可用作构造函数，没有原型

• this指向继承而来且不会改变

解构赋值

解构赋值就是一种模式匹配的写法，之前我们赋值的时候一般都要分别来赋值，比如：

let a = 1;

let b = 2;

let c = 3;

但是解构赋值允许我们这样赋值，左右两边都对应复制，如果解构不成功就会赋值undefined

let [a, b, c] = [1, 2, 3];

let [a, b, c] = [1, 2];

console.log(a,b,c); //1, 2, undefined

我们比较常用的一般有两种方面，一个是JSON字符串的解构，如：

const {name,age,number} = {name:‘rose’,age:12,number:123}

console.log(name,age,number); //rose 12 123

还有一种我们可以用来数据的交换操作，如：

let a=1;

let b=2;

[a,b]=[b,a];

console.log(a,b); //2, 1

模板字符串

$(‘#result’).append(

‘There are ’ + basket.count + ' ’ +

'items in your basket, ’ +

‘’ + basket.onSale +

‘ are on sale!’

);

$(‘#result’).append(`

There are ${basket.count} items

in your basket, ${basket.onSale}

are on sale!

`);

相比于之前使用+拼接简洁许多，并且可读性比较强。语法就是使用反引号``来声明，然后变量使用${variable}。

Set、Map数据结构

Set它是一个构造函数，用来生成Set数据结构。类似于数组，但是跟数组不同的是它的每一项都不会重复。作用也可以用于数组去重的操作。

const s = new Set();

[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));

for (let i of s) {

console.log(i);

}

// 2 3 5 4

数组去重，比较简单

function unique(arr) {

return […new Set(arr)]

}

Map是一个类似于对象，是键值对的集合，但是键的范围不限于字符串，各种类型的值都可以作为键，包括object。

const m = new Map();

const o = {p: ‘Hello World’};

m.set(o, ‘content’)

m.get(o) // “content”

m.has(o) // true

m.delete(o) // true

m.has(o) // false

作为构造函数，Map也可以接受一个数组作为参数，数组的成员也是一个个表示键值对的数组。

const map = new Map([

[‘name’, ‘张三’],

[‘title’, ‘Author’]

]);

自学几个月前端，为什么感觉什么都没学到？？

---

这种现象在很多的初学者和自学前端的同学中是比较的常见的。

因为自学走的弯路是比较的多的，会踩很多的坑，学习的过程中是比较的迷茫的。

最重要的是，在学习的过程中，不知道每个部分该学哪些知识点，学到什么程度才算好，学了能做什么。

很多自学的朋友往往都是自己去找资料学习的，资料上有的或许就学到了，资料上没有的或许就没有学到。

这就会给人一个错误的信息就是，我把资料上的学完了，估计也-就差不多的了。

但是真的是这样的吗？非也，因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线，你可以参考。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

还有很多的同学在学习的过程中一味的追求学的速度，很快速的刷视频，写了后面忘了前面，最后什么都没有学到，什么都知道，但是什么都不懂，要具体说，也说不出个所以然。

所以学习编程一定要注重实践操作，练习敲代码的时间一定要多余看视频的时间。