# 认知

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]
更新于 : 7/8/2024, 10:21:14 AM