关于var、let、const

2019-07-12 admin

首先,分清楚js中存在两种作用域,即全局作用域和方法作用域

var

var定义的变量是方法作用域,比如:

function() {
    var str = 'I am var';
    console.log(str); // I am var
}
console.log(str); // undefined

这是在函数中,但是需要注意的是在for循环中的问题:

function calcute({price: [2,4,3]}) {
    var totalPrice = [];
    for (var i = 0;i < price.length; i++) {
        var finallyPrice = price[i] * 2;
        totalPrice.push(finallyPrice);
    }
    console.log(i); // 3
    console.log(price); // [2,4,3]
    console.log(finallyPrice); // [4,8,6];
}

这个函数中都能访问到i、price、finallyPrice,这是我们不期望的,这就是var方法作用域的弊端

let

let就正好解决了这个问题,它是块级作用域,即{}内可以访问

function calcute({price: [2,4,3]}) {
    let totalPrice = [];
    for (let i = 0;i < price.length; i++) {
        let finallyPrice = price[i] * 2;
        totalPrice.push(finallyPrice);
    }
    console.log(i); // i is not defined
    console.log(price); // [2,4,3]
    console.log(finallyPrice); // finallyPrice is not defined;
}

还需要注意的是:var定义的变量在定义之前访问是undefined,但是let定义变量在定义之前访问会报错Uncaught ReferenceError

const

const和let作用域一致,但是通过const赋值的变量不可再次复制(不是变量本身也不可变,只是不能再次赋值)

const params = {
    count: 3,
    price: 10
}
params.count = 4 // 正常
params = [] // 报错Uncaught TypeError

总结

变量值会改变用let,不会改变用const(一般都是用来表述常量),尽量减少用var

[转载]原文链接:https://segmentfault.com/a/1190000019745936

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69574.html

文章标题:关于var、let、const

相关文章
js中的内部属性与delete操作符介绍
一、变量 说到javascript中的delete操作符,还是首先要搞清楚javascript中的变量和属性之间的关系。 javascript中,变量和对象属性关系非常微妙,甚至可以很多时候会被等同起来,因为 javascript 在执行脚...
2017-03-29
关于JavaScript的变量的数据类型的判断方法
虽然Javascript是弱类型语言,但是,它也有自己的几种数据类型,分别是:Number、String、Boolean、Object、Udefined、Null。其中,Object属于复杂数据类型,Object   由无序的键值对组成。其...
2017-03-29
el-input、el-select、el-autocomplete获取焦点 input输入框为空时高亮
问题重述 前端主要框架为Vue.js,在页面使用组件库element-ui的el-input、el-select、el-autocomplete等元件时,想要在表单验证为空时,使空值的元件获取焦点高亮。效果如下图所示: 解决思路 通过查看...
2018-06-06
关于 mailto 语法的一切
You can make a garden variety anchor link (&lt;a&gt;) open up a new email. Let’s take a little journey into this feature...
2019-03-26
分享一道关于闭包、bind和this的面试题
要解决的问题是针对下面这个ul,为每一个li添加一个点击事件,弹出对应的index &lt;ul id=&quot;text&quot;&gt; &lt;li&gt;这是第一个li&lt;&#x2F;li&gt; &lt;li&gt;这...
2017-03-16
关于Sequelize连接查询时inlude中model和association的区别详解
前言 大家都知道在使用Sequelize进行关系模型(表)间连接查询时,我们会通过model/as来指定已存在关联关系的连接查询模型,或是通过association来直接指定连接查询模型关系。那么,两者各应该在什么场景下使用呢? 一、 示例...
2017-03-15
关于mintui中picker的二级联动
今天做的项目有个关于选择部门再选择人员的功能,我用到了min-ui的picker。 根据mintui的api &lt;mt-picker :slots=&quot;slots&quot; @change=&quot;onValuesChan...
2018-04-24
AngularJS constant和value区别详解
angularJS可以通过constant(name,value)和value(name,value)对于创建服务也是很重要的。 相同点是:都可以接受两个参数,name和value。 区别: 1.constant(name,value)可以...
2017-03-15
浅析JavaScript中var that=this
在阅读别人的代码时,发现别人写的代码中有这么一句:var that = this;,这代表什么意思呢?经过一番查阅,才明白是这么回事。 在JavaScript中,this代表的是当前对象。 var that=this就是将当前的this对象...
2017-03-16
关于跨域简单总结
什么是浏览器同源策略? 同源是指,域名,协议,端口号均相同,如图: 注意:localhost和127.0.0.1虽然都指向本机,但也是跨域. 浏览器同源策略(same-origin policy).简单的讲,同源策略就是浏览器为了保证...
2018-04-26
回到顶部