Python武器库开发-前端篇之JavaScript基础语法(三十五)

前端篇之JavaScript基础语法(三十五)

JavaScript字符串及常用方法

JavaScript中的字符串是一个包含零个或多个字符的序列，可以包含字母、数字、符号和空格等。以下是一些JavaScript中常用的字符串方法：

  1. length：返回字符串的长度，即字符个数。
let str = "javascript";
console.log(str.length); // 10
  1. indexOf(): 返回指定字符串在原字符串中首次出现的位置，如果没有找到则返回-1。
let str = "hello world";
console.log(str.indexOf("world")); // 6
  1. slice(): 提取字符串中指定范围内的字符，并将其作为一个新字符串返回
let str = "javascript";
console.log(str.slice(0, 4)); // java
  1. substring(): 提取字符串中指定范围内的字符，并将其作为一个新字符串返回。与slice()方法类似，但是不支持负数参数。
let str = "javascript";
console.log(str.substring(0, 4)); // java
  1. substr():提取字符串中从指定位置开始的指定数目的字符，并将其作为一个新字符串返回。和slice()方法类似，但第二个参数表示提取的字符数目。
let str = "javascript";
console.log(str.substr(4, 6)); // script
  1. replace(): 替换字符串中的指定字符。
let str = "hello world";
console.log(str.replace("world", "javascript")); // hello javascript
  1. toUpperCase(): 将字符串转换为大写字母
let str = "javascript";
console.log(str.toUpperCase()); // JAVASCRIPT
  1. toLowerCase(): 将字符串转换为小写字母
let str = "JAVASCRIPT";
console.log(str.toLowerCase()); // javascript
  1. trim(): 去掉字符串两端的空格
let str = "  javascript  ";
console.log(str.trim()); // javascript
  1. toUpperCase和toLowerCase: 将字符串转换为大写或小写
const str = "Hello";
console.log(str.toUpperCase()); // "HELLO"
console.log(str.toLowerCase()); // "hello"
  1. charAt和charCodeAt: 返回字符串指定位置的字符或字符编码
const str = "hello";
console.log(str.charAt(0)); // "h"
console.log(str.charCodeAt(0)); // 104
  1. concat: 将多个字符串连接在一起
const str1 = "hello";
const str2 = "world";
console.log(str1.concat(" ", str2)); // "hello world"
  1. split: 将字符串分割成一个字符串数组
const str = "hello world";
console.log(str.split(" ")); // ["hello", "world"]

JavaScript数组及常用方法

JavaScript中的数组是一种数据结构，可以存储多个值，并且这些值可以是不同的类型。以下是一些常用的JavaScript数组方法：

  1. push()：在数组的末尾添加一个新元素并返回数组的新长度。
let arr = [1, 2, 3];
arr.push(4);
console.log(arr);   // [1, 2, 3, 4]
  1. pop()：从数组的末尾删除一个元素并返回该元素的值。
let arr = [1, 2, 3];
let popped = arr.pop();
console.log(popped);   // 3
console.log(arr);      // [1, 2]
  1. shift()：从数组的开头删除一个元素并返回该元素的值
let arr = [1, 2, 3];
let shifted = arr.shift();
console.log(shifted);   // 1
console.log(arr);       // [2, 3]
  1. unshift()：在数组的开头添加一个新元素并返回数组的新长度
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr);  // [0, 1, 2, 3]
  1. slice()：返回一个新的数组，其中包含原始数组中指定的元素
let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 4);
console.log(sliced);   // [2, 3, 4]
  1. splice()：从数组中删除元素，并可以在删除的位置添加新元素
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr);  // [1, "a", "b", 4, 5]
  1. reverse()方法：颠倒数组中元素的顺序，并返回原数组
let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
  1. sort()方法：按照字母顺序或者数字顺序对数组进行排序，并返回原数组
let arr = [5, 1, 4, 2, 3];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
  1. forEach()方法：对数组中的每个元素依次执行指定的函数
let arr = [1, 2, 3];
arr.forEach(function(item, index, array) {console.log(item, index, array);
});

JavaScript类型转换

JavaScript中有多种类型转换方法，包括：

  • 显式类型转换（强制类型转换）：使用特定的函数或操作符将一个数据类型转换为另一个数据类型，例如Number()、String()、Boolean()等。
  • 隐式类型转换（自动类型转换）：在运行时自动将一个数据类型转换为另一个数据类型，例如字符串和数字的加法操作，布尔值和数字的比较等。

以下是一些常见的类型转换示例：

  1. 字符串转数字：
var str = "123";
var num = Number(str);
console.log(num); // 123
  1. 数字转字符串：
var num = 123;
var str = String(num);
console.log(str); // "123"
  1. 字符串转布尔值：
var str = "hello";
var bool = Boolean(str);
console.log(bool); // truevar str2 = "";
var bool2 = Boolean(str2);
console.log(bool2); // false
  1. 数字转布尔值：
var num = 0;
var bool = Boolean(num);
console.log(bool); // falsevar num2 = 10;
var bool2 = Boolean(num2);
console.log(bool2); // true
  1. 布尔值转数字：
var bool = true;
var num = Number(bool);
console.log(num); // 1var bool2 = false;
var num2 = Number(bool2);
console.log(num2); // 0

JavaScript闭包

闭包是指在JavaScript中，内部函数可以访问其外部函数作用域的特性。简单来说，一个函数返回另一个函数，且后者可以访问前者的变量，就形成了闭包。

闭包有两个主要特点：

  1. 内部函数可以访问其外部函数作用域的变量，包括外部函数在执行完毕后仍然存在的变量。

  2. 外部函数的变量可以被内部函数访问，但内部函数的变量不可被外部访问。

闭包的常见用途包括：

  1. 部分应用函数：将函数的部分参数固定下来，生成新的函数，方便重用。

  2. 封装变量：通过闭包封装变量，可以避免数据的全局污染，同时保护数据的安全。

  3. 异步操作：使用闭包可以在异步操作时，保存需要在异步函数中使用的值。

例如：

function outerFunction() {var outVar = "I'm outer";function innerFunction() {console.log(outVar); }return innerFunction;
}
var inner = outerFunction();
inner(); // 输出 "I'm outer"

在上例中，innerFunction()访问了outerFunction()的变量outVar，且由于innerFunction()作为outerFunction()的返回值被外部调用，outVar被封装在innerFunction()的闭包中，此时即使outerFunction()执行完毕，outVar仍然存在于内存中。

以下是一个简单的闭包示例：

function outerFunction(x) {function innerFunction(y) {return x + y;}return innerFunction;
}let inner = outerFunction(5);
console.log(inner(3)); // 输出 8

在这个例子中，outerFunction返回了innerFunction函数，因此我们可以用变量inner来存储它。然后我们调用inner(3)，它返回了5 + 3的结果8。注意这里的x变量是在outerFunction内部定义的，但是它在innerFunction内部仍然可用，这就是闭包。

JavaScript面向对象

JavaScript是一种面向对象的编程语言，它支持对象、类、继承、多态等面向对象的特性。

  1. 对象：JavaScript中的对象是一种由键值对组成的数据结构，可以通过.和[]操作符来访问对象的属性和方法。
var person = {name: "Tom",age: 20,sayHello: function() {console.log("Hello, my name is " + this.name);}
};
person.sayHello(); //输出：Hello, my name is Tom
  1. 类：JavaScript中的类是一种通过构造函数创建的对象模板，可以通过原型继承来复用代码。
function Person(name, age) {this.name = name;this.age = age;
}
Person.prototype.sayHello = function() {console.log("Hello, my name is " + this.name);
};
var person = new Person("Tom", 20);
person.sayHello(); //输出：Hello, my name is Tom
  1. 继承：JavaScript中的继承是基于原型链实现的，子类可以通过原型链获取父类的属性和方法
function Student(name, age, grade) {Person.call(this, name, age);this.grade = grade;
}
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;
Student.prototype.sayHello = function() {console.log("Hello, my name is " + this.name + " and I'm in grade " + this.grade);
};
var student = new Student("Jack", 18, 12);
student.sayHello(); //输出：Hello, my name is Jack and I'm in grade 12
  1. 多态：JavaScript中的多态是通过函数重载来实现的，可以根据传入的参数类型和数量来调用不同的函数
function add(x, y) {if (typeof x === "number" && typeof y === "number") {return x + y;} else if (typeof x === "string" && typeof y === "string") {return x.concat(y);} else {throw new TypeError("Unsupported operand types");}
}
console.log(add(1, 2)); //输出：3
console.log(add("Hello, ", "world!")); //输出：Hello, world!

JavaScript的DOM

DOM (Document Object Model) 是指一种表示文档内容的编程接口，它将 HTML 或 XML 文档表示为树形结构，并将树中的每个节点映射到一个对象。通过 DOM，开发人员可以使用 JavaScript 操作文档中的各个部分，包括元素、属性和文本。

在 JavaScript 中，可以通过使用 document 对象来访问 DOM。document 对象代表当前载入文档的窗口或框架，它提供了一些方法和属性，可以让开发人员访问和操作文档中的元素和属性。例如，可以使用 document.getElementById() 方法获取指定 ID 的元素，或使用 document.createElement() 方法创建新的元素。

下面是一些常见的 DOM 操作：

  1. 获取元素

可以使用 document.getElementById() 方法获取指定 ID 的元素，或使用 document.querySelector() 方法获取符合指定选择器的第一个元素，或使用 document.querySelectorAll() 方法获取符合指定选择器的所有元素。

例如：

var element = document.getElementById("my-element");
var element = document.querySelector(".my-class");
var elements = document.querySelectorAll("p");
  1. 操作元素的属性或内容

可以使用 element.getAttribute() 方法获取指定属性的值，或使用 element.setAttribute() 方法设置指定属性的值，或使用 element.innerHTML 属性访问或设置元素的内容。

例如：

var value = element.getAttribute("data-my-attribute");
element.setAttribute("data-another-attribute", "value");
element.innerHTML = "New content";
  1. 操作元素的样式

可以使用 element.style 属性访问或设置元素的样式属性。

例如：

element.style.backgroundColor = "red";
element.style.display = "none";

这些是一些基本的 DOM 操作，但 DOM API 很庞大，具体的操作方式可以查阅相关的文档或教程

JavaScript的BOM

BOM (Browser Object Model) 是指浏览器对象模型，它是 JavaScript 的一个重要组成部分，用于操作浏览器窗口和屏幕。BOM 提供了一组对象和方法，这些对象和方法允许 JavaScript 代码与浏览器进行交互。常见的 BOM 对象包括：

  1. window对象：代表浏览器中的窗口或标签页，它包含浏览器窗口的所有属性和方法，例如location、history、document、alert等。

  2. navigator对象：提供了有关浏览器的信息，例如浏览器的类型、版本、语言、操作系统等。

  3. screen对象：提供了有关用户屏幕的信息，例如屏幕的宽度、高度、像素密度等。

  4. history对象：提供了有关浏览器历史记录的信息，例如当前页面在浏览器历史记录中所处的位置，可以使用back、forward和go方法在历史记录中前进、后退或跳转。

  5. location对象：提供了有关当前文档的信息，例如当前文档的URL、协议、主机名、路径等，可以使用assign、reload和replace方法来改变当前文档的URL。

除了以上常用的对象和方法外，BOM中还有一些其他的对象和方法，例如alert、confirm、prompt等用于与用户交互的方法，以及setTimeout、setInterval等用于实现定时任务的方法。

BOM（浏览器对象模型）是JavaScript中与浏览器窗口和框架交互的一组对象和方法的集合。下面是BOM中的一些常见实例：

  1. Window对象：代表了浏览器窗口或框架
var newWindow = window.open('http://www.example.com', 'example', 'width=500,height=500');
newWindow.close(); //关闭新窗口
  1. Navigator对象：提供关于浏览器的信息，例如浏览器名称2和版本号
console.log(navigator.userAgent); //输出浏览器名称和版本号
  1. Location对象：提供了当前文档的URL信息
console.log(location.href); //输出当前URL
location.reload(); //重新加载当前文档
  1. History对象：提供了浏览器窗口历史记录的信息
history.back(); //返回上一页
history.forward(); //前往下一页
  1. Screen对象：提供了有关用户屏幕的信息
console.log(screen.width); //输出屏幕宽度
console.log(screen.height); //输出屏幕高度

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

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

相关文章

Nodejs+vue基于微信小程序的高校餐厅食品留样管理系统uniapp

Nodejs+vue基于微信小程序的高校餐厅食品留样管理系统uniapp

任何系统都要遵循系统设计的基本流程，本系统也不例外，同样需要经过市场调研，需求分析，概要设计，详细设计，编码，测试这些步骤，基于nodejs小程序技术设计并实现了小程序。采用B/S结构,…
阅读更多...
父进程隐藏——ConsoleApplication903项目

父进程隐藏——ConsoleApplication903项目

首先我发现用calc来做进程隐藏实验是失败的，父进程一直都是svhost.exe 那么我用我自己生成的cs木马beacon903.exe试试 试试explorer.exe 再试试cmd.exe 可以看到成功变成cmd.exe 可以看到我们可以通过这种方式虚假父进程 以上我们是直接获得的pid，那…
阅读更多...
微信小程序+中草药分类+爬虫+keras

微信小程序+中草药分类+爬虫+keras

目录 1 介绍2 数据爬虫3 模型训练和验证3.1 模型训练3.2 导入一张图片进行验证 4 后台flask部署5 微信小程序 1 介绍 本项目使用深度学习模型，训练5种中药材数据集，然后将其集成到微信小程序，通过微信小程序拍照，将图片传输给后端…
阅读更多...
MIT_线性代数笔记：第 08 讲 求解 Ax=b：可解性与结构

MIT_线性代数笔记：第 08 讲 求解 Ax=b：可解性与结构

目录 可解的条件 Solvability conditions on b特解 A particular solution通解 Complete solution与零空间进行线性组合 Combined with nullspace 秩 Rank 可解的条件 Solvability conditions on b 矩阵 A 的第三行为第一行和第二行的加和，因此 Axb 中 b 的第 3 个分…
阅读更多...
git常规使用方法，常规命令

git常规使用方法，常规命令

Git是一种分布式版本控制系统，它可以记录软件的历史版本，并提供了多人协作开发、版本回退等功能。以下是Git的基本使用方法： 安装Git：下载安装包并进行安装，安装完成后在命令行中输入 git --version 进行验证。 初始化…
阅读更多...
海翔云平台 getylist_login.do SQL 注入漏洞复现

海翔云平台 getylist_login.do SQL 注入漏洞复现

0x01 产品简介 海翔云平台一站式整体解决方案提供商，业务涵盖 批发、连锁、零售行业ERP解决方案、wms仓储解决方案、电商、外勤、移动终端（PDA、APP、小程序）解决方案。 0x02 漏洞概述 海翔云平台getylist_login.do接口处存在SQL注入漏洞&am…
阅读更多...
Android 13 - Media框架（14）- OpenMax（四）

Android 13 - Media框架（14）- OpenMax（四）

这一节继续了解 openmax 目录下的内容。 1、OMX_Core.h 1.1、OMX_BUFFERHEADERTYPE 这是一个比较关键的结构体，上层ACodec/MediaCodec用到的 buffer id、OMXNode 与 OMX component 进行 buffer 传递都是通过该结构体完成，这里将会初步了解结构体中的部…
阅读更多...
SVG图片选择库组件封装及使用

SVG图片选择库组件封装及使用

需求 需求： 在项目中通常需要做菜单管理，想要让左侧菜单好看一点，一般都会选择添加图标，需要自定义选择喜欢的图标，得提供一个有选择项的图标库 延伸需求：在项目中通常可能有好几个图标选择库，可…
阅读更多...
CentOS 系列：CentOS 7文件系统的组成

CentOS 系列：CentOS 7文件系统的组成

CentOS 7文件系统的组成 文件系统的组成Linux的一些重要目录文件和目录名主机名文件权限绝对路径和相对路径绝对路径相对路径 文件系统的组成 一切从根开始 文件路径中只有第一个/是根目录，后面的/是分隔符 文件名区分大小写 除斜线(/)以外，其他的字符…
阅读更多...
ruoyi-plus使用Statistic统计组件升级element-plus

ruoyi-plus使用Statistic统计组件升级element-plus

原本使用的就是gitee上lionli的ruoyi-plus版本的代码。但是在使用过程中作首页数据看板时想使用elementui的Statistic统计组件。结果在浏览器控制台报错找不到组件el-statistic 于是查看elementui的历史版本，发现是在新版中才有这个组件，旧版本是没这个组…
阅读更多...
第六届传智杯第四题（abb）

第六届传智杯第四题（abb）

描述 leafee 最近爱上了 abb 型语句，比如“叠词词”、“恶心心” leafee 拿到了一个只含有小写字母的字符串，她想知道有多少个 "abb" 型的子序列？ 定义： abb 型字符串满足以下条件： 字符串长度为 3 。字符…
阅读更多...
高防CDN可以起到什么作用？

高防CDN可以起到什么作用？

高防CDN相对于普通的CDN加速，除了具备基础的加速功效外，高防CDN在每一节点上均有相应配置的防御功效，不仅具备了隐藏源站不被攻击的优势，也具备了访问加速，多节点防御的功效。随着互联网的不断发展，网络上的…
阅读更多...
网络安全技术

网络安全技术

网络安全概述 网络安全基础要素 机密性，完整性，可用性，可控性，可审查性 常见网络攻击和特点 1.网络监听 使用sniffer软件或主机接口设置成混杂模式，监听网络中的报文 使用加密技术防范 2.重放攻击 攻击者发送一…
阅读更多...
【运维】hive 高可用详解： Hive MetaStore HA、hive server HA原理详解；hive高可用实现

【运维】hive 高可用详解： Hive MetaStore HA、hive server HA原理详解；hive高可用实现

文章目录 一. hive高可用原理说明1. Hive MetaStore HA2. hive server HA 二. hive高可用实现1. 配置2. beeline链接测试3. zookeeper相关操作 一. hive高可用原理说明 1. Hive MetaStore HA Hive元数据存储在MetaStore中，包括表的定义、分区、表的属性等信息。 hi…
阅读更多...
软件工程 课堂测验 选择填空

软件工程 课堂测验 选择填空

系统流程图用图形符号表示系统中各个元素，表达了系统中各个元素之间的 信息流动 喷泉模型是一种以用户需求为动力，以 对象 为驱动的模型。 软件生存周期中最长的是 维护 阶段。 变换流的DFD由三部分组成，不属于其中一部分的是 事务中心 软…
阅读更多...
前端面试灵魂提问

前端面试灵魂提问

1.自我介绍 2.在实习中，你负责那一模块 3.any与unknow的异同 相同点：any和unkonwn 可以接受任何值 不同点：any会丢掉类型限制，可以用any 类型的变量随意做任何事情。unknown 变量会强制执行类型检查，所以在使用一个…
阅读更多...
Python 多层级导包

Python 多层级导包

假如我的项目层级结构如下，project文件夹为项目根路径： project/ ├── first/ │ ├── __init__.py │ ├── second/ │ │ ├── __init__.py │ │ └── second_test.py │ └── first_test.py └── main.py假设项目入口文…
阅读更多...
工具及方法 - 如何阅读epub文件：使用Adobe Digital Editions

工具及方法 - 如何阅读epub文件：使用Adobe Digital Editions

EPUB（Electronic Publication的缩写，电子出版）是一种电子图书标准，由国际数字出版论坛（IDPF）提出；其中包括3种文件格式标准（文件的扩展名为.epub），这个格式已…
阅读更多...
【模电】晶闸管

【模电】晶闸管

晶闸管 结构和等效模型工作原理晶闸管的伏安特性晶闸管的主要参数额定正向平均电流 I F I\tiny F IF维持电流 I H I\tiny H IH触发电压 U G U\tiny G UG和触发电流 I G I\tiny G IG正向重复峰值电压 U D R M U\tiny DRM UDRM反向重复峰值电压 U R R M U\tiny RRM URRM 晶体闸流…
阅读更多...
对Laxcus分布式操作系统的认知、价值、痛点解决的回答

对Laxcus分布式操作系统的认知、价值、痛点解决的回答

下面是一位网友的提问，回答贴出来供大家参考，欢迎在下方留言评论。 问： Laxcus分布式操作系统有哪些与众不同的地方？它的价值在哪里？解决了哪些市场痛点？我公司现在已经使用Linux操作系统部署了一堆服务器…
阅读更多...
最新文章

Copyright @ 2022~2023