记录高级js学习(十二)ES6的基础

68 阅读2分钟
对象字面量的增强:
var obj = { 
    name, //属性名和变量名相等时候可以直接合并 
    foo(){}, //方法的简写 
    [name+"123"]:"hahaha" //计算属性名 
}
数组和对象的解构赋值:
      var arr = [1,2,3]
      // 数组解构
      var [item1,item2,item3] = arr
      // 解构后面元素
      var [, , item4] = arr   
      // 解构一个元素,剩余元素放到一个数组
      var [item5,...newArr] = arr
      // 为解构的元素设置默认值
      var [i1,i2,i3,i4="aaa"] = arr

      var obj = {
        name:"why",
        age:18,
        height:1.88
      }
      // 对象的解构
      var {name} = obj
      // 解构并设置别名
      var {name:newName} = obj
      // 默认值
      var {address:newAddress = "深圳"} = obj

      // 可以在函数的参数以及返回值进行结构
      function foo({name,age}){
        console.log('name: ', name);
        console.log('age: ', age);
      }
      foo(obj)

对象若找不到属性会顺着原型链解构:

let o2 = {name:"张三",age:!5}
let o1 = Object.create(o2)
let {name,age} = o1 //此时o1为空对象,查找属性顺着原型链找到o2
console.log('name: ', name);   //张三
console.log('age: ', age);   //15

穿插一道解构赋值面试题,文章末尾给答案,根据打印结果,求?的值

image.png

let和const (从这里开始就不会再用var了~)
  1. const声明后的值不能修改,但传引用类型可以改里面的内容,毕竟地址也是没变的
  2. let和const都不能重复声明
  3. 关于作用域提升:let和const其实跟var一样在初始化的时候就有创建出来的,但是在声明前是不允许被访问的,所以不能称为作用域提升(也称之为暂时性死区)
  4. let和const声明的对象是不会存在window对象里的,在最新的标准里,全局上下文创建的变量叫做VE,也就是变量环境,这个变量环境在具体引擎实现的时候,实际上使用的是一个hashMap,一个叫_variables的对象来保存我们声明的变量,这个对象的类型是VariableMap,并且查找对象的时候也是从这个数据结构查找的
块级作用域

对let/const/function/class有效(外部无法访问),但是大部分浏览器为了实现兼容,还是能访问到块级作用域的function的,只有只支持ES6以上的浏览器才不能访问

      {
        let num = 1 
        function foo(){
          console.log("调用");
        }
      }
      foo()  //调用
      console.log(num); // num is not undefined

if/switch/for会形成块级作用域,在for语句中定义i最好用let不然有可能会访问到全局变量

image.png

前面解构赋值的答案如下:

不传设置默认值{a:1,b:2}进行解构,传了对象直接解构,有就取,没有就拿默认值

      // 解构传入的参数或者默认值
      function foo({a=123,b=456}={ a:1 , b:2}){
        // console.log(a);
        return {a,b}
      }
      console.log(foo()); // { a:1, b:2 }
      console.log(foo({a:3})); // { a:3, b:456 }
      console.log(foo({})); // { a:123, b:456 }