前端基础之JavaScript（持续更新中）

古城微笑少年丶 2023-03-04 09:27 17阅读 0赞

**一、es6新特性**

1.let，const与var的区别

let，const不存在变量提升；

let，const同一作用域下不能重复定义同一个名字；

let，const有严格的块级作用域；函数作用域和块级作用域；

简单来说一个\{\}括号就是一个作用域；

let可改，const//生命基本数据类型只读；申明引用数据类型是可改的，只是引用地址不能变；

**箭头函数 （）= 》**

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的**区别**：

箭头函数内部的this是**词法作用域，由上下文确定**。

箭头函数中的this是在**定义函数的时候绑定**，而不是在执行函数的时候绑定。

**箭头函数根本没有自己的this**，导致内部的this就是**外层代码块**的this。正是因为它没有this，所以也就**不能用作构造函数**。

箭头函数中的this是在**定义函数的时候绑定**，看一个例子：

var x = 11;
    var obj = {
        x: 22,
        say: ()=>{
            console.log(this.x);
        }
    }
    obj.say();  // 输出的值为11

所谓的**定义时候绑定**，就是this是继承自**父执行上下文中的this**，比如这里的箭头函数中的`this.x`，**箭头函数本身与say平级以`key:value`的形式**，也就是**箭头函数本身所在的对象为obj**，而**obj的父执行上下文就是window**，因此这里的`this.x`实际上表示的是window.x，因此输出的是11。

var obj = {
        birth: 1990,
        getAge: function () {
            var b = this.birth; // 1990
            var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
            return fn();
        }
    };
    obj.getAge(); // 28

例子中**箭头函数本身是在getAge方法中定义的**，因此，getAge方法的**父执行上下文**是obj，因此这里的this指向则为obj对象。

**数据结构（set ，map）**

**set**：类数组，成员唯一；

**map**：类似于对象，key可以使任何类型；

const s1 = new Set();

let arr1 = s.add(1).add(2)

\[...new Set(arr2)\]/...扩展运算符

const m = new Map();

m.set(1,11).set(2,22);

for(let \[key,value\] of m)\{ 直接取值 \}

**二、防抖与节流**

防抖：触发事件后n秒内函数内只执行一次，若在n秒内再次出发则重新计算；

节流：连续发生的事件再n秒内只执行一次；

示例：搜索框，即时刷新；

//实现输入框输入后1s后调用serach方法  防抖(延迟执行)
    	function fangdou(fun){
    		let setTime;
    		return function () {
    			if(setTime){ clearTimeout(setTime) };
    			setTime = setTimeout(function() {
    				fun.apply(this)
    			}, 2000);
    		}
    	};
    //实现输入框输入后2s后调用serach方法  防抖(立即执行)
    	function jieliu() {
    		let setTime;
    		return function () {
    			if(setTime){ clearTimeout(setTime) };
    			let callNow = !setTime;
    			setTime = setTimeout(function() {
    				setTime = null
    			}, 2000);
    			if(callNow){fun.apply(this)}
    		}
    	}

三、

for(var i=0;i<5;i++){
        setTimeout(function(){
            console.log(i)
        },1000)
    }
    //输出？
    55555
    原因：js单线程，异步
    //如何输入0,1,2，3,4？
    1.自执行函数，闭包
    在for里(function(j){
        j...
    })(i)
    2.函数性质
    function aaa(i){
    			    setTimeout(function(){
    				    console.log(i)
    				},1000)
    			}
    			for(var i=0;i<5;i++){
    				aaa(i)
    			}
    3.let块级作用域
    for(let i=0;i<5;i++){
    				setTimeout(function(){
    				    console.log(i)
    				},1000)
    			}
    //用promise输出0.1.2.3.4.5
    var task = [];
    task.push(new promise(resolve)...)
    promise.all(tasks).then(()=>{})