Javascript高级程序设计(第四版)--学习记录之集合引用类型(上)

Object

显示的创建Object的实例方法:

  • new操作符和Object构造函数
let person = new Object();
person.name = 'Jason';
person.age = 42
  • 对象字面量
let person = {
name:'Jason',
age:42}

存取属性的方法一般有两种:点语法和中括号

let person = {
name:'Jason',
age:42};
console.log(person.name);
console.log(person['name']);

从功能上讲两种存取属性的方法没有区别,使用中括号的主要优势就是可以通过变量访问属性。

let propertyName = "name"; 
console.log(person[propertyName]); // "Jason"

Array

创建数组的方法:

  • Array构造函数创建

let colors = new Array();

  • 数组字面量表示法

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

  • Array.from(),第一个参数是一个类数组对象,即任何可迭代的结构,或者有一个length属性和可索引元素的结构。
console.log(Array.from("Matt")); // ["M", "a", "t", "t"] 
// 可以使用 from()将集合和映射转换为一个新数组
const m = new Map().set(1, 2) .set(3, 4); 
const s = new Set().add(1) .add(2) .add(3) .add(4); 
console.log(Array.from(m)); // [[1, 2], [3, 4]] 
console.log(Array.from(s)); // [1, 2, 3, 4] 
// Array.from()对现有数组执行浅复制
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1); 
console.log(a1); // [1, 2, 3, 4] 
alert(a1 === a2); // false
// 可以使用任何可迭代对象
const iter = { *[Symbol.iterator]() { yield 1; yield 2; yield 3; yield 4; } 
}; 
console.log(Array.from(iter)); // [1, 2, 3, 4]// arguments 对象可以被轻松地转换为数组
function getArgsArray() { return Array.from(arguments); 
} 
console.log(getArgsArray(1, 2, 3, 4)); // [1, 2, 3, 4] 
// from()也能转换带有必要属性的自定义对象
const arrayLikeObject = { 0: 1, 1: 2, 2: 3, 3: 4, length: 4 
}; 
console.log(Array.from(arrayLikeObject)); // [1, 2, 3, 4]
Array.from()还接收第二个可选的映射函数参数。这个函数可以直接增强新数组的值,而无须像调用 Array.from().map()那样先创建一个中间数组。还可以接收第三个可选参数,用于指定映射函数中 this 的值。但这个重写的 this 值在箭头函数中不适用。
const a1 = [1, 2, 3, 4]; 
const a2 = Array.from(a1, x => x**2); 
const a3 = Array.from(a1, function(x) {return x**this.exponent}, {exponent: 2}); 
console.log(a2); // [1, 4, 9, 16] 
console.log(a3); // [1, 4, 9, 16]
  • Array.of()可以把一组参数转换为数组

检索数组内容的方法:

  • keys(),返回数组索引的迭代器
  • values(),返回数组元素的迭代器
  • entries(),返回索引/值对的迭代器
const a = ["foo", "bar", "baz", "qux"]; 
// 因为这些方法都返回迭代器,所以可以将它们的内容
// 通过 Array.from()直接转换为数组实例
const aKeys = Array.from(a.keys()); 
const aValues = Array.from(a.values()); 
const aEntries = Array.from(a.entries()); 
console.log(aKeys); // [0, 1, 2, 3] 
console.log(aValues); // ["foo", "bar", "baz", "qux"] 
console.log(aEntries); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

复制和填充方法:

批量复制方法copyWithin(),会按照指定范围浅复制数组中的部分内容,然后将它们插入到指

定索引开始的位置。

填充数组方法fill(),可以向一个已有的数组中插入全部或部分相同的值。开始索引用于指定开始填充的位置,它是可选的。如果不提供结束索引,则一直填充到数组末尾。负值索引从数组末尾开始计算。

const zeroes = [0, 0, 0, 0, 0]; 
// 用 5 填充整个数组
zeroes.fill(5); 
console.log(zeroes); // [5, 5, 5, 5, 5] 
zeroes.fill(0); // 重置
// 用 6 填充索引大于等于 3 的元素
zeroes.fill(6, 3); 
console.log(zeroes); // [0, 0, 0, 6, 6] 
zeroes.fill(0); // 重置
// 用 7 填充索引大于等于 1 且小于 3 的元素
zeroes.fill(7, 1, 3); 
console.log(zeroes); // [0, 7, 7, 0, 0]; 
zeroes.fill(0); // 重置
// 用 8 填充索引大于等于 1 且小于 4 的元素
// (-4 + zeroes.length = 1) 
// (-1 + zeroes.length = 4) 
zeroes.fill(8, -4, -1); 
console.log(zeroes); // [0, 8, 8, 8, 0]; 
fill()静默忽略超出数组边界、零长度及方向相反的索引范围:
const zeroes = [0, 0, 0, 0, 0]; 
// 索引过低,忽略
zeroes.fill(1, -10, -6); 
console.log(zeroes); // [0, 0, 0, 0, 0] 
// 索引过高,忽略
zeroes.fill(1, 10, 15); 
console.log(zeroes); // [0, 0, 0, 0, 0] 
// 索引反向,忽略
zeroes.fill(2, 4, 2); 
console.log(zeroes); // [0, 0, 0, 0, 0] 
// 索引部分可用,填充可用部分
zeroes.fill(4, 3, 10) 
console.log(zeroes); // [0, 0, 0, 4, 4]

栈方法

  • push(),接收任意数量的参数,并将它们添加到数组末尾,返回数组的最新长度.
  • pop(),用于删除数组的最后一项,同时减少数组的 length 值,返回被删除的项.
    let colors = [];
    let count = colors.push('red','green')
    console.log(count);//2
    let item = colors.pop()
    console.log(item);//green

队列方法

  • shift(),删除数组的第一项并返回它,然后数组长度减 1
let colors = [];
let count = colors.push('red','blue');
let item = colors.shift();
console.log(item);//red
  • unshift(),在数组开头添加任意多个值,然后返回新的数组长度
let colors = [];
let count = colors.unshift('red','blue');
let item = colors.pop();
console.log(item);//blue

排序方法

  • reverse(),是将数组元素反向排列。
let values = [1, 2, 3, 4, 5]; 
values.reverse(); 
alert(values); // 5,4,3,2,1
  • sort(),按照升序重新排列数组元素。sort()会在每一项上调用 String()转型函数,然后比较字符串来决定顺序。即使数组的元素都是数值,也会先把数组转换为字符串再比较、排序。
let values = [0, 1, 5, 10, 15]; 
values.sort(); 
alert(values); // 0,1,10,15,5

sort()方法可以接收一个比较函数,用于判断哪个值应该排在前面。

let values = [0, 1, 5, 10, 15]; 
values.sort((a, b) => a < b ? 1 : a > b ? -1 : 0); 
alert(values); // 15,10,5,1,0

操作 方法

  • concat()方法可以在现有数组全部元素基础上创建一个新数组。它首先会创建一个当前数组的副本,然后再把它的参数添加到副本末尾,最后返回这个新构建的数组。如果传入一个或多个数组,则 concat()会把这些数组的每一项都添加到结果数组。如果参数不是数组,则直接把它们添加到结果数组末尾。
    打平数组参数的行为可以重写,方法是在参数数组上指定一个特殊的符号: Symbol.isConcat-Spreadable。这个符号能够阻止 concat() 打平参数数组。相反,把这个值设置为 true 可以强制打平类数组对象:
    let colors = ["red", "green", "blue"]; 
    let newColors = ["black", "brown"]; 
    let moreNewColors = { [Symbol.isConcatSpreadable]: true, length: 2, 0: "pink", 1: "cyan" 
    }; 
    newColors[Symbol.isConcatSpreadable] = false; 
    // 强制不打平数组
    let colors2 = colors.concat("yellow", newColors); 
    // 强制打平类数组对象
    let colors3 = colors.concat(moreNewColors); 
    console.log(colors); // ["red", "green", "blue"] 
    console.log(colors2); // ["red", "green", "blue", "yellow", ["black", "brown"]] 
    console.log(colors3); // ["red", "green", "blue", "pink", "cyan"]

    • slice() 用于创建一个包含原有数组中一个或多个元素的新数组。 slice() 方法可以
      接收一个或两个参数:返回元素的开始索引和结束索引。如果只有一个参数,则 slice() 会返回该索引到数组末尾的所有元素。如果有两个参数,则 slice() 返回从开始索引到结束索引对应的所有元素,其中不包含结束索引对应的元素。
    let colors = ["red", "green", "blue", "yellow", "purple"]; 
    let colors2 = colors.slice(1); 
    let colors3 = colors.slice(1, 4); 
    alert(colors2); // green,blue,yellow,purple 
    alert(colors3); // green,blue,yellow/*如果 slice()的参数有负值,那么就以数值长度加上这个负值的结果确定位置。比
    如,在包含 5 个元素的数组上调用 slice(-2,-1),就相当于调用 slice(3,4)。如果结
    束位置小于开始位置,则返回空数组。*/
    • splice(),主要目的是在数组中间插入元素,有3种不同的方式使用这个方法。
      • 删除。需要给splice()传2个参数:要删除的第一个元素的位置和要删除的元素数量。
      • 插入。需要给splice()传3个参数:开始位置、0和要插入的元素,可以在数组中指定的位置插入元素。
      • 替换。splice()在删除元素的同时可以在指定位置插入新元素,同样要传入3个参数:开始位置、要删除元素的数量和要插入的任意多个元素。
    let colors = ["red", "green", "blue"]; 
    let removed = colors.splice(0,1); // 删除第一项
    alert(colors); // green,blue 
    alert(removed); // red,只有一个元素的数组
    removed = colors.splice(1, 0, "yellow", "orange"); // 在位置 1 插入两个元素
    alert(colors); // green,yellow,orange,blue 
    alert(removed); // 空数组
    removed = colors.splice(1, 1, "red", "purple"); // 插入两个值,删除一个元素
    alert(colors); // green,red,purple,orange,blue 
    alert(removed); // yellow,只有一个元素的数组

    搜索和位置方法

    • 严格相等
      • indexOf(),从数组前头开始向后搜索,返回要查找的元素在数组中的位置,如果没找到返回-1.
      • lastIndexOf(),从数组末尾开始向前搜索,返回要查找的元素在数组中的位置,如果没找到返回-1.
      • includes(),从数组前头开始向后搜索,返回布尔值,表示是否至少找到一个于指定元素匹配的项。

            都接收两个参数:要查找的元素和一个可选的起始搜索位置。

    let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
    alert(numbers.indexOf(4)); // 3 
    alert(numbers.lastIndexOf(4)); // 5 
    alert(numbers.includes(4)); // true 
    alert(numbers.indexOf(4, 4)); // 5 
    alert(numbers.lastIndexOf(4, 4)); // 3 
    alert(numbers.includes(4, 7)); // false 
    let person = { name: "Nicholas" }; 
    let people = [{ name: "Nicholas" }]; 
    let morePeople = [person]; 
    alert(people.indexOf(person)); // -1 
    alert(morePeople.indexOf(person)); // 0 
    alert(people.includes(person)); // false 
    alert(morePeople.includes(person)); // true
    • 断言函数接收3个参数:元素、索引和数组本身。
      • find(),从数组最小的索引开始,返回第一个匹配的元素,找到一个后不在继续搜索
      • findIndex(),从数组最小的索引开始,返回第一个匹配元素的索引,找到一个后不在继续搜索
    const people = [ { name: "Matt", age: 27 }, { name: "Nicholas", age: 29 } 
    ]; 
    alert(people.find((element, index, array) => element.age < 28)); 
    // {name: "Matt", age: 27} 
    alert(people.findIndex((element, index, array) => element.age < 28)); 
    // 0

    迭代方法

    • every() :对数组每一项都运行传入的函数,如果对每一项函数都返回 true ,则这个方法返回 true
    • forEach() :对数组每一项都运行传入的函数,没有返回值。
    • some() :对数组每一项都运行传入的函数,如果有一项函数返回 true ,则这个方法返回 true
    • map() :对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组。
    • filter() :对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后回。
      let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
      let everyResult = numbers.every((item, index, array) => item > 2); 
      alert(everyResult); // false 
      let someResult = numbers.some((item, index, array) => item > 2); 
      alert(someResult); // true
      ------------------
      let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
      let filterResult = numbers.filter((item, index, array) => item > 2); 
      alert(filterResult); // 3,4,5,4,3------------------
      let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
      let mapResult = numbers.map((item, index, array) => item * 2); 
      alert(mapResult); // 2,4,6,8,10,8,6,4,2
      -------------------
      let numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1]; 
      numbers.forEach((item, index, array) => { // 执行某些操作 
      });

      归并方法

      • reduce(),从第一项开始遍历到末尾
      • reduceRight(),从最后一项开始遍历到开头
      这两个方法都接收两个参数:对每一项都会运行的归并函数,以及可选的以之为归并起点的初始值。 传给 reduce() reduceRight() 的函数接收 4 个参数:上一个归并值、当前项、当前项的索引和数组本身。
      let values = [1, 2, 3, 4, 5]; 
      let sum = values.reduce((prev, cur, index, array) => prev + cur); 
      alert(sum); // 15let sum1 = values.reduceRight(function(prev, cur, index, array){ return prev + cur; 
      }); 
      alert(sum1); // 15

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/34689.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

智能制造装备业项目数字化管理之多项目管理

在智能制造装备业中&#xff0c;多项目管理已经成为行业发展的核心驱动力。这种管理方式从全局的视角出发&#xff0c;对企业内同时推进的多个项目进行精细化的全生命周期管控。这不仅仅涉及单一项目的管理&#xff0c;还包括项目集和项目组合管理。 根据客户需求&#xff0c;一…

怎么区分Boombap 制作Boombap曲子教学 boombap音乐出现的时间

Boombap音乐作为嘻哈音乐文化的重要组成部分&#xff0c;具有独特的音乐节奏、样式和情感。要理解和区分Boombap音乐&#xff0c;需要从其音乐的历史渊源、音乐特征和文化影响入手。接下来给大家介绍怎么区分Boombap&#xff0c;制作Boombap曲子教学的具体内容。 一、怎么区分B…

c语言常用易错记录

c语言常用易错记录 文章目录 c语言常用易错记录1.for循环 1.for循环 示例&#xff1a; #include <stdio.h>int main() {int i;for (i 0; i < 10; i) {printf("%d\n", i);}return 0; }执行顺序 备注&#xff1a;此图来源于b站鹏哥C语言视频课截图&#xf…

python异常处理2

异常堆栈跟踪 有时需要知道更多异常信息时&#xff0c;可以打印堆栈跟踪信息。堆栈跟踪信息可以通过python内置模块 traceback 提供的 print_exc() 函数实现&#xff0c;print_exc() 函数的语法格式如下&#xff1a; traceback.print_exc(limit None, file None,chain Tru…

mailbox驱动框架设计

文章目录 mailbox 驱动设计一、mailbox控制器/client驱动设计二、编译实例三、测试总结 mailbox 驱动设计 Mailbox&#xff08;邮箱&#xff09;是一种在多核系统中用于处理器间通信的机制。它允许不同的核心或处理器之间发送和接收消息&#xff0c;通常用于协调任务、同步状态…

【学一点儿前端】iOS微信小程序在密码input框中使用系统保存的密码后,密码v-model绑定值不更新的问题

碰到问题 又双叕碰到阴间bug&#xff0c;这回碰到了一生之敌iOS产生的兼容性问题 在iOS11中&#xff0c;支持密码的快速填充。这让iOS用户在微信小程序进行登录的时候&#xff0c;可以把当前账号密码保存进系统密码箱&#xff0c;之后再次登录时&#xff0c;输入账号后点击密码…

【软件工程】【22.04】p2

关键字&#xff1a; 软件开发分本质及涉及问题、需求规约与项目需求不同、用况图概念包含模型元素及其关系、创建系统的用况模型RUP进行活动、软件生存周期&软件生存周期模型&软件项目过程管理关系、CMMI基本思想 模块结构图&#xff1a;作用域、控制域&#xff1b;语…

【Linux命令】top linux下的任务管理器

一、概述 top命令是Linux下常用的性能分析工具&#xff0c;能够实时显示系统中各个进程的资源占用状况&#xff0c;类似于Windows的任务管理器。top是一个动态显示过程&#xff0c;即可以通过用户按键来不断刷新当前状态。如果在前台执行该命令&#xff0c;它将独占前台&#…

kafka 和Zookeeper 集群架构设计对比分析

kafka 和Zookeeper 集群架构设计对比分析 Kafka 和 Zookeeper 是两个关键的分布式系统组件,它们在集群架构设计上有显著的差异。 下面是对它们在集群架构设计方面的对比分析。 1. Kafka 集群架构设计 1.1 基本架构 Kafka 是一个分布式消息系统,由多个 Broker 组成。每个 …

rust 引用了Trait的实现,为什么还需要引入Trait 才能调用实现的方法

文章目录 1. Rust中结构体实现trait与方法调用的关系2. 要调用trait方法,有几种方式:3. code 1. Rust中结构体实现trait与方法调用的关系 在Rust中,当一个结构体实现了某个trait时,不能直接通过结构体调用trait中定义的方法。这是因为: trait方法不是结构体的固有方法。它们是…

文献阅读(307)AccelWattch

题目&#xff1a;AccelWattch: A Power Modeling Framework for Modern GPUs时间&#xff1a;2021会议&#xff1a;MICRO研究机构&#xff1a;西北大学 本篇论文的主要贡献&#xff1a; 提出了一个GPU功耗模型&#xff0c;考虑了DVFS, thread divergence, intra-warp function…

关于PHP中删除JSON指定元素unset和array_splice的区别

1. unset(mixed $var, mixed ...$vars): void unset 不会改变原有索引顺序 ------------------------- 2. array_splice( array &$array, int $offset, ?int $length null, mixed $replacement [] ): array array_splice 删除后&#xff0c;会重新排序…

小程序人脸分析

公司的业务需求是用户在使用某个功能前&#xff0c;必须使用人脸识别&#xff0c;确保当前使用人是用户本人&#xff0c;防止某些功能乱用。后端用的是腾讯的人脸识别方案&#xff0c;这里只是前端的识别代码&#xff0c;保证人脸剧中&#xff0c;大小合适&#xff0c;有一个人…

四十二、 我国粤港澳大湾区个人信息出境标准合同如何签署和备?

《大湾区标准合同》是注册于&#xff08;适用于组织&#xff09;/位于&#xff08;适用于个人&#xff09;粤港澳大湾区内地部分&#xff0c;或者香港特别行政区的个人信息处理者&#xff08;就内地而言&#xff0c;是指在个人信息处理活动中自主决定处理目的、处理方式的组织、…

4418 HMI 更换logo 图片

逻辑说明&#xff1a; HMI 的 kernel 没有提供源码&#xff0c;只是提供了镜像&#xff0c;如果客户需要更换自己的logo 的话&#xff0c; 可以使用提供的工具&#xff0c;将内核logo 打包起来。 我觉得这里的打包的过程应该是参考了&#xff0c; 4418 build_android.sh 脚…

自然语言处理课程论文

目录 1.背景介绍 1.1 文献介绍 1.2 研究背景 1.3 知识概述 1.3.1 机器翻译 1.3.2 attention机制与self-attention机制 2.数据来源与处理 2.1 数据集描述 2.2 数据处理 3. 模型架构 ​​​​​​​3.1 Positional Embedding ​​​​​​​3.2 Multi-Head Attention ​​​​​…

Go interface{}类型转换

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

华为HCIP Datacom H12-821 卷13

1.多选题 以下关于二层漫游和三层漫游的描述,以下说法正确的是? A、如果 STA 漫游时前后关联的 VLAN ID 相同则一定属于二层漫游 B、二层漫游是指客户端在同一子网内漫游 C、三层漫游是指客户端在不同子网间漫游 D、三层漫游前后 STA 关联的 AP 服务集上的 VL AN 必须相…

awk

1、定义 awk&#xff1a;按行取列 awk的默认分隔符&#xff1a;空格&#xff0c;tab键&#xff0c;有多个空格自动压缩成一个 2、awk的工作原理 根据指定信息逐行的读取文本内容&#xff0c;然后按照条件进行格式化输出 3、awk的选项 -F&#xff1a;指定分割符&#xff0…

SQL Server - ROLLUP、GROUPING、CUBE、GROUPING SET

文章目录 SQL Server - ROLLUP、GROUPING、CUBE、GROUPING SETROLLUP函数GROUPING函数GROUPING SET函数CUBE函数网上例子 写在前面&#xff1a;如果我们想要对分组之后的数据进行类似小计的计算&#xff0c;那么就需要使用到下面的函数 SQL Server - ROLLUP、GROUPING、CUBE、G…