执行这段代码我们就会得到结果为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’]
]);
自学几个月前端,为什么感觉什么都没学到??
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。