Javascript笔记
用于测试的API接口
网址：https://jsonplaceholder.typicode.com/
//获取10个users的数据的接口
https://jsonplaceholder.typicode.com/users
//示例数据：
{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "[email protected]",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}
},
for…in
for…in 循环用于遍历对象属性（自身的+原型链上的）
const person = {
name: 'Alice',
age: 25,
occupation: 'Engineer'
};
for (const key in person) {
console.log(key, person[key]); // 输出属性名和属性值
}
只遍历对象自身的属性，而不包括继承的属性，使用 hasOwnProperty 。
下面展示一些 内联代码片。
// A code block
var foo = 'bar';
// An highlighted block
var foo = 'bar';
展开操作符在对象上只复制对象的自身可枚举属性，不会包含继承的属性。
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };
console.log(obj2); // 输出：{ a: 1, b: 2, c: 3 }
对象展开不会复制对象的原型链上的属性，只会复制自身的属性。如果您希望深度复制对象，您可能需要使用其他方式，例如递归遍历对象的属性。
在vue2中使用refs
DOCTYPE html>
<html>
<head>
<title>Vue 2 Ref 示例title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js">script>
head>
<body>
<div id="app">
<h1>{{ message }}h1>
<input type="text" ref="myInput">
<button @click="focusInput">Focus Inputbutton>
div>
<script>
new Vue({
el: '#app',
data: {
message: 'Hello, Vue!'
},
methods: {
focusInput() {
// 使用 this.$refs 来访问 ref
this.$refs.myInput.focus();
}
}
});
script>
body>
html>
AJAX 请求的示例，使用 XMLHttpRequest 发送 GET 请求
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4 && xhr.status === 200) {
const responseData = xhr.responseText;
// 处理响应数据
}
};
xhr.send();
使用axios
- 安装axios
npm install axios
- 引入axios
// 使用 CommonJS 模块语法
const axios = require('axios');
// 或者使用 ES6 模块语法
import axios from 'axios';
- axiosGET请求
axios.get('https://api.example.com/data')
.then(response => {
// 请求成功，处理响应数据
console.log(response.data);
})
.catch(error => {
// 请求失败，处理错误
console.error(error);
});
- axios POST请求
const data = {
username: 'john_doe',
password: 'secret123'
};
axios.post('https://api.example.com/login', data)
.then(response => {
// 请求成功，处理响应数据
console.log(response.data);
})
.catch(error => {
// 请求失败，处理错误
console.error(error);
});
vue中v-for使用方法
- 循环数组元素：
<ul>
<li v-for="item in items">{{ item }}li>
ul>
- 获取索引值：
<ul>
<li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}li>
ul>
- 遍历对象的属性：
<ul>
<li v-for="(value, key) in object">{{ key }}: {{ value }}li>
ul>
- 循环嵌套数据：
<ul>
<li v-for="category in categories">
{{ category.name }}
<ul>
<li v-for="product in category.products">
{{ product.name }}
li>
ul>
li>
ul>
- 使用索引值作为 id：
<ul>
<li v-for="(item, index) in items" :key="index">
<span :id="'item-' + index">{{ item }}span>
li>
ul>
- 使用数据对象中的唯一属性作为 id：
<ul>
<li v-for="item in items" :key="item.id">
<span :id="'item-' + item.id">{{ item.name }}span>
li>
ul>
vue中传递props
在父组件中定义 props：
Vue.component('child-component', {
props: ['message'],
template: '{{ message }}'
});
在父组件中使用子组件并传递 props：
<template>
<div>
<child-component :message="parentMessage">child-component>
div>
template>
<script>
export default {
data() {
return {
parentMessage: 'Hello from parent!'
};
}
};
script>
在子组件中使用 props：
<template>
<div>
<p>{{ message }}p>
div>
template>
<script>
export default {
props: ['message']
};
script>
查询参数的种类，区别和用法
查询参数（Query Parameters）是在 URL 中包含的键值对，用于向服务器传递数据或配置请求。它们通常用于在客户端（浏览器、应用程序等）和服务器之间传递信息，以便执行特定的操作或获取特定的数据。查询参数通常出现在 URL 的问号 ? 后面，多个参数之间使用 & 分隔。
以下是一些常见的查询参数的种类、区别和用法：
单一查询参数：
示例：https://example.com/api/resource?id=123
描述：单一查询参数包含一个键值对，用于传递单个数据项，如资源的唯一标识符。
多个查询参数：
示例：https://example.com/api/search?query=keyword&page=1&sort=asc
描述：多个查询参数允许一次传递多个键值对，通常用于搜索、分页和排序等操作。
布尔查询参数：
示例：https://example.com/api/products?featured=true
描述：布尔查询参数通常用于启用或禁用特定功能或过滤数据。在上面的示例中，featured 参数可以用来获取特色产品。
数字查询参数：
示例：https://example.com/api/items?priceMin=20&priceMax=50
描述：数字查询参数用于传递数字值，通常用于过滤或排序数据。在上面的示例中，它们用于获取价格在指定范围内的物品。
字符串查询参数：
示例：https://example.com/api/search?category=electronics
描述：字符串查询参数用于传递文本数据，通常用于过滤、搜索或配置选项。
日期和时间查询参数：
示例：https://example.com/api/events?startDate=2023-09-01&endDate=2023-09-30
描述：日期和时间查询参数用于传递日期和时间信息，通常用于筛选或获取在特定日期范围内的事件。
数组查询参数：
示例：https://example.com/api/products?colors=red&colors=blue&colors=green
描述：数组查询参数允许传递多个相同键的值，通常用于多选过滤器或多个选项。
编码查询参数：
示例：https://example.com/api/search?q=JavaScript%20Tutorials
描述：编码查询参数用于在 URL 中包含特殊字符或空格。在上面的示例中，%20 代表空格。
组合查询参数：
示例：https://example.com/api/products?category=electronics&priceMin=50
描述：可以同时使用多个查询参数来组合不同的过滤条件。
查询参数的使用取决于服务器端的 API 设计和文档，客户端通常需要遵循 API 的规范来正确构建和发送请求。在前端开发中，您可以使用 JavaScript 来动态生成 URL，包括查询参数，并使用库（如 Axios）来发送 HTTP 请求以与服务器通信。查询参数对于实现搜索、过滤、分页和配置 API 请求非常重要。