Es6解构赋值详细实例讲解，ES6对象的解构赋值,在赋值声明是非常快捷方便的，以下用实例来说明如何使用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.前后数据结构也要保持一致, 不然解构的可能与原数组解构嵌套不同
5.1 数组类型 ''='' 如果前后类型不同是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]
5.2解构交换变量
var a = 1; var b = 2; console.log(a, b);//1 2 var [a, b] = [b, a]; console.log(a, b);// 2 1
5.3 数组的解构赋值 数组的解构赋值是按照前后数据的索引值一一对应的
var arr = [1, 2, 3, 4]; var [a, b, , d] = arr; console.log(a, b, d); //1 2 4,逗号也算一位
5.4 前后数据结构也要保持一致,不然解构的可能与原数组解构嵌套不同
var arr = [1, [2, 3, [4]]]; var [a, [b, c, [d]]] = arr; console.log(a, b, c, d); //1 2 3 4
5.5 数组解构时的默认值
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]
6 对象的解构赋值 对象的解构赋值是按照key一一解构
var obj = {
name: "张三",
age: 16,
tel: 110
}
let { name } = obj
console.log(name); //张三
7 解构数组,如果有两个值必须写在后面,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//直接报错
8 解构对象rest参数前写谁就不解构谁
let obj = {
name: '张三',
age: 16,
tel: 110
}
let { tel, ...obj2 } = obj;//写tel
//解构对象rest参数前写谁就不解构谁,因为rest参数是解构所有剩余参数,所以是{name: '张三', age: 16}
console.log(obj2); //{name: '张三', age: 16}
9 解构函数的剩余参数
function fn(a, b, ...c) {
// console.log(arguments);
console.log(a, b, c); //1 ,2 , [3, 4]
}
fn(1, 2, 3, 4)
10函数的形参可以写赋值形式,对象是键值对
function fn({ method = 'get',url}) {
console.log(method); //get
};
fn({ url: 'xxx', data: {} })
11 Js默认字符串前面有一个空字符串拼接
var str = "" + "德玛西亚" var str2 = "德玛西亚" console.log(str === str2); //true js默认字符串前面有一个空字符串拼接 console.log(str[1]); //玛 字符串可以用数组方式 console.log(str.length); //4
12 扩展运算符
let arr = [1, 2, 3]; let arr2 = [4, 5, 6]; console.log([...arr, ...arr2]);
完 !
