Es6的解构赋值，以及作用域

1 全局作用域

解释:var变量是定义在window上

    var a = 123;
 
​    console.log(a); //123
 
​    console.log(window); //window a: 123

2 函数级作用域

function fn() {
​      var b = 234;
​      console.log(b); //234
      console.log(window); //没有b属性,因为它是函数级作用域,有c属性.因为在函数不定义直接使用属于全局变量
 
​      c = 555;
​      console.log(window); //window c: 555 ,因为在函数不定义直接使用属于全局变量
 
​    }
 
​    fn()

3 变量提升

 // 变量提升将变量的声明会提升至本作用域的最顶部
 
​    console.log(a); //undefined
​    var a = 123;
​    //上面代码相当于
​    var a;
​    console.log(a);
​    a = 123;

4  const和let

// let和const声明的变量不存在变量提升 因为let和const声明变量后会将当前代码块转化为一个暂 
   //时性的死区
 
​    //暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有 
   //等到声明变量的那一行代码出现，才可以获取和使用该变量
 
​    // let声明的变量首次可以不赋值 let声明的变量在相同作用于内不能重复定义, const声明的常量必须 
  //有默认值 const声明的是常量 不能重新赋值 但是如果值是引用数据类型 数据内部的属性是可以修改

 const a = 1;
​    console.log(a);//1
​    a = 2 //报错  无法直接修改常量
 
​    const obj = {
​      name: '张三'
​    }
 
​    obj.name = '李四';
​    console.log(obj.name); //李四

5 解构赋值

总结: 
      1 解构赋值就是按照一定的模式将对象或者数组中的数据取出赋值给变量,数组解构按照索引等号两边相对应,对象解构按照key解构,
 
      2 无论是对象的解构赋值还是数组的解构赋值 "等号" 两边的数据类型都要保持一致, 不然是undefined.前后数据结构也要保持一致, 不然解构的可能与原数组解构嵌套不同

数组类型 ''='' 如果前后类型不同是undefined

var arr = [1, 2, 3, 4];
var a, b, c, d = arr //类型不同
console.log(a, b, c); //undefined undefined undefined
console.log(d) //(4) [1, 2, 3, 4]

解构交换变量

var a = 1;
var b = 2;
console.log(a, b);//1 2
var [a, b] = [b, a];
console.log(a, b);// 2 1

数组的解构赋值 数组的解构赋值是按照前后数据的索引值一一对应的

var arr = [1, 2, 3, 4];
var [a, b, , d] = arr;
console.log(a, b, d); //1 2 4,逗号也算一位

前后数据结构也要保持一致,不然解构的可能与原数组解构嵌套不同

var arr = [1, [2, 3, [4]]];
var [a, [b, c, [d]]] = arr;
console.log(a, b, c, d); //1 2 3 4

数组解构时的默认值

var arr = [1, 2, 3, 4, undefined];
var [a, b, c, d, e = 5] = arr; //直接赋值默认值
console.log(a, b, c, d, e);//1 2 3 4 5
let arr = [];//三个空数组,有时候直接用数组长度作为判断条件
arr.length = 3;
console.log(arr); //(3) [empty × 3]

对象的解构赋值 对象的解构赋值是按照key一一解构

var obj = {
name: "张三",
age: 16,
tel: 110
}
let { name } = obj
 
console.log(name); //张三

解构数组,如果有两个值必须写在后面,rest参数

let arr = [1, 2, 3];
let [a, ...b] = arr;//rest参数是解构所有剩余参数
console.log(a) //1
console.log(b) //[2,3]
 
错误写法
 
let arr = [1, 2, 3]
 
let [...a, b] = arr//直接报错

解构对象rest参数前写谁就不解构谁

let obj = {
name: '张三',
age: 16,
tel: 110
}
 
let { tel, ...obj2 } = obj;//写tel
 
//解构对象rest参数前写谁就不解构谁,因为rest参数是解构所有剩余参数,所以是{name: '张三', age: 16}
 
console.log(obj2); //{name: '张三', age: 16}

解构函数的剩余参数

function fn(a, b, ...c) {
// console.log(arguments);
console.log(a, b, c); //1 ,2 , [3, 4]
}
 
fn(1, 2, 3, 4)

函数的形参可以写赋值形式,对象是键值对

function fn({ method = 'get',url}) {
console.log(method); //get
};
 
fn({ url: 'xxx', data: {} })

Js默认字符串前面有一个空字符串拼接

var str = "" + "德玛西亚"
 
var str2 = "德玛西亚"
 
console.log(str === str2); //true js默认字符串前面有一个空字符串拼接
 
console.log(str[1]); //玛 字符串可以用数组方式
 
console.log(str.length); //4

扩展运算符

let arr = [1, 2, 3];
let arr2 = [4, 5, 6];
console.log([...arr, ...arr2]);

前端小白一个，如果有写的不全或者写错的，欢迎评论区补充。