目录
一、解构
给右侧值匹配对应的变量 等号两侧模式一定要匹配
数组解构
/**
* 解构：从数组或者对象中提取值，给变量进行赋值操作就是解构
* 解构遵循就是模式匹配 等号左右两侧模式相等
* 数组对象解构
*/
// 1.完全解构
// let [a,b,c,d,e] = [1,2,3,4,5];
// console.log(a,b,c,d,e);
// 2.完全解构
// let [a,b,c,d,e] = [1,2,3,[4,5,6],7];
// console.log(a,b,c,d,e);
// 3.不完全解构
// let [a,b,c,[d],e] = [1,2,3,[4,5,6],7];
// console.log(a,b,c,d,e);
// 4.集合解构 拓展运算符
// let [a,...b] = [1,2,3,4,5];
// console.log(a,b);
// let [...a] = [1,2,3,4,5];
// 5.默认值解构 当没有与变量匹配的值默认值就生效
// let [a=4,b=5,c=6] = [1,2,3];
// console.log(a,b,c);
// 默认值也可以是函数
// function foo(){
// console.log('我是foo函数');
// }
// let [a=foo()] = [1,2,3];
// console.log(a);
// let arr = [1,2,3,4,5];
// let [...a] = arr;
// console.log(a===arr);
对象解构
/**
* 对象解构 右侧对象中的属性要完成解构 左侧变量必须和属性同名
*/
// let {foo:foo,bar:bar} = {foo:'hello',bar:'world'};
// let {foo,bar} = {foo:'hello',bar:'world'};
// let {foo,bar} = {foo:'hello',bar:'world'};
// console.log(foo,bar);
// 2.重命名解构 对变量名进行重命名
// let {foo:baz} = {foo:'hello',bar:'world'};
// console.log(baz)
// 3.嵌套解构 ----使用ab变量接收hello world
// let obj={p:['hello',{y:"world"}]};
// let {p:[a,{y:b}]} = obj;
// console.log(a,b);
// 4.默认值 给对象变量设置默认值
// let {x:y=2} = {x:1};
// console.log(y);
const [a, b, c, ...d] = [1, 2, 3, 11, 999];
const { e, f, f1, g, ...h } = { f: 4, g: 5, i: 6, j: 7 };
console.log(a, b, c, d, e, f1, g, h);//1 2 3 [11,999] undefined undefined 5 {i:6 j:7}
字符串解构
// 1.字符串解构 数组和对象对字符串完成解构
let [a,b,c,d,e] = 'hello';
console.log(a,b,c,d,e);
let [...arr] = 'hello';
console.log(arr);
let {toString,valueOf,length} = 'hello';
console.log(toString,valueOf,length);
数值解构
// 5.对数值解构
let {toString,valueOf} = 10;
console.log(toString,valueOf);
布尔值解构
// 6.对布尔值进行解构
let {toString,valueOf} = true;
console.log(toString,valueOf);二、箭头函数
()=>{}
内部没有this属性 不再使用arguments保存实际参数 用rest参数
和普通函数区别?
1.普通函数内部this指向全局对象，方法指向调用者
2.箭头函数没有this，this访问声明箭头函数外部作用域中的this
3.普通函数使用arguments保存实际参数，箭头函数使用rest参数保存实际参数
4.普通函数有原型对象，箭头函数没有原型对象
5.外观上 ()=>{}
// var foo = function(){}
// let foo = (形式参数)=>{
// 函数体
// }
// foo(实际参数)
// function test(){
// console.log(this,arguments);
// }
// test(1,2,3);
let foo = (...res)=>{
// 箭头函数内部没有this属性 不再用arguments属性保存实际参数 用rest参数保存实际参数
// console.log(this,arguments,'arguments')
console.log(res);
}
foo(1,2,3)
// 普通函数有原型对象 箭头函数没有原型对象
// function bar(){}
// console.log(bar.prototype.toString(),foo.prototype);三、拓展运算符 ...
用到左侧是聚合
let [...arr] = [1,2,3,4,5]
用到右侧是展开
{
name:"zhangsan",
age:12,
gender:"male"
}
let obj1 = {...obj};
/**
* 1.用到左侧是聚合
* 2.用到右侧是展开
* 用于解构对象和数组 拓展运算符(可以实现深拷贝) rest参数
*/
var arr = [1,2,3,4,5];
let [...res] = arr;
console.log(res,res===arr);
let obj = {
name:'zhangsan',
age:12,
gender:'male'
}
// 用到右侧展开
let obj1 = {...obj};
console.log(obj1,obj1===obj);
var params = {
page:1,
pageSize:10
}
var form = {
title:"",
type:"",
status:""
}
let temp = {
...params,
...form
}
for(let key in temp){
if(!temp[key]){
delete temp[key]
}
}
console.log(temp);
