javascript高级程序设计(六)集合类型引用

# 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 (多布局)