javascript高级程序设计（六）集合类型引用

本文主要是介绍javascript高级程序设计（六）集合类型引用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

# javascript高级程序设计（六）集合类型引用

一、对象

显式创建对象实例的方式
（1）new+构造函数
```
let person = new People();
person.name = "abc";
person.age = 27;
```
（2）对象字面量
```
let person = {
	name: 'abc',
	age: 28
}
```
tips：
a. 数值属性名会自动转化为字符串
b. 使用对象字面量方法时，不会调用object构造函数

二、数组

创建数组
（1）Array构造函数

let colors = new Array(5) // 创建一个长度为5的数组，new可省略
let names = new Array('Greg') // 创建一个长度为1的数组，元素为Greg

（2）数组字面量

let colors = ['red', 'blue', 'yellow']

同样的，数组字面量在创建数组时也不会调用Array构造函数。

（3）from()和of()【ES6提供】
from()：类数组结构转化为数组

// 字符串拆分成数组
console.log(Array(['matt']) // ['m', 'a', 'a', 't']

// 集合、map类型都可以转化成数组
const m = new Map().set[1,2]
					.set[3,4]
console.log(Array.from(m)) // [[1,2],[3,4]]

// Array.from()方法还接受第二个参数，为映射函数，将每个元素进行相应的映射处理
const a = [1,2,3,4];
const b = Array.from(a, x=>x**2);
console.log(b) // [1,4,9,16]

of(): 用于替代ES6之前使用的将arguments对象转化为数组的方法：Array.prototype.slice.call(arguments)

检测数组
当只有一个网页（即只有一个全局执行上下文）时：
```
a instanceof Array
```
当有多个网页时，则有可能存在多个框架，导致Array可能存在多个构造函数：
```
Array.isArray(a)
```

迭代器
包含三个迭代器：
keys()：索引迭代器
values()：数组元素迭代器
entries()：索引/值迭代器

const a = ['a', 'b', 'c', 'd'];
console.log(Array.from(a.keys())); // [1,2,3,4]
console.log(Array.from(a.values())); // ['a', 'b', 'c', 'd']
console.log(Array.from(a.entries())); // [ [ 0, 'a' ], [ 1, 'b' ], [ 2, 'c' ], [ 3, 'd' ] ]

填充方法

fill()

let a = [0,0,0,0,0]
// fill(value,start,end)
console.log(a.fill(6, 3, 4)) // [ 0, 0, 0, 6, 0 ]

转换方法

let a = [0,0,0,0,0];
console.log(a.valueOf()); // [ 0, 0, 0, 0, 0 ]（原数组）
console.log(a.toString()); // 0,0,0,0,0 (一个用逗号分隔的字符串)
// join()可设置toString方法的分隔符
console.log(a.join('\\')); // 0\0\0\0\0

栈、队列方法
push()、pop()、shift()、unshift()
排序方法
reverse()：逆转
sort()：

// 升序排列：左-右
console.log(a.sort((val1, val2) => (val1-val2))) // [ 0, 1, 2, 3, 4 ]
// 降序排列：右-左
console.log(a.sort((val1, val2) => (val2-val1))) // [ 4, 3, 2, 1, 0 ]

数组打平
concat()

let colors = ['red', 'blue', 'yellow']
console.log(colors.concat(['black'], 'green')); // [ 'red', 'blue', 'yellow', 'black', 'green' ]
// 设置Symbol.isConcatSpreadable可阻止concat打平数组，单纯连接。
colors[Symbol.isConcatSpreadable] = false;
console.log(colors.concat(['black', 'pink'], 'green'));
// 输出
[
  [
    'red',
    'blue',
    'yellow',
    [Symbol(Symbol.isConcatSpreadable)]: false
  ],
  'black',
  'pink',
  'green'
]

slice(start, end)：创建一个包含原数组中部分元素的数组（数组切片）
两个索引为左闭右开

let colors = ['red', 'blue', 'yellow']
console.log(colors.slice(1,2)); // ['blue']

splice(start, length, content1, content2,…)
（1）删除某些连续元素：content为空，长度自定义

let colors = ['red', 'blue', 'yellow']
colors = colors.concat(['black', 'pink'], 'green')
// concat拍平后的数组
console.log(colors); // [ 'red', 'blue', 'yellow', 'black', 'pink', 'green' ]

let t = colors.splice(2, 2)
// splice函数返回被删除的元素
console.log(t); // [ 'yellow', 'black' ]
// 并修改原有的数组
console.log(colors); // [ 'red', 'blue', 'pink', 'green' ]

（2）替换某些连续元素：content的个数与长度一致

let t = colors.splice(1,3, 'dark', 'gray', 'purple')
// 返回被换走的值
console.log(t); // [ 'blue', 'yellow', 'black' ]
// 更新原数组
console.log(colors); // [ 'red', 'dark', 'gray', 'purple', 'pink', 'green' ]

（3）插入某些元素：length为0

let t = colors.splice(2, 0, 'dark', 'gray', 'purple')
console.log(t); // []
console.log(colors); // ['red', 'blue', 'dark',   'gray','purple', 'yellow', 'black',  'pink',  'green']

查找
（1）按严格相等（值相同，类型也相同）
indexOf(element, [start])：从start开始从左往右查找element，返回element所在的索引值，若无返回-1。
lastIndexOf(element, [start])：同上，查找方向为从右到左。
includes(element, [start])：ES6新增方法，包含返回true，不包含返回false
（2）按断言函数
find(element, index, array)：element可对筛查的元素进行限制，index为开始查找的元素索引，返回第一个匹配的元素
findIndex(element, index, array)：返回第一个匹配的index
```
const people = [
    {
        name: 'Matt',
        age: 27
    },
    {
        name: 'Jack',
        age: 30
    },
    {
        name: 'Tom',
        age: 25
    },
]
console.log(people.find((el, index, array) =>el.age< 30)) // { name: 'Matt', age: 27 }
```

迭代方法

every(function)：若每一项都运行函数都返回true，返回true

some(function)：若有一项运行函数返回true则返回true

filter(function)：筛选出满足函数运行的项

forEach(function)：按照函数方式处理每一项，无返回值

map(function)：按照函数方式处理每一项，返回处理结果组成的数组。

console.log(people.every((p)=>p.age < 31)); // true
console.log(people.some((p)=>p.name === 'Matt')); // true
console.log(people.filter((p)=>{return p.age < 29})); // [ { name: 'Matt', age: 27 }, { name: 'Tom', age: 25 } ]

people.forEach((p)=>{p.age ++}) 
console.log(people); 
// output
[
  { name: 'Matt', age: 28 },
  { name: 'Jack', age: 31 },
  { name: 'Tom', age: 26 }
]

console.log(people.map((p)=>{p.age++; return p}));
// output
[
  { name: 'Matt', age: 29 },
  { name: 'Jack', age: 32 },
  { name: 'Tom', age: 27 }
]

归并方法

reduce(function(pre, cur, [index, array]),[startVal])：从索引值（0,1）开始每对元素运行function，需要设置返回值。

可设置初始值，初始轮变为function(初始值， arr[0])

const people = [
    {
        name: 'Matt',
        age: 27
    },
    {
        name: 'Jack',
        age: 30
    },
    {
        name: 'Tom',
        age: 25
    },
]
console.log(people.reduce((prev, cur, index, arr)=>
{
    console.log(prev.age, cur.age);
    return {name: 'xxx',
            age: prev.age+cur.age,
    }}
)) // { name: 'xxx', age: 82 }

三、Map

const p = new Map();
p.set('1001', 'Ann');
p.set('1002', 'Bob')
console.log(p); // Map(2) { '1001' => 'Ann', '1002' => 'Bob' }
console.log(p.has('1001')); // true
console.log(p.get('1001')); // Ann

Map会对插入的键值进行顺序的维护，即map结构为有序的。

迭代器同数组相同：
keys()：索引迭代器
values()：数组元素迭代器
entries()：索引/值迭代器

map和object的区别

map的键不限制类型，object限制了只能为字符串数值和符号
map的元素为有序的，object的属性无先后顺序
map继承了object
map支持迭代，object不支持

这篇关于javascript高级程序设计（六）集合类型引用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

Java教程