ES6学习笔记-扩展的对象功能、解构

最新推荐文章于 2023-05-08 23:27:36 发布

原创最新推荐文章于 2023-05-08 23:27:36 发布 · 215 阅读

0 ·

CC 4.0 BY-SA版权

ES6 专栏收录该内容

5 篇文章

订阅专栏

本文深入探讨ES6带来的代码简化技巧，包括对象字面量的简洁语法、浅拷贝方法Object.assign()的使用，以及解构赋值的便利性。通过具体示例，展示如何利用这些新特性重构ES5代码，提升开发效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

以下内容整理自阮一峰的《ECMAScript 6 入门》第三章、一些其他网络资源及帅气博主的自我理解。

扩展的对象功能

在ES5中，我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的情况

function people(name,age){
	return {
		name:name,
		age:age
	}
}

键值对重名,ES6可以简写成以下：

function people(name,age){
 	return{
 		name,
 		age
 	}
}

ES6同样改进了为对象字面量方法赋值的语法。

ES5为对象添加方法：

const people = {
	name:'lux',
	getName:function(){
		console.log(this.name);
	}
}

ES6通过省略冒号与funciton关键字，让其变得更整洁。
不过话说回来，我真心觉得es6对function这个关键字有着杀父之仇，能弄掉的地方全拿掉了。

const people = {
	name:'will',
	getName(){
		console.log(this.name);
	}
}

ES6浅拷贝 Object.assign()
Object.assign()可以把任意多个源对象自身可枚举的属性拷贝给目标对象，然后返回目标对象。第一参数即为目标对象。在实际项目中，我们为了不改变源对象，一般会把目标对象传为{}

const objA = { name:'cc',age:18 }
const objB = { address:'beijing' }
const objC = {} // 这个为目标对象
const obj = Object.assign(objC,objA,objB)

//我们来把 这几个变量输出来看看
 console.log(objA)   // { name: 'cc', age: 18 }
console.log(objB) // { address: 'beijing' }
console.log(objC) // { name: 'cc', age: 18, address: 'beijing' }
console.log(obj) // { name: 'cc', age: 18, address: 'beijing' }


//我们发现，目标对象objC的值也被改变了。
//so,如果objC也是你的一个源对象的话。请在objC前面填在一个目标对象{}
const obj = Object.assign({},objC,objB,objA)

解构

数组和对象是JS中最常用的表示形式。为了简化提取信息，ES6新增了解构，它能够按照一定的模式，从数组和对象中提取值，对变量进行赋值。

在ES5中我们提取对象中的信息形式如下：

const people = {
	name:'will',
	age:23
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)

也就是说在es5中，我们只能一个一个获取。
但是有了解构，就能让我们从对象或者数组中取出数据存为变量。

//对象
const people = {
	name:'will',
	age:23
}
const { name,age } = people
console.log(`${name} --- ${age}`)

//数组
const color = ['red','blue']
const [first, second] = color
console.log(first)
console.log(second)

老铁，整两道测试题吧

    // 请使用 ES6 重构一下代码

    // 第一题
    var jsonParse = require('body-parser').jsonParse

    // 第二题
    var body = request.body
    var username = body.username
    var password = body.password

1.import { jsonParse } from 'body-parser'

2.	const { body , body:{ usename , password } } = request