北京网站建设网络推广公司,利用表格布局做网站步骤,vs做网站添加背景,媒体网站建设目录
一、解构 数组解构 对象解构 字符串解构 数值解构 布尔值解构
二、箭头函数
和普通函数区别?
三、拓展运算符 ... 一、解构 给右侧值匹配对应的变量 等号两侧模式一定要匹配 数组解构
/*** 解构#xff1a;从数组或者对象中提取值#xff0c;给变量进行赋值操作就…目录
一、解构 数组解构 对象解构 字符串解构 数值解构 布尔值解构
二、箭头函数
和普通函数区别?
三、拓展运算符 ... 一、解构 给右侧值匹配对应的变量 等号两侧模式一定要匹配 数组解构
/*** 解构从数组或者对象中提取值给变量进行赋值操作就是解构 * 解构遵循就是模式匹配 等号左右两侧模式相等 * 数组对象解构 */// 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 [a4,b5,c6] [1,2,3];// console.log(a,b,c);// 默认值也可以是函数// function foo(){// console.log(我是foo函数);// }// let [afoo()] [1,2,3];// console.log(a);// let arr [1,2,3,4,5];// let [...a] arr;// console.log(aarr); 对象解构
/*** 对象解构 右侧对象中的属性要完成解构 左侧变量必须和属性同名*/
// 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:y2} {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.箭头函数没有thisthis访问声明箭头函数外部作用域中的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,resarr);let obj {name:zhangsan,age:12,gender:male
}
// 用到右侧展开
let obj1 {...obj};
console.log(obj1,obj1obj);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);
