python测试开发---js基础

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="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.rhkb.cn/news/427726.html

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

相关文章

CleanMyMac 5 for Mac 最新中文破解版下载 系统优化垃圾清理工具

CleanMyMac 5 for Mac 最新中文破解版下载 系统优化垃圾清理工具

今天给大家带来的是CleanMyMac最新款CleanMyMac 5&#xff0c;它是一个全面的Mac清理和维护工具&#xff0c;通过提供多项强大的功能&#xff0c;帮助用户简化日常维护任务&#xff0c;提升系统性能&#xff0c;同时保护个人隐私和安全。无论是新手还是经验丰富的Mac用户&#…
阅读更多...
如何实现实时监控局域网计算机桌面？学会这5个妙招你就能搞定！

如何实现实时监控局域网计算机桌面？学会这5个妙招你就能搞定！

在现代企业环境中&#xff0c;实时监控局域网内的计算机桌面已成为确保工作效率、维护信息安全的重要手段。 无论是出于管理需求还是安全考虑&#xff0c;掌握这一技能对于IT管理员来说都至关重要。 本文将详细介绍五个妙招&#xff0c;帮助你轻松实现局域网内计算机桌面的实…
阅读更多...
python 自动化测试接口

python 自动化测试接口

比如我们要测试接口&#xff1a;identity/chatRecords/pages 已在Postman中有&#xff0c;那我们就可以直接从里面复制出Python脚本 新建&#xff1a; pagerequest.py import requests import jsonurl "http://192.168.31.132:70/identity/chatRecords/pages"payl…
阅读更多...
gin配置swagger文档

gin配置swagger文档

一、基本准备工作 1、安装依赖包 go get -u github.com/swaggo/swag/cmd/swag go get -u github.com/swaggo/gin-swagger go get -u github.com/swaggo/files2、在根目录上配置swagger的路由文件 //2.初始化路由router : initialize.Routers()// 配置swaggerdocs.SwaggerInfo…
阅读更多...
【网络安全】-ssrf服务器请求伪造攻击-burp

【网络安全】-ssrf服务器请求伪造攻击-burp

SSRF攻击服务器请求伪造攻击 CSRF攻击跨站请求伪造攻击也称客户端请求伪造攻击 两种攻击最主要的区别是一个在服务器&#xff0c;一个在客户端。 文章目录 前言 什么是SSRF攻击? 1.分类&#xff1a; 针对服务器的 SSRF 攻击&#xff1a; 针对后端系统的SSRF攻击&#xff1a; …
阅读更多...
一篇文章解决ComfyUI常见的故障报错！

一篇文章解决ComfyUI常见的故障报错！

前言 学习和使用ComfyUI最痛苦的是什么&#xff1f;就是这满屏的红色方框和和[报错信息] “报错信息”)&#xff0c;处理完一批又一批&#xff0c;很多人玩了一两个流程就搞不下去了&#xff0c;很多初学者因此就放弃了。 有道是&#xff1a;配置流程大半天&#xff0c;跑通出…
阅读更多...
【Python机器学习】NLP信息提取——值得提取的信息

【Python机器学习】NLP信息提取——值得提取的信息

目录 提取GPS信息 提取日期 如下一些关键的定量信息值得“手写”正则表达式&#xff1a; GPS位置&#xff1b;日期&#xff1b;价格&#xff1b;数字。 和上述可以通过正则表达式轻松捕获的信息相比&#xff0c;其他一些重要的自然语言信息需要更复杂的模式&#xff1a; 问…
阅读更多...
【win工具】win安装flameshot并设置截图快捷键

【win工具】win安装flameshot并设置截图快捷键

1.下载flameshot软件2.windows端配置flameshot快捷键3.取消win自带截图快捷键 1.下载flameshot软件 https://flameshot.org/#download installer版本为安装包 portable版本为免安装版 2.windows端配置flameshot快捷键 https://cloud.tencent.com/developer/article/2114952 W…
阅读更多...
Linux 防火墙：iptables （二）

Linux 防火墙：iptables （二）

文章目录 SNAT 原理与应用SNAT 应用环境SNAT 原理SNAT 转换前提条件SNAT 格式SNAT 转换规则配置 DNAT 原理与应用DNAT 应用环境DNAT 原理DNAT 转换前提条件DNAT 格式DNAT 转换规则配置 iptables 规则的备份和还原导出&#xff08;备份&#xff09;所有表的规则导入&#xff08;…
阅读更多...
电脑USB端口禁止软件有哪些？什么软件能指定USB端口禁用？分享四款好用软件！

电脑USB端口禁止软件有哪些？什么软件能指定USB端口禁用？分享四款好用软件！

想象一下&#xff0c;你正准备在办公桌上插入U盘&#xff0c;打算快速拷贝文件&#xff0c;突然系统蹦出一个警告&#xff1a;“这个USB端口已被禁用&#xff01;” 是不是感觉好像被一双隐形的手制止了&#xff1f; 其实&#xff0c;这双“隐形的手”就是专门为企业安全设计…
阅读更多...
redis群集三种模式：主从复制、哨兵、集群

redis群集三种模式：主从复制、哨兵、集群

redis群集有三种模式 redis群集有三种模式&#xff0c;分别是主从同步/复制、哨兵模式、Cluster&#xff0c;下面会讲解一下三种模式的工作方式&#xff0c;以及如何搭建cluster群集 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从复制…
阅读更多...
集采良药：从“天价神药”到低价良药，伊马替尼的真实世界研究！

集采良药：从“天价神药”到低价良药，伊马替尼的真实世界研究！

在医疗科技日新月异的今天&#xff0c;有一种药物以其卓越的疗效和深远的影响力&#xff0c;成为了众多患者心中的“精准武器”——伊马替尼。这款药物不仅在慢性髓细胞白血病&#xff08;CML&#xff09;的治疗上屡创佳绩&#xff0c;更是胃肠道间质瘤&#xff08;GIST&#x…
阅读更多...
哪个牌子的护眼台灯性价比高？网上排名前列的护眼台灯推荐

哪个牌子的护眼台灯性价比高？网上排名前列的护眼台灯推荐

现在市面上形形色色的打着“护眼”口号的台灯太多了&#xff0c;因为眼睛对于我们来说很重要&#xff0c;我们看到美丽的事物都因为有他&#xff0c;所以大家一听到护眼就会选择购买。很多商家为了赚钱&#xff0c;随便贴个标签就说护眼&#xff0c;其实一点用都没有。哪个牌子…
阅读更多...
AJAX Jquery $.get $.post $.getJSON

AJAX Jquery $.get $.post $.getJSON

AJAX AJAX Asynchronous JavaScript and XML (异步的J avascript和XML)。 Ajax $.ajax <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, in…
阅读更多...
828华为云征文｜基于华为云Flexus云服务器X实现个人博客搭建

828华为云征文｜基于华为云Flexus云服务器X实现个人博客搭建

文章目录 ❀前言❀部署前准备❀宝塔安装❀安全组开放❀web访问验证❀安装docker❀安装wordpress❀安全组开放18040端口❀访问博客网址❀发布个人博客❀总结 ❀前言 大家好&#xff0c;我是早九晚十二。 近期华为云推出了最新的华为云Flexus云服务器X&#xff0c;这款云主机在算…
阅读更多...
服务器自动巡检（Server automatic inspection）

服务器自动巡检（Server automatic inspection）

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:Linux运维老纪的首页…
阅读更多...
Microsoft Edge 五个神级插件

Microsoft Edge 五个神级插件

&#x1f423;个人主页 可惜已不在 &#x1f424;这篇在这个专栏 插件_可惜已不在的博客-CSDN博客 &#x1f425;有用的话就留下一个三连吧&#x1f63c; 目录 Microsoft Edge 一.安装游览器 ​编辑 二.找到插件商店 1.打开游览器后&#xff0c;点击右上角的设置&#x…
阅读更多...
九、二极管稳压电路

九、二极管稳压电路

二极管稳压电路
阅读更多...
BLE 协议之链路层

BLE 协议之链路层

目录 一、前言二、状态和角色三、Air Interface Packets1、Preamble 字段2、Access Address 字段2.1 静态地址2.2 私有地址 3、PDU 字段3.1 Advertising Channel PDU3.1.1 Header 字段3.1.2 Payload 字段 3.2 Data Channel PDU3.2.1 Header 字段3.2.2 Payload 字段 4、CRC 字段…
阅读更多...
STM32上实现FFT算法精准测量正弦波信号的幅值、频率和相位差（标准库）

STM32上实现FFT算法精准测量正弦波信号的幅值、频率和相位差（标准库）

在研究声音、电力或任何形式的波形时&#xff0c;我们常常需要穿过表面看本质。FFT&#xff08;快速傅里叶变换&#xff09;就是这样一种强大的工具&#xff0c;它能够揭示隐藏在复杂信号背后的频率成分。本文将带你走进FFT的世界&#xff0c;了解它是如何将时域信号转化为频域…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发