移动互联网站开发,广州冼村是什么地方,易县做网站的在哪,ppt模板免费背景文章目录 一、解构赋值二、解构数组 1. 变量赋值2. 交换变量3. 默认值4. 不完全解构5. 解构数组嵌套6. 与...运算符结合使用 三、解构对象 1. 获取成员2. 对象赋值3. 默认值4. 解构嵌套对象 四、解构函数 1. 函数的参数2. 函数返回值 四、其他解构 1. 字符串3. 其他数据类型 …文章目录 一、解构赋值二、解构数组 1. 变量赋值2. 交换变量3. 默认值4. 不完全解构5. 解构数组嵌套6. 与...运算符结合使用 三、解构对象 1. 获取成员2. 对象赋值3. 默认值4. 解构嵌套对象 四、解构函数 1. 函数的参数2. 函数返回值 四、其他解构 1. 字符串3. 其他数据类型
一、解构赋值
解构赋值主要用来从数组和对象中提取值对变量进行赋值。[]是专门解构数组使用的{}是专门解构对象使用的
二、解构数组
1. 变量赋值
ES6之前的写法
var a1 1,b1 2;
console.log(a1,b1) // 1 2var a2,b2;
a2 11;
b2 22;
console.log(a2,b2) // 11 22var arr [jack,rose];
console.log(arr[0],arr[1]) // jack rose
12345678910解构赋值写法
var [a1, b1] [1, 2];
console.log(a1,b1) // 1 2var a2,b2;
[a2, b2] [11, 22];
console.log(a2,b2) // 11 22var arr [jack,rose];
var [a3,b3] arr;
console.log(a3,b3) // jack rose
12345678910
- 上面代码表示可以从数组中提取值按照对应位置对变量赋值。
12. 交换变量
ES6之前的写法
var a1,b2,c;
c a;
a b;
b c;
console.log(aa,bb) // a2 b1
12345解构赋值写法
var a1,b2;
[a, b] [b, a];
console.log(aa,bb) // a2 b1
1233. 默认值
如果解构不成功变量的值就等于undefined。
let [a] [];
let [x, y] [1];
console.log(a); // undefined
console.log(x); // 1
console.log(y); // undefined
12345可以在表达式左边的数组中为任意对象预设默认值。防止从数组中取出一个值为undefined的对象
let a, b, c, d;
[a5, b7] [1];
[c,d] [2]
console.log(a,b,c,d); // 1 7 2 undefined12345当数组成员为null的时候默认值就不会生效
let [x 1] [undefined];
console.log(x); // 1let [y 1] [null];
console.log(y); // null
123454. 不完全解构
等号左边的模式只匹配一部分的等号右边的数组。这种情况下解构依然可以成功。
let [x, y] [1, 2, 3];
console.log(x, y); // 1 2let [a, [b], c] [1, [2, 3], 4];
console.log(a, b, c); // 1 2 4
123455. 解构数组嵌套
let arr [1, [[2,22], 3]];
let [a,[b,c]] arr;
console.log(a, b, c); // 1 [2,22] 3
1236. 与...运算符结合使用
let [x, y] [1, 2, 3];
console.log(x); // 1
console.log(y); // 2let [a, ...b] [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
1234567三、解构对象 对象的属性没有次序变量必须与属性同名才能取到正确的值。 如果变量与属性不同名需要先匹配属性名在定义变量。 左边定义的变量名与右边对象的属性名相同时
let {x, y} {x: 1, y: 2,}
// 相当于 {x: x, y: y} {x: 1, y: 2,}
console.log(x, y) // 1 2
123左边定义的变量名与右边对象的属性名不相时
let {x: a, y: b} {x: 1, y: 2,}
// 此时xy是用来匹配右边对象的属性名ab才是变量
console.log(a, b) // 1 2
1231. 获取成员
解构赋值对可以用来提取 JSON 对象中的数据
const obj {name : jack,age : 18,gender : 男
}
let name obj.name;
let age obj.age;
let gender obj.gender;
12345678解构赋值的方式从对象中获取成员
const obj {name : jack,age : 18,gender : 男
}
//前面的{}表示我要从obj这个对象中获取成员了
//name age gender 都得是 obj 中有的成员
//obj 必须是一个对象
let { name,age,gender } obj;
1234567892. 对象赋值
声明后赋值
let obj {a: 6, b: 4};
let {a, b} obj;
console.log(a,b); // 6 4
123无声明赋值
let a, b;
({a, b} {a: 1, b: 2});
console.log(a, b); // 1 2
1233. 默认值
指定对象的解构默认值。
let {a 3} {};
console.log(a) // 3let {b, c 5} {b: 1};
console.log(b, c) // 1 5let {d: e 3} {};
console.log(e) // 3let {f: g 3} {f: 5};
console.log(g) // 5
1234567891011当对象成员为null的时候
let [x 22] {x: undefined};
console.log(x); // 22let [y 1] {y: null};
console.log(y); // null
123454. 解构嵌套对象
与数组一样解构也可以用于嵌套结构的对象。
let obj {a: [Hello,{ y: JavaScript }]
};
let { a: [x, { y }] } obj;
console.log(x, y); // Hello JavaScript
12345678
let obj {a:{b:{x:1,y:2}}
}
let {a,a:{b},a:{b:{x,y}}} obj;
console.log(a); // {b: {…}}
console.log(b); // {x: 1, y: 2}
console.log(x, y); // 1 2
123456789101112四、解构函数
1. 函数的参数
函数的参数也可以使用解构赋值。
function fn([x, y]){return x y;
}
fn([1, 2]); // 3
1234函数参数的解构也可以使用默认值。
function fn({x 8,y} {}) {console.log(x,y);return [x, y];
}
fn(); // [8, undefined]
fn({}); // [8, undefined]
fn({x: 9}); // [9, undefined]
fn({x: 6, y: 4}); // [6, 4]
123456782. 函数返回值
当函数返回一个数组时使用解构处理更方便
function fn() {return [1, 2];
}
let a, b;
[a, b] fn();
console.log(a,b); // 1 2
123456忽略一个函数的某些返回值
function fn() {return [1, 2, 3];
}
let a, b;
[, b, c] fn();
console.log(b, c); // 2 3
123456忽略一个函数的全部返回值
function fn() {return [1, 2, 3];
}
[ , , ] fn();
1234四、其他解构
1. 字符串
字符串会被转换成了一个类似数组的对象。
let [a, b, c] ES6;
console.log(a, b, c) // E S 6
12字符串的length属性也能进行解构赋值
let {length : l} ES6;
console.log(l) // 3
123. 其他数据类型
当等号左边为对象右边为 数值、布尔值、undefined和null时
let {a1: b1} 666;
console.log(b1); // undefined
let {a2: b2} true;
console.log(b2); // undefined
let {a3: b3} undefined;
console.log(b3); // 报错
let {a4: b4} null;
console.log(b4); // 报错
12345678
