Python武器库开发-前端篇之JavaScript基础语法(三十五)
前端篇之JavaScript基础语法(三十五)
JavaScript字符串及常用方法
JavaScript中的字符串是一个包含零个或多个字符的序列，可以包含字母、数字、符号和空格等。以下是一些JavaScript中常用的字符串方法：
- length：返回字符串的长度，即字符个数。
let str = "javascript";
console.log(str.length); // 10
- indexOf(): 返回指定字符串在原字符串中首次出现的位置，如果没有找到则返回-1。
let str = "hello world";
console.log(str.indexOf("world")); // 6
- slice(): 提取字符串中指定范围内的字符，并将其作为一个新字符串返回
let str = "javascript";
console.log(str.slice(0, 4)); // java
- substring(): 提取字符串中指定范围内的字符，并将其作为一个新字符串返回。与slice()方法类似，但是不支持负数参数。
let str = "javascript";
console.log(str.substring(0, 4)); // java
- substr():提取字符串中从指定位置开始的指定数目的字符，并将其作为一个新字符串返回。和slice()方法类似，但第二个参数表示提取的字符数目。
let str = "javascript";
console.log(str.substr(4, 6)); // script
- replace(): 替换字符串中的指定字符。
let str = "hello world";
console.log(str.replace("world", "javascript")); // hello javascript
- toUpperCase(): 将字符串转换为大写字母
let str = "javascript";
console.log(str.toUpperCase()); // JAVASCRIPT
- toLowerCase(): 将字符串转换为小写字母
let str = "JAVASCRIPT";
console.log(str.toLowerCase()); // javascript
- trim(): 去掉字符串两端的空格
let str = " javascript ";
console.log(str.trim()); // javascript
- toUpperCase和toLowerCase: 将字符串转换为大写或小写
const str = "Hello";
console.log(str.toUpperCase()); // "HELLO"
console.log(str.toLowerCase()); // "hello"
- charAt和charCodeAt: 返回字符串指定位置的字符或字符编码
const str = "hello";
console.log(str.charAt(0)); // "h"
console.log(str.charCodeAt(0)); // 104
- concat: 将多个字符串连接在一起
const str1 = "hello";
const str2 = "world";
console.log(str1.concat(" ", str2)); // "hello world"
- split: 将字符串分割成一个字符串数组
const str = "hello world";
console.log(str.split(" ")); // ["hello", "world"]
JavaScript数组及常用方法
JavaScript中的数组是一种数据结构，可以存储多个值，并且这些值可以是不同的类型。以下是一些常用的JavaScript数组方法：
- push()：在数组的末尾添加一个新元素并返回数组的新长度。
let arr = [1, 2, 3];
arr.push(4);
console.log(arr); // [1, 2, 3, 4]
- pop()：从数组的末尾删除一个元素并返回该元素的值。
let arr = [1, 2, 3];
let popped = arr.pop();
console.log(popped); // 3
console.log(arr); // [1, 2]
- shift()：从数组的开头删除一个元素并返回该元素的值
let arr = [1, 2, 3];
let shifted = arr.shift();
console.log(shifted); // 1
console.log(arr); // [2, 3]
- unshift()：在数组的开头添加一个新元素并返回数组的新长度
let arr = [1, 2, 3];
arr.unshift(0);
console.log(arr); // [0, 1, 2, 3]
- slice()：返回一个新的数组，其中包含原始数组中指定的元素
let arr = [1, 2, 3, 4, 5];
let sliced = arr.slice(1, 4);
console.log(sliced); // [2, 3, 4]
- splice()：从数组中删除元素，并可以在删除的位置添加新元素
let arr = [1, 2, 3, 4, 5];
arr.splice(1, 2, "a", "b");
console.log(arr); // [1, "a", "b", 4, 5]
- reverse()方法：颠倒数组中元素的顺序，并返回原数组
let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1]
- sort()方法：按照字母顺序或者数字顺序对数组进行排序，并返回原数组
let arr = [5, 1, 4, 2, 3];
arr.sort();
console.log(arr); // [1, 2, 3, 4, 5]
- forEach()方法：对数组中的每个元素依次执行指定的函数
let arr = [1, 2, 3];
arr.forEach(function(item, index, array) {
console.log(item, index, array);
});
JavaScript类型转换
JavaScript中有多种类型转换方法，包括：
- 显式类型转换（强制类型转换）：使用特定的函数或操作符将一个数据类型转换为另一个数据类型，例如Number()、String()、Boolean()等。
- 隐式类型转换（自动类型转换）：在运行时自动将一个数据类型转换为另一个数据类型，例如字符串和数字的加法操作，布尔值和数字的比较等。
以下是一些常见的类型转换示例：
- 字符串转数字：
var str = "123";
var num = Number(str);
console.log(num); // 123
- 数字转字符串：
var num = 123;
var str = String(num);
console.log(str); // "123"
- 字符串转布尔值：
var str = "hello";
var bool = Boolean(str);
console.log(bool); // true
var str2 = "";
var bool2 = Boolean(str2);
console.log(bool2); // false
- 数字转布尔值：
var num = 0;
var bool = Boolean(num);
console.log(bool); // false
var num2 = 10;
var bool2 = Boolean(num2);
console.log(bool2); // true
- 布尔值转数字：
var bool = true;
var num = Number(bool);
console.log(num); // 1
var bool2 = false;
var num2 = Number(bool2);
console.log(num2); // 0
JavaScript闭包
闭包是指在JavaScript中，内部函数可以访问其外部函数作用域的特性。简单来说，一个函数返回另一个函数，且后者可以访问前者的变量，就形成了闭包。
闭包有两个主要特点：
-
内部函数可以访问其外部函数作用域的变量，包括外部函数在执行完毕后仍然存在的变量。
-
外部函数的变量可以被内部函数访问，但内部函数的变量不可被外部访问。
闭包的常见用途包括：
-
部分应用函数：将函数的部分参数固定下来，生成新的函数，方便重用。
-
封装变量：通过闭包封装变量，可以避免数据的全局污染，同时保护数据的安全。
-
异步操作：使用闭包可以在异步操作时，保存需要在异步函数中使用的值。
例如：
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是一种面向对象的编程语言，它支持对象、类、继承、多态等面向对象的特性。
- 对象：JavaScript中的对象是一种由键值对组成的数据结构，可以通过.和[]操作符来访问对象的属性和方法。
var person = {
name: "Tom",
age: 20,
sayHello: function() {
console.log("Hello, my name is " + this.name);
}
};
person.sayHello(); //输出：Hello, my name is Tom
- 类：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
- 继承：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
- 多态：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 操作：
- 获取元素
可以使用 document.getElementById() 方法获取指定 ID 的元素，或使用 document.querySelector() 方法获取符合指定选择器的第一个元素，或使用 document.querySelectorAll() 方法获取符合指定选择器的所有元素。
例如：
var element = document.getElementById("my-element");
var element = document.querySelector(".my-class");
var elements = document.querySelectorAll("p");
- 操作元素的属性或内容
可以使用 element.getAttribute() 方法获取指定属性的值，或使用 element.setAttribute() 方法设置指定属性的值，或使用 element.innerHTML 属性访问或设置元素的内容。
例如：
var value = element.getAttribute("data-my-attribute");
element.setAttribute("data-another-attribute", "value");
element.innerHTML = "New content";
- 操作元素的样式
可以使用 element.style 属性访问或设置元素的样式属性。
例如：
element.style.backgroundColor = "red";
element.style.display = "none";
这些是一些基本的 DOM 操作，但 DOM API 很庞大，具体的操作方式可以查阅相关的文档或教程
JavaScript的BOM
BOM (Browser Object Model) 是指浏览器对象模型，它是 JavaScript 的一个重要组成部分，用于操作浏览器窗口和屏幕。BOM 提供了一组对象和方法，这些对象和方法允许 JavaScript 代码与浏览器进行交互。常见的 BOM 对象包括：
-
window对象：代表浏览器中的窗口或标签页，它包含浏览器窗口的所有属性和方法，例如location、history、document、alert等。
-
navigator对象：提供了有关浏览器的信息，例如浏览器的类型、版本、语言、操作系统等。
-
screen对象：提供了有关用户屏幕的信息，例如屏幕的宽度、高度、像素密度等。
-
history对象：提供了有关浏览器历史记录的信息，例如当前页面在浏览器历史记录中所处的位置，可以使用back、forward和go方法在历史记录中前进、后退或跳转。
-
location对象：提供了有关当前文档的信息，例如当前文档的URL、协议、主机名、路径等，可以使用assign、reload和replace方法来改变当前文档的URL。
除了以上常用的对象和方法外，BOM中还有一些其他的对象和方法，例如alert、confirm、prompt等用于与用户交互的方法，以及setTimeout、setInterval等用于实现定时任务的方法。
BOM（浏览器对象模型）是JavaScript中与浏览器窗口和框架交互的一组对象和方法的集合。下面是BOM中的一些常见实例：
- Window对象：代表了浏览器窗口或框架
var newWindow = window.open('http://www.example.com', 'example', 'width=500,height=500');
newWindow.close(); //关闭新窗口
- Navigator对象：提供关于浏览器的信息，例如浏览器名称2和版本号
console.log(navigator.userAgent); //输出浏览器名称和版本号
- Location对象：提供了当前文档的URL信息
console.log(location.href); //输出当前URL
location.reload(); //重新加载当前文档
- History对象：提供了浏览器窗口历史记录的信息
history.back(); //返回上一页
history.forward(); //前往下一页
- Screen对象：提供了有关用户屏幕的信息
console.log(screen.width); //输出屏幕宽度
console.log(screen.height); //输出屏幕高度