es6、es7

一、es6中的 let const

　　（1.）　作用域：1.全局 2.函数作用域（局部）

　　　　　 （相似）：1.两者都是块级元素，

　　　　　　　　　　 2.都不能和它所在作用域内的其他变量或函数拥有相同的名称

　　　　　　区别：1.const声明的常量必须初始化，而let声明的变量不用

　　　　　　　　　2.const 定义常量的值不能通过再赋值修改，也不可以再次声明，而let定义的变量可以修改

　　（2.）　使用情况：1.let 声明的变量只在 let 命令所在的代码块内有效( 最近的{} 有效)。

　举例：

{ let x= 2;}

let 声明的变量只在 let命名所在的代码亏啊 {} 内有效，在{} 之外不能访问

　　　　　　　　　　 2.const 声明一个只读的常量，一旦声明，常量的值就不能改变

　　　　　　　　　　　案例：

const number =[1,2,3,4,5];
number = [1,2,4];    //就会报错

（3.）作用域的注意事项：前提：在相同作用域或者块级作用域

　　　　　　　　　　1.不能使用let 关键字来重置 var 关键字声明的变量

　　　　　　　　　　2.不能使用var 关键字来重置let 关键字声明的变量

　　　　　　　　　　3.let 关键字在不同作用域，或不同块级作用域中式可以重新声明赋值的：

　　　　　　　　　　4.var关键字声明的变量再任何地方都可以进行修改

　　　　　　　　　　5.不能使用const 关键字来重置var 和 let 关键字声明的变量

　　　　　　　　　　6.const自身是不可以来重置const关键字声明的变量

（4.）var 与let 的区别：

　　　　1.var关键字定义的变量可以在使用后声明，也就是变量可以先使用在进行声明

　　　　2.let 关键字定义的变量则不可以在使用后声明，也就是变量需要先声明再使用

（5.）const 关键字

　　　　1.const 用于声明一个或多个变量，声明时必须要进行初始化，且初始化值不可再进行修改。

举例

  const pi = 30141592653589793;
   pi = 3.14；  //就会报错
   pi = pi +10  //就会报错

面试题总结：for循环中setTimeOut闭包

　　　　 let:特别注意在for循环的情况每一次都会重新创建一个所以闭包的不同的i

for( let i=0; i<3;i++){                        
    setTimeOut(()=>console.log(i),1)
}    
//个人理解setTimeOut 是前面执行完之后才进行执行。
//第一轮 i=0 进入stout，但不执行stout，stout里的i等于0，let块作用域的原因不穿回for里面，i++使用for里面的i 这时for里面的i=1
//第二轮 i=1 进入stout，但不执行stout，stout里的i等于1，let块作用域的原因不穿回for里面，i++使用for里面的i 这时for里面的i=2
//第三轮 i=2 退出循环 此时第一个stout的i=0，第二个stout的i=1，for循环已经退出，开始执行settimeout 输出0 1

　　var 闭包的是全局 i 所以输出的都是2

for (var i = 0; i < 2; i++) {           //个人理解：settimeout（stout）需要前面执行完才执行
            setTimeout(() => {          //第一轮 i=0 进入stout，但不执行stout，到for里面i++，这里i属于全局了全局的i此时等于1
                console.log(i);        //第二轮 i=1 进入stout，但不执行stout，到for里面i++，这里i属于全局了全局的i此时等于2
            }, 1000);                  //第三轮 i=2 在for里面判断退出for循环 此时全局i=2，这时候开始执行2个settimeout console出来的是全局i，统一是三
        }
        //输出： 2 2

let

{
            let a = 2;            //个人理解：settimeout（stout）需要前面执行完才执行
            {                       //第一轮 m=0 进入stout，但不执行stout，stout里的m等于m=0+100，此时m=100，let块作用域的原因不穿回for里面，m++使用for里面的m（0++） 这时for里面的m=1
                                    //第二轮 m=1 进入stout，但不执行stout，stout里的m等于m=1+100，此时m=101，let块作用域的原因不穿回for里面，m++使用for里面的m（1++） 这时for里面的m=2
                for (let m = 0; m < 2; m++)//第三轮 m=2 退出循环 此时第一个stout的m=100，第二个stout的m=101，for循环已经退出，开始执行settimeout 输出100 101
                {
                    setTimeout(() => {
                        m += 100;
                        console.log(m);
                    }, 500)
                }
            }
            a++;
            console.log(a);
            a++;
            console.log(a);
            a++;
            console.log(a);
        }
        //输出结果：3 4 5 100 101

var

{
            var a = 2;
            {
                for (var m = 0; m < 2; m++) {
                    setTimeout(() => {
                        m += 100;
                        console.log(m);
                    }, 500)
                }
            }
            a++;
            console.log(a);
            a++;
            console.log(a);
            a++;
            console.log(a);
        }
        //输出结果：3 4 5 102 202

二、箭头函数：

　　　　（1.）特点：

　　　　　　1.不需要function关键字来创建函数

　　　　　　2.省略 return 关键字

　　　　　　3.继承当前上下文的this 关键字

举例：1。数组的遍历：

var arr = [1,2,3];
var sum = 0
 arr.map(function(item,index,arr){
       return sum = sum+item
    })

简写为： arr.map(item=>itme+sum)

2.当函数有且仅有一个参数的时候，事可以省略括号的，

　　当你函数返回有且仅有一个表达式的时候可以省略{}

3.拓展的对象功能：

　　　　对象初始化简写

　　　　举例说明：

function people(name,age){
          return{
           name:name,
           age:age
    }
  }    
es6 简写

function people(name, age) {
        return {
            name,
            age
        };
    }

4.对象字面量方法赋值的语法

1. 如果键：值中的值和路由的名字一样可以只写键名。

2.在es6 中 yeild 可以阻塞代码的执行。

vue中ajax写法的演变

1. 从一开始的

this.$http({配置})

　　.then(function(data=>{

}))

2.第二个写法

generate function*(){ //generate 与 * 是配合yeild 的写法。加了yaild 就可以进行阻塞。

　　let data = yeild this.$http(配置)；

　　然后用data 去做你想要做的事情。

}

第三个写法： es7的写法 awit：等待异步

　　让我们程序员告别了then绑定回调函数的写法，让代码更的优雅

async function aaa(){

　　let data = awit this.$http({

　　});

　　//然后进行操作

　　}

　　es7规定 awit 必须出现在 async 修饰的函数里面。如果没有出现在async 这个函数里面，则会报错

注意： async/await 的本质是 es6中 generate *和yield写法的简化，是一个“语法糖”

语法糖：就是把一种不友好的变成有友好的。

（2）es6 let const

　　　1.let: 是块级作用域离它最近的大括号(特别注意在for循环的情况每一次都会重新创建一个)

　　　2.var 是函数作用域

（3.）键值对简写

　　　1.键值如果是函数可以省略 function 和冒号，

　　　2.键名和值是变量同名时可以简写

(4) 函数参数默认值

　　　　带默认值的参数一定要放在不带默认值参数的后面。

　（5）展开运算符（去壳运算符） ...展开运算符

　　　　可以展开对象

　　　　可以展开数组

（6）解构赋值

　　　　以解构对象和数组。可以大大的提高代码的优雅度

　　　　var arr = [1,2];

　　　　let [a,b] = arr;

　　　　console.log(a,b) a=1 b=2

　　(7) 箭头函数：

　　　　箭头函数中this 会穿透当前函数，指向父亲作用级中的this 用的最多的时候时ajax的回调函数。

　　　　箭头函数在声明完成后this已经确定指向后续不管用什么方法都无法改变这个指向！

　　　　用得最多得时候时ajax回调用函数，数组相应方法调用时！！

　　　　注意：对象得某一属性时一个函数，且这个函数访问了this. 这时千万不要用箭头函数，用了this就不在执行对象本身了。

　　　　8.promise 很重要

　　　　new Promise((resole,reject)=>{

　　　　}) 得到一个promise 成功和失败看代码块情况

　　　　Promise.resolve() // 马上得到一个成功得promise对象

　　　　Promise.reject() //马上得到一个失败得Promise 对象

　　　　Promise对象的then 函数会得到一个promise对象

　　　　Promise对象的Catch 函数执行后会得到一个 promise对象

posted @ 2020-12-09 23:27 诗亦0615 阅读(194) 评论(0) 收藏举报

刷新页面返回顶部

诗亦

es6、es7

公告