精华内容
下载资源
问答
  • JS中声明变量的几种方式 在讲let和var的区别前,我们先来了解一下JS中声明...let let关键字声明的变量具有块级作用域,如: let b = 13; const const关键声明的变量,一旦已经关联值就不能再跟其它值关联,如: cons

    JS中声明变量的几种方式

    在讲let和var的区别前,我们先来了解一下JS中声明变量的几种方式

    • 在ES6之前,常用的声明变量的方式
      • var 如: var a = 12;
      • function 如: function A(){…},function是定义一个函数,实际上也相当于是创建变量的一种方式
    • 在ES6之后,又新增了几种声明变量的方式
      • let let关键字声明的变量具有块级作用域,如: let b = 13;
      • const const关键声明的变量,一旦已经关联值就不能再跟其它值关联,如: const m = ‘abc’;
      • import 利用import关键字导入其它模块,如:import xx from ‘./xx.js’
      • class 定义一个类:实际也是声明变量的一种,如:class B{}

    变量提升

    变量提升:在当前上下文中,代码执行前,会把所有带"var/function"关键字的进行提前声明或定义

    • 带“var”的只是提前声明
    • 带“function”的则是声明并定义

    上下文 && 作用域

    全局上下文
    函数执行形成的“私有上下文”
    块级私有上下文(块级作用域)

    • 除了对象、函数等的大括号以外的其它大括号(如:判断体、循环体、代码块…)都可能会产生块级上下文

    let 与 const的区别

    • let声明的变量,变量所存储的值可以被更改
    let a = 12;
    a = 13;
    console.log(a);//输出13
    
    • const声明的变量,一旦被赋值,就不能再跟其它值关联(不允许指针重新指向)。
    const b = 12;
    b = 13;// 此句代码会直接报错:Uncaught TypeError:Assignment to constant variable.
    console.log(b);
     
     const obj = {name: 'JS高级'};
     obj.name = "JS web高级";
     console.log(obj);//{name: JS web高级}
     //这个时候发现obj对象的值被改了,所以不能说const声明的就是常量
    

    let与var的区别

    • var存在变量提升,而let不存在变量提升
    console.log(n);//undefined
    console.log(m);//Uncaught ReferenceError:Cannot access 'm' before initialization
    var n = 12;
    let m = 13;
    //这是因为var存在变量提升,在代码执行前先声明了变量n但并未赋值,所以console.log(n)会输出undefined
    //而let不存在变量提升,不会提前被声明,所以console.log(m)会直接报错
    
    • 全局上下文中,基于var声明的变量,也相当于给GO(全局对象=>window)新增一个属性,并且任何一个发生值的改变,另外一个也会跟着变化(映射机制);但是基于let声明的变量就是全局变量,跟GO没有任何关系
    //用var声明的变量
    var n = 12;
    console.log(n);//12
    console.log(window.n);//12
    window.n = 13;
    console.log(n);//13
    
    //用let声明的变量
    let m = 10;
    console.log(m);//10
    console.log(window.m);// undefined
    
    • 在相同上下文中,let声明的变量不允许重复声明(不管之前是基于何种方式声明的,只要声明过就不能再基于let重复声明了),而var可以重复声明不做限制,因为浏览器只会按照声明一次处理
    var n = 10;
    var n = 12;
    console.log(n);//12
    
    //在代码执行之前,浏览器会进行词法分析、变量提升....
    //而在“词法分析”阶段,如果发现有基于let/const并且重复声明变量的操作,则直接报语法错误 Uncaught SyntaxError: ...,整个代码都不会做任何执行。
    console.log('OK');//不会执行
    let m = 14;
    let m = 12;
    
    • let/const/function会产生块级作用域,而var不会
    //代码块形成的块级上下文
    {
    var n = 12;
    console.log(n);//12
    
    let m = 13;
    console.log(m);//13
    }
    console.log(n);//12
    console.log(m);//Uncaught ReferenceError:...
    //在代码块内部不管是基于let还是var声明的变量都没有报错,但是在代码块之外,用var声明的变量没有报错,而用let声明的变量就报错了,这就很好的说明了基于let声明的变量是由块级作用域的,而var没有
    

    关于let和var在for循环中的区别

    在上篇文章“web前端高级 - 闭包的应用及循环事件绑定的N中解决办法”中,我们用for循环给每个按钮绑定点击事件,并在点击按钮时获取当前按钮的索引。但是发现当我们在for中用var时并没有实现我们期望的效果,在把var改为let后却实现了。就是一个简单的不同的变量声明方式却产生了不同的结果。这是因为var和let在for循环中的机制不同所导致,同时也跟let的块级作用域有关。接下来我们就来分析一下var和let在for循环中的区别。

    • var
    var buttons = document.querySelectorAll('button');
    for(var i = 0; i < buttons.length; i++){
    	buttons[i].onclick = function(){
    		console.log(`当前按钮的索引是${{i}`);
    	}
    }
    

    具体原因在上文中已经详细剖析,这里要说的是由于var并没有块级作用域的概念,所以这里操作的始终都是全局上下文中的变量i,所以当按钮的具体事件执行时,发现当前私有上下文中并没有变量i,所以就会向上级上下文(也就是全局上下文)中查找,所以最后每个按钮找到的都是全局上下文中的同一个变量i。

    • let
    var buttons = document.querySelectorAll('button');
    for(let i = 0; i < buttons.length; i++){
    	buttons[i].onclick = function(){
    		console.log(`当前按钮的索引是${{i}`);
    	}
    }
    

    上文中提到:let之所以能够实现,是因为let也是基于闭包的机制。那么具体的底层执行原理是什么呢,接下来我们来深挖一下:

    • 1.首先for循环主体会产生一个独立的私有上下文用来控制循环,然后每一轮循环也会再形成一个独立的私有上下文,这样循环几次就会形成几+1次的私有上下文。
    • 2.每循环一次会形成一个独立的私有级上下文,然后父级上下文(循环主体上下文)会把当前的变量i传递给该私有块级上下文
    • 3.在当前私有块级上下文中,会把i作为私有变量保存,并在当前上下文中进行处理后,返回给父级上下文(循环主体形成的私有上下文),同时创建事件绑定函数,函数的作用域就是当前的私有上下文。
    • 4.条件成立进行下一轮循环,然后重复以上2~3步,直到循环结束为止。
    • 5.所以每次触发按钮点击事件,函数执行时都会到循环时所形成的私有块级上下文中查找变量i,从而实现我们所期望的效果

    下面用一张图来演示一下for循环的执行过程:
    在这里插入图片描述

    关于变量的扩展

    • 扩展一:如果一个变量没有基于任何关键字声明,则相当于给window设置一个属性
    //扩展一
    //如果一个变量没有基于任何关键字声明,则相当于给window设置一个属性,如:
    a = 13;
    console.log(a);//13 首先看是否为全局变量,如果不是则再看是否为window的一个属性
    console.log(b);//报错 如果不是则直接报未定义的错误
    
    
    • 扩展二:如果一个变量声明在一个私有上下文中(例如函数),并且也没有基于任何关键字声明并且是给变量赋值操作,则也相当于是给window添加一个属性
    //扩展二
    //如果一个变量声明在一个私有上下文中(例如函数),并且也没有基于任何关键字声明并且是给变量赋值操作,则也相当于是给window添加一个属性
    function fn(){
    	x = 111;
    	console.log(x);//111 按照作用域链查找机制,先看变量在当前私有上下文中是否存在,如果不存在则向上级上下文中查找,直到找到全局上下文,如果全局上下文中也没有并且是给变量赋值操作,则也相当于给window添加属性
    	console.log(y);//如果是获取操作则直接报错
    }
    
    • 扩展三:暂时性死区(浏览器暂存bug)基于typeof检测一个未被声明的变量,不会报错,结果是undefined
    console.log(n);//Uncaught ReferenceError: n is not defeined
    //上面的代码未进行任何变量的声明和定义直接使用,发现报错了,这也很合乎情理,但是再看下面的代码
    console.log(typeof n);//undefined 基于typeof检测一个未被声明的变量,不会报错,结果输出undefined
    //但是如果我们再在这句代码下面加一个let声明一下,发现上面的代码又会报错了
    console.log(typeof n);//Uncaught ReferenceError:...
    let n = 10;
    
    
    展开全文
  • let var const var关键字 var关键字的用法 js中声明变量的关键字。 var num = 1; 如果在函数作用域中声明,为局部变量;如果在全局中声明,则为全局变量。 num = 2; 这种写法实际上是赋值,如果在函数作用域中赋值...

    let var const

    var关键字

    var关键字的用法

    js中声明变量的关键字。

    var num = 1;
    

    如果在函数作用域中声明,为局部变量;如果在全局中声明,则为全局变量。

    num = 2;
    

    这种写法实际上是赋值,如果在函数作用域中赋值就会去找当前函数作用域中的num,如果当前作用域中没有这个变量就会接着去上一个作用域中寻找,直到找到全局,在全局中如果也并没有声明过这个变量,就会给全局对象window强行添加一个num属性进行赋值。

    var关键字的缺点

    1) var会被声明提前,会打乱程序原本的执行顺序(变量提升传送门

    2) 在ES6之前,js中没有块级作用域,代码块内的变量,极有可能影响到外部的变量。

    let关键字

    ES6中新增的专门代替var用来声明变量的关键词。

    优点:

    1. 不会声明提前

    2. 将js中的程序块变成了一级作用域

    原理:

    1. 从let位置开始,到当前代码块底部,自动建立了匿名函数自调

    2. let在底层还悄悄的修改了内部的变量名: 比如:let t -> let _t

    注意:

    1. 相同作用域中不能let两个同名的变量

    2. let之前不允许提前使用该同名变量

      let生成匿名函数自调是从let位置才开始包裹,let之前的代码不属于匿名函数自调内部,所以无法访问匿名函数内的变量;

      ES6中明确规定如果块级中存在letconst命令时,则这个区块对这些命令声明的变量从一开始就形成封闭的区域,在代码块内,使用let命令前,该变量都是不可用的,这块区域在语法上称为“暂时性死区“

    3. 即使在全局let的变量,也不会保存在window

      实际上保存在了let原理中提到的立即执行匿名函数自调函数的函数作用域中;

      ES6在这方面也有规定:varfunction命令声明的全局变量依旧是顶层对象的属性,而letconstclass命令声明的全局变量不属于顶层对象的属性;也就是说从ES6开始,全局变量逐步于顶层对象的属性隔离。

    let和for循环的化学反应

    //1.
    for(var i = 0; i < 5 ;i++){
    	setTimeout(function(){
    		console.log(i)
    	},500)
    }
    //55555
    //2.
    for(let i=0; i < 5 ;i++){
    	setTimeout(function(){
    		console.log(i)
    	},500)
    }
    //01234
    

    第一题因为定时器是异步任务,会加入到任务队列等待主程序执行完毕在执行。主程序执行循环,当i等于5时,循环条件不满足退出循环,主程序结束,开始执行任务队列中的定时器对象,定时器对象中没有自己局部的i就会去上级作用域中拿,而上级的i主程序结束后就变成了5,所以会输出55555

    实际上第二题在程序中可以看成下面这样运行的(看上边所说的let的原理):

    for(var i=0; i < 5 ;i++){
        (function(i){//外层函数  i为要保护的变量
           setTimeout(function(){//内层函数
    			console.log(i)
    		},500) 
        })(i)
    }
    

    看以上代码,其实就是一个闭包(闭包传送门),每循环执行一次就会生成一个定时器对象并且匿名函数自调中的局部变量 i 都会因为被内层函数中连着无法释放,每次都会生出一个闭包保存当次的 i 的值。当主程序执行结束后,执行任务队列中的定时器对象,定时器对象中没有自己的局部 i 就会去上层找,找到的就是每次匿名函数生成的作用域对象中的 i ,所以输出是01234

    const关键字

    ES6中新增的专门用来声明常量的关键词。

    let的特性const都有,不能反复声明,存在块级作用域,不存在变量提升,也有暂时性死域的特点。

    let区别在于:

    1. const一旦声明就必须赋值;

    2. const声明如果是一个原始类型的常量,一旦声明就无法修改;

    3. const声明如果是一个引用类型的常量,一旦声明,保存在const中的地址值(指针)就无法修改,但是通过地址值指向的对象的属性还是能够修改的。

    const PI;
    //报错 const一旦声明就必须赋值
    const PI=3.1415926;
    PI = 3.14;
    //报错 const一旦声明如果值是原始类型的值,值不能改变
    const obj = {a:1,b:2}
    obj = {};
    //报错 const一旦声明如果值是引用类型的值,地址值不能改变
    

    var let const 对比总结:

    3个方向:1值是否能改变,2作用域在哪,3是否存在变量提升

    1. 使用var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象,值能修改。

    2. 使用let声明的变量,其作用域为该语句的代码块内,不存在变量提升,值能修改。

    3. 使用const声明的常量,其作用域为该语句的代码块内,不存在变量提升,且常量的值不能修改(原始类型的值和内存地址值不能修改)。

    ps: 学习阮一峰 ES6入门 个人理解心得总结(1)let,const命令 个人理解难免有错误,欢迎大家指正

    展开全文
  • Kotlin系列之let、with、run、apply、also函数的使用

    万次阅读 多人点赞 2017-12-12 21:59:53
    二、内联扩展函数之let 三、内联函数之with 四、内联扩展函数之run 五、内联扩展函数之apply 六、内联扩展函数之also 七、let,with,run,apply,also函数区别 简述: 相比Java, Kotlin提供了不少高级语法特性。对于...

    标签: Kotlin      常用技巧


    目录:

    简述:

    相比Java, Kotlin提供了不少高级语法特性。对于一个Kotlin的初学者来说经常会写出一些不够优雅的代码。在Kotlin中的源码标准库(Standard.kt)中提供了一些Kotlin扩展的内置函数可以优化kotlin的编码。Standard.kt是Kotlin库的一部分,它定义了一些基本函数。 这个源代码文件虽然一共不到50行代码,但是这些函数功能都非常强大。


    一、回调函数的Kotin的lambda的简化

    在Kotlin中对Java中的一些的接口的回调做了一些优化,可以使用一个lambda函数来代替。可以简化写一些不必要的嵌套回调方法。但是需要注意:在lambda表达式,只支持单抽象方法模型,也就是说设计的接口里面只有一个抽象的方法,才符合lambda表达式的规则,多个回调方法不支持。

    • 1、用Java代码实现一个接口的回调。

       mView.setEventListener(new ExamPlanHomeEventListener(){
       
          public void onSuccess(Data data){
            //todo
          }
       
       });
      
      
    • 2、在Kotlin中的实现一个接口的回调,不使用lambda表达式(这种方式非常适用于kotlin中对于一个接口中含有多个回调方法)。

      
      mView.setEventListener(object: ExamPlanHomeEventListener{
           
          public void onSuccess(Data data){
            //todo
          }
           
      });
      
    • 3、如果在Kotlin中的对于接口只有一个回调的方法,就符合使用lambda函数,我们可以把以上代码简化成这样。

      mView.setEventListener({
         data: Data ->
         //todo
      })
      
      //或者可以直接省略Data,借助kotlin的智能类型推导
      
      mView.setEventListener({
         data ->
         //todo
      })
      
    • 4、如果以上代码中的data参数没有使用到的话,可以直接把data去掉

      mView.setEventListener({
        //todo
      
      })
      
    • 5、以上代码还可以做个调整,由于setEventListener函数最后一个参数是一个函数的话,可以直接把括号的实现提到圆括号外面

      mView.setEventListener(){
         //todo
      }
      
    • 6、由于setEventListener这个函数只有一个参数,可以直接省略圆括号

      mView.setEventListener{
        //todo
      }
      

    二、内联扩展函数之let

    let扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择;let函数另一个作用就是可以避免写一些判断null的操作。
    
    • 1、let函数的使用的一般结构
    object.let{
       it.todo()//在函数体内使用it替代object对象去访问其公有的属性和方法
       ...
    }
    
    //另一种用途 判断object为null的操作
    object?.let{//表示object不为null的条件下,才会去执行let函数体
       it.todo()
    }
    
    • 2、let函数底层的inline扩展函数+lambda结构
       @kotlin.internal.InlineOnly
    public inline fun <T, R> T.let(block: (T) -> R): R = block(this)
    
    • 3、let函数inline结构的分析

      从源码let函数的结构来看它是只有一个lambda函数块block作为参数的函数,调用T类型对象的let函数,则该对象为函数的参数。在函数块内可以通过 it 指代该对象。返回值为函数块的最后一行或指定return表达式。

    • 4、let函数的kotlin和Java转化

       //kotlin
       
       fun main(args: Array<String>) {
          val result = "testLet".let {
              println(it.length)
              1000
          }
          println(result)
       }
       
       //java
       
       public final class LetFunctionKt {
         public static final void main(@NotNull String[] args) {
            Intrinsics.checkParameterIsNotNull(args, "args");
            String var2 = "testLet";
            int var4 = var2.length();
            System.out.println(var4);
            int result = 1000;
            System.out.println(result);
         }
      }
      
       
      
    • 5、let函数适用的场景

      场景一: 最常用的场景就是使用let函数处理需要针对一个可null的对象统一做判空处理。

      场景二: 然后就是需要去明确一个变量所处特定的作用域范围内可以使用

    • 6、let函数使用前后的对比

      没有使用let函数的代码是这样的,看起来不够优雅

      mVideoPlayer?.setVideoView(activity.course_video_view)
      	mVideoPlayer?.setControllerView(activity.course_video_controller_view)
      	mVideoPlayer?.setCurtainView(activity.course_video_curtain_view)
      

    使用let函数后的代码是这样的

    ```
    mVideoPlayer?.let {
    	   it.setVideoView(activity.course_video_view)
    	   it.setControllerView(activity.course_video_controller_view)
    	   it.setCurtainView(activity.course_video_curtain_view)
    }
    	
    ```
    

    三、内联函数之with

    • 1、with函数使用的一般结构

       with(object){
         //todo
       }
      
    • 2、with函数底层的inline扩展函数+lambda结构

      @kotlin.internal.InlineOnly
      public inline fun <T, R> with(receiver: T, block: T.() -> R): R = receiver.block()
      
      
    • 3、with函数inline结构的分析

    with函数和前面的几个函数使用方式略有不同,因为它不是以扩展的形式存在的。它是将某对象作为函数的参数,在函数块内可以通过 this 指代该对象。返回值为函数块的最后一行或指定return表达式。

    可以看出with函数是接收了两个参数,分别为T类型的对象receiver和一个lambda函数块,所以with函数最原始样子如下:

    ```
    
    val result = with(user, {
            println("my name is $name, I am $age years old, my phone number is $phoneNum")
            1000
        })
    ```
    

    但是由于with函数最后一个参数是一个函数,可以把函数提到圆括号的外部,所以最终with函数的调用形式如下:

    ```
    val result = with(user) {
            println("my name is $name, I am $age years old, my phone number is $phoneNum")
            1000
        }
    ```
    
    • 4、with函数的kotlin和Java转化

      //kotlin
      
      fun main(args: Array<String>) {
          val user = User("Kotlin", 1, "1111111")
      
          val result = with(user) {
              println("my name is $name, I am $age years old, my phone number is $phoneNum")
              1000
          }
          println("result: $result")
      }
      
      //java
      
       public static final void main(@NotNull String[] args) {
            Intrinsics.checkParameterIsNotNull(args, "args");
            User user = new User("Kotlin", 1, "1111111");
            String var4 = "my name is " + user.getName() + ", I am " + user.getAge() + " years old, my phone number is " + user.getPhoneNum();
            System.out.println(var4);
            int result = 1000;
            String var3 = "result: " + result;
            System.out.println(var3);
         }
      
      
    • 5、with函数的适用的场景

    适用于调用同一个类的多个方法时,可以省去类名重复,直接调用类的方法即可,经常用于Android中RecyclerView中onBinderViewHolder中,数据model的属性映射到UI上

    • 6、with函数使用前后的对比

    没有使用kotlin中的实现

    ```
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
    
       ArticleSnippet item = getItem(position);
    		if (item == null) {
    			return;
    		}
    		holder.tvNewsTitle.setText(StringUtils.trimToEmpty(item.titleEn));
    		holder.tvNewsSummary.setText(StringUtils.trimToEmpty(item.summary));
    		String gradeInfo = "难度:" + item.gradeInfo;
    		String wordCount = "单词数:" + item.length;
    		String reviewNum = "读后感:" + item.numReviews;
    		String extraInfo = gradeInfo + " | " + wordCount + " | " + reviewNum;
    		holder.tvExtraInfo.setText(extraInfo);
    		...
    }
    
    ```
    

    kotlin的实现

    ```
    override fun onBindViewHolder(holder: ViewHolder, position: Int){
       val item = getItem(position)?: return
       
       with(item){
       
          holder.tvNewsTitle.text = StringUtils.trimToEmpty(titleEn)
    	   holder.tvNewsSummary.text = StringUtils.trimToEmpty(summary)
    	   holder.tvExtraInf.text = "难度:$gradeInfo | 单词数:$length | 读后感: $numReviews"
           ...   
       
       }
    
    }
    
    ```
    

    四、内联扩展函数之run

    • 1、run函数使用的一般结构

      object.run{
      //todo
      }
      
    • 2、run函数的inline+lambda结构

      @kotlin.internal.InlineOnly
      public inline fun <T, R> T.run(block: T.() -> R): R = block()
      
    • 3、run函数的inline结构分析

      run函数实际上可以说是let和with两个函数的结合体,run函数只接收一个lambda函数为参数,以闭包形式返回,返回值为最后一行的值或者指定的return的表达式。

    • 4、run函数的kotlin和Java转化

      //kotlin
      
      fun main(args: Array<String>) {
          val user = User("Kotlin", 1, "1111111")
      
          val result = user.run {
              println("my name is $name, I am $age years old, my phone number is $phoneNum")
              1000
          }
          println("result: $result")
      }
      
      //java
      
        public static final void main(@NotNull String[] args) {
            Intrinsics.checkParameterIsNotNull(args, "args");
            User user = new User("Kotlin", 1, "1111111");
            String var5 = "my name is " + user.getName() + ", I am " + user.getAge() + " years old, my phone number is " + user.getPhoneNum();
            System.out.println(var5);
            int result = 1000;
            String var3 = "result: " + result;
            System.out.println(var3);
         }
      
      
    • 5、run函数的适用场景

    适用于let,with函数任何场景。因为run函数是let,with两个函数结合体,准确来说它弥补了let函数在函数体内必须使用it参数替代对象,在run函数中可以像with函数一样可以省略,直接访问实例的公有属性和方法,另一方面它弥补了with函数传入对象判空问题,在run函数中可以像let函数一样做判空处理

    • 6、run函数使用前后的对比

    还是借助上个例子kotlin代码

    ```
    override fun onBindViewHolder(holder: ViewHolder, position: Int){
       val item = getItem(position)?: return
       
       with(item){
       
          holder.tvNewsTitle.text = StringUtils.trimToEmpty(titleEn)
    	   holder.tvNewsSummary.text = StringUtils.trimToEmpty(summary)
    	   holder.tvExtraInf = "难度:$gradeInfo | 单词数:$length | 读后感: $numReviews"
           ...   
       
       }
    
    }
    ```
    

    使用run函数后的优化

    ```
    override fun onBindViewHolder(holder: ViewHolder, position: Int){
       
      getItem(position)?.run{
          holder.tvNewsTitle.text = StringUtils.trimToEmpty(titleEn)
    	   holder.tvNewsSummary.text = StringUtils.trimToEmpty(summary)
    	   holder.tvExtraInf = "难度:$gradeInfo | 单词数:$length | 读后感: $numReviews"
           ...   
       
       }
    
    }
    
    ```
    

    五、内联扩展函数之apply

    • 1、apply函数使用的一般结构

      object.apply{
      //todo
      }
      
    • 2、apply函数的inline+lambda结构

      @kotlin.internal.InlineOnly
      public inline fun <T> T.apply(block: T.() -> Unit): T { block(); return this }
      
    • 3、apply函数的inline结构分析

    从结构上来看apply函数和run函数很像,唯一不同点就是它们各自返回的值不一样,run函数是以闭包形式返回最后一行代码的值,而apply函数的返回的是传入对象的本身。

    • 4、apply函数的kotlin和Java转化

      //kotlin
      
      fun main(args: Array<String>) {
          val user = User("Kotlin", 1, "1111111")
      
          val result = user.apply {
              println("my name is $name, I am $age years old, my phone number is $phoneNum")
              1000
          }
          println("result: $result")
      }
      
      //java
      
      public final class ApplyFunctionKt {
         public static final void main(@NotNull String[] args) {
            Intrinsics.checkParameterIsNotNull(args, "args");
            User user = new User("Kotlin", 1, "1111111");
            String var5 = "my name is " + user.getName() + ", I am " + user.getAge() + " years old, my phone number is " + user.getPhoneNum();
            System.out.println(var5);
            String var3 = "result: " + user;
            System.out.println(var3);
         }
      }
      
      
    • 5、apply函数的适用场景

    整体作用功能和run函数很像,唯一不同点就是它返回的值是对象本身,而run函数是一个闭包形式返回,返回的是最后一行的值。正是基于这一点差异它的适用场景稍微与run函数有点不一样。apply一般用于一个对象实例初始化的时候,需要对对象中的属性进行赋值。或者动态inflate出一个XML的View的时候需要给View绑定数据也会用到,这种情景非常常见。特别是在我们开发中会有一些数据model向View model转化实例化的过程中需要用到。

    • 6、apply函数使用前后的对比

    没有使用apply函数的代码是这样的,看起来不够优雅

    ```
    mSheetDialogView = View.inflate(activity, R.layout.biz_exam_plan_layout_sheet_inner, null)
            mSheetDialogView.course_comment_tv_label.paint.isFakeBoldText = true
            mSheetDialogView.course_comment_tv_score.paint.isFakeBoldText = true
            mSheetDialogView.course_comment_tv_cancel.paint.isFakeBoldText = true
            mSheetDialogView.course_comment_tv_confirm.paint.isFakeBoldText = true
            mSheetDialogView.course_comment_seek_bar.max = 10
            mSheetDialogView.course_comment_seek_bar.progress = 0
    ```
    

    使用apply函数后的代码是这样的

    ```
    mSheetDialogView = View.inflate(activity, R.layout.biz_exam_plan_layout_sheet_inner, null).apply{
       course_comment_tv_label.paint.isFakeBoldText = true
       course_comment_tv_score.paint.isFakeBoldText = true
       course_comment_tv_cancel.paint.isFakeBoldText = true
       course_comment_tv_confirm.paint.isFakeBoldText = true
       course_comment_seek_bar.max = 10
       course_comment_seek_bar.progress = 0
    
    }
    
    ```
    

    多层级判空问题

    ```
    	if (mSectionMetaData == null || mSectionMetaData.questionnaire == null || mSectionMetaData.section == null) {
    			return;
    		}
    		if (mSectionMetaData.questionnaire.userProject != null) {
    			renderAnalysis();
    			return;
    		}
    		if (mSectionMetaData.section != null && !mSectionMetaData.section.sectionArticles.isEmpty()) {
    			fetchQuestionData();
    			return;
    		}
    ```
    

    kotlin的apply函数优化

    ```
    mSectionMetaData?.apply{
    
    //mSectionMetaData不为空的时候操作mSectionMetaData
    
    }?.questionnaire?.apply{
    
    //questionnaire不为空的时候操作questionnaire
    
    }?.section?.apply{
    
    //section不为空的时候操作section
    
    }?.sectionArticle?.apply{
    
    //sectionArticle不为空的时候操作sectionArticle
    
    }
    
    ```
    

    六、内联扩展函数之also

    • 1、also函数使用的一般结构

      object.also{
      //todo
      }
      
    • 2、also函数的inline+lambda结构

      @kotlin.internal.InlineOnly
      

    @SinceKotlin(“1.1”)
    public inline fun T.also(block: (T) -> Unit): T { block(this); return this }
    ```

    • 3、also函数的inline结构分析

    also函数的结构实际上和let很像唯一的区别就是返回值的不一样,let是以闭包的形式返回,返回函数体内最后一行的值,如果最后一行为空就返回一个Unit类型的默认值。而also函数返回的则是传入对象的本身

    • 4、also函数编译后的class文件

      //kotlin
      
      fun main(args: Array<String>) {
          val result = "testLet".also {
              println(it.length)
              1000
          }
          println(result)
      }
      
      //java
      
      public final class AlsoFunctionKt {
         public static final void main(@NotNull String[] args) {
            Intrinsics.checkParameterIsNotNull(args, "args");
            String var2 = "testLet";
            int var4 = var2.length();
            System.out.println(var4);
            System.out.println(var2);
         }
      }
      
    • 5、also函数的适用场景

      适用于let函数的任何场景,also函数和let很像,只是唯一的不同点就是let函数最后的返回值是最后一行的返回值而also函数的返回值是返回当前的这个对象。一般可用于多个扩展函数链式调用

    • 6、also函数使用前后的对比

      和let函数类似

    七、let,with,run,apply,also函数区别

    通过以上几种函数的介绍,可以很方便优化kotlin中代码编写,整体看起来几个函数的作用很相似,但是各自又存在着不同。使用的场景有相同的地方比如run函数就是let和with的结合体。下面一张表格可以清晰对比出他们的不同之处。

    函数名定义inline的结构函数体内使用的对象返回值是否是扩展函数适用的场景
    letfun <T, R> T.let(block: (T) -> R): R = block(this)it指代当前对象闭包形式返回适用于处理不为null的操作场景
    withfun <T, R> with(receiver: T, block: T.() -> R): R = receiver.block()this指代当前对象或者省略闭包形式返回适用于调用同一个类的多个方法时,可以省去类名重复,直接调用类的方法即可,经常用于Android中RecyclerView中onBinderViewHolder中,数据model的属性映射到UI上
    runfun <T, R> T.run(block: T.() -> R): R = block()this指代当前对象或者省略闭包形式返回适用于let,with函数任何场景。
    applyfun T.apply(block: T.() -> Unit): T { block(); return this }this指代当前对象或者省略返回this1、适用于run函数的任何场景,一般用于初始化一个对象实例的时候,操作对象属性,并最终返回这个对象。
    2、动态inflate出一个XML的View的时候需要给View绑定数据也会用到.
    3、一般可用于多个扩展函数链式调用
    4、数据model多层级包裹判空处理的问题
    alsofun T.also(block: (T) -> Unit): T { block(this); return this }it指代当前对象返回this适用于let函数的任何场景,一般可用于多个扩展函数链式调用

    欢迎关注Kotlin开发者联盟,这里有最新Kotlin技术文章,每周会不定期翻译一篇Kotlin国外技术文章。如果你也喜欢Kotlin,欢迎加入我们~~~

    Kotlin系列文章,欢迎查看:

    Kotlin邂逅设计模式系列:

    数据结构与算法系列:

    翻译系列:

    原创系列:

    Effective Kotlin翻译系列

    实战系列:

    展开全文
  • React 语法之let和const命令

    千次阅读 2018-12-08 13:33:29
    let命令 基本用法 ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。 { let a = 10; var b = 1; } a // ReferenceError: a is not defined. b // 1 ...

    let命令

    基本用法

    ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。

    
    {
      let a = 10;
      var b = 1;
    }
     
    a // ReferenceError: a is not defined.
    b // 1

    上面代码在代码块之中,分别用letvar声明了两个变量。然后在代码块之外调用这两个变量,结果let声明的变量报错,var声明的变量返回了正确的值。这表明,let声明的变量只在它所在的代码块有效。

    for循环的计数器,就很合适使用let命令。

    for (let i = 0; i < arr.length; i++) {}
     
    console.log(i);
    //ReferenceError: i is not defined
    

    上面代码的计数器i,只在for循环体内有效。

    下面的代码如果使用var,最后输出的是10。

    var a = [];
    for (var i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 10
    

    上面代码中,变量ivar声明的,在全局范围内都有效。所以每一次循环,新的i值都会覆盖旧值,导致最后输出的是最后一轮的i的值。

    如果使用let,声明的变量仅在块级作用域内有效,最后输出的是6。

    var a = [];
    for (let i = 0; i < 10; i++) {
      a[i] = function () {
        console.log(i);
      };
    }
    a[6](); // 6
    

    上面代码中,变量ilet声明的,当前的i只在本轮循环有效,所以每一次循环的i其实都是一个新的变量,所以最后输出的是6。

    不存在变量提升

    let不像var那样会发生“变量提升”现象。所以,变量一定要在声明后使用,否则报错。

    console.log(foo); // 输出undefined
    console.log(bar); // 报错ReferenceError
    var foo = 2;
    let bar = 2;
    

     上面代码中,变量foovar命令声明,会发生变量提升,即脚本开始运行时,变量foo已经存在了,但是没有值,所以会输出undefined。变量barlet命令声明,不会发生变量提升。这表示在声明它之前,变量bar是不存在的,这时如果用到它,就会抛出一个错误。

    暂时性死区

    只要块级作用域内存在let命令,它所声明的变量就“绑定”(binding)这个区域,不再受外部的影响。

    var tmp = 123;
     
    if (true) {
      tmp = 'abc'; // ReferenceError
      let tmp;
    }
    

    上面代码中,存在全局变量tmp,但是块级作用域内let又声明了一个局部变量tmp,导致后者绑定这个块级作用域,所以在let声明变量前,对tmp赋值会报错。

    ES6明确规定,如果区块中存在let和const命令,这个区块对这些命令声明的变量,从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量,就会报错。

    总之,在代码块内,使用let命令声明变量之前,该变量都是不可用的。这在语法上,称为“暂时性死区”(temporal dead zone,简称TDZ)。
     

    if (true) {
      // TDZ开始
      tmp = 'abc'; // ReferenceError
      console.log(tmp); // ReferenceError
      let tmp; // TDZ结束
      console.log(tmp); // undefined
      tmp = 123;
      console.log(tmp); // 123
    }
    

     上面代码中,在let命令声明变量tmp之前,都属于变量tmp的“死区”。

    “暂时性死区”也意味着typeof不再是一个百分之百安全的操作。

    typeof x; // ReferenceError
    let x;
    

    上面代码中,变量x使用let命令声明,所以在声明之前,都属于x的“死区”,只要用到该变量就会报错。因此,typeof运行时就会抛出一个ReferenceError

    作为比较,如果一个变量根本没有被声明,使用typeof反而不会报错。

     

    typeof undeclared_variable // "undefined"
    

    上面代码中,undeclared_variable是一个不存在的变量名,结果返回“undefined”。所以,在没有let之前,typeof运算符是百分之百安全的,永远不会报错。现在这一点不成立了。这样的设计是为了让大家养成良好的编程习惯,变量一定要在声明之后使用,否则就报错。

    有些“死区”比较隐蔽,不太容易发现。
     

    function bar(x = y, y = 2) {
      return [x, y];
    }
     
    bar(); // 报错
    

    上面代码中,调用bar函数之所以报错(某些实现可能不报错),是因为参数x默认值等于另一个参数y,而此时y还没有声明,属于”死区“。如果y的默认值是x,就不会报错,因为此时x已经声明了。

    function bar(x = 2, y = x) {
      return [x, y];
    }
    bar(); // [2, 2]
    

    ES6规定暂时性死区和let、const语句不出现变量提升,主要是为了减少运行时错误,防止在变量声明前就使用这个变量,从而导致意料之外的行为。这样的错误在ES5是很常见的,现在有了这种规定,避免此类错误就很容易了。

    总之,暂时性死区的本质就是,只要一进入当前作用域,所要使用的变量就已经存在了,但是不可获取,只有等到声明变量的那一行代码出现,才可以获取和使用该变量。

    不允许重复声明

    let不允许在相同作用域内,重复声明同一个变量。

    // 报错
    function () {
      let a = 10;
      var a = 1;
    }
    // 报错
    function () {
      let a = 10;
      let a = 1;
    }
    

    因此,不能在函数内部重新声明参数。

    function func(arg) {
      let arg; // 报错
    }
     
    function func(arg) {
      {
        let arg; // 不报错
      }
    }
    

     块级作用域

    为什么需要块级作用域?

    ES5只有全局作用域和函数作用域,没有块级作用域,这带来很多不合理的场景。

    第一种场景,内层变量可能会覆盖外层变量。

    var tmp = new Date();
     
    function f() {
      console.log(tmp);
      if (false) {
        var tmp = "hello world";
      }
    }
     
    f(); // undefined
    

    上面代码中,函数f执行后,输出结果为undefined,原因在于变量提升,导致内层的tmp变量覆盖了外层的tmp变量。

    第二种场景,用来计数的循环变量泄露为全局变量。

    var s = 'hello';
     
    for (var i = 0; i < s.length; i++) {
      console.log(s[i]);
    }
     
    console.log(i); // 5
    

    上面代码中,变量i只用来控制循环,但是循环结束后,它并没有消失,泄露成了全局变量。

    ES6的块级作用域

    let实际上为JavaScript新增了块级作用域。

    function f1() {
      let n = 5;
      if (true) {
        let n = 10;
      }
      console.log(n); // 5
    }
    

    上面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。如果使用var定义变量n,最后输出的值就是10。

    ES6允许块级作用域的任意嵌套。

    {{{{{let insane = 'Hello World'}}}}};
    

    上面代码使用了一个五层的块级作用域。外层作用域无法读取内层作用域的变量。

    {{{{
      {let insane = 'Hello World'}
      console.log(insane); // 报错
    }}}};
    

    内层作用域可以定义外层作用域的同名变量。

    {{{{
      let insane = 'Hello World';
      {let insane = 'Hello World'}
    }}}};
    

    块级作用域的出现,实际上使得获得广泛应用的立即执行匿名函数(IIFE)不再必要了。

    // IIFE写法
    (function () {
      var tmp = ...;
      ...
    }());
    // 块级作用域写法
    {
      let tmp = ...;
      ...
    }
    

    块级作用域与函数声明

    函数能不能在块级作用域之中声明,是一个相当令人混淆的问题。

    ES5规定,函数只能在顶层作用域和函数作用域之中声明,不能在块级作用域声明。

    // 情况一
    if (true) {
      function f() {}
    }
    // 情况二
    try {
      function f() {}
    } catch(e) {
    }
    

    上面代码的两种函数声明,根据ES5的规定都是非法的。

    但是,浏览器没有遵守这个规定,还是支持在块级作用域之中声明函数,因此上面两种情况实际都能运行,不会报错。不过,“严格模式”下还是会报错。

    // ES5严格模式
    'use strict';
    if (true) {
      function f() {}
    }
    // 报错
    

    ES6引入了块级作用域,明确允许在块级作用域之中声明函数。

    // ES6严格模式
    'use strict';
    if (true) {
      function f() {}
    }
    // 不报错
    

    并且ES6规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。

    function f() { console.log('I am outside!'); }
    (function () {
      if (false) {
        // 重复声明一次函数f
        function f() { console.log('I am inside!'); }
      }
     
      f();
    }());
    

    上面代码在ES5中运行,会得到“I am inside!”,因为在if内声明的函数f会被提升到函数头部,实际运行的代码如下。

    // ES5版本
    function f() { console.log('I am outside!'); }
    (function () {
      function f() { console.log('I am inside!'); }
      if (false) {
      }
      f();
    }());
    

    ES6的运行结果就完全不一样了,会得到“I am outside!”。因为块级作用域内声明的函数类似于let,对作用域之外没有影响,实际运行的代码如下。

    // ES6版本
    function f() { console.log('I am outside!'); }
    (function () {
      f();
    }());
    

    很显然,这种行为差异会对老代码产生很大影响。为了减轻因此产生的不兼容问题,ES6在附录B里面规定,浏览器的实现可以不遵守上面的规定,有自己的行为方式。

    • 允许在块级作用域内声明函数。
    • 函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
    • 同时,函数声明还会提升到所在的块级作用域的头部。

    注意,上面三条规则只对ES6的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。

    前面那段代码,在Chrome环境下运行会报错。

    // ES6的浏览器环境
    function f() { console.log('I am outside!'); }
    (function () {
      if (false) {
        // 重复声明一次函数f
        function f() { console.log('I am inside!'); }
      }
     
      f();
    }());
    // Uncaught TypeError: f is not a function
    

    上面的代码报错,是因为实际运行的是下面的代码。

    // ES6的浏览器环境
    function f() { console.log('I am outside!'); }
    (function () {
      var f = undefined;
      if (false) {
        function f() { console.log('I am inside!'); }
      }
     
      f();
    }());
    // Uncaught TypeError: f is not a function
    

    考虑到环境导致的行为差异太大,应该避免在块级作用域内声明函数。如果确实需要,也应该写成函数表达式,而不是函数声明语句。

    // 函数声明语句
    {
      let a = 'secret';
      function f() {
        return a;
      }
    }
    // 函数表达式
    {
      let a = 'secret';
      let f = function () {
        return a;
      };
    }
    

    另外,还有一个需要注意的地方。ES6的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。

    // 不报错
    'use strict';
    if (true) {
      function f() {}
    }
    // 报错
    'use strict';
    if (true)
      function f() {}
    

    const命令

    const声明一个只读的常量。一旦声明,常量的值就不能改变。

    const PI = 3.1415;
    PI // 3.1415
    PI = 3;
    // TypeError: Assignment to constant variable.
    

    上面代码表明改变常量的值会报错。

    const声明的变量不得改变值,这意味着,const一旦声明变量,就必须立即初始化,不能留到以后赋值。

    const foo;
    // SyntaxError: Missing initializer in const declaration
    

    上面代码表示,对于const来说,只声明不赋值,就会报错。

    const的作用域与let命令相同:只在声明所在的块级作用域内有效。

    if (true) {
      const MAX = 5;
    }
     
    MAX // Uncaught ReferenceError: MAX is not defined
    

    const命令声明的常量也是不提升,同样存在暂时性死区,只能在声明的位置后面使用。

    if (true) {
      console.log(MAX); // ReferenceError
      const MAX = 5;
    }
    

    上面代码在常量MAX声明之前就调用,结果报错。

    const声明的常量,也与let一样不可重复声明。

    var message = "Hello!";
    let age = 25;
    // 以下两行都会报错
    const message = "Goodbye!";
    const age = 30;
    

    对于复合类型的变量,变量名不指向数据,而是指向数据所在的地址。const命令只是保证变量名指向的地址不变,并不保证该地址的数据不变,所以将一个对象声明为常量必须非常小心。

    const foo = {};
    foo.prop = 123;
     
    foo.prop
    // 123
    foo = {}; // TypeError: "foo" is read-only
    

    上面代码中,常量foo储存的是一个地址,这个地址指向一个对象。不可变的只是这个地址,即不能把foo指向另一个地址,但对象本身是可变的,所以依然可以为其添加新属性。

    下面是另一个例子。

    const a = [];
    a.push('Hello'); // 可执行
    a.length = 0;    // 可执行
    a = ['Dave'];    // 报错
    

    上面代码中,常量a是一个数组,这个数组本身是可写的,但是如果将另一个数组赋值给a,就会报错。

    如果真的想将对象冻结,应该使用Object.freeze方法。

    const foo = Object.freeze({});
    // 常规模式时,下面一行不起作用;
    // 严格模式时,该行会报错
    foo.prop = 123;
    

    上面代码中,常量foo指向一个冻结的对象,所以添加新属性不起作用,严格模式时还会报错。

    除了将对象本身冻结,对象的属性也应该冻结。下面是一个将对象彻底冻结的函数。

    var constantize = (obj) => {
      Object.freeze(obj);
      Object.keys(obj).forEach( (key, value) => {
        if ( typeof obj[key] === 'object' ) {
          constantize( obj[key] );
        }
      });
    };
    

    ES5只有两种声明变量的方法:var命令和function命令。ES6除了添加letconst命令,后面章节还会提到,另外两种声明变量的方法:import命令和class命令。所以,ES6一共有6种声明变量的方法。

    全局对象的属性

    全局对象是最顶层的对象,在浏览器环境指的是window对象,在Node.js指的是global对象。ES5之中,全局对象的属性与全局变量是等价的。

    window.a = 1;
    a // 1
    a = 2;
    window.a // 2
    

    上面代码中,全局对象的属性赋值与全局变量的赋值,是同一件事。(对于Node来说,这一条只对REPL环境适用,模块环境之中,全局变量必须显式声明成global对象的属性。)

    未声明的全局变量,自动成为全局对象window的属性,这被认为是JavaScript语言最大的设计败笔之一。这样的设计带来了两个很大的问题,首先是没法在编译时就报出变量未声明的错误,只有运行时才能知道,其次程序员很容易不知不觉地就创建了全局变量(比如打字出错)。另一方面,从语义上讲,语言的顶层对象是一个有实体含义的对象,也是不合适的。

    ES6为了改变这一点,一方面规定,为了保持兼容性,var命令和function命令声明的全局变量,依旧是全局对象的属性;另一方面规定,let命令、const命令、class命令声明的全局变量,不属于全局对象的属性。也就是说,从ES6开始,全局变量将逐步与全局对象的属性脱钩。

    var a = 1;
    // 如果在Node的REPL环境,可以写成global.a
    // 或者采用通用方法,写成this.a
    window.a // 1
    let b = 1;
    window.b // undefined
    

    上面代码中,全局变量avar命令声明,所以它是全局对象的属性;全局变量blet命令声明,所以它不是全局对象的属性,返回undefined

    版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/xiangzhihong8/article/details/52366380

    展开全文
  • 轻松弄懂var、let、const之间的区别

    千次阅读 多人点赞 2020-01-08 14:16:01
    ES6的出现为我们前端带来了很多方便之处,以前用js几十行才实现的一个功能,ES6几行代码就能简单的实现,ES6新增的一些特性,改变了很多弊端之处,比如新出现的let、const,实现了块级作用域功能,减少了以前var的...
  • let与const的使用

    千次阅读 2018-12-26 10:27:17
    在代码块中声明了a、b俩变量,在代码块之外调用两个变量,let声明的会报错,var声明的变量正确的返回了值,let声 明变量存在块级作用域,只在它所在的代码块有效; for循环就很适合用let命令: for(let i =...
  • JavaScript中let和var区别详解

    千次阅读 2020-07-06 15:10:05
    想要了解var(ES5)和let(ES6)区别,首先就要了解ES5下JS的变量提升 一、变量提升(声) 当浏览器开辟出供代码执行的栈内存后,代码并没有自上而下立即执行,而是继续做了一些事情:把当前作用域中所有带var/...
  • vue之let

    千次阅读 2019-05-08 17:51:49
    let const   let es6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。   上面代码在代码块之中,分别用let和var声明了两个变量。然后在代码块...
  • if let 需求: var array = [“one”,“two”,“three”,“four”] 发现数组中最后一个元素是否"four" 把它移除? 作用: 主要使用它解决Optional对象解包时产生空对象的处理。 解决方案一 switch array.lastIndex...
  • ES6入门--let的基本使用

    千次阅读 2017-07-04 22:22:02
    let命令基本 用法ES6新增了let命令,用来声明变量。它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效。{ let a = 10; var b = 1; }a // ReferenceError: a is not defined. b // 1 上面代码在...
  • let/const 的变量提升与暂时性死区

    千次阅读 2020-02-08 17:27:18
    在面试或一些文章中提到 var 和 let/const 区别时,总说 var 有变量提升,let/const 不存在变量提升,这种说法是错误的. var 和 let/const 都有变量提升,但是 let/const 暂时性死区的存在要求调用该类变量前必须先...
  • Kotlin let操作符

    千次阅读 2019-12-21 11:00:41
    let扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择;let函数另一个作用就是可以避免写一些判断null的操作。 1、let函数的使用的一般结构 object....
  • 我用了两个月的时间才理解 let 方应杭 微信 xiedaimala02,公众号 XDML,暗号:知乎 679 人赞了该文章 当然不是说用完整的两个月时间来理解 let,而是零零碎碎地理解,同时我还要想着怎么写出一篇文章把这个...
  • let 函数

    千次阅读 2018-07-01 19:49:15
    let 函数让处理可空表达式变得更容易,和安全运算符一起,它允许你对表达式求值,检查求值结果是否为null,并把结果保存为一个变量。
  • var let 以及 const区别和用法(详解)

    千次阅读 2020-04-15 18:03:15
    但是因为var声明的变量会有一定的缺点(内层变量可能覆盖外层变量的问题以及用来计数的循环变量泄露为全局变量),ES6提出了使用let和const声明变量,更加安全方便的提供我们声明变量。 var var 存在全局作用域和...
  • Vim中let g: let b: let l: 等的区别

    千次阅读 2019-05-14 08:33:22
    But, for example, assigning 50 to the global variable foo (:let g:foo=50) cannot be achieved with a :set command (because g:foo is a variable and not an option).  Some options are boolean like. When...
  • 文章目录let 和 const1. let2. 块级作用域(1) 为什么需要块级作用域?(2) ES6 的块级作用域(3) 块级作用域与函数声明3. const 命令变量的解构赋值1. 数组的解构赋值(1) 默认值2. 对象的解构赋值3. 字符串的解构赋值4...
  • let和const的区别

    千次阅读 2020-10-30 11:39:47
    let和const很相似 1、let和const的相同点: ① 只在声明所在的块级作用域内有效。 ② 不提升,同时存在暂时性死区,只能在声明的位置后面使用。 ③ 不可重复声明。 2、let和const的不同点: ① let声明的变量...
  • var与let,const的区别详解

    千次阅读 2019-06-20 16:17:44
    其中对于变量的定义var,let,const我们就来说说之间的区别吧。 let声明变量有以下几个特点: 1.没有预解析过程(即没有变量提升,var有变量提升) 2.不可以重复声明。 3.{}代表块级作用域,let有块级作用域,...
  • js中Let用法

    千次阅读 2019-11-13 21:38:21
    let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值 描述 let 允许你声明一个作用域或被限制在块级中的变量、语句或者表达式。 与var不同的是,它声明的变量只能是全局或者整个函数块的。换句...
  • let存在变量提升么?

    千次阅读 2019-06-18 14:06:04
    答案是Yes,会提升,但是没有被初始化 ...let a = 'code' { console.log(a) // code } let b = 'js' { console.log(b) // Uncaught ReferenceError: Cannot access 'b' before initialization let b = 'css' } ...
  • 高阶函数let示例1:基础用法示例2:返回值 let let可以配合可空性 “?”来使用,如果data=null 则不执行let内部代码,如果有返回值则直接返回null 在let中,用it表示引用对象,并可调用其方法,it不可省略。...
  • let与var的区别(重点看例子)

    千次阅读 2018-08-01 00:07:00
    var存在变量提升,而let不存在变量提升,所以用let定义的变量一定要在声明后再使用,否则会报错。 var //var定义的变量存在变量提升,变量会把声明提升到整个作用域的最前面 //例子1 console.log(a); //undefined...
  • 快速配置Let's encrypt通配符证书

    千次阅读 2018-05-14 20:25:14
    利用certbot工具配置Let’s encrypt通配符证书,所域名下所有的子域名都能方便的使用 https证书,而且完全免费。值得关注的是,Let’s encrypt通配符证书只是针对二级域名,并不能针对主域名,如*.hubinqiang.com和...
  • 2018 Kotlin let操作符

    千次阅读 2018-08-06 16:37:22
    let扩展函数的实际上是一个作用域函数,当你需要去定义一个变量在一个特定的作用域范围内,let函数的是一个不错的选择;let函数另一个作用就是可以避免写一些判断null的操作。 1、let函数的使用的一般结构 object....
  • JavaScript中 let 和 var 定义变量说明

    千次阅读 2018-04-14 15:04:10
    let 语句声明一个块级作用域的本地变量,并且可选的将其初始化为一个值。语法let var1 [= value1] [, var2 [= value2]] [, ..., varN [= valueN]];参数var1, var2, …, varN变量名。可以是任意合法的标识符。...
  • [乐意黎]IE 10 不支持 let 和箭头函数

    千次阅读 2019-05-15 14:01:36
    鉴于此,把 let 修改为 var , 把 箭头函数修改为普通的 function name(){}函数。 如图: ECMAScript 2015(ECMAScript 6) 新特性 1. ES2015(ES6) 新增加了两个重要的 JavaScript 关键字:块级作用域...
  • Vue初学05-var和let的区别

    千次阅读 2020-03-13 09:12:54
    es5中var定义的变量只有全局作用域和函数作用域,没有块级作用域的概念...es6中let有块级作用域,相当于是var的进一步完善。 下面以按钮点击为例,一共5个按钮,绑定点击事件,点到第几个按钮,提示第几个按钮被点击。
  • js中var,let,const的区别和用法

    千次阅读 2020-06-10 19:03:49
    这里写自定义目录标题js中var,let,const的区别和用法ES5中var的写法ES6中的let和constlet的用法const的用法 js中var,let,const的区别和用法 在ES6出来之后,js中添加了会级作用域这是在原来的ES5中没有的,同样也就...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,197,303
精华内容 478,921
关键字:

let