ES6对象

最新推荐文章于 2024-03-17 18:23:20 发布
最新推荐文章于 2024-03-17 18:23:20 发布
阅读量256 收藏
点赞数
文章标签： es6 javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45463061/article/details/126524216
版权

一、对象成员速写

示例1
const name = "xiaocan";
const age = 23;
const sayHello = function () {
  console.log(`my name is ${this.name}`);
};
// 过去的方式
const user = {
  name: name,
  age: age,
  sayHello: sayHello,
};

// 速写
const user = {
  name,
  age,
  sayHello,
};

user.sayHello();
示例2
// 以前的方式
const myMath1 = {
  sum: function (a, b) {
    //...
  },
  random: function (min, max) {
    //...
  },
};
// 速写
const myMath2 = {
  sum(a, b) {
    //...
  },
  random(min, max) {
    //...
  },
};

二、展开运算符

示例1
const arr = [1, 5, 34, 5, 21, 5];
const result = Math.max(1, 5, 34, 5, 21, 5);  // Math.max(...arr)
示例2
const o1 = {
  a: 1,
  b: 2,
};
const o2 = {
  c: 3,
  d: 4,
};
// 对对象的展开
const o3 = {
  ...o1,
  ...o2,
};
console.log(o3);   // { a: 1, b: 2, c: 3, d: 4 }
示例3
const arr = [1, 3, 4, 5];
const arr1 = [42, 42, ...arr, 13];
console.log(arr1); //[42,42,1,3,4,5,13]
示例4
const user = {
  name: "小灿",
  age: 23,
};
const user2 = {
  ...user,
  name: "小灿同学",
};
console.log(user2);  // { name: '小灿同学', age: 23 }

三、解构

示例1
const user = {
  name: "小灿",
  age: 23,
  address: {
    province: "广东",
    city: "深圳",
  },
};
const { name, age } = user;
const {
  address: { city },
} = user;
console.log(name, age, city);  // 小灿 23 深圳
示例2
const arr = [1, 2, 3, 4, 5];
const [a, b, c] = arr;
console.log(a, b, c); // 1 2 3
const [, , d, , e] = arr;
console.log(d, e); // 3 5
const [, , f, ...arr2] = arr;
console.log(f, arr2); // 3 [ 4, 5 ]
示例3
let a = 1,
  b = 2;
// 交换两个变量
[b, a] = [a, b];
console.log(b, a); // 1 2
示例4
// 在参数的位置对传入的对象进行解构
function method({ a, b }) {
  console.log(a, b); // 1 2
}
const obj = {
  a: 1,
  b: 2,
  c: 3,
};
method(obj);
示例5
const users = [
  { name: "小灿同学", age: 23 },
  { name: "小灿", age: 23 },
];
// 在遍历的时候进行解构
for (const { name, age } of users) {
  console.log(name, age);
  // 小灿同学 23
  // 小灿 23
}

四、属性描述符

对于对象中的每个成员，JS使用属性描述符来描述它们

const users = { name: "小灿同学", age: 23 };

上面的对象，在JS内部被描述为

{
  // 属性 name 的描述符
  name: {
    value: "小灿同学",
    configurable: true, // 该属性的描述符是否可以被重新定义
    enumerable: true, // 该属性是否允许被這历，会影响for-in循环
    writable: true, // 该属性是否允许被修改
  },
  // 属性 age 的描述符
  age: {
    value: 23,
    configurable: true, // 该属性的描述符是否可以被重新定义
    enumerable: true, // 该属性是否允许被這历，会影响for-in循环
    writable: true, // 该属性是否允许被修改
  },
};

ES5提供了一系列的API，针对属性描述符进行操作

1. Object.getOwnPropertyDescriptor(obj, propertyName)

该方法用于获取一个属性的描述符

const user = { name: "小灿同学", age: 23 };
console.log(Object.getOwnPropertyDescriptor(user, "name"));
/**
{ 
  value: '小灿同学', 
  writable: true, 
  enumerable: true, 
  configurable: true 
}
*/
2. Object.defineProperty(obj, propertyName, descriptor)
const user = { name: "小灿同学", age: 23 };
Object.defineProperty(user, "name", {
  value: "小灿",
  writable: false, // 该属性不允许被修改
  enumerable: false, // 该属性是否允许被這历，for-in循环循环不出来，读取user也看不见user.name
  configurable: false, // 该属性的描述符不可以被重新定义
});
user.name = "xiaocantongxue";
console.log(user); // { age: 23 }
console.log(user.name); // 小灿

for (const key in user) {
  if (Object.hasOwnProperty.call(user, key)) {
    console.log(key); // age, 遍历不到name
  }
}
3. getter 和 setter

属性描述符中有两个特殊的配置，分别为 get 和 set，通过它们，可以把属性的取值和赋值变为方法调用

const obj = {};
Object.defineProperty(obj, "a", {
  get() {
    // 读取属性a时，会运行该函数，得到的是该函数返回的值
    return 1;
  },
  set(val) {
    // 设置属性a时，会把val传值进去，调用该方法
    console.log(`执行了这句话,传进来的值是:${val}`);
  },
});

console.log(obj.a); // 1
obj.a = 100; // 执行了这句话,传进来的值是:100
console.log(obj.a); // 1

const obj = {};
let innerValue = 1;
Object.defineProperty(obj, "a", {
  get() {
    // 读取属性a时，会运行该函数，得到的是该函数返回的值
    return innerValue;
  },
  set(val) {
    // 设置属性a时，会把val传值进去，调用该方法
    console.log(`将传进来的val值复制给innerValue变量`);
    innerValue = val;
  },
});

console.log(obj.a); // 1
obj.a = 100; // 将传进来的val值复制给innerValue变量
console.log(obj.a); // 100

五、键值对

Object.keys(obj)：获取对象的属性名组成的数组
Object.values(obj)：获取对象的值组成的数组
Object.entries(obj)：获取对象属性名和属性值组成的数组
Object.fromEntries (entries）：将属性名和属性值的数组转换为对象

const user = { name: "小灿同学", age: 23 };

console.log(Object.keys(user)); // [ 'name', 'age' ]
console.log(Object.values(user)); // [ '小灿同学', 23 ]
console.log(Object.entries(user)); // [ [ 'name', '小灿同学' ], [ 'age', 23 ] ]
console.log(
  Object.fromEntries([
    ["name", "小灿同学"],
    ["age", 23],
  ])
); // { name: '小灿同学', age: 23 }

/**
  打印:
  name: '小灿同学'  
  age: 23
 */

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
  /**
    name: '小灿同学'  
    age: 23
  */
}

六、冻结

使用 Object.freeze(obj）可以冻结一个对象，该对象的所有属性均不可更改

const obj = {
  a: 1,
  b: 2,
  c: {
    d: 3,
  },
};
Object.freeze(obj); //冻结对象obj
obj.a = "a"; // 不报错，代码无效
obj.b = "b"; // 不报错，代码无效
delete obj.a; // 不报错，代码无效
obj.c = "c"; // 不报错，代码无效

obj.c.d = "d"; // 对象c没有被冻结，有效

console.log(obj);  // { a: 1, b: 2, c: { d: 'd' } }

可以使用 Object.isFrozen 来判断一个对象是否被冻结

七、相同性判断

Object.is 方法，可以判断两个值是否相同，它和===的功能基本一致，区别在于：

  • NaN和NaN相等
  • +0和-0不相等
console.log(Object.is(1, 2)); // false
console.log(Object.is("1", 1)); // false
console.log(Object.is(NaN, NaN)); // true
console.log(Object.is(+0, -0)); // false

八、Set

set是一种数据集合，用于保存一系列唯一的值
MDN参考

1.数组去重
// Use to remove duplicate elements from the array
const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5];
console.log([...new Set(numbers)]);  // [2, 3, 4, 5, 6, 7, 32]

八、Map

Map是一种数据集合，用于保存一系列键值对(key-value pair)，其中，键(key)可以是任何类型，并且是唯一的
MDN参考

九、练习题

练习题1
const obj = {
  a: 1,
  b: 2,
  c: 3,
};
// 遍历对象的所有属性名
for (const key of Object.keys(obj)) {
  console.log(key);
}

// 遍历对象的所有属性值
for (const value of Object.values(obj)) {
  console.log(value);
}

// 遍历对象的所有属性名和属性值
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

// 复制obj的所有属性到一个新的对象
const newObj = {
  ...obj,
};
console.log(newObj);

// 复制obj除a以外的所有属性到一个新的对象
const { a, ...removeAObj } = newObj;
console.log(removeAObj);
练习题2
// 根据下面的调用和注释，完成函数 createOptions

function createOptions(options) {
  options = options || {};
  const defaultOptions = { time: 1000, speed: 50, text: "" };
  return {
    ...defaultOptions,
    ...options,
  };
}

console.log(createOptions()); // { time: 1000, speed: 50, text: '' }

console.log(
  createOptions({
    time: 500,
  })
); // { time: 500, speed: 50, text: '' }

console.log(
  createOptions({
    time: 500,
    text: "hello world",
  })
); // { time: 500, speed: 50, text: 'hello world' }
练习题3
// 遍历对象 user， 将其每一个属性变为 getter 和 setter， 保持读写功能不变
// 读取属性时，输出：正在读取xxx属性，值为xxx
// 给属性赋值时，输出：正在设置xxx属性，新的值为xxx
const user = {
  name: "小灿同学",
  age: 23,
  sex: "male",
};

for (let [key, innerValue] of Object.entries(user)) {
  Object.defineProperty(user, key, {
    get() {
      console.log(`正在读取 ${key} 属性，值为${innerValue}`);
      return innerValue;
    },
    set(val) {
      innerValue = val;
      console.log(`正在设置 ${key} 属性，设置为${innerValue}`);
    },
  });
}
user.name; // 正在读取 name 属性，值为小灿同学
user.name = "小灿"; // 正在设置 name 属性，设置为小灿同学
user.name; // 正在读取 name 属性，值为小灿

user.age; // 正在读取 age 属性，值为23
user.age = 22; // 正在设置 age 属性，设置为23
user.age; // 正在读取 age 属性，值为22

user.age += 10; // 正在读取 age 属性，值为22      正在设置 age 属性，设置为32

笔记整理自渡一教育袁老师课堂

TANGYC_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
ES6面向对象
yh95926的博客
03-23 100
语言发展史 机器语言 > 汇编语言 > 面向过程 > 面向对象 > 模块的系统 > 框架 > 系统api 面向对象 ES5面向对象（伪的）的写法 <script> //以函数的形式来写对象 function Person(name,age){ this.name=name; ...
ES6的对象和类
NewSouls的博客
07-15 110
ES6的对象和类对象的扩展1.对象属性的扩展2.对象的新增的apiclass关键字的基本使用1.传统的构造函数的问题 :2.类的用法3.ES6中的类的本质4.类的特点 对象的扩展 1.对象属性的扩展 1.对象属性的简单赋值方式 可以将变量名直接放进对象中, 解析的时候 将变量名解析为属性名 变量值解析为属性值 2.对象方法的简单赋值 可以省略function关键字 var name = "喻文波"; var gender = "男"; var p = { //原来
ES6入门—ES6 对象与类的定义
weixin_44009656的博客
05-29 1838
本文介绍了 ES6 对象的属性简化写法、对象合并、字符串；ES6 类的定义及使用的 constructor() 方法、Class 表达式和 super 关键字。
[ES6] 对象
前端
04-20 888
当参数不是对象时，会先将参数转为对象然后返回,而 null 和 undefined 不能转化为对象，单独作为参数或者作为第一个参数都会报错；，如果被拓展的对象是复杂对象，对于复杂属性(对象、数组)仅仅是将指针指向了复杂属性，而简单的属性则是复制了一份。如果目标对象和源对象有同名属性，或者多个源对象有同名属性，则后面的属性会覆盖前面的属性。当使用动态属性的时候，不可同时使用简化表达，否则会报错！属性合并的时候，如果出现同名属性会保留靠后(靠右)的属性值。assign 的属性同拓展运算符，拷贝是浅拷贝。
Es6对象方法-
weixin_61573754的博客
08-25 1253
ES6对象方法.
ES6——对象
xun__xing的博客
08-08 609
对象一、新增语法1.成员速写2.方法速写3.计算属性名二、对象新增API1.Object.is2.Object.assign3.Object.getOwnPropertyNames4.Object.setPrototypeOf三、面向对象简介1.面向过程2.面向对象四、构造函数1.传统的构造函数的问题2.类1.基础2.类的可计算的成员名3.getter和setter4.静态成员5.字段初始化器（ES7）6.类表达式3、类的继承1.基础2.新方法3.逻辑方面 一、新增语法 1.成员速写 如果对象字面量初始化时
es6数组和对象常用方法
似水流年QC的博客
05-13 2488
随着es6的发布，新版标准提供了很多新的api，给了开发人员提供了很大的帮助，操作简便，提升效率，现在主要讲下es6提供新的操作数组和对象的一些常用方法。 数组的操作 Object.entries() 作用：将一个对象中可枚举属性的键名和键值按照二维数组的方式返回。若对象是数组，则会将数组的下标作为键值返回。 Object.entries({ one:1,two: 2}) // [['one', 1], ['two', 2]] Object.entries([1, 2]) ...
ES6 对象的新功能与解构赋值介绍
10-17
本文将深入探讨ES6对象的新功能和解构赋值。 一、字面量语法扩展 在ES6中，对象字面量语法得到了显著增强，使得创建和操作对象更加简便。例如，可以使用简写属性名称，将变量名直接作为属性名，省略冒号和等号： ...
ES6对象操作实例详解
10-15
主要介绍了ES6对象操作,结合实例形式详细分析了ES6对象创建、赋值、比较、合并等相关操作技巧与注意事项,需要的朋友可以参考下
ES6中定义类和对象的方法示例
10-16
在ES6中，JavaScript引入了类（Class）的概念，使得面向对象编程更加符合传统OOP语言的语法。这里我们将详细探讨ES6中定义类和对象的相关知识点，包括类的定义、继承、静态方法和静态属性。 1. **类的定义**： 在...
JavaScript ES6 对象
volit的博客
10-04 148
用于比较两个对象是否相等，与===的差异是，+0，-0被认为是两个不同的实体，NaN的值相等。3.symbol键按照它们被加入对象的顺序排序。2.字符串键按被加入对象的顺序排序。1.数字键按升序排序。
ES6基础教程
liwan09的博客
07-10 2612
ES6， 全称 ECMAScript 6.0 ，是 JavaScript 的下一个版本标准，2015.06 发版。其目标为使JavaScript可以用来编写复杂的大型应用程序，成为企业级开发语言。 ECMAScript和JavaScript的关系：前者是后者的规格；后者是前者的一种实现。 ECMAScript 背景 JavaScript 是大家所了解的语言名称，但是这个语言名称是商标（ Oracle 公司注册的商标）。因此，JavaScript 的正式名称是 ECMAScript 。1996年11月，
ES6中的对象和类（构造函数、继承）
m0_72816706的博客
02-24 285
ES6中的对象、类（构造函数、继承）
学习ES6（十一）-- 对象
qq_34975445的博客
04-09 234
JavaScript支持扩展数据类型。JavaScript对象是定义自定义数据类型的好方法。 一个对象是含有一组密钥值对一个实例。与原始数据类型不同，对象可以表示多个或复杂的值，并且可以在其生命周期内进行更改。这些值可以是标量值或函数，甚至可以是其他对象的数组。 进一步讨论了用于定义对象的句法变体 对象初始化器 像原始类型一样，对象也具有文字语法：花括号（{and}）。以下是定义对象...
ES6——对象（方法总结）
fenger_c的博客
08-19 1082
1
ES6对象及数组扩展
最新发布
kang_k的博客
03-17 768
* 示例 translate 方法内传入 helper.add 作为转换用的映射函数，由于该方法使用来this.diff属性，因此需要为Array.from()方法提供第三个参数来指定this的值，从而无须通过调用bind()方法或其他方式来指定this的值了。否则返回 false。c、如果有一个操作数为 对象，另一个操作数不是，则调用对象的 valueOf() 方法，用得到的基本类型值按照前面的规则进行比较。1、fill(val) 当传人一个值时，fill() 方法会用这个值重写数组中的所有值。
ES6系列之对象方法总结
Itwaldner的博客专栏
02-28 1254
属性 Object.prototype.value：设置属性的值 Object.prototype.writable：是否可修改属性的值；默认为false Object.prototype.enumerable：是否可枚举属性；默认为false Object.prototype.configurable：是否可修改属性的特性；默认为false 对象创建 Object.create(prototype[,propertiesObject]) 使用指定的原型对象及其属性去创建一个新的对象。 var
【深入理解ES6】对象
wgf1997的博客
03-27 1390
对象的分类 普通对象（Ordinary Object）：具备Javascript 对象所有的默认内部行为。 特异对象（Exotic Object）：具备某些与默认行为不符的内部行为。 标准对象（Standard Object）：ES6中定义的对象，例如 Array、Date 等。既可以是普通对象，又可以是特异对象 内置对象(Build-in Object)：JS脚本中的环境对象（window、document等） 对象字面量的扩充 属性初始值简写 // ES5 function create.
es6 对象数组求和
11-25
可以使用reduce()方法对对象数组进行求和，具体实现如下所示： ```javascript let arr = [{x: 1}, {x: 2}, {x: 3}]; let sum = arr.reduce((prev, cur) => prev + cur.x, 0); console.log(sum); // 输出：6 ``` 上述...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

TANGYC_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值