对象 | 任先生的笔记库

# 认知

var obj = {
  name: 'lencamo',
  age: 22
}

// 增
obj['nickName'] = 'ren' // 这种写法要注意键名要加引号

// 删💖
delete obj.age

// 改
obj.age = 21

// 查
console.log(obj.name)

# 一、对象基础

# 1、对象遍历 ⏳

方案一：for...in

遍历对象属性（对象的可枚举属性），可以使用for...in循环，也可以使用Object.keys()、Object.values()和Object.entries()方法获取可枚举属性的键名、键值、键值对数组。

遍历对象自身属性

默认情况下，for...in循环会遍历对象所有可枚举的属性，包括继承的可枚举属性。

const obj = {
  name: 'lencamo',
  age: 22
}

// 方案一：getOwnPropertyNames
Object.getOwnPropertyNames(obj).forEach((key) => {
  console.log(key)
  console.log(obj[key])
})

// 方案二：hasOwnProperty
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key)
    console.log(obj[key])
  }
}

for...in 遍历数组

for (i in arr) {
  // 索引值 🎈
  console.log(i)

  // 数组元素
  console.log(arr[i])
}

for (const key in obj) {
  // 属性名 🎈
  console.log(key)

  // 属性值
  console.log(obj[key]) // key作为变量，所以要使用[]
}

Object.keys(obj).forEach((key) => {
  console.log(key)
  console.log(obj[key])
})

Object.values(obj).forEach((value) => {
  console.log(value)
})

Object.entries(obj).forEach(([key, value]) => {
  console.log(key, value)
})

方案二：for...of

遍历可迭代对象（数组、Map、Set、字符串、TypedArray、arguments 对象、Nodelist 对象），可以直接使用for...of循环。

为对象手动添加 Iterator 接口

普通的对象是没有迭代器接口的，需要手动添加。

const obj = {
  name: 'lencamo',
  age: 22
}

// 手动添加 Iterator 接口
obj[Symbol.iterator] = function* () {
  for (const key in this) {
    yield [key, this[key]]
  }
}

// 遍历对象
for (const [key, value] of obj) {
  console.log(key, value)
}

const obj = {
  name: 'lencamo',
  age: 22
}

// 间接遍历
for (let key of Object.keys(obj)) {
  console.log(key)
  console.log(obj[key])
}

for in 和 for of 的区别 ✍️

Object.entries(obj) —— 返回一个包含该对象所有 [key, value] 键值对的数组

for in 是 ES5 标准，遍历的是 key

Object.keys(obj)：返回一个包含该对象所有的键的数组

for of 是 ES6 标准，遍历的是 value

Object.value(obj)：返回一个包含该对象所有的值的数组

# 2、对象合并

let obj1 = {
  name: 'lencamo'
}

let obj2 = {
  age: 22
}

// 方式一：ES6
console.log(Object.assign({}, obj1, obj2))

// 方式二：ES9
console.log({ ...obj1, ...obj2 })

# 3、数据映射

let data = ['aliyun', 'cloud_tencent', 'bce_baidu']

let temp = {
  aliyun: '阿里云',
  cloud_tencent: '腾讯云',
  bce_baidu: '百度云'
}

let mapData = data.map((item) => temp[item])
console.log(mapData) // ["阿里云", "腾讯云", "百度云"]

# 二、ES6 拓展

# 1、简写

let name = 'lencamo'

// 省略
let ojb = {
  // name:name
  name,
  // test: function() {}
  test() {
    //
  }
}

// 可以赋予动态属性名：
let funT = 'moduleA'

let ojb = {
  name,
  [funT + 'add']() {
    //
  }
}

# 2、扩展运算符

对象拷贝

let obj = {
  name: 'lencamo'
}

let objT = {
  ...obj
}
console.log(objT)

# 3、Object.is()

// 解决以前的痛点
console.log(Object.is({}, {}))
console.log(Object.is(NaN, NaN)) // true
console.log(Object.is(-0, +0)) // false

# 三、Date 对象

TIP

以国际标准时间（UTC）1970 年 1 月 1 日 00:00:00 作为时间的零点，而中国处于东八区（UTC + 8），所以相对于中国来说为：1970/1/1 08:00:00

new Date()

# 当前时间

Date() // 字符串类型

new Date() // Date类型  ---> (new Date()).toString()

# 1、时间实例

new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

new Date(dateString)

要注意的是 0 表示一月，依次类推，11 表示 12 月。

// 具体到秒（2023/2/25 12:01:24）
// 1、构造函数参数
new Date(1677301284702)
new Date(2023, 1, 25, 13, 01, 24)

// 2、dateString（可以被Date.parse()方法解析的字符串）
new Date('2023-2-15 12:01:24')
new Date('2023/2/15 12:01:24')
new Date('15, Feb, 2023 12:01:24')
// ……

# 2、时间戳 🎈

new Date(value);

// 当前时间戳
Date.now()
new Date().valueOf() // number类型
new Date().getTime() // number类型
// performance.now() // number类型 ---> 更加精确

// 使用时间戳
new Date(value) // Date类型

# 3、日期方法

在 js 中，我们可以直接使用某些方法，对时间戳进行转换：

耗时检测 ✍

// let timeStart = new Date().getTime()
let timeStart = performance.now()

let num = 10000000
while (num > 0) {
  num--
}

// const timeEnd = new Date().getTime()
let timeEnd = performance.now()

// 耗时检测
const elapsedTime = timeEnd - timeStart // 时间戳差值（间隔的毫秒数 ✍）
console.log(`耗时：${elapsedTime}毫秒`)

new Date().toUTCString() // "Thu, 16 Nov 2023 05:01:47 GMT"                 // UTC时间

new Date().toString() // "Thu Nov 16 2023 13:01:47 GMT+0800 (中国标准时间)"  // 中国时间
new Date().toDateString() // "Thu Nov 16 2023"
new Date().toTimeString() // "13:01:47 GMT+0800 (中国标准时间)"

new Date().toLocaleString() // "2023/11/16 13:01:47"
new Date().toLocaleDateString() // "2023/11/16"
new Date().toLocaleTimeString() // "13:01:47"

# 4、常用方法

下面以 get 系列方法为例，当然相对于的还有 set 系列方法

new Date().getFullYear()
new Date().getMonth() // 0-11月
new Date().getDate()

new Date().getDay() // 星期日为 0 ，星期一为1

new Date().getHours()
new Date().getMinutes()
new Date().getSeconds()

拓展

// 时区判断
new Date().getTimezoneOffset() / 60 // -480 : 表示与UTC时间差480分钟，即8小时

# 三、Math 对象

# 思考？

times = parseInt(Math.random() * (20 - 30 + 1) + 20, 10) // 定义总转动次数，随机20-30次

# 1、常见的 Math 方法

方法	解释
Math.abs(-1)	绝对值（正负值处理）

Math.round(3.2)	四舍五入取整（小数处理）
Math.floor(3.2)	向下取整（小数处理）
Math.ceil(3.2)	向上取整（小数处理）

Math.random()	返回`[0,1)`间的一个伪随机数

# 2、生成随机数 👀

一般情况下，我们指定的都是整数区间，并且想要获得的是一个整数值。

指定范围

function getRandomNum(min, max) {
  return Math.random() * (max - min) + min
}

getRandomNum(1.5, 6.5)

指定前后区间（整数）

// [a,b]
Math.round(Math.random() * (b - a) + a)

// [a,b)
Math.floor(Math.random() * (b - a) + a)
// (a,b]
Math.ceil(Math.random() * (b - a) + a)

// (a,b)
Math.floor(Math.random() * (b - a - 1) + a + 1)
Math.ceil(Math.random() * (b - a - 1) + a)

公式解析 🤔

Math.random() 会生成一个 [0,1) 的随机小数。
num 表示区间内可能的整数个数
Math.random() * num得到一个位于 [0, num) 内的随机数

// [0,num]
Math.round(Math.random() * num) // 四舍五入：[0, num) ---> [0, num]

// [0,num)
Math.floor(Math.random() * num) // 向下取整：[0, num) ---> [0, num)
// (0,num]
Math.ceil(Math.random() * num) // 向上取整：[0, num) ---> (0, num]

← --数据类型-- 数组🚩 →