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

最新推荐文章于 2024-06-13 17:51:12 发布
最新推荐文章于 2024-06-13 17:51:12 发布
阅读量203 收藏 2
点赞数 1
分类专栏： Python武器库开发 文章标签： 前端 python javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64973687/article/details/134679480
版权

前端篇之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); // true

var str2 = "";
var bool2 = Boolean(str2);
console.log(bool2); // false
  1. 数字转布尔值：
var num = 0;
var bool = Boolean(num);
console.log(bool); // false

var num2 = 10;
var bool2 = Boolean(num2);
console.log(bool2); // true
  1. 布尔值转数字：
var bool = true;
var num = Number(bool);
console.log(num); // 1

var 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); //输出屏幕高度
怰月
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
python转换js_python转换Javascript
weixin_39888180的博客
12-20 1835
PythonJS —— Python 转 JavaScript 代码PythonJS 详细介绍PythonJS 是一个用 Python 写的转换器，用来将 Python 代码转成快速的 JavaScript，可运行于 Node.js 平台上。PythonJS 的设计思路的快速和易于集成现有的 JavaScript 代码。使用方法：var pythonjs = ...文章青衫无名2017-06-02...
前端开发创新实践
GitChat
04-12 4955
内容简介 近年来，前端技术领域迅猛发展，各种新技术、框架、工具，层出不穷。业内众多优秀企业保持积极探索精神，对现有工具、技术进行了深入探索，甚至缘于研发工作需求进行了升级研发与深度定制。本期我们集合多位前端技术专家撰文分享各自在前端领域的创新探索实践。每篇文中都饱含了作者对诸多技术细节的改进思考，而一次次的改进也体现了他们追求完美的研发精神。...
JavaScript 学习笔记 —— 数据类型
我有两颗糖
02-20 360
1. 原始类型 JavaScript 提供了 7 种原始类型：string，number，boolean，bigint，symbol，null 和 undefined。 与对象不同的是，原始类型是轻量型的，它比对象“轻”，不许要占用太多空间，举个栗子： let str = "hhh"; alert(str.toUpperCase()); // HELLO 在这个过程中，创建了原始值 str，它不属于对象，但它可以像对象一样使用，在调用函数 toUpperCase时经历了下面的步骤： 创建一个包含字符串面
python开发网络小工具_python 网络工具
weixin_39664995的博客
12-16 360
书籍:掌握Python的网络和安全 Mastering Python for Networking and Security - 2018.pdf简介掌握Python的网络和安全掌握Python脚本以构建网络并执行安全操作。越来越明显的是，安全性是IT基础架构的一个关键方面。数据泄露是一个重大的安全事件，通常只是通过黑客攻击简单的网络线路来实现。提高网络的安全性有助于加强对网络攻击的防御。与此同...
第七篇 python基础之函数，递归，内置函数
yonggeit的博客
03-31 782
阅读目录 一 数学定义的函数与python中的函数 二 为何使用函数 背景提要 三 函数和过程 四 函数参数 五 局部变量和全局变量 六 前向引用之'函数即变量' 七 嵌套函数和作用域 八 递归调用 九 匿名函数 十 函数式编程 十一 内置函数 十二 本节作业 一 数学定义的函数与python中的函数 初中数学函数定义：一般的，在一个变化过程中，如果有两个变量x和y...
趣学python编程 (一、计算机发展历史)
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
11-16 546
未来是高度科技化和智能化的时代。过去不识字的叫“文盲”，如今不懂点计算机知识，则可能是新时代的“文盲”。不论从事什么行业，了解下计算机和编程都是有益的。Python 连续多年占据最受欢迎的编程语言榜首，未来Python有机会成为像英语一样的通用语言。
Python入门教程(从小白到高级)(新版)
热门推荐
weixin_47585269的博客
06-28 21万+
Python从一无所知到精通（新版） 吐槽：Hello,everyone.经历完广东中考折磨的我回来啦！不得不说这届广东考生真的有些困难，先后经历了疫情，然后这次中考又来了一份折磨人的数学试卷（初高中衔接，难度我也觉得有些大）…最后我也不多说了，但愿看到这篇教程的广东初三中考生知道过去的都过去了，不要再这么纠结与郁闷。人生路漫漫，不必因为数学失利而感到绝望，毕竟你难别人也会觉得难，你死了别人也可能跟你一样陪葬。收拾好行装，整理好心态，重新出发，活在当下，为未来努力奋斗才是实在。同时也祝愿广州考生能在七月的中
第四篇：python基础之条件和循环
yonggeit的博客
03-31 806
阅读目录 一.if语句 1.1 功能 1.2 语法 1.2.1：单分支，单重条件判断 1.2.2：单分支，多重条件判断 1.2.3：if＋else 1.2.4：多分支if＋elif＋else 1.2.5：if语句小结 1.3 案例 1.4 三元表达式 二.while语句 2.1 功能 2.2 语法 2.2.1：基本语法 2.2.2：计数循环 2.2.3：无限循环 ...
【零基础学python：超详细的入门教程！_python教程】
最新发布
lhx1771584985的博客
06-13 926
Python它是一种直译式，面向对象，解释式的脚本语言。它和Java,C/C++,Go语言一样都是高级语言，但由于它是解释式语言，所以运行速度会比Java，C/C++等语言慢（虽说隔壁Go也是解释式语言，但比它快很多）。不过任何事物有利也有弊，Python因为自身携带了许多库（如：OS、TCP、Urllib、Trutle)，语法简单，第三库也有很多（如飞机大战所需的pygame)，所以被称为胶水语言，同时也深受开发者青眯。Python之父：Guido van Rossum，荷兰人。
机器人Python编程与开发-第2章 基础语法.pdf
06-27
机器人Python编程与开发-第2章 基础语法.pdf机器人Python编程与开发-第2章 基础语法.pdf机器人Python编程与开发-第2章 基础语法.pdf机器人Python编程与开发-第2章 基础语法.pdf机器人Python编程与开发-第2章 基础...
python网络应用开发-网页前端基础.docx
11-06
python网络应用开发 实验报告
python 零基础学习篇web前端开发基础JavaScript基础15 定时器 .mp4
04-21
python 零基础学习篇
python 零基础学习篇Python基础语法14-字典拆包.ev4.mp4
04-21
python 零基础学习篇
Python库 | javascript-1!0.2.1-py3-none-any.whl
06-01
资源分类：Python库 所属语言：Python 使用前提：需要解压 资源全名：javascript-1!0.2.1-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 390
在vue.config.js中配置关闭Uncaught runtime errors显示。
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 544
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
Web前端网站设计案例：深入剖析创意与技术的完美融合
liyrbtqe_66w的博客
06-12 275
在性能优化方面，设计师通过压缩代码、减少HTTP请求、使用CDN等技术手段，提升了网站的加载速度和响应性能，为用户提供了更加流畅的访问体验。综上所述，本Web前端网站设计案例通过视觉设计、用户体验、技术实现、性能优化、创意表达、响应式设计和跨平台兼容等方面的综合考量，成功打造了一款既美观又实用的网站。这个案例充分展示了Web前端设计的魅力和潜力，为未来的网站设计提供了有益的借鉴和启示。设计师通过独特的视觉元素和创意构思，将品牌理念和文化内涵融入其中，使得整个网站在传达信息的同时，也展现出品牌的独特魅力。
vue3如何定义一个组件
Java程序员专栏
06-09 573
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
python前端开发库
05-19
Python有很多前端开发库可以使用，以下是其中几个常用的： 1. Flask：一个轻量级的Web应用框架，提供了构建Web应用所需的基本功能和组件。 2. Django：一个全功能的Web应用框架，包含ORM、模板引擎、表单处理等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

怰月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值