ECMAScript 6 es6介绍对象字字面量简写对象展开符

2024-01-24 23:49 youxin 阅读(2) 评论(0) 编辑收藏举报

es6介绍：

基本用法

ES6 允许使用“箭头”（=>）定义函数。

var f = v => v;

// 等同于
var f = function (v) {
  return v;
};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
  return num1 + num2;
};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。

// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

下面是一种特殊情况，虽然可以运行，但会得到错误的结果。

let foo = () => { a: 1 };
foo() // undefined

上面代码中，原始意图是返回一个对象{ a: 1 }，但是由于引擎认为大括号是代码块，所以执行了一行语句a: 1。这时，a可以被解释为语句的标签，因此实际执行的语句是1;，然后函数就结束了，没有返回值。

如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。

let fn = () => void doesNotReturn();

箭头函数可以与变量解构结合使用。

const full = ({ first, last }) => first + ' ' + last;

// 等同于
function full(person) {
  return person.first + ' ' + person.last;
}

箭头函数使得表达更加简洁。

const isEven = n => n % 2 === 0;
const square = n => n * n;

上面代码只用了两行，就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样写醒目。

箭头函数的一个用处是简化回调函数。

// 普通函数写法
[1,2,3].map(function (x) {
  return x * x;
});

// 箭头函数写法
[1,2,3].map(x => x * x);

另一个例子是

// 普通函数写法
var result = values.sort(function (a, b) {
  return a - b;
});

// 箭头函数写法
var result = values.sort((a, b) => a - b);

下面是 rest 参数与箭头函数结合的例子。

const numbers = (...nums) => nums;

numbers(1, 2, 3, 4, 5)
// [1,2,3,4,5]

const headAndTail = (head, ...tail) => [head, tail];

headAndTail(1, 2, 3, 4, 5)
// [1,[2,3,4,5]]

总结：

1、当只有一个参数时，参数外面可以不要圆括号；
2、当函数体内只有一行代码时，函数体可以不需要花括号"{ ... }"包裹；
3、当函数体内只有一行代码时，关键词return 可以省略。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

ES6增强了对象字面量，可以简写方式定义

const obj = {
　　hello4(firstname) {
　　　　return `Hello ${firstname}`;
　　}
}

关于ES6增强对象字面量

相对于ES5, ES6的对象字面量得到了很大程度的增强。这些改进我们可以输入更少的代码，同时语法更易于理解。

那就一起来看看对象增强的功能。增强功能包括：对象字面量简写(Object Literal Shorthand)、对象方法简写(Object Method Shorthand)、计算对象键(Object key)、对象解构(Object Destructuring)。

ES5对象字面量

var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat
};

ES6对象字面量

在ES6中如果你的对象属性名和当前作用域中的变量名相同，那么现在不必在把这个type或heat书写两次。ES6的对象会自动的帮你完成键到值的赋值。

var type = 'rock';
var heat = '50%';
var music = {
type,
heat
};

ES5返回一个对象

function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些运算
return { type: type, heat: heat };
}

ES6返回一个对象

function getMusic() {
var type = 'rock';
var heat = '50%';
// 一些运算
return { type, heat };
}

ES5对象方法

var type = 'rock';
var heat = '50%';
var music = {
type: type,
heat: heat,
description: function() {
return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
}
}

ES6对象方法
使用ES6语法重写上面的music对象，不必写上对象键然后还要写上function关键字。只需要方法名和圆括号再跟上花括号即可。代码如下：

var type = 'rock';
var heat = '50%';
var music = {
type,
heat,
description() {
return '当前音乐风格为' + this.type + ',' + this.heat + '都喜欢';
}
}

A shorthand notation is available, so that the keyword function is no longer necessary.

// Shorthand method names
const o = {
  property(parameters) {},
};

ES6计算对象键
在ES5中对象可以理解为一个关联数组或一个hashmaps。在ES5中创建对象的键就三种object.xx、object[‘xx’]、Object.defineProperty可以用来构建对象的键。

var heat = '50%';
var music = {
rock: heat
};

ES6计算对象键
在ES6中可以使用变量作为对象键，比如field作为我们对象的键，heat作为这个键的值。代码如下：

var heat = '50%';
var field = 'rock';
var music = {
[field]: heat
}

ES6对象键计算表达式
在ES6中可以使用变量作为对象键，这个变量还可以是表达式，因为[]方式是返回[]里面表达式的结果作为对象键

var heat = '50%';
var field = 'Rock and Roll';
var music = {
[field.toLowerCase()]: heat
}

还可以使用不同的数组方法为我们的对象键赋值，使用[]将会计算对象的键值。代码如下：

let people = [20, 25, 30];
let music = {
people,
[people]: 'They all love rock and roll',
[people.length]: 'object key is 3',
[{}]: 'empty object'
}
console.log(music); // Object {3: "object key is 3", people: Array[3], 20,25,30: "They all love rock and roll", [object Object]: "empty object"}
console.log(music.people); // [20, 25, 30]
console.log(music['people']); // [20, 25, 30]
console.log(music[people]); // They all love rock and roll
console.log(music[people.length]); // object key is 3
console.log(music['[object Object]']); // empty object

ES6对象解构
把对象或者数组中的数据取出使用是我们经常要使用的功能，ES6有新的功能让我们快捷拆分对象和数组中的值。在=号右边是要解构的对象或数组，=号左边是要接收创建的变量。代码如下：

对象解构
=号左边的类型要和右边对应，比如右边是一个对象类型则左边也需要使用对象字面量包裹。右边是数组则左边也需要使用数组包裹。

let music = {
type: 'rock',
heat: '50%'
};
let { type, heat } = music;
console.log(type, heat); // rock 50%

数组解构
let people = [20, 25, 30]
let [young, oldYoung] = people;
console.log(young, oldYoung) // 20 25

对象解构重命名
有时候我们不想使用解构对象中的键来新创建变量，需要解构后重命名为新的变量名。这是可以使用重命名解构语法

let music = {
type: 'rock',
heat: '50%'
}
let { type: newType, heat: newHeat } = music;
console.log(newType, newHeat); // rock 50%

Destructuring_assignment

解构重命名

let obj = {a:{b:{c:'test'}}}

const {a:newA} = obj

console.log(a)//报错 a找不到，因为a已经被重命名为newA

console.log(newA)//{b:{c:'test'}}

Es6在对象结构时可以同时重命名，如：

let res = {
data: [1,2,3],
name: '礼拜',
age: 23
}
直接对 res 解构

let {name,age,data} = res;
可得到name、age、data三个值

现在想给data重新命名为 arr 以方便取用，

let {data: arr} = res;

此时，arr 能取到之前data 中的值

原文链接：https://blog.csdn.net/redatao/article/details/109438038

解构其他类型
如果在一个对象中的值包含其他的数据类型同样是可以解构出来的。比如值是数组，代码如下：

let music = {
type: ['rock', 'pop', 'jazz'],
heat: '50%',
}
let { type, heat } = music;
console.log(type, heat); // ["rock", "pop", "jazz"] "50%"

解构函数参数
这是一个非常实用的功能，可以将传递进来的函数对象参数直接解构为变量，在函数中可以方便调用。这只需要简单的对象解构函数即可完成。代码如下：

function getMusic({ type, heat }) {
　　console.log(type, heat);
}
getMusic({ type: ‘rock’, heat: ‘80%’}); // rock 80%

ES6中对对象字面量进行了增强，称之为 Enhanced object literals(增强对象字面量)。字面量的增强主要包括以下几个部分：

属性的简写:Property Shorthand
方法的简写:Method Shorthand
计算属性名:Computed Property Names

let name = "harry"
let age = 18

let obj = {
    name, //在vscode里画删除线，无需在意这是因为window对象中有name
    age,
    a:function(){

    },
    b(){

    },
    //箭头函数没有this
    arrow:()=>{
        console.log(this); //undefined
    },

    //computed property name (计算属性名)
    [name+123]:'哈哈哈'  //计算属性名格式: [表达式]:值
}

console.log(obj);

使用场景

更简洁的对象定义：使用这些特性可以使对象定义更加简洁和清晰。
动态属性名：计算属性名特性允许在定义对象时动态确定属性名。
对象方法：方法简写使得在对象中定义函数变得更加方便。、

对象展开符

mapState 函数返回的是一个对象。我们如何将它与局部计算属性混合使用呢？通常，我们需要使用一个工具函数将多个对象合并为一个，以使我们可以将最终对象传给 computed 属性。但是自从有了对象展开运算符 (opens new window)，我们可以极大地简化写法：

computed: {
  localComputed () { /* ... */ },
  // 使用对象展开运算符将此对象混入到外部对象中
  ...mapState({
    // ...
  })
}
‘‘’

一 对象的展开运算符
1.展开对象
对象不能直接展开,必须在{}中展开
less复制代码const apple={
    color:'红色',
    shape:'球型',
    taste:'甜'
};
console.log({...apple});
console.log({...apple}===apple); 这个是false
//对象的展开:把属性罗列出来,用逗号分隔,放到一个{}中,构成新对象
console.log({...apple});

2.合并对象
less复制代码const apple={
    color:'红色',
    shape:'球型',
    taste:'甜'
};
const pen={
    color:'黑色',
    shape:'圆柱形',
    use:'写字'
};
console.log({...pen});
console.log({...pen,...apple});
console.log({...apple,...pen});
console.log({pen,apple});
console.log({...pen,apple});

对象展开运算符的应用
1.复制对象
const a={x:1,y:2};
const c={...a};
console.log(c,c===a); false

2.用户参数和默认参数

add(1,2)
const logUser=({
    username="Zhangsan",
    age=0,
    sex='male'
}={})=>{
    console.log(username,age,sex);
}
const logUser = (userParam) => {
  const defaultParam = {
    username: "Zhangsan",
    age: 0,
    sex: "male",
  };
  // const { username, age, sex } = { ...defaultParam, ...userParam };
  // console.log(username, age, sex);
  const param={...defaultParam,...userParam}
  console.log(param.username);
};
logUser()

会员力量，点亮园子希望

刷新页面返回顶部

有心故我在