seo最好的网站源码,温岭专业营销型网站建设地址,上海做电子商务网站的公司,网站后台不显示文章内容目录 箭头函数
箭头函数 this
箭头函数与普通函数的区别
解构赋值
数组解构
对象解构
展开运算符 与 剩余运算符 箭头函数
箭头函数是一种声明函数的简洁语法#xff0c;它与普通函数并无本质的区别#xff0c;差异性更多体现在语法格式上。
script// const …目录 箭头函数
箭头函数 this
箭头函数与普通函数的区别
解构赋值
数组解构
对象解构
展开运算符 与 剩余运算符 箭头函数
箭头函数是一种声明函数的简洁语法它与普通函数并无本质的区别差异性更多体现在语法格式上。
script// const fn function () {// console.log(123)// }// 1. 箭头函数 基本语法const fn () {console.log(123)}fn()// const fn (x) {// console.log(x)// }// fn(1)// 2. 只有一个形参的时候可以省略小括号// const fn x {// console.log(x)// }// fn(1)// // 3. 只有一行代码的时候我们可以省略大括号// const fn x console.log(x)// fn(1)// 4. 只有一行代码的时候可以省略return// const fn x x x// console.log(fn(1))// 5. 箭头函数可以直接返回一个对象// const fn (uname) ({ uname: uname })// console.log(fn(刘德华))/script
总结 箭头函数属于表达式函数因此不存在函数提升 箭头函数只有一个参数时可以省略圆括号 () 箭头函数函数体只有一行代码时可以省略花括号 {}并自动做为返回值被返回 箭头函数用把()和{ }连在一起,语法更简洁 当只有一条return语句和return可以一起省略 形参只有一个小括号可以省略其余情况全部要加() 当只有一条return语句并且返回的是一个对象把这个对象用()包裹起来 箭头函数 this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层沿用this。
const fun () {console.log(this)// console.log(arguments) // 报错 箭头函数没有arguments}const obj {a: 1,f: () {// this objconst fn () {console.log(this)}fn()},}fun(1, 2)new fun()obj.f.call(obj)
箭头函数与普通函数的区别 1、箭头函数没有this它内部的this由所处作用域上下文决定 2、箭头函数没有arguments普通函数有 3、箭头函数不能new
解构赋值
解构意思就是分解一个东西的结构,可以用一种类似数组的方式定义N个变量可以将一个数组中的值按照规则赋值过去。 解构赋值是一种快速为变量赋值的简洁语法本质上仍然是为变量赋值分为数组解构、对象解构两大类型。
数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法如下代码所示 script// 普通的数组let arr [1, 2, 3]// 批量声明变量 a b c // 同时将数组单元值 1 2 3 依次赋值给变量 a b clet [a, b, c] arrconsole.log(a); // 1console.log(b); // 2console.log(c); // 3
/script
嵌套赋值
// let [x, [y],z][ 1,[ 2.1,2.2]];
// console.log( x, y,z );//1 2.1 undefined
let [ x, [y,z] ] [ 1,[ 2.1,2.2]];
console.log(x,y,z);//1 2.1 2.2
let [json ,arr ,num] [ {name : english },[ 1,2 ],3 ];
console.log( json , arr , num ) ;
//{name: english }name: english [[Prototype]]: Object (2) [1, 2] 3
省略赋值
let [, , x ] [ 1,2,3 ];
console.log (x ) ;//3 总结: 1赋值运算符日左侧的[]用于批量声明变量右侧数组的单元值将被赋值给左侧的变量 2变量的顺序对应数组单元值的位置依次进行赋值操作 3变量的数量大于单元值数量时多余的变量将被赋值为undefined 4变量的数量小于单元值数量时可以通过...获取剩余单元值但只能置于最末位 5允许初始化变量的默认值且只有单元值为undefined时默认值才会生效 注∶支持多维解构赋值比较复杂后续有应用需求时再进一步分析
对象解构
对象解构是将对象属性和方法快速批量赋值给一系列变量的简洁语法如下代码所示
script// 普通对象const user {name: 小明,age: 18};// 批量声明变量 name age// 同时将数组单元值 小明 18 依次赋值给变量 name ageconst {name, age} userconsole.log(name) // 小明console.log(age) // 18
/script
1、属性可以无序 2、默认接受属性名的变量名与属性名相同 3、可以通过旧属性名:新变量名
展开运算符 与 剩余运算符
. . . 展开运算符 用于函数实参或者赋值号右边 . . . 剩余运算符 用于赋值号左边或函数形参
script// ... 展开运算符 用于函数实参或者赋值号右边console.log(...[1, 2, 3]) // 1,2,3console.log(Math.max(...[1, 2, 3])) // Math.max(1,2,3)console.log(Math.max.apply(null, [1, 2, 3]))const o { a: 1, b: 2 }const obj { ...o, c: 3 }console.log(obj)// ... 剩余运算符 用于赋值号左边或函数形参const [a, ...args] [1, 2, 3, 4]console.log(args) // [2,3,4]const fn (...args) {console.log(args)let sum 0args.forEach((item) {sum item})return sum}console.log(fn(1))console.log(fn(1, 2))console.log(fn(1, 2, 3))/script
