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

2022-10-30 12:46:06

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

一、对象

  1. 显式创建对象实例的方式
    （1）new+构造函数

    let person = new People();
person.name = "abc";
person.age = 27;

    （2）对象字面量

    let person = {
	name: 'abc',
	age: 28
}

    tips：
    a. 数值属性名会自动转化为字符串
    b. 使用对象字面量方法时，不会调用object构造函数

二、数组

  1. 创建数组
    （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)

  2. 检测数组
    当只有一个网页（即只有一个全局执行上下文）时：

    a instanceof Array

    当有多个网页时，则有可能存在多个框架，导致Array可能存在多个构造函数：

    Array.isArray(a)

  3. 迭代器
    包含三个迭代器：
    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' ] ]

  4. 填充方法

    fill()

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

  5. 转换方法

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

  1. 栈、队列方法
    push()、pop()、shift()、unshift()

  2. 排序方法
    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 ]
  1. 数组打平
    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'
]
  1. slice(start, end)：创建一个包含原数组中部分元素的数组（数组切片）
    两个索引为左闭右开
let colors = ['red', 'blue', 'yellow']
console.log(colors.slice(1,2)); // ['blue']

  1. 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']

  2. 查找
    （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 }

  3. 迭代方法

    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 }
]

  4. 归并方法

    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的区别

  1. map的键不限制类型，object限制了只能为字符串数值和符号
  2. map的元素为有序的，object的属性无先后顺序
  3. map继承了object
  4. map支持迭代，object不支持
上一篇：水平列表


下一篇：[flutter-19] Layout (多布局)