前言：哈喽，大家好，我是码喽的自我修养！今天给大家分享JavaScript ES6语法详解(下)！并提供具体代码帮助大家深入理解，彻底掌握！创作不易，如果能帮助到带大家，欢迎收藏+关注哦 💕

🌈🌈文章目录

一、函数优化

1、函数默认值

2、不定参数

3、箭头函数

4、箭头函数结合解构表达式

二、对象优化

1、es6给Object扩展了许多新的方法

2、Object.assign方法

3、 声明对象简写

4、对象的函数属性简写

5、对象的扩展运算符

三、map和reduce方法

1、map()

2、reduce()

四、模块化 

一、函数优化

1、函数默认值

直接给参数写上默认值，没传就会自动使用默认值

<code>function add(a, b = 1) {

return a + b;

}

console.log(add(10)) //11

2、不定参数

不定参数用了表示不确定的参数个数，形如...变量名，由...加上要给具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...params) {

console.log(params.length)

}

fun(1, 2) // 2

fun(1, 2, 3, 4) //4

3、箭头函数

//以前

var sum = function (a, b) {

c = a + b

return 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地图与大数据可视化