Javascript笔记

用于测试的API接口

网址:https://jsonplaceholder.typicode.com/

javascript 复制代码
//获取10个users的数据的接口
https://jsonplaceholder.typicode.com/users
//示例数据:
{
	 "id": 1,
	   "name": "Leanne Graham",
	   "username": "Bret",
	   "email": "Sincere@april.biz",
	   "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 循环用于遍历对象属性(自身的+原型链上的)

javascript 复制代码
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';
javascript 复制代码
// An highlighted block
var foo = 'bar';

展开操作符在对象上只复制对象的自身可枚举属性,不会包含继承的属性。

javascript 复制代码
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 };

console.log(obj2); // 输出:{ a: 1, b: 2, c: 3 }

对象展开不会复制对象的原型链上的属性,只会复制自身的属性。如果您希望深度复制对象,您可能需要使用其他方式,例如递归遍历对象的属性。

在vue2中使用refs

html 复制代码
<!DOCTYPE html>
<html>
<head>
    <title>Vue 2 Ref 示例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
        <input type="text" ref="myInput">
        <button @click="focusInput">Focus Input</button>
    </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 请求

javascript 复制代码
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

  1. 安装axios
powershell 复制代码
npm install axios
  1. 引入axios
javascript 复制代码
// 使用 CommonJS 模块语法
const axios = require('axios');

// 或者使用 ES6 模块语法
import axios from 'axios';
  1. axiosGET请求
javascript 复制代码
axios.get('https://api.example.com/data')
    .then(response => {
        // 请求成功,处理响应数据
        console.log(response.data);
    })
    .catch(error => {
        // 请求失败,处理错误
        console.error(error);
    });
  1. axios POST请求
javascript 复制代码
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使用方法

  1. 循环数组元素:
html 复制代码
<ul>
  <li v-for="item in items">{{ item }}</li>
</ul>
  1. 获取索引值:
html 复制代码
<ul>
  <li v-for="(item, index) in items">{{ index + 1 }}. {{ item }}</li>
</ul>
  1. 遍历对象的属性:
html 复制代码
<ul>
  <li v-for="(value, key) in object">{{ key }}: {{ value }}</li>
</ul>
  1. 循环嵌套数据:
html 复制代码
<ul>
  <li v-for="category in categories">
    {{ category.name }}
    <ul>
      <li v-for="product in category.products">
        {{ product.name }}
      </li>
    </ul>
  </li>
</ul>
  1. 使用索引值作为 id:
html 复制代码
<ul>
  <li v-for="(item, index) in items" :key="index">
    <!-- 使用索引值作为 id -->
    <span :id="'item-' + index">{{ item }}</span>
  </li>
</ul>
  1. 使用数据对象中的唯一属性作为 id:
html 复制代码
<ul>
  <li v-for="item in items" :key="item.id">
    <!-- 使用数据对象中的唯一属性作为 id -->
    <span :id="'item-' + item.id">{{ item.name }}</span>
  </li>
</ul>

vue中传递props

在父组件中定义 props:

javascript 复制代码
Vue.component('child-component', {
  props: ['message'],
  template: '<div>{{ message }}</div>'
});

在父组件中使用子组件并传递 props:

html 复制代码
<template>
  <div>
    <child-component :message="parentMessage"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      parentMessage: 'Hello from parent!'
    };
  }
};
</script>

在子组件中使用 props:

html 复制代码
<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 Tutorials

描述:编码查询参数用于在 URL 中包含特殊字符或空格。在上面的示例中,%20 代表空格。

组合查询参数:

示例:https://example.com/api/products?category=electronics\&priceMin=50

描述:可以同时使用多个查询参数来组合不同的过滤条件。

查询参数的使用取决于服务器端的 API 设计和文档,客户端通常需要遵循 API 的规范来正确构建和发送请求。在前端开发中,您可以使用 JavaScript 来动态生成 URL,包括查询参数,并使用库(如 Axios)来发送 HTTP 请求以与服务器通信。查询参数对于实现搜索、过滤、分页和配置 API 请求非常重要。

相关推荐
蜗牛快跑21310 分钟前
面向对象编程 vs 函数式编程
前端·函数式编程·面向对象编程
Dread_lxy11 分钟前
vue 依赖注入(Provide、Inject )和混入(mixins)
前端·javascript·vue.js
涔溪1 小时前
Ecmascript(ES)标准
前端·elasticsearch·ecmascript
榴莲千丞1 小时前
第8章利用CSS制作导航菜单
前端·css
奔跑草-1 小时前
【前端】深入浅出 - TypeScript 的详细讲解
前端·javascript·react.js·typescript
羡与1 小时前
echarts-gl 3D柱状图配置
前端·javascript·echarts
guokanglun1 小时前
CSS样式实现3D效果
前端·css·3d
咔咔库奇1 小时前
ES6进阶知识一
前端·ecmascript·es6
渗透测试老鸟-九青2 小时前
通过投毒Bingbot索引挖掘必应中的存储型XSS
服务器·前端·javascript·安全·web安全·缓存·xss
龙猫蓝图2 小时前
vue el-date-picker 日期选择器禁用失效问题
前端·javascript·vue.js