当前位置：首页 > 西部百科 > 正文内容

let和var区别(let var 区别)

2023-03-28 15:54:03西部百科3

let var 区别

let和var区别：

1：作用域不一样，var是函数作用域，而let是块作用域，也就是说，在函数内声明了var，整个函数内都是有效的，比如说在for循环内定义了一个var变量，实际上其在for循环以外也是可以访问的，而let由于是块作用域，所以如果在块作用域内（比如说for循环内）定义的变量，在其外面是不可被访问的，所以let用在for (let i; i < n; i++)是一种很推荐的写法

2. let不能在定义之前访问该变量，但是var是可以得。也就是说，let必须是先定义，再使用，而var先使用后声明也行，只不过直接使用但是没有却没有定义的时候，其值为undefined，这块要注意，这一块很容易出问题，这也是个人认为的let比var更好的地方，至于为啥会有这种区别呢，实际上var有一个变量提升的过程。也就是说，当这个函数的作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认会初始化一个undefined。

3. let不能被重新定义，但是var是可以的。这个呢，我个人认为，从规范化的角度来说，是更推荐的，比如说，你在前面声明了一个变量，后来写代码，因为忘了之前的代码逻辑，又声明了一个同名的变量，如果这俩变量逻辑不一样，并且后面都要用的话，很容易出问题，且不容易维护。

let和var和const的区别

var声明了一个变量，并且可以同时初始化该变量。

let语句声明一个块级作用域的本地变量，并且可选的赋予初始值。

const 声明创建一个只读的常量，作用域与let相同。这不意味着常量指向的值不可变，而是变量标识符的值只能赋值一次。

const和var的明显区别是，const声明的是常量，不可被后面的代码赋值改变：

var x = 1;

x = 2;

console.log(x);//2;-----var声明的是变量，可被赋值替换

const y = 1;

y = 2;

console.log(y);//Assignment to constant variable.;------const声明的是常量，不可改变

let 和 var的区别

ES6将弱类型的js提升为中弱类型。我们也一定要学习ES6.

ES6新增知识点：

1、

定义变量

之前定义变量一直用的是var，但是es6中可以使用let和const

但是let有几个特点：

-不允许声明变量

不存在预解析

在大括号中声明的变量只能在大括号中使用

const的特点：

不允许重复声明

不允许重新赋值（可以给对象中新增属性）

声明的时候必须赋值

不存在预解析

在大括号中声明的变量只能在大括号中使用，如if、for的大括号中声明的变量

2、

箭头函数：箭头函数是用来简写函数的

注意：如果只有一个小形参时，小括号可以省略

注意：如果代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值

let fn = ()=>{console.log(111);}

箭头函数使用注意事项：

（1）箭头函数中的this比较混轮，所以在函数和方法中使用到this的时候，就不要用箭头函数

（2）箭头函数中没有arguments

函数默认值：

es6中可以定义默认值：

function add(a,b=2){

return a + b;

}

console.log(add(5));

解构赋值：

解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

解构对象：

let obj = {

name:"张三",

age:12,

sex:"男",

}

let {name} = obj;

表示从obj中获取name属性，并赋值给声明的name变量

注意:obj必须是一个对象。obj中必须有name属性

3、

this 关键字

每个函数内容都有一个关键字叫做this。不同的情况下，this代表的内容也是不一样的。

（1）普通函数中的this代表window对象

function fn(){

console.log(this);

}

fn(); // window

（2）定时器中的this代表window

var obj = {

eat:function(){

setTimeout(function(){

console.log(this);

});

}

};

obj.eat(); // window

（3）自调用函数中的this代表window

document.querySelector("button").onclick=function(){

(function(){

console.log(this);

})()

}

// window

（4）对象方法中的this代表调用这个方法的对象

document.querySelector("button").onclick=function(){

(function(){

console.log(this);

})()

}

// window

（5）事件函数中的this代表当前事件的事件源

document.querySelector("button").onclick=function(){

console.log(this);

}

// <button>按钮</button>

（6）箭头函数的this在定义箭头函数的时候就知道了，代表上一行代码的this

document.querySelector("button").onclick=function(){

// 这里的this代表button按钮，所以箭头函数的this也是button按钮

setTimeout(()=>{console.log(this);});

}

// <button>按钮</button>

4、上下文调用模式

也叫作方法借用模式。任何函数都能调用call、apply、bind这三个方法。这三个方法主要用于改变函数中this的指向。

call：call方法不仅可以用来调用函数，还可以指定调用函数的this指向

let跟var的区别

区别有两点：1: useState的值在每个rernder中都是独立存在的。而useRef.current则更像是相对于render函数的一个全局变量，每次他会保持render的最新状态。这种关系更像是js一个经典的案例：for循环中异步打印i的值，let声明的i就相当于每个都是独立作用域，互相之间不会干扰。var则反之。

2：useState值的更新会触发组件重新渲染，而useRef的current不会出发重渲染。