思维导图
-
对象
-
数组与定型数组
-
Map、WeakMap、Set以及WeakSet类型
1. Object
创建的对象的两种方式：new 操作符和对象字面量
使用对象字面量的更多，因为代码量少；
2. Array
Array构造函数,es6新增的两个创建数组的静态方法：from()和of()
2.1 from()将类数组结构转换为数组实例
-
任何可迭代的结构
-
有一个length属性
-
可索引元素的结构
2.1.1 案例：
// 字符串拥有length属性
console.log(Array.from('Matt')) // ['M', 'a', 't', 't']2.1.2 案例：
// 浅复制数组
let a1 = [1,2,3,4]
let a2 = Array.from(a1)
console.log(a2) // [1, 2, 3, 4]2.1.3 案例：在函数内部进行数组转换
// 获取函数的类数组进行转换
function getArray () {
return Array.from(arguments)
}
console.log(getArray(1,24,56,8,92)) // [1, 24, 56, 8, 92]2.1.4 案例：将对象转换成数组
let object = {
0:'哈哈',
1:2,
2:'yes',
3:4,
4:5,
length: 5
}
console.log(Array.from(object)) // ['哈哈', 2, 'yes', 4, 5]2.1.5 接收参数
-
参数1：需要转换成数组的参数
-
参数2：增强型数据，对需要处理的数据内容进行处理
-
参数3：如果第二个参数是函数，第三个参数是作为映射this值处理；
let object = {
0:1,
1:12,
2:68,
3:4,
4:12,
length:5
}
// 接收两个入参
let arr = Array.from(object,x => x**2) //[1, 144, 4624, 16, 144]
// 接收三个入参
let arr = Array.from(object,function(x) {return x*this.number},{number:4} )
console.log(arr) // [4, 48, 272, 16, 48]普通业务场景是一个或者两个入参
2.2 of() 将一组参数转换为数组
2.3 数组空位
注意 由于行为不一致和存在性能隐患，因此实践中要避免使用数组空位。如果确实需要 空位，则可以显式地用 undefined 值代替。
let arr = [1,2,,,,,8]
console.log(Array.of(...arr)) // [1, 2, undefined, undefined, undefined, undefined, 8]检查数组的两种方法
-
instanceof 有兼容问题
-
isArray() 建议使用
2.4 复制、填充方法
2.4.1 filll 填充
let zero = [0,0,0,0,0]
zero.fill(6) // [6, 6, 6, 6, 6]
zero.fill(0) // [0, 0, 0, 0, 0]
zero.fill(8,2,4) // [0, 0, 8, 8, 0]2.4.2 copyWithin复制
// 从索引0开始复制，复制4位数
// 插入到第五位开始
// 以目标源的边界值停止
let arr = [21,22,23,24,25,26]
console.log(arr.copyWithin(4)) // [21, 22, 23, 24, 21, 22]索引过低，过高时，无效
2.5 栈方法
push() 将接收的参数添加到数组末尾，length同时改变 栈后进先出，数据项的插入(称为推入,push)和删除(称为弹出,pop),只在一个地方发生，即栈顶。
pop() 删除数组的最后一项，length同时改变，pop() 返回被删除的项；
2.6 栈方法
队列先进先出 shift() 删除数组第一项，并返回，把数组当成队列来使用 unshift() 在数组开头添加任意多个值
-
shift()开头删除，pop()末尾删除 -
unshift()开头添加，push()末尾添加
2.7 排序方法
reverse() 方向排序
sort() 以字符串的形式对数组进行排序，不能符合正常的场景下的要求，需要使用函数再次处理
案例一：
正序
function compare(value1,value2){
if(value1 < value2){
return -1
} else if (value1 > value2) {
return 1
} else {
return 0
}
}
let arr = [2,6,12,9,4]
console.log(arr.sort(compare)) // [2, 4, 6, 9, 12]案例二：
倒序
function compare(value1,value2){
if(value1 < value2){
return 1
} else if (value1 > value2) {
return -1
} else {
return 0
}
}
let arr = [2,6,12,9,4]
console.log(arr.sort(compare)) // [12, 9, 6, 4, 2]案例三：
简写正序
let arr = [2,6,12,9,4]
console.log(arr.sort((a,b) => a < b ? -1 : a > b ? 1 : 0)) // [2, 4, 6, 9, 12]2.8 操作方法
2.8.1 concat() 数组连接,字符串连接
案例一：
let arr = ['Hello']
console.log(arr.concat('world')) // ['Hello', 'world']案例二：
let arr = 'Hello'
console.log(arr.concat('world')) // Helloworld2.8.2 slice() 裁剪，返回裁剪后的数组。原有数组保持不变
案例一：
let arr = ['h','e','l','l','o']
console.log(arr.slice(1,2)) // ['e']
console.log(arr) // ['h', 'e', 'l', 'l', 'o']2.8.3 splice() 支持删除，插入，替换
案例一：删除
返回删除后的数组，原有数组被改变
-
参数一：起始位置
-
参数二：删除的数量
let arr = ['h','e','l','l','o']
console.log(arr.splice(1,2)) // ['e', 'l']
console.log(arr) // ['h', 'l', 'o']案例二：插入（1）
-
参数一：起始位置
-
参数二：删除的数量
-
参数三：需要插入的元素
let arr = ['h','e','l','l','o']
console.log(arr.splice(1,0,'哈哈','是的')) // []
console.log(arr) // ['h', '哈哈', '是的', 'e', 'l', 'l', 'o']案例三：替换
let arr = ['h','e','l','l','o']
console.log(arr.splice(1,2,'哈哈','是的')) // ['e', 'l']
console.log(arr) // ['h', '哈哈', '是的', 'l', 'o']2.8.4 搜索
indexOf() 、lastIndexOf() 和includes()
-
参数一：要查找的元素
-
参数二：起始查找的位置
indexOf()和includes()从数组前头向后搜索，返回要查找元素在数组中的位置，如果没找到则返回-1,
lastIndexOf() 从数组末尾(最后一项)开始向前搜索，返回布尔值，至少找到一个与指定元素匹配的项；使用全等(===)与数组元素进行比较；
案例一：indexOf()查找元素
let arr = ['h','e','l','l','o']
console.log(arr.indexOf('l')) // 2
console.log(arr) // ['h', 'e', 'l', 'l', 'o'] 原有数组保持不变案例二：includes()查找元素
let arr = ['h','e','l','l','o']
console.log(arr.includes('l')) // true
// 查找不存在的元素，返回false
console.log(arr.includes('ooo')) // false案例三：lastIndexOf()
let arr = ['h','e','l','l','o']
console.log(arr.lastIndexOf('ooo')) // -1 如果没找到则返回-1
console.log(arr.lastIndexOf('o')) // 4 返回元素的下标在学习《JavaScript高级程序设计（第4版）》时的简单笔记。
引用类型的这章内容比较多，先记录一部分。
