前言:哈喽,大家好,我是码喽的自我修养!今天给大家分享JavaScript ES6语法详解(下)!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到带大家,欢迎收藏+关注哦 💕
🌈🌈文章目录
一、函数优化
1、函数默认值
2、不定参数
3、箭头函数
4、箭头函数结合解构表达式
二、对象优化
1、es6给Object扩展了许多新的方法
2、Object.assign方法
3、 声明对象简写
4、对象的函数属性简写
5、对象的扩展运算符
三、map和reduce方法
1、map()
2、reduce()
四、模块化
一、函数优化
1、函数默认值
直接给参数写上默认值,没传就会自动使用默认值
function add(a, b = 1) {return a + b;}console.log(add(10)) //11
2、不定参数
不定参数用了表示不确定的参数个数,形如...变量名,由...加上要给具名参数标识符组成。具名参数只能放在参数列表的最后,并且有且只有一个不定参数
function fun(...params) {console.log(params.length)}fun(1, 2) // 2fun(1, 2, 3, 4) //4
3、箭头函数
//以前
var sum = function (a, b) {c = a + breturn c}
console.log(sum(2, 3)) // 5
//箭头函数
var sum2 = (a, b) => a + b;
console.log(sum2(2, 4)) // 6
4、箭头函数结合解构表达式
//以前function hello(person) {console.log("hello" + person.name)}hello(person); //helloqiyue//箭头函数let hello2 = params => console.log("hello" + person.name)hello2(person) //helloqiyue//箭头函数加解构表达式var hello3 = ({ name }) => console.log("hello" + name)hello3(person) //helloqiyue
二、对象优化
1、es6给Object扩展了许多新的方法
- key(obj):获取对象的所有key形成的数组
- value(obj):获取对象的所有value形成的数组
- entries(obj):获取对象所有的key和value形成的二维数组
const person = {name: "qiyue",age: 23,language: ["java", "js", "css"]}console.log(Object.keys(person)) //["name","age","language"]console.log(Object.values(person)) // ["qiyue",23,Array(3)]console.log(Object.entries(person)) //[Array(2),Array(2),Array(2)]
2、Object.assign方法
Object.assign方法 的第一个参数是目标对象,后面的参数都是源对象;将源对象的属性赋值到目标对象中
onst target = { a: 1 }const source1 = { b: 2 }const source2 = { c: 3 }Object.assign(target, source1, source2);console.log(target) //{a: 1, b: 2, c: 3}
3、 声明对象简写
//以前const name = 'sanyue'const age = 21//将属性值name,age分别赋给person1对象的name,age,后面是属性值const person1 = { name: name, age: age }console.log(person1) //{name: "sanyue", age: 21}//es6:属性名和属性值变量名一样,可以省略const person2 = {name,age}console.log(person2) //{name: "sanyue", age: 21}
4、对象的函数属性简写
let person3 = {name: "qiyue",//以前eat: function (food) {console.log(this.name + "在吃" + food);},//箭头函数中this不能使用,用对象.属性eat2: food => console.log(person3.name + "在吃" + food),eat3(food) {console.log(this.name + "在吃" + food)}}person3.eat("苹果") //qiyue在吃苹果person3.eat2("香蕉") // qiyue在吃香蕉person3.eat3("西瓜") //qiyue在吃西瓜
5、对象的扩展运算符
扩展运算符(...) 用于取出参数对象所有可遍历属性然后拷贝到当前对象
//拷贝对象(深拷贝)let p1 = { name: "qiyue", age: 23 }let obj = { ...p1 }console.log(obj)//{name: "qiyue", age: 23}//合并对象let age1 = { age: 24 }let name1 = { name: "qiyue" }let p2 = {}p2 = { ...age1, ...name1 }console.log(p2) //{age: 24, name: "qiyue"}//如果p2中原本有name,age属性会被覆盖
三、map和reduce方法
1、map()
map():接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
let arr = ["1", "3", "4", "23"]arr = arr.map(item => item * 2)console.log(arr) //[2, 6, 8, 46]
2、reduce()
reduce():为数组中的每一个元素依次执行回调函数,不包括数组中被删除或未被赋值的元素
语法:arr.reduce(callbace,[initialValue])
callback(执行数组中每个值的函数,包含四个参数)
- previousValue(上一次调用回调返回的值,或者是提供的初始值(initialValue))
- currentValue(数组中当前被处理的元素)、
- index(当前元素在数组中的索引)
- array(调用reduce的数组)
initialValue(作为第一次调用callback的第一个参数)
let arr1 = [2, 40, -10, 6]let result = arr1.reduce((a, b) => {return a + b}, 10)console.log(result)//48
四、模块化
什么是模块化:模块化就是把代码进行拆分,方便重复利用。类似Java中的导包,要使用一个包,必须先导包。而Js中没有包的概念,换来的就是模块
模块的功能主要有两个命令构成:export和import
- export命令用于规定模块的对外接口,export不仅可以导出对象,一切js变量都可以导出。比如:基本类型变量、函数、数组、对象
- import命令用于导入其他模块提供的功能
🚀 个人简介:某大型国企高级前端开发工程师,7年研发经验,信息系统项目管理师、CSDN优质创作者、阿里云专家博主,华为云云享专家,分享前端后端相关技术与工作常见问题~
💟 作 者:码喽的自我修养❣️
📝 专 栏:JavaScript深入研究🌈 若有帮助,还请 关注➕点赞➕收藏 ,不行的话我再努努力💪💪💪
更多专栏订阅推荐:
👍 前端工程搭建
💕 vue从基础到起飞✈️ HTML5与CSS3
⭐️ uniapp与微信小程序
📝 前端工作常见问题汇总
✍️ GIS地图与大数据可视化