JS笔记集合引用类型（上）

四、集合引用类型

4.1 Object

1 创建方法：

// 显示创建
// 1.new操作符合构造函数
let obj = new Object();
obj.name = "heyun";
obj.age = 23;
// 2.对象字面量（该方法使用时不会调用Object的构造函数）
let obj = {
    name: "heyun",
    age: 23
    // 属性也可以是字符串形式或数值
    "age": 23 
    5: true
}

2 获取属性

// 获取属性的方法主要有两种---‘.’获取和‘[]’获取
consle.log(obj.name); // heyun
consle.log(obj["name"]); // heyun 
// 使用中括号的好处在于可以通过变量访问属性，并且在属性名中含有关键字或者可能会导致语法错误的字符时不会出错
let myName = "name";
obj[myName]; // heyun  通过变量访问属性
obj["name heyun"] // 属性名含有空格，在用点操作符取值时会出错

4.2 Array

1 创建方法

// 1.使用构造函数
let arr = new Array(); // 创建一个空数组
let arr = new Array(3); // 创建一个包含3个元素的数组
let arr = new Array({"1","2","3"}); // 创建一个包含1，2，3的数组
let arr = Array({"1","2","3"}); // new 可以省略
let arr = Array();

// 2.使用数组字面量(也不调用构造函数)
let arr = []; // 创建一个空数组
let arr = [1,2,]; // 创建包含两个元素的数组，尽管2后面跟了逗号。
let arr = ["1","2","3"]; // 创建一个包含1，2，3的数组

// 3.ES6新增静态方法
// from(): 将类数组结构转换为数组实例
Array.from("Heyun"); // ["H","e","y","u","n"] 字符串被拆分成数组

const a1 = [1,2,3,4];
const a2 = Array.from(a1); // 浅复制
console.log(a1 === a2); // false
console.log(a1 == a2); // false
// Array.from()可以接收第二个参数，这个参数可以直接增强数组的值
const a3 = Array.from(a1, x => x**2 );
console.log(a3); // [ 1, 4, 9, 16 ]
// 也可以接受第三个参数，指定映射函数中this的值
const a4 = Array.from(a1,function(x){return x**this.num},{num:2}); // [ 1, 4, 9, 16 ]

2 数组空位

// 1.创建空位数组(ES6的新增方法普遍把这些空位当成存在的元素，值为undefined) 建议少使用，如果要用，显示的用undefined值代替
const arr = [,,,,,];
console.log(arr.length); // 5
console.log(arr);   // [ <5 empty items> ]

3 数组索引

// 数组的length属性返回当前数组的长度，这个值不是只读的，可以进行修改，因此可以很方便的操作数组的元素
let arr = [1,2,3,4];
console.log(arr.length); // 4
arr[arr.length] = 5; //[1,2,3,4,5];
console.log(arr.length); //5
arr.length = 2;
console.log(arr.length); //2 [1,2]

4 检测数组

// instanceof：使用instanceof的情况是在一个全局执行上下文，如果网页有多个框架，则可能涉及两个不同的全局上下文，因此会有两个不同版本的Array构造函数。
// 因此ES提供了Array.isArray()
if(Array.isArray(value)) {
    //操作
}

5 迭代器方法

// ES6中原型上暴露的三个检索数组内容的方法：keys(),values(),entries()
// keys()：返回数组索引的迭代器
// values()：返回数组元素的迭代器
// entries(): 返回索引/值对的迭代器
const arr = ['aaa','bbb','ccc','ddd'];
console.log(Array.from(arr.keys())); // [ 0, 1, 2, 3 ]
console.log(Array.from(arr.values())); // [ 'aaa', 'bbb', 'ccc', 'ddd' ]
console.log(Array.from(arr.entries())); // [ [ 0, 'aaa' ], [ 1, 'bbb' ], [ 2, 'ccc' ], [ 3, 'ddd' ] ]

// 使用ES6的解构可以非常容易的在循环中拆分键值对
const arr = ['aaa','bbb','ccc','ddd'];
for(const [index,value] of arr.entries()) {
  console.log(index+":"+value);
}
/*
0:aaa
1:bbb
2:ccc
3:ddd
*/

6 复制与填充的方法

// ES6新增的方法 批量复制：copyWithin()  填充数组：fill() 使用这个方法不会改变数组的大小

//fill()
const arr = [0,0,0,0,0];
console.log(arr.fill(5)); // [ 5, 5, 5, 5, 5 ] 用5填充全部数组
console.log(arr.fill(0)); // [ 0, 0, 0, 0, 0 ] 重置
console.log(arr.fill(2,2)); // [ 0, 0, 2, 2, 2 ] 从索引2开始用2填充
console.log(arr.fill(2,2,4)); // [ 0, 0, 2, 2, 0 ] 从索引2开始到索引3结束用2填充
console.log(arr.fill(2,-4,-1)); // [ 0, 2, 2, 2, 0 ] 负号反向来
console.log(arr.fill(2,-14,-1)); // [ 2, 2, 2, 2, 0 ] 索引部分有效，超出忽略
arr.fill(0);
console.log(arr.fill(2,10,16)); // [ 0, 0, 0, 0, 0 ] 超出忽略

//copyWithin()会按照指定范围浅复制数组中的部分内容，然后将他们插入到指定索引开始的位置
const arr = [1,2,3,4,5,6,7,8,9,10];
console.log(arr.copyWithin(5)); // [ 1, 2, 3, 4, 5, 1, 2, 3, 4, 5] 从0开始，复制到索引4，然后把复制的内容从索引5开始插入到原数组里面
console.log(arr.copyWithin(0,5)); // [6,7,8,9,10,6,7,8,9,10] 从索引5开始复制，从索引0开始插入
console.log(arr.copyWithin(4,0,3)); // 从索引0到索引3开始复制，插入到索引4
console.log(arr.copyWithin(-4,-7,-3)); // 同样支持负索引，超出索引范围忽略。

7 转换方法

// toLocaleString(),toString(),valueOf()
// valueOf()返回数组本身
// toString()返回数组中每个值的等效字符串由逗号连接成的字符串
let arr = ["heyun","luoyu","hy"];
console.log(arr.toLocaleString()); // heyun,luoyu,hy
console.log(arr.toString()); //heyun,luoyu,hy
console.log(arr); // [ 'heyun', 'luoyu', 'hy' ]
// toLocaleString()与另外两个方法的区别在于为了得到最后的字符串，会调用数组每个值的toLocaleString()方法，而不是toString()方法

let obj1 = {
  toLocaleString() {
    return "调用了toLocaleString"
  },
  toString() {
    return "调用了toString"
  }
}
let obj2 = {
  toLocaleString() {
    return "调用了toLocaleString2"
  },
  toString() {
    return "调用了toString2"
  }
}
let obj = [obj1,obj2];
console.log(obj);
console.log(obj.toString());
console.log(obj.toLocaleString());
/*
[
  {
    toLocaleString: [Function: toLocaleString],
    toString: [Function: toString]
  },
  {
    toLocaleString: [Function: toLocaleString],
    toString: [Function: toString]
  }
]
调用了toString,调用了toString2
调用了toLocaleString,调用了toLocaleString2
*/

8 栈方法

// 1.入栈 push()接收若干个参数，把它们添加到数组末尾，返回数组的最新长度
let arr = new Array();
console.log(arr.push('heyun',1)); // 2
console.log(arr); // [ 'heyun', 1 ]

// 2.出栈 pop(),返回数组最后一个元素值
console.log(arr.pop()); // 1
console.log(arr.length);// 1

9 队列方法

// 1.shift()删除数组第一项并返回它，然后数组长度减1,联合push使用(),可以把数组当队列使用
let arr = new Array();
arr.push("heyun")
arr.push("luoyu")
console.log(arr); // [ 'heyun', 'luoyu' ]
console.log(arr.shift()); // heyun
console.log(arr); // [ 'luoyu' ]

// 2.unshift()在数组开头添加任意多的值，然后返回新的数组长度
arr.unshift("heyun")
arr.unshift("luoyu")
console.log(arr); // [ 'luoyu', 'heyun' ]

10 排序方法

// 1.reverse()反转数组
let arr = [1,2,3,4,5]
console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]

// 2.sort()默认按照升序进行排序，排序时会对每一项调用String()转型函数，然后比较字符串来决定顺序
let arr = [1,10,15,5,23];
console.log(arr.sort()); //[ 1, 10, 15, 23, 5 ] 字符串比较只比较第一个字母

// 上面的比较方法不够灵活，一般是通过构造一个函数来指定比较
let arr = [1,10,15,5,23];
console.log(arr.sort(compare)); // [ 1, 5, 10, 15, 23 ]

// 该函数作为参数传入sort，如果要达到降序效果，把函数里面的比较符换下位置就行
function compare(v1,v2) {
  if(v1 < v2) {
    return -1;
  }else if(v1 > v2) {
    return 1;
  }else {
    return 0;
  }
}

// 三目运算符简写实现降序
console.log(arr.sort((a,b) => a < b ? 1 : a > b ? -1 : 0)); // [ 23, 15, 10, 5, 1 ]

// 当然，如果数组的元素只是数值，则可以更加简单
function compare(v1,v2) {
    return v1 - v2;
}

11 操作方法

// 1.concat()会在现有数组的基础上创建一个新数组，然后把接收的参数添加在原数组元素的后面，然后把最后结果写在新数组中
let arr = ["aa","bb","cc"];
let arr2 = arr.concat("dd",["ee","ff"]);
console.log(arr2); // [ 'aa', 'bb', 'cc', 'dd', 'ee', 'ff' ] 在这里，可以看到我们传入的是一个字符串，和一个字符数组，可是最后的结果却没有展示出来，因为concat()方法会自动打平数组，我们通过设置取消这个效果。

// 取消打平数组
let arr = ["aa","bb","cc"];
let newArr = ["ee","ff"];
newArr[Symbol.isConcatSpreadable] = false;
let arr2 = arr.concat("dd",newArr);
console.log(arr2); /*[
  'aa',
  'bb',
  'cc',
  'dd',
  [ 'ee', 'ff', [Symbol(Symbol.isConcatSpreadable)]: false ]
]*/
// [Symbol(Symbol.isConcatSpreadable)]: false ]这一项红宝书上没有，不知道什么回事

// 2.slice()方法用于创建一个包含原有数组中一个或多个元素的新数组。（不改变原数组）
let arr = ["aa","bb","cc","dd","ee"];
let arr2 = arr.slice(1);
let arr3 = arr.slice(1,4);
console.log(arr2); // [ 'bb', 'cc', 'dd', 'ee' ] 一个参数返回该下标后的元素
console.log(arr3); // [ 'bb', 'cc', 'dd' ] 返回下标1-3的元素

// 3.splice()主要用于在数组中插入元素
// 删除返回的是被删除的元素
let arr = ["aa","bb","cc","dd","ee"];
let arr2 = arr.splice(0,2); // 从索引0开始，输出两个
console.log(arr2); // [ 'aa', 'bb' ]
// 插入
let arr2 = arr.splice(2,0,"ff");
console.log(arr2); // []因为没有删除元素
console.log(arr); // [ 'aa', 'bb', 'ff', 'cc', 'dd', 'ee' ]

let arr2 = arr.splice(2,0,"ff"); 
let arr3 = arr.splice(3,3,"gg"); // 从索引3开始删掉3个元素，然后加上“gg”
console.log(arr3); // [ 'cc', 'dd', 'ee' ]
console.log(arr); // [ 'aa', 'bb', 'ff', 'gg' ]

// 替换也就是插入，第二个参数传1就行

12 搜索和位置方法

// ES6提供严格相等搜索和按断言函数搜索

// 1.严格相等：indexOf(),lastIndexOf()和includes()
//接收一个参数或者两个参数，两个参数的情况下，第一个是待查找的元素，第二个是查找起始的位置
let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.indexOf(3)); // 2 没有则返回-1
console.log(arr.lastIndexOf(3)); // 6 没有则返回-1
console.log(arr.includes(3)); // true

console.log(arr.indexOf(3,4)); // 6 从索引4开始向右查找
console.log(arr.lastIndexOf(3,5)); // 2 从索引5开始向左查找
console.log(arr.includes(3,7)); // false

// 2.断言函数:find(),findIndex()
// 接收三个参数，第一个是搜索的元素，第二个是当前元素的索引，第三个是正在搜索的数组
let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.find((element,index,array) => element >4)); // 5 找到匹配项后就停止

13 迭代方法

// ES定义了5个迭代方法
// 1.every(): 对数组的每一项都运行传入的函数，如果每一项都返回true，则结果为true。
let arr = [1,2,3,4,5,4,3,2,1];
console.log(arr.every((item,index,array) => item > 1)); // false
console.log(arr.every((item,index,array) => item > 0)); // true

// 2.filter()：...函数返回true的项会组成数组之后返回
console.log(arr.filter((item,index,array) => item > 3)); // [ 4, 5, 4 ]

// 3.forEach()：...无返回值,相当于一个for循环
console.log(arr.forEach((item,index,array) => {
  console.log(index+":"+item);
}));
/*
0:1
1:2
2:3
3:4
4:5
5:4
6:3
7:2
8:1
undefined  这里不知道怎么回事
*/

// 4.map()：...返回由每次函数调用的结果构成的数组
console.log(arr.map((item,index,array) => item += 3)); /*[
  4, 5, 6, 7, 8,
  7, 6, 5, 4
]*/

// 5.some()：...如果有一项返回true，则这个方法就返回true
console.log(arr.some((item,index,array) => item > 1)); // true
console.log(arr.some((item,index,array) => item > 0)); // true

4.3 定型数组

1 ArrayBuffer

// 所有定型数组及视图引用的基本单位，用于在内存中分配特定数量的字节空间
const buffer = new ArrayBuffer(16); // 在内存中分配16字节
console.log(buffer.byteLength); //16
// ArrayBuffer一经创建就不能调整大小可以使用slice()复制全部或者部分到一个新的实例中
const buffer2 = buffer1.slice(4,12);
console.log(buffer2.byteLength); // 8

// ArrayBuffer与C++中malloc的区别
/**
 * 1. malloc()在分配失败时会返回一个null指针，而ArrayBuffer在分配失败时会抛出错误
 * 2. malloc()可以利用虚拟内存，因此最大可分配内存受内存限制。而ArrayBuffer分配的内存不能超过Number.MAX_SAFE_INTEGER
 * 3. malloc()调用成功不会初始化地址，而ArrayBuffer会将所有的二进制初始化为0
 * 4. malloc()分配的堆内存除非调用了free()或程序退出，否则系统不能再使用，而而ArrayBuffer分配的堆内存会被当做垃圾对象，不用手动释放
 */

2 DataView

// 占个位，不太懂这玩意能用在哪里，后面用到了再补