JavaScript ES6语法详解(下)

前言。：大家好，#xff0c;大家好，我是码自我修养！今天与大家分享JavaScript ES6语法详解(下)！并提供具体代码，帮助您深入理解󿀌完全掌握#xff01;创作不容易󿀌如果你能帮助你，欢迎收藏+关注哦 。💕

🌈🌈文章目录。

💕

🌈🌈

文章目录。

I.函数优化。

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) // 2 fun(1, 2, 3, 4) //4。

3、箭头函数。

//之前var sum = function (a, b) { c = a + b return c }console.log(sum(2, 3)) // 5//箭头函数varrar 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方法。

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:属性名与属性值变量名相同c;可以省略 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、对象的扩展运算符。

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方法。

三、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()。

2、reduce()。

reduce():回调函数࿰依次执行数组中的每个元素c;不包括数组中删除或未赋值的元素。

语法：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地图和大数据可视化。