常见内置类二

一、数组类型 Array

创建方式

字面量

var names = ['aaa', 'bbb', 'ccc']

var products = [
	{ id: 100, name: '鼠标', price: 88, count: 0 },
	{ id: 101, name: '键盘', price: 200, count: 0 },
	{ id: 102, name: '耳机', price: 99, count: 0 },
]

类 Array

var arr1 = new Array()
var arr2 = new Array('aaa', 'bbb', 'ccc')

console.log(arr1, arr2, arr3)
// arr1 []
// arr2 ['aaa', 'bbb', 'ccc']
// arr3 [empty × 5]

访问元素

• 索引： 访问到返回元素，访问不到返回undefined

ar names = ["aaa", "bbb", "ccc"]

console.log(name[0])  // aaa

• at()： 访问到返回元素，访问不到返回undefined；正数从前往后访问，负数从后往前访问

var names = ['aaa', 'bbb', 'ccc']

console.log(names.at(0)) // aaa
console.log(names.at(-1)) // ccc

修改元素

var names = ['aaa', 'bbb', 'ccc']

names[0] = 'AAA'
console.log(names) // ['AAA', 'bbb', 'ccc']

新增元素

var names = ['aaa', 'bbb', 'ccc']

names[3] = 'ddd'
console.log(names) // ['aaa', 'bbb', 'ccc', 'ddd']

names[10] = 'jjj'
console.log(names) // ['aaa', 'bbb', 'ccc', 'ddd', empty × 6, 'jjj']

删除元素

var names = ['aaa', 'bbb', 'ccc']

delete names[0]

console.log(names) // [empty, 'bbb', 'ccc']
console.log(names[0]) // undefined

尾部添加和删除元素

• push()： 添加多个

var names = ['aaa', 'bbb', 'ccc']

names.push('ddd', 'eee')

console.log(names) // ['aaa', 'bbb', 'ccc', 'ddd', 'eee']

• pop()： 删除一个

var names = ['aaa', 'bbb', 'ccc']

names.pop()

console.log(names) // ['aaa', 'bbb']

头部添加和删除元素

• unshift()： 添加多个

var names = ['aaa', 'bbb', 'ccc']

names.unshift('111', '222')

console.log(names) // ['111', '222', 'aaa', 'bbb', 'ccc']

• shift()： 删除一个

var names = ['aaa', 'bbb', 'ccc']

names.shift()

console.log(names) // ['bbb', 'ccc']

任意位置添加和删除元素

splice(start, deleteCount) 删除、添加、替换；

• start 从什么位置开始操作；
• deleteCount 删除元素的个数

var names = ['aaa', 'bbb', 'ccc']

// 1、删除
names.splice(0, 1)
console.log(names) // ['bbb', 'ccc']

// 2、添加
names.splice(0, 0, 'aaa')
console.log(names) // ['aaa', 'bbb', 'ccc']

// 3、替换
names.splice(2, 3, 'ddd', 'eee')
console.log(names) // ['aaa', 'bbb', 'ddd', 'eee']

属性:length

length: 可写

var names = ['aaa', 'bbb', 'ccc']

console.log(names.length) // 3

names.length = 4

console.log(names) // ['aaa', 'bbb', 'ccc', empty]

遍历数组

• for循环

var names = ['aaa', 'bbb', 'ccc']

for (var i = 0; i < names.length; i++) {
	console.log(names[i])
}

// aaa bbb ccc

• for..in

var names = ['aaa', 'bbb', 'ccc']

for (var index in names) {
	console.log(names[index])
}

// aaa bbb ccc

• for..of

var names = ['aaa', 'bbb', 'ccc']

for (item of names) {
	console.log(item)
}

// aaa bbb ccc

截取数组

slice(start, end) [start, end)

var names = ['aaa', 'bbb', 'ccc']

console.log(names.slice(1)) // ['bbb', 'ccc']
console.log(names.slice(0, 3)) // ['aaa', 'bbb', 'ccc']

拼接数组

concat()

var arr1 = [1, 2, 3]
var arr2 = [4, 5, 6]
var arr3 = [7, 8, 9]

console.log(arr1.concat(arr2, arr3)) // [1, 2, 3, 4, 5, 6, 7, 8, 9]

数组元素连接成字符串

join(separator)

var arr = [1, 2, 3]

console.log(arr.join('*')) // 1*2*3

查找元素

• indexOf(searchElement)： 从前往后查找，查找到返回索引值，查找不到返回-1

var arr = ['aaa', 'bbb', 'ccc', 'ddd']

console.log(arr.indexOf('aaa')) // 0

• lastIndexOf(searchElement)： 从后往前查找，查找到返回索引值，查找不到返回-1

var arr = ['aaa', 'bbb', 'ccc', 'ddd']

console.log(arr.lastIndexOf('aaa')) // 0

• includes()： 查找到返回true，反之返回false

var arr = ['aaa', 'bbb', 'ccc', 'ddd']

console.log(arr.includes('aaa')) // true

• find()： 查找到返回具体值，反之返回undefined

var students = [
	{ id: 100, name: 'Mocha' },
	{ id: 200, name: 'Latte' },
]

// for循环查找
var stu1 = null
for (var i = 0; i < students.length; i++) {
	if (students[i].id === 100) {
		stu1 = students[i]
		break
	}
}
if (stu1) {
	console.log(stu1) // { id: 100, name: "Mocha" }
} else {
	console.log('查询不到！')
}

// find查找
var stu2 = students.find(function (item) {
	return item.id === 200
})
console.log(stu2) // {id: 200, name: 'Latte'}

• findIndex()： 查找到返回索引值，反之返回-1

var students = [
	{ id: 100, name: 'Mocha' },
	{ id: 200, name: 'Latte' },
]

var stu = students.findIndex(function (item) {
	return item.id === 100
})
console.log(stu) // 0

排序和反转

• sort()： 谁小谁在前 - 升序；谁大谁在前 - 降序

// 基本类型排序
var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]
var sortNum = nums.sort(function (item1, item2) {
	return item2 - item1
})

console.log(sortNum) // [99, 20, 10, 9, 5, 3, 2, 1, 0]
console.log(sortNum.reverse()) // [0, 1, 2, 3, 5, 9, 10, 20, 99]

// 复杂类型排序
var students = [
	{ id: 100, name: 'Mocha', age: 18 },
	{ id: 101, name: 'Latte', age: 17 },
	{ id: 102, name: 'Cappuccino', age: 22 },
]
var sortStu = students.sort(function (item1, item2) {
	return item2.age - item1.age
})
console.log(sortStu)
/* 
[
    { id: 102, name: "Cappuccino", age: 22 },
    { id: 100, name: "Mocha", age: 18 },
    { id: 101, name: "Latte", age: 17 }
]
*/

• reverse()： 反转数组

var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]

console.log(nums.reverse()) //  [10, 5, 9, 20, 99, 2, 0, 3, 1]

高阶函数

• forEach()： 遍历数组

var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]

nums.forEach(function (item) {
	console.log(item)
})

• filter()： 过滤数组

var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]

var filterNum = nums.filter(function (item) {
	return item % 2 === 0
})

• map()： 映射数组

var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]

var mapNums = nums.map(function (item) {
	return item ** 2
})

• reduce()： 累加数组

var nums = [1, 3, 0, 2, 99, 20, 9, 5, 10]

var reduceNums = nums.reduce(function (preValue, item) {
	return preValue + item
}, 0)

console.log(reduceNums)

• 综合练习

- 过滤所有偶数，映射所有偶数的平方然后求和

var nums = [1, 5, 10, 8, 15, 20]

var totalNums = nums
	.filter(function (item) {
		return item % 2 === 0
	})
	.map(function (item) {
		return item ** 2
	})
	.reduce(function (preValue, item) {
		return preValue + item
	}, 0)

console.log(totalNums) // 564

二、Date 类型

术语： GMT(某个时区的时间)；UTC(标准的时间)

创建 Date 对象的方式

• 无传参，获取当前时间

var date1 = new Date()

console.log(date1) // Sun Apr 30 2023 08:00:00 GMT+0800 (中国标准时间)

• 有传参，时间字符串

var date = new Date('2023-04-30')

console.log(date) // Sun Apr 30 2023 08:00:00 GMT+0800 (中国标准时间)

• 传入具体的年月日时分秒毫秒

var date = new Date(2023, 03, 30, 18, 00, 00, 111)

console.log(date) // Sun Apr 30 2023 18:00:00 GMT+0800 (中国标准时间)

• 传入 Unix 时间戳：是个整数值，表示自 1970 年 1 月 1 日 00:00:00UTC 以来的毫秒数，1s -> 1000ms

var date = new Date(1000)

console.log(date) // Thu Jan 01 1970 08:00:01 GMT+0800 (中国标准时间)

日期的表示方式

1. RFC 2822 标准

   • 默认的时间格式就是 RFC2822 标准, new Date()

2. ISO 8610 标准

   • new Date().toISOString()

RFC 转 ISO

• YYYY：年份，0000~9999
• MM：月份，01-12
• DD：日，01~31
• T：分割日期和时间，没有特殊含义，可以省略
• HH：小时，00~24
• mm：分钟，00~59
• ss：秒，00~59
• sss：毫秒
• Z：时区

var date = new Date()

console.log(date) // Tue Apr 18 2023 17:33:18 GMT+0800 (中国标准时间)
console.log(date.toISOString()) // 2023-04-18T09:33:53.859Z

获取所需要的时间信息

(Date 对象获取)

• getFullYear：获取年份（4 位数）
• getMonth：获取月份，从 0 到 11
• getDate：获取当月的具体日期，从 1 到 31
• getHours：获取小时
• getMinutes：获取分钟
• getSeconds：获取秒钟
• getMilliSeconds：获取毫秒
• getDay：获取一周的第几天，从 0（星期天）开始到 6（星期六）

var date = new Date()

var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var hour = date.getHours()
var minute = date.getMinutes()
var second = date.getSeconds()
var weekday = date.getDay()

console.log(year, month, day, hour, minute, second, weekday)

设置时间信息

（Date 对象设置）- 不常用

• setFullYear：设置年份（4 位数）

var date = new Date()

date.setFullYear('2024')

console.log(date)

Date 对象转成时间戳

• 获取当前时间戳

var timestamp1 = Date.now()

console.log(timestamp1)

• getTime()转成时间戳

var date1 = new Date()
var date2 = new Date('2023-04-18')

var timestamp1 = date1.getTime()
var timestamp2 = date2.getTime()
console.log(timestamp1, timestamp2)

• valueOf()转成时间戳

var date1 = new Date()
var date2 = new Date('2023-04-18')

var timestamp1 = date1.valueOf()
var timestamp2 = date2.valueOf()
console.log(timestamp1, timestamp2)

• +date转成时间戳

var date1 = new Date()
var date2 = new Date('2023-04-18')

console.log(+date1)
console.log(+date2)

案例练习

var startTime = Date.now()

for (var i = 0; i < 100000; i++) {
	console.log(i)
}

var endTime = Date.now()

console.log((endTime - startTime) / 1000 + '秒')

补充

将字符串时间转为时间戳的另一种方式：Date.parse(str)；

作用等同于new Date(dateString).getTime()；

需要符合 RFC2822 或者 ISO8601 日期格式的字符串，比如 YYYY-MM-DDTHH:mm:ss.sssZ；

其他格式不能保证一定正常输出；如果输入的格式不能被解析，就会返回 NaN。

var timeString = '2033-03-23'

console.log(Date.parse(timeString)) // 1995148800000