python测试开发---js基础

news2024/9/20 6:03:34

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.coloradmin.cn/o/2148170.html

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

相关文章

口哨声、歌声、boing声和biotwang声：用AI识别鲸鱼叫声

口哨声、歌声、boing声和biotwang声：用AI识别鲸鱼叫声

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
算法打卡 Day41（动态规划）-理论基础 + 斐波那契数 + 爬楼梯 + 使用最小花费爬楼梯

算法打卡 Day41（动态规划）-理论基础 + 斐波那契数 + 爬楼梯 + 使用最小花费爬楼梯

文章目录 理论基础Leetcode 509-斐波那契数题目描述解题思路 Leetcode 70-爬楼梯题目描述解题思路 Leetcode 746-用最小花费爬楼梯题目描述解题思路 理论基础 动态规划&#xff0c;简称 DP&#xff0c;其中的每一个状态一定是由上一个状态推导出来的&#xff0c;而贪心算法没有…
阅读更多...
Mastering Qt 番外 —— 添加源码调试

Mastering Qt 番外 —— 添加源码调试

笔者最近正在尝试深入的学习Qt框架&#xff0c;经常需要明确我经常使用的类底下发生了什么&#xff0c;因此笔者决定仔细研究一下如何进行源码级别的调试 此篇文章将会介绍如何使用Qt Creator这个IDE进行调试。最终效果如下 EasyWay 笔者采用的是这个最简单明了的方式&#xff…
阅读更多...
回归预测|基于鹈鹕优化径向基神经网络的数据回归预测Matlab程序POA-RBF 多特征输入单输出 含基础RBF

回归预测|基于鹈鹕优化径向基神经网络的数据回归预测Matlab程序POA-RBF 多特征输入单输出 含基础RBF

回归预测|基于鹈鹕优化径向基神经网络的数据回归预测Matlab程序POA-RBF 多特征输入单输出 含基础RBF 文章目录 一、基本原理1. **饥饿游戏搜索优化算法&#xff08;POA&#xff09;简介**2. **径向基神经网络&#xff08;RBF&#xff09;简介**3. **POA-RBF回归预测流程**1. **…
阅读更多...
重修设计模式-设计原则

重修设计模式-设计原则

重修设计模式-设计原则 设计原则 设计原则是软件编码时所遵循的规则&#xff0c;旨在帮助开发者创建出既满足功能需求又易于维护、可扩展且美观的设计&#xff0c;理解设计原则可以提升代码质量、减少错误以及促进团队协作&#xff0c;但对设计原则的理解要灵活&#xff0c;不…
阅读更多...
前端vue-父传子

前端vue-父传子

父传子的话是在components中创建一个子组件MyTest.vue&#xff0c;并且在父组件中先导入(import MyTest from "./components/MyTest")&#xff0c;再注册&#xff08;在expo二default中写上 compnents:{MyTest}&#xff09;&#xff0c;再使用标签&#xff08;<My…
阅读更多...
深度学习后门攻击分析与实现（一）

深度学习后门攻击分析与实现（一）

在计算机安全中&#xff0c;后门攻击是一种恶意软件攻击方式,攻击者通过在系统、应用程序或设备中植入未经授权的访问点,从而绕过正常的身份验证机制,获得对系统的隐蔽访问权限。这种"后门"允许攻击者在不被检测的情况下进入系统,执行各种恶意活动。 后门可以分为几种…
阅读更多...
开源项目 GAN 漫画风格化 UGATIT

开源项目 GAN 漫画风格化 UGATIT

开源项目&#xff1a;DataBall / UGATIT GitCode * 数据集 * [该项目制作的训练集的数据集下载地址(百度网盘 Password: gxl1 )](https://pan.baidu.com/s/1683TRcv3r3o7jSitq3VyYA) * 预训练模型 * [预训练模型下载地址(百度网盘 Password: khbg )](https://pan.ba…
阅读更多...
安卓实现导入Excel文件

安卓实现导入Excel文件

使用简化版的jar包 api files(libs/poi-3.12-android-a.jar) api files(libs/poi-ooxml-schemas-3.12-a.jar) 导入遇到了两个兼容问题 1.build.gradle文件里面 android { 要添加 packagingOptions {exclude META-INF/INDEX.LIST } 2.加载大文件要在清单文件里面加androi…
阅读更多...
2023年全国研究生数学建模竞赛华为杯B题DFT类矩阵的整数分解逼近求解全过程文档及程序

2023年全国研究生数学建模竞赛华为杯B题DFT类矩阵的整数分解逼近求解全过程文档及程序

2023年全国研究生数学建模竞赛华为杯 B题 DFT类矩阵的整数分解逼近 原题再现&#xff1a; 一、问题背景   离散傅里叶变换&#xff08;Discrete Fourier Transform&#xff0c;DFT&#xff09;作为一种基本工具广泛应用于工程、科学以及数学领域。例如&#xff0c;通信信号…
阅读更多...
YOLO交通目标识别数据集（红绿灯-汽车-自行车-卡车等）

YOLO交通目标识别数据集（红绿灯-汽车-自行车-卡车等）

YOLO交通目标识别 数据集 模型 ui界面 ✓图片数量15000&#xff0c;xml和txt标签都有&#xff1b; ✓class&#xff1a;biker&#xff0c;car&#xff0c;pedestrian&#xff0c;trafficLight&#xff0c;trafficLight-Green&#xff0c;trafficLight-GreenLeft&#xff0c; t…
阅读更多...
java se 快速入门

java se 快速入门

文章目录 java se 快速入门Java 简介Java的优点jdk 和 jre安装jdk配置环境变量Java 语法快速入门程序入口文件名类规范 基本语法注释变量和常量输入输出条件语句循环语句 基本数据类型Java字符串常用方法字符串拼接java字节数组和字符串相互转化java字符数组和字符串相互转换ja…
阅读更多...
美畅物联丨技术前沿探索：H.265编码与畅联云平台JS播放器的融合应用

美畅物联丨技术前沿探索：H.265编码与畅联云平台JS播放器的融合应用

一、H.265 编码&#xff1a;视频压缩技术的重大变革 H.265&#xff0c;即被熟知为高效视频编码&#xff08;HEVC&#xff0c;High Efficiency Video Coding&#xff09;&#xff0c;由国际电信联盟电信标准化部门视频编码专家组&#xff08;ITU-T VCEG&#xff09;与国际标准化…
阅读更多...
去噪扩散隐式模型

去噪扩散隐式模型

dataset_name "datasets/oxford-102-flowers/" dataset_repetitions 2 # 数据集重复 num_epochs 25 image_size 64 # 模型训练和生成图像的大小 # KID 内核初始距离 kid_image_size 75 # 从噪声中逐步“去噪”或“扩散”到最终图像所需的步骤数。 kid_diffusi…
阅读更多...
计算机毕业设计Python+Flask微博情感分析 微博舆情预测 微博爬虫 微博大数据 舆情分析系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

计算机毕业设计Python+Flask微博情感分析 微博舆情预测 微博爬虫 微博大数据 舆情分析系统 大数据毕业设计 NLP文本分类 机器学习 深度学习 AI

首先安装需要的python库&#xff0c; 安装完之后利用navicat导入数据库文件bili100.sql到mysql中&#xff0c; 再在pycharm编译器中连接mysql数据库&#xff0c;并在设置文件中将密码修改成你的数据库密码。最后运行app.py&#xff0c;打开链接&#xff0c;即可运行。 B站爬虫数…
阅读更多...
VS code 创建与运行 task.json 文件

VS code 创建与运行 task.json 文件

VS code 创建与运行 task.json 文件 引言正文创建 .json 文件第一步第二步第三步 运行 .json 文件 引言 之前在 VS code EXPLORER 中不显示指定文件及文件夹设置&#xff08;如.pyc, pycache, .vscode 文件&#xff09; 一文中我们介绍了 settings.json 文件&#xff0c;这里我…
阅读更多...
商业终端架构技术-未来之窗行业应用跨平台架构

商业终端架构技术-未来之窗行业应用跨平台架构

未来之窗行业应用跨平台架构 以下是对未来之窗行业应用跨平台架构中客户端的稳定优势和网页跨平台性质的扩展列举&#xff1a; 一、客户端的稳定优势&#xff1a; 1. 离线可用性 - 即使在没有网络连接的…
阅读更多...
Redis的Key的过期策略是怎样实现的？

Redis的Key的过期策略是怎样实现的？

在学习Redis时&#xff0c;我们知道可以设置Key的过期时间&#xff0c;我们还知道&#xff0c;Redis一大特点–速度快。 那么当Redis中的数据量起来时&#xff0c;如果直接遍历所有的Key&#xff0c;那么对于Key过期时间的校验应该很费时间&#xff0c;那么Redis究竟是怎样做的…
阅读更多...
前端vue-插值表达式和v-html的区别

前端vue-插值表达式和v-html的区别

创建vue实例的时候&#xff0c;可以有两种形式。 1.let appnew Vue({}) 2 const appnew Vue({}) 3 el是挂载点&#xff0c;是上面div的id值 4 data中的值可以展示在上面div中 5 v-html标签里面如果有内容&#xff0c;则我们的新内容会把标签里面的内容覆盖掉
阅读更多...
2024 vue3入门教程：02 我的第一个vue页面

2024 vue3入门教程：02 我的第一个vue页面

1.打开src下的App.vue&#xff0c;删除所有的默认代码 2.更换为自己写的代码&#xff0c; 变量msg&#xff1a;可以自定义为其他&#xff08;建议不要使用vue的关键字&#xff09; 我的的第一个vue&#xff1a;可以更换为其他自定义文字 3.运行命令两步走 下载依赖 cnpm i…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023