python测试开发---js基础

ops/2024/9/20 11:04:39/

JavaScript (JS) 是一种广泛用于前端开发的编程语言，其主要用于实现网页的动态交互功能。要掌握 JavaScript 的基础知识，主要需要理解以下几个核心概念：

1. 变量与数据类型

JavaScript 提供了不同的数据类型，并允许通过 var、let 和 const 来声明变量。

  • 数据类型：
    • 基本类型：number（数字），string（字符串），boolean（布尔值），null，undefined，symbol，bigint。
    • 引用类型：object（对象），array（数组），function（函数）。
let age = 25;         // number
const name = "John";   // string
let isStudent = true;  // boolean
let empty = null;      // null
let unknown;           // undefined

2. 操作符

  • 算术运算符：+, -, *, /, %（取模），**（幂运算）。
  • 赋值运算符：=, +=, -=, *=, /=, %=。
  • 比较运算符：==，===，!=，!==，>，<，>=，<=。
  • 逻辑运算符：&&（与），||（或），!（非）。
let a = 10;
let b = 5;
let result = a + b;  // 15
let isEqual = (a === b);  // false
let logicResult = (a > b && b < 10);  // true

3. 条件语句

条件语句用于根据不同的条件执行不同的代码。

let age = 18;
if (age >= 18) {console.log("You are an adult");
} else {console.log("You are a minor");
}
  • switch 语句：用于在多个条件下选择执行某个代码块。
let day = 3;
switch (day) {case 1:console.log("Monday");break;case 2:console.log("Tuesday");break;default:console.log("Another day");
}

4. 循环

循环允许重复执行某段代码，直到满足某个条件。

  • for 循环：

    for (let i = 0; i < 5; i++) {console.log(i);
}

  • while 循环：

    let i = 0;
while (i < 5) {console.log(i);i++;
}

  • do…while 循环：

    let i = 0;
do {console.log(i);i++;
} while (i < 5);

5. 函数

函数是一段可重复使用的代码块，可以接受输入参数并返回结果。

  • 声明函数：

    function greet(name) {return "Hello, " + name;
}
console.log(greet("Alice"));

  • 箭头函数（ES6 引入的简写）：

    const greet = (name) => "Hello, " + name;
console.log(greet("Alice"));

6. 对象与数组

  • 对象：JavaScript 中的对象是一组键值对的集合，键是字符串，值可以是任何类型。

    let person = {name: "Alice",age: 25,greet: function() {console.log("Hello, " + this.name);}
};
person.greet();  // 输出: Hello, Alice

  • 数组：数组是一种特殊的对象，用于存储一组有序的值。

    let numbers = [1, 2, 3, 4, 5];
console.log(numbers[0]);  // 1
numbers.push(6);  // 添加元素到数组末尾
console.log(numbers.length);  // 6

7. 作用域与闭包

  • 作用域：作用域定义了变量的可访问范围。

    • 全局作用域：在代码的任何地方都可以访问全局变量。
    • 局部作用域：在函数内部声明的变量，只能在函数内部访问。

  • 闭包：闭包是指函数可以记住并访问它的词法作用域，即使函数是在词法作用域之外执行的。

    function outer() {let name = "Alice";return function inner() {console.log(name);  // 访问外部函数的变量}
}
let closureFunc = outer();
closureFunc();  // 输出: Alice

8. 事件与回调函数

  • 事件：JavaScript 用于捕捉用户与网页的交互，比如点击按钮、输入文本等。

    <button onclick="javascript language-javascript">alert('Button clicked!')">Click Me</button>

  • 回调函数：函数作为参数传递并在特定时刻被调用。

    function greet(name, callback) {console.log("Hello, " + name);callback();
}function sayBye() {console.log("Goodbye!");
}greet("Alice", sayBye);

9. ES6 新特性

  • let 和 const：let 用于声明局部变量，const 用于声明常量。
  • 模板字符串：使用反引号 ````和 ${} 插入变量。
    let name = "Alice";
console.log(`Hello, ${name}!`);
  • 解构赋值：快速从对象或数组中提取值。
    let person = { name: "Alice", age: 25 };
let { name, age } = person;
console.log(name, age);  // 输出: Alice 25
  • 箭头函数：简化函数表达式的语法。

10. 异步操作

JavaScript 是单线程语言，但可以通过异步操作来避免阻塞程序执行。

  • Promise：用于处理异步操作。

    let promise = new Promise((resolve, reject) => {let success = true;if (success) {resolve("Success!");} else {reject("Error!");}
});promise.then((message) => {console.log(message);
}).catch((error) => {console.error(error);
});

  • async/await：简化了异步操作的处理。

    async function fetchData() {let result = await fetch('https://api.example.com/data');let data = await result.json();console.log(data);
}

11. 面向对象编程 (OOP)

JavaScript 是一种基于原型的面向对象语言，可以通过对象和类来组织代码。

1) 类和对象
  • 类 (Class)：ES6 引入了类的语法，尽管类在本质上是基于 JavaScript 的原型系统构建的。
  • 对象：可以通过类来创建对象，或使用对象字面量的方式。
class Person {constructor(name, age) {this.name = name;this.age = age;}greet() {console.log(`Hello, my name is ${this.name}`);}
}let person1 = new Person("Alice", 25);
person1.greet();  // 输出: Hello, my name is Alice
2) 继承
  • 类可以继承另一个类的属性和方法，这使得代码复用更加容易。
class Animal {constructor(name) {this.name = name;}speak() {console.log(`${this.name} makes a sound.`);}
}class Dog extends Animal {speak() {console.log(`${this.name} barks.`);}
}let dog = new Dog("Rex");
dog.speak();  // 输出: Rex barks.

12. 模块化

模块化是将代码拆分为多个文件和模块，以便于管理和复用。JavaScript 提供了两种常见的模块化方式：ES6 模块 和 CommonJS 模块。

1) ES6 模块
  • 使用 export 和 import 关键字来定义和导入模块。
// utils.js
export function add(a, b) {return a + b;
}// main.js
import { add } from './utils.js';
console.log(add(2, 3));  // 输出: 5
2) CommonJS 模块
  • 在 Node.js 中常用的模块系统，使用 module.exports 和 require。
// utils.js
function add(a, b) {return a + b;
}
module.exports = { add };// main.js
const { add } = require('./utils');
console.log(add(2, 3));  // 输出: 5

13. 异步编程与事件循环

JavaScript 是单线程的，但它通过事件循环机制来处理异步任务，从而实现非阻塞的执行模式。

1) 事件循环 (Event Loop)
  • JavaScript 的事件循环负责将异步操作（如网络请求、定时器等）放入消息队列，待主线程空闲时再执行。
  • 回调队列 (Callback Queue) 和 微任务队列 (Microtask Queue)：微任务队列的优先级高于回调队列，Promise.then 属于微任务，而 setTimeout 属于回调任务。
console.log("Start");setTimeout(() => {console.log("Timeout");
}, 0);Promise.resolve().then(() => {console.log("Promise");
});console.log("End");

输出顺序：

Start
End
Promise
Timeout
2) Promise 链式调用
  • Promise 是异步操作的强大工具，可以通过链式调用来处理多个异步操作。
fetch('https://api.example.com/data').then(response => response.json()).then(data => {console.log(data);}).catch(error => {console.error('Error:', error);});
3) async/await
  • async/await 是 Promise 的语法糖，使得异步代码更易读和维护。
async function fetchData() {try {let response = await fetch('https://api.example.com/data');let data = await response.json();console.log(data);} catch (error) {console.error('Error:', error);}
}
fetchData();

14. 错误处理

JavaScript 提供了多种方式来捕捉和处理错误，确保程序的鲁棒性。

1) try…catch
  • 用于捕获在程序运行时出现的错误并进行处理。
try {let result = someUndefinedFunction();
} catch (error) {console.error('An error occurred:', error);
} finally {console.log('This will run regardless of success or failure');
}
2) Promise 错误处理
  • 在使用 Promise 时，catch 可以用来捕获异步操作中的错误。
fetch('https://api.example.com/data').then(response => response.json()).catch(error => console.error('Error:', error));
3) async/await 错误处理
  • 在 async/await 中，推荐使用 try...catch 进行错误处理。
async function fetchData() {try {let response = await fetch('https://api.example.com/data');let data = await response.json();console.log(data);} catch (error) {console.error('Error:', error);}
}

15. DOM 操作

DOM（文档对象模型）是用于操作网页元素的接口，JavaScript 可以通过 DOM API 动态修改页面内容。

1) 获取元素
  • document.getElementById(id)：通过元素的 ID 获取元素。
  • document.querySelector(selector)：通过 CSS 选择器获取元素。
let element = document.getElementById('myElement');
let button = document.querySelector('.myButton');
2) 修改元素
  • 修改内容：element.textContent 或 element.innerHTML。
  • 修改属性：element.setAttribute(name, value) 或 element.classList.add('className')。
let heading = document.getElementById('heading');
heading.textContent = "New Heading";let image = document.querySelector('img');
image.setAttribute('src', 'newImage.jpg');
3) 添加事件监听器

JavaScript 允许通过 addEventListener 方法为元素绑定事件。

let button = document.querySelector('button');
button.addEventListener('click', function() {console.log('Button clicked!');
});

16. 本地存储

JavaScript 提供了 Web Storage API 来在浏览器中存储数据。

1) localStorage
  • localStorage 是持久化的存储，除非手动清除或用户清除浏览器数据，否则数据不会过期。
localStorage.setItem('key', 'value');
let value = localStorage.getItem('key');
console.log(value);  // 输出: 'value'
localStorage.removeItem('key');
2) sessionStorage
  • sessionStorage 只在当前会话期间有效，浏览器关闭后数据就会被清除。
sessionStorage.setItem('key', 'value');
let value = sessionStorage.getItem('key');
console.log(value);  // 输出: 'value'
sessionStorage.removeItem('key');

17. Ajax 和 Fetch API

AJAX（Asynchronous JavaScript and XML）允许网页在不重新加载的情况下与服务器通信。Fetch API 是现代浏览器提供的用于替代传统 AJAX 请求的工具。

1) XMLHttpRequest
  • 传统的 AJAX 请求方法。
let xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {if (xhr.status === 200) {console.log(xhr.responseText);}
};
xhr.send();
2) Fetch API
  • Fetch API 更现代化，返回的是 Promise，简化了异步请求的处理。
fetch('https://api.example.com/data').then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

http://www.ppmy.cn/ops/113360.html

相关文章

Kafka集群扩容(新增一台kafka节点)

Kafka集群扩容(新增一台kafka节点)

kafka集群扩容、kafka topic迁移 现有环境 IP组件角色192.168.17.51kafka01broker1192.168.17.52kafka02broker2192.168.17.53kafka03broker3 扩容之后环境 IP组件角色192.168.17.51kafka01broker1192.168.17.52kafka02broker2192.168.17.53kafka03broker3192.168.17.54ka…
阅读更多...
本地git仓库配置远程仓库的地址

本地git仓库配置远程仓库的地址

在拉取&#xff08;pull&#xff09;代码之前&#xff0c;你需要确保你的本地Git仓库已经配置了远程仓库的地址。这通常是在你克隆&#xff08;clone&#xff09;仓库到本地时自动完成的&#xff0c;但如果你是在一个已经存在的本地目录中初始化Git仓库&#xff0c;或者你想要将…
阅读更多...
计算机毕业设计污染物文献共享数据库管理系统网站开发与实现

计算机毕业设计污染物文献共享数据库管理系统网站开发与实现

计算机毕业设计&#xff1a;污染物文献共享数据库管理系统网站开发与实现 1. 项目背景 随着环境问题日益严峻&#xff0c;对污染物的研究变得尤为重要。然而&#xff0c;在学术界和工业界之间存在着信息孤岛现象&#xff0c;即大量的研究成果被分散在不同的数据…
阅读更多...
2024年超好用的公司加密软件分享｜8款企业加密防泄密软件推荐

2024年超好用的公司加密软件分享｜8款企业加密防泄密软件推荐

在数字化时代&#xff0c;企业数据的安全性变得尤为重要。随着网络攻击和数据泄露事件的频发&#xff0c;企业需要采取有效的措施来保护敏感信息。加密软件作为企业数据保护的重要工具&#xff0c;能够有效防止数据泄露和未经授权的访问。本文将为您推荐8款2024年超好用的企业加…
阅读更多...
机器学习文献|基于循环细胞因子特征，通过机器学习算法预测NSCLC免疫治疗结局

机器学习文献|基于循环细胞因子特征，通过机器学习算法预测NSCLC免疫治疗结局

今天我们一起学习一篇最近发表在Journal for immunotherapy of cancer &#xff08;IF 10.9&#xff09;上的文章&#xff0c;Machine learning for prediction of immunotherapeutic outcome in non-small-cell lung cancer based on circulating cytokine signatures[基于循环…
阅读更多...
【Linux:共享内存】

【Linux:共享内存】

共享内存的概念&#xff1a; 操作系统通过页表将共享内存的起始虚拟地址映射到当前进程的地址空间中共享内存是由需要通信的双方进程之一来创建但该资源并不属于创建它的进程&#xff0c;而属于操作系统 共享内存可以在系统中存在多份&#xff0c;供不同个数&#xff0c;不同进…
阅读更多...
面向对象程序设计

面向对象程序设计

大纲 UML关系 UML类图 设计模式 真题1 真题2 真题3 1
阅读更多...
补题篇--codeforces

补题篇--codeforces

传送门&#xff1a;Problem - 1881C - Codeforces 题目大意&#xff1a; 思路&#xff1a; 首先解决这个问题要知道 一个 ( x , y ) 顺时钟旋转 90 &#xff0c; 180 &#xff0c; 270可以得到 ( y , n - x 1 ) &#xff0c; ( n - x 1 , n - y 1 ) &#xff0c;( n - y …
阅读更多...
最新文章

Copyright @ 2022~2023