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.mzph.cn/news/879796.shtml

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

相关文章

Linux Vim编辑器常用命令

Linux Vim编辑器常用命令

目录 一、命令模式快捷键 二、编辑/输入模式快捷键 三、编辑模式切换到命令模式 四、搜索命令 注&#xff1a;本章内容全部基于Centos7进行操作&#xff0c;查阅本章节内容前请确保您当前所在的Linux系统版本&#xff0c;且具有足够的权限执行操作。 一、命令模式快捷键 二…
阅读更多...
企业专用智能云盘 | 帮助企业便捷管控企业文档 | 天锐绿盘云文档安全管理系统

企业专用智能云盘 | 帮助企业便捷管控企业文档 | 天锐绿盘云文档安全管理系统

由于当前多数企业内部的办公文件普遍散落于各员工电脑中&#xff0c;导致存在诸多潜在的文档使用风险。为优化团队协作效率&#xff0c;天 锐 绿盘是一款集文档统一管理、高效协同于一体的企业云盘&#xff0c;帮助企业解决文档管理中的诸多难题。 【地址&#xff1a;点击了解天…
阅读更多...
【2023工业异常检测文献】SimpleNet

【2023工业异常检测文献】SimpleNet

SimpleNet:ASimpleNetworkforImageAnomalyDetectionandLocalization 1、Background 图像异常检测和定位主要任务是识别并定位图像中异常区域。 工业异常检测最大的难题在于异常样本少&#xff0c;一般采用无监督方法&#xff0c;在训练过程中只使用正常样本。 解决工业异常检…
阅读更多...
TCP客户端编码和解码处理：发送和接收指定编码消息

TCP客户端编码和解码处理：发送和接收指定编码消息

文章目录 引言基于Netty实现TCP客户端Netty发送GBK编码指令Netty接收GBK编码基于Channel发送指令基于ChannelHandlerContext发送指令：建立连接时发送登陆指令开启日志，查看报文信息基于ChannelInboundHandlerAdapter进行业务逻辑处理原生API实现TCP客户端基于DataOutputStrea…
阅读更多...
AI预测福彩3D采取888=3策略+和值012路或胆码测试9月19日新模型预测第92弹

AI预测福彩3D采取888=3策略+和值012路或胆码测试9月19日新模型预测第92弹

经过90多期的测试&#xff0c;当然有很多彩友也一直在观察我每天发的预测结果&#xff0c;得到了一个非常有价值的信息&#xff0c;那就是9码定位的命中率非常高&#xff0c;90多期一共只错了10次&#xff0c;这给喜欢打私房菜的朋友提供了极高价值的预测结果~当然了&#xff0…
阅读更多...
C语言中的assert断言

C语言中的assert断言

Assert断言 断言是程序中处理异常的一种高级形式。可以在任何时候启用和禁用断言验证&#xff0c;因此可以在测试时启用断言&#xff0c;而在部署时禁用断言。同样&#xff0c;程序投入运行后&#xff0c;最终用户在遇到问题时可以重新启用断言。 用法&#xff1a; #…
阅读更多...
23.面试题02.07链表相交

23.面试题02.07链表相交

public class Solution {public ListNode getIntersectionNode(ListNode headA, ListNode headB) {ListNode apheadA;ListNode bpheadB;int lenA0,lenB0;//求两个链表长度while(ap!null){apap.next;lenA;}while(bp!null){bpbp.next;lenB;}apheadA;bpheadB;int len0;//用来计算让…
阅读更多...
Msf之Python分离免杀

Msf之Python分离免杀

Msf之Python分离免杀 ——XyLin. 成果展示&#xff1a; VT查杀率:8/73 (virustotal.com) 火绒和360可以过掉&#xff0c;但Windows Defender点开就寄掉了 提示&#xff1a;我用360测的时候&#xff0c;免杀过了&#xff0c;但360同时也申报了&#xff0c;估计要不了多久就寄…
阅读更多...
【C++ Primer Plus习题】6.9

【C++ Primer Plus习题】6.9

大家好,这里是国中之林! ❥前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到网站。有兴趣的可以点点进去看看← 问题: 解答: #include <iostream> #include <string> #include <…
阅读更多...
2-99 基于matlab多尺度形态学提取眼前节组织

2-99 基于matlab多尺度形态学提取眼前节组织

基于matlab多尺度形态学提取眼前节组织&#xff0c;通过应用不同尺度的结构元素进行边缘检测&#xff0c;再通过加权融合的思想来整合检测到的边缘&#xff0c;降低图像噪声的影响&#xff0c;提高边缘检测的精度。程序已调通&#xff0c;可直接运行。 下载源程序请点链接&…
阅读更多...
OpenAI o1解决了「Quiet-STaR」的挑战吗？

OpenAI o1解决了「Quiet-STaR」的挑战吗？

随着OpenAI o1近期的发布&#xff0c;业界讨论o1关联论文最多之一可能是早前这篇斯坦福大学和Notbad AI Inc的研究人员开发的Quiet-STaR&#xff0c;即让AI学会先安静的“思考”再“说话” &#xff0c;回想自己一年前对于这一领域的思考和探索&#xff0c;当初也将这篇论文进行…
阅读更多...
Electron 图标修改

Electron 图标修改

目录 1. 图片基本要求 2. 在main.js中配置icon 位置 ​3. 在package.json 中配置icon 位置 4. 问题&#xff1a;左上角图片 开发环境下显示&#xff0c;生产环境下不显示 1. 图片基本要求 图片格式为ico&#xff0c;图片像素像素为256*256&#xff1b; 将ico文件放在pub…
阅读更多...
C++编译环境（IDE）推荐及安装

C++编译环境（IDE）推荐及安装

IDE是什么 嗨嗨嗨&#xff0c;我又来水博文了 今天来给大家推荐几款好用的IDE IDE是集成开发环境&#xff08;Integrated Development Environment&#xff09;的缩写&#xff0c;是一种软件应用程序&#xff0c;提供了用于软件开发的各种工具和功能&#xff0c;包括代码编辑…
阅读更多...
人工智能安全治理新篇章：《2024人工智能安全治理框架1.0版》深度解读@附20页PDF文件下载

人工智能安全治理新篇章：《2024人工智能安全治理框架1.0版》深度解读@附20页PDF文件下载

在数字化浪潮席卷全球的今天&#xff0c;人工智能&#xff08;AI&#xff09;技术正以前所未有的速度融入我们的日常生活&#xff0c;从智能助手到自动驾驶&#xff0c;从医疗诊断到金融风控&#xff0c;AI的身影无处不在。然而&#xff0c;技术的双刃剑特性也让我们不得不面对…
阅读更多...
螺栓与散装物体检测系统源码分享

螺栓与散装物体检测系统源码分享

螺栓与散装物体检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Comput…
阅读更多...
数据结构-3.3.栈的链式存储实现

数据结构-3.3.栈的链式存储实现

一.链栈的定义&#xff1a; 二.总结&#xff1a;
阅读更多...
Solidwork角度尺寸标注

Solidwork角度尺寸标注

效果如下&#xff1a; 首先&#xff0c; 先选第一条边 然后选第二条边&#xff0c;即可
阅读更多...
18.DHT11编程案例

18.DHT11编程案例

温湿度传感器 产品概述 DHT11数字温湿度传感器是一款含有已校准数字信号输出的温湿度复合传感器&#xff0c;应用领域&#xff1a;暖通 空调&#xff1b;汽车&#xff1b;消费品&#xff1b;气象站&#xff1b;湿度调节器&#xff1b;除湿器&#xff1b;家电&#xff1b;医疗…
阅读更多...
算法打卡：第十一章 图论part01

算法打卡：第十一章 图论part01

今日收获&#xff1a;图论理论基础&#xff0c;深搜理论基础&#xff0c;所有可达路径&#xff0c;广搜理论基础&#xff08;理论来自代码随想录&#xff09; 1. 图论理论基础 &#xff08;1&#xff09;邻接矩阵 邻接矩阵存储图&#xff0c;x和y轴的坐标表示节点的个数 优点…
阅读更多...
[2025]基于微信小程序慢性呼吸系统疾病的健康管理(源码+文档+解答）

[2025]基于微信小程序慢性呼吸系统疾病的健康管理(源码+文档+解答）

博主介绍&#xff1a; ✌我是阿龙&#xff0c;一名专注于Java技术领域的程序员&#xff0c;全网拥有10W粉丝。作为CSDN特邀作者、博客专家、新星计划导师&#xff0c;我在计算机毕业设计开发方面积累了丰富的经验。同时&#xff0c;我也是掘金、华为云、阿里云、InfoQ等平台…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023