【vue】前置知识学习

news2024/10/11 21:29:07

代码获取

知识小结

1. 常量和变量

  • let 定义变量
  • const 定义常量

2. 模板字符串

普通字符串是使用 “” 和 ‘’ 定义的

模板字符串是使用 `` 定义的

模板字符串的好处

  1. 可以换行
  2. 可以插入变量
  3. 可以插入表达式

3. 对象

取值

.点取值

[]方括号取值

// 对象定义
const obj = {
    name: '张三',
    age: 18,
};

// 对象取值
console.log(obj.name); // 点语法
console.log(obj['name']); // 方括号语法
let key = 'name'
console.log(obj[key]); // 方括号语法, 此时只能使用方括号语法

简写

// 简写
let name = '张三';
let age = 18;
const obj2 = {
    name,
    age,
};
console.log(obj2);

// 对象方法
const obj3 = {
    name: '张三',
    age: 18,
    // 不简写
    fn: function say() {
        console.log('hello');
    },
    // 简写
    say() {
        console.log('hello');
    }
};

4. 解构赋值

数组解构

const arr = [1, 2, 3, 4, 5];
// 数组取值
let a = arr[0];
let b = arr[1];
let c = arr[2];
// 解构赋值
let [d, e, f] = arr;
// 部分结构
let [g, , h] = arr; // 1, 3
let [,i,j] = arr;  // 2, 3
console.log(i,j);
let [k, ...l] = arr; // 1, [2, 3, 4, 5]
console.log(k,l);

对象解构

// 对象解构
const obj = {
    name: '张三',
    age: 18,
};

let {name, age} = obj;

5. 箭头函数

 // (参数...) => {函数体}
() => {}

6. 数组中的重要方法

添加

// 1. 添加
// push() 末尾添加
// unshift() 头部添加
// splice() 指定位置添加
arr.push(6);
console.log("push() 后的数组: ", arr);

arr.unshift(0);
console.log("unshift() 后的数组: ", arr); 
arr.splice(3, 0, 3.5); // 在 index 为 3 的位置, 先删除 0 个元素, 再添加 3.5
console.log("splice() 后的数组: ", arr);

删除

// 2. 删除
// pop() 末尾删除
// shift() 头部删除
// splice() 指定位置删除 
arr.pop();
console.log("pop() 后的数组: ", arr);
arr.shift();
console.log("shift() 后的数组: ", arr);
arr.splice(3, 1); // 在 index 为 3 的位置, 删除 1 个元素
console.log("splice() 后的数组: ", arr);

包含

// includes() 判断数组中是否包含某个元素
console.log(arr.includes(3.5)); // true
console.log(arr.includes(3.6)); // false

遍历

// 4. 遍历
// forEach() 遍历数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
arr.forEach((item, index) => {
    console.log(`\nindex: ${index}, item: ${item}`);
});

过滤

// 5. 过滤
// filter() 过滤数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let newArr = arr.filter((item, index) => {
    return item > 3;
});
console.log("filter() 后的数组: ", newArr);

映射

// 6. 映射
// map() 映射数组, 返回一个新数组
// 有三个参数: item, index, arr, Item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let mapArr = arr.map((item, index) => {
    return item * 2;
});
console.log("map() 后的数组: ", mapArr);
let objArr = arr.map((item,index) => [{index, item}]);
console.log("map() 后的数组对象: ", objArr);

检测

// 7. 检测
// every() 检测数组中的每个元素是否都符合条件
// 例如: 检测元素是否都是奇数
let isOdd = arr.every((item, index) => {
    /* 
      1、如果返回true, 说明当前元素满⾜条件, 则继续检测下⼀次;
        若都满⾜条件, 则最终返回true
      2、如果返回false, 说明当前元素不满⾜条件;
         ⽴即停⽌检测, 最终返回false 
    */
    return item % 2 === 1;
});

汇总

// 8. 汇总
// reduce() 汇总数组, 使用场景: 求和, 求积, 求最大值, 求最小值
// 有四个参数: pre, item, index, arr, pre 是上一次的返回值, item 是当前遍历的元素, index 是当前遍历的索引, arr 是当前遍历的数组
let sum = arr.reduce((pre, item, index) => {
    return pre + item;
}, 0);
console.log("reduce() 求知: ", sum);

// 使用js中的最小值定义
let min = arr.reduce((pre, item, index) => {
    return pre < item ? pre : item;
}, Number.MAX_VALUE);
let max = arr.reduce((pre, item, index) => {
    return pre > item ? pre : item;
}, Number.MIN_VALUE);
console.log("reduce() 求最小值: ", min);
console.log("reduce() 求最大值: ", max);

7. 对象中的重要方法

Object.keys() // 获得对象中的所有 key 值, 用于后续许多的数组复杂操作

8. 扩展运算符

运算符: ...

拷贝问题

const arr1 = [11, 22, 33]
// 复制数组
const arr2 = arr1 // 引用赋值, 浅拷贝
arr2.push(44)
console.log(arr1)// 受影响了
// 深拷贝
const arr3 = [...arr1] // 展开运算符, 深拷贝
// 复制对象
const obj1 = {name: '张三', age: 18}
const obj2 = obj1 // 引用赋值, 浅拷贝
obj2.name = '李四'
console.log(obj1) // 受影响了
// 深拷贝
const obj3 = {...obj1} // 展开运算符, 深拷贝
console.log(obj3);

合并数组和对象

// 合并数组
const arr1 = [1, 2, 3]
const arr2 = [4, 5, 6]
const arr3 = [...arr1, ...arr2]
console.log(arr3)
// 合并对象
const obj1 = {name: '张三'}
const obj2 = {age: 18}
const obj3 = {...obj1, ...obj2}
console.log(obj3)

9. 序列化和反序列化

JSON -> 字符串: stringify

字符串 -> JSON: parse

const JSONobj = {
    "name": "张三",
    "age": 18,
}
console.log(JSONobj);

// JSON对象转字符串 stringify
const JSONstr = JSON.stringify(JSONobj);
console.log(JSONstr);

// 字符串转JSON对象 parse
const JSONobj2 = JSON.parse(JSONstr)
console.log(JSONobj2);

10. Web存储

  1. sessionStorage: 当浏览器关闭时, 数据会被清除

  2. localStorage: 当浏览器关闭时, 数据不会被清除, 只有手动清除才会被清除

存: setItem(key,value)

取: value getItem(key)

删除: removeItem(key)

// 存储数据
sessionStorage.setItem('name', '张三');
localStorage.setItem('age', 18);

// 获取数据
console.log(sessionStorage.getItem('name'));
console.log(localStorage.getItem('age'));

// 删除数据
sessionStorage.removeItem('name');
localStorage.removeItem('age');

**注意: **存储对象的时候需要转序列化, 取的时候反序列化

// 存储对象的时候, 需要先转换为字符串
const obj = {
    name: '张三',
    age: 18,
};
const JSONstr = JSON.stringify(obj);
localStorage.setItem('obj', JSONstr);

// 获取对象的时候, 需要先转换为对象
const JSONobj = localStorage.getItem('obj');
const obj2 = JSON.parse(JSONobj);
console.log(obj2);

// 清空所有数据
sessionStorage.clear();
localStorage.clear();

11. Promise + Aysnc-Await

为什么需要 Promise

为了消除回调地狱

 // 需求: 延迟2秒之后输出1, 完了之后延迟1秒输出2, 完了之后延迟1秒输出3
 setTimeout(() => {
 console.log(1)
 setTimeout(() => {
 console.log(2)
 setTimeout(() => {
 console.log(3)
 }, 1000)
 }, 1000)
 }, 2000)

 // 上述代码存在的问题：回调套回调, 代码的可读性差

Promise 基本使用

// 2. Promise的基本使用
// 2.1 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
    // 异步操作
    setTimeout(() => {
        resolve('成功');
        // reject('失败');
    }, 2000);
});
// 2.2 调用 resolve() 或 reject() 方法
promise.then((value) => {
    console.log(value);
}).catch((error) => {
    console.log(error);
});

使用 Promise 消除回调地狱

// 3. 使用 promise 消除回调地狱
// 3.1 封装延迟函数
function delay(time,n) { // time 是延迟时间, n 是返回的值
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n);
        }, time);
    });
}
// 3.2 链式调用消除回调地狱
delay(1000, 1).then((n) => {
    console.log(n);
    return delay(1000, 2);
}).then((n) => {
    console.log(n);
    return delay(1000, 3);
}).then((n) => {
    console.log(n);
});

Async+Await异步终极解决⽅案

Async 声明方法

Await 用于暂停异步函数的执行, 等待 Promise 对象的状态发生改变

// 5. async 和 await 的基本使用
// 5.1 async 函数返回一个 Promise 对象
function delay(time, n) { // time 是延迟时间, n 是返回的值
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n);
        }, time);
    });
}

async function main() {
    // 1、在Promise实例前添加 await 关键字, 那么await的返回值就是当前 Promise 的 resolve 参数
    // 2、await所在的函数必须被 async 修饰
    // 3、async 函数内, 当前 await 执⾏结束了,代码才会继续往后执⾏(同步的⽅式执⾏）
    console.log(1);
    let n1 = await delay(1000, 1); // 那么await的返回值就是当前 Promise 的 resolve 参数
    console.log(n1);
    let n2 = await delay(1000, 2);
    console.log(n2);
    let n3 = await delay(1000, 3);
    console.log(n3);
}
main();

12. 模块化

1. 概述

模块化是指将⼀个复杂程序划分为⼀系列独⽴、可互操作的模块的过程。每个模块负责特定的功能或任务，并通过定义好的接⼝与其他模块进⾏通信。简单来说, 就是将代码进⾏分解、按功能进⾏管理。模块化的⽬的是提⾼代码的可维护性、可重⽤性、可测试性和可扩展性。开发者能够更容易地处理⼤型JavaScript项⽬。

2. ⽬录结构准备

  1. 新建 12-es-module ⽬录

  2. 命令⾏进⼊ 12-es-module ⽬录

  3. 执⾏ npm init , 初始化得到 package.json ⽂件

  4. 给 package.json 添加 “type”: “module”

  5. 根⽬录下新建 src/index.js 、作为代码的⼊⼝⽂件

  6. src ⽬录下新建 utils ⽬录

3. 默认导出与导⼊

// 默认导出 
// 定义并默认导出求最⼩值函数
export default function min(a,b) {
    return a < b ? a : b
}
// 注意: 默认导出 export default 在⼀个模块中最多出现1次



// 在 index.js 默认导入
// 默认导入
import min from './utils/min.js'

console.log(min(1,2)) ;

4. 按需导出与导入

// 按需导出
export function add(a, b) {
    return a + b
}

export function sub(a, b) {
    return a - b
}


// 在 index.js 按需导入
// 按需导入
import {add} from './utils/math.js'
console.log(add(1,2)) ;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2205905.html

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

相关文章

力扣第1题：两数之和（图解版）

力扣第1题：两数之和（图解版）

Golang版本 func twoSum(nums []int, target int) []int {m : make(map[int]int)for i : range nums {if _, ok : m[target - nums[i]]; ok {return []int{i, m[target - nums[i]]}} m[nums[i]] i}return nil }
阅读更多...
pip install ERROR: Could not install packages due to an OSError

pip install ERROR: Could not install packages due to an OSError

问题解决 pip install xxx报错&#xff1a; WARNING: Retrying (Retry(total4, connectNone, readNone, redirectNone, statusNone)) ERROR: Could not install packages due to an OSError 使用 pip install xxx --user 安装
阅读更多...
游离的 HEAD 如何解决

游离的 HEAD 如何解决

简介 问题描述&#xff1a;使用 IDEA 在提交代码时&#xff0c;禁止提交 如何解决&#xff1a;迁出分支再提交&#xff0c;最后合并到 main 或 master 上 如何解决
阅读更多...
面向抽象和面向接口的区别

面向抽象和面向接口的区别

‌1.概念 01、抽象类 在 Java 中&#xff0c;通过关键字 abstract 定义的类叫做抽象类。Java 是一门面向对象的语言&#xff0c;因此所有的对象都是通过类来描述的&#xff1b;但反过来&#xff0c;并不是所有的类都是用来描述对象的&#xff0c;抽象类就是其中的一种。 以下示…
阅读更多...
QT数据库QT_opencv

QT数据库QT_opencv

阅读更多...
接口测试常用工具及测试方法

接口测试常用工具及测试方法

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 接口一般来说有两种&#xff0c;一种是程序内部的接口&#xff0c;一种是系统对外的接口。 系统对外的接口&#xff1a;比如你要从别的网站或服务器上获取资源或信…
阅读更多...
vue基础语法的用法（API组合式风格）

vue基础语法的用法（API组合式风格）

一、项目文件结构 .vscode我们在那个编辑器中编辑时就会有对应的这个文件夹&#xff0c;不是固定的 进行编写代码前先把资源自带的页面删除&#xff0c;以防误导&#xff0c;可以像我一样的删除内容 vue文件结构 二、你好 vue el插值 script代码 v-text插值 script代码 三、…
阅读更多...
A2P云短信应用场景

A2P云短信应用场景

中国联通国际公司产品之 A2P 云短信 在当今这个全球化的商业环境中&#xff0c;企业要想在激烈的市场竞争中脱颖而出&#xff0c;不仅需要提供优质的产品和服务&#xff0c;还需要建立起与客户之间的紧密沟通桥梁。中国联通国际公司凭借其强大的国际通信能力和丰富的行业经验&…
阅读更多...
麒麟信安参编《信息技术应用创新 移动智能终端操作系统测试规范》

麒麟信安参编《信息技术应用创新 移动智能终端操作系统测试规范》

9月20日&#xff0c;广州信创协会团体标准编制培训会暨参编证书颁发仪式在北京举行。会上颁发了T/GZXC 003-2024《信息技术应用创新 移动智能终端操作系统测试规范》团体标准参编证书。麒麟信安作为重点参编单位之一&#xff0c;凭借在移动智能终端操作系统测试领域的丰富实践经…
阅读更多...
Python微震波频散相速分析

Python微震波频散相速分析

&#x1f3af;要点 在二维均匀介质均匀源中合成互相关函数以便构建波层析成像。闭环系统中微积分计算情景&#xff1a;完美弹性体震波、随机外力对模式的能量分配。开环系统中微积分计算情景&#xff1a;无数震源激发波方程、闭合曲线上的随机源、不相关平面波事件。整理地震波…
阅读更多...
鸿蒙NEXT开发-面试题库（最新）

鸿蒙NEXT开发-面试题库（最新）

注意&#xff1a;博主有个鸿蒙专栏&#xff0c;里面从上到下有关于鸿蒙next的教学文档&#xff0c;大家感兴趣可以学习下 如果大家觉得博主文章写的好的话&#xff0c;可以点下关注&#xff0c;博主会一直更新鸿蒙next相关知识 专栏地址: https://blog.csdn.net/qq_56760790/…
阅读更多...
LUCEDA IPKISS Tutorial 77：在版图一定范围内填充dummy

LUCEDA IPKISS Tutorial 77：在版图一定范围内填充dummy

案例分享&#xff1a;在给定的Shape内填充dummy 所有代码如下&#xff1a; from si_fab import all as pdk from ipkiss3 import all as i3 from shapely.geometry import Polygon, MultiPolygon import numpy as np import matplotlib.pyplot as pltclass CellFilledWithCon…
阅读更多...
【AI换脸】Rope一键整合包，实现视频多人实时换脸

【AI换脸】Rope一键整合包，实现视频多人实时换脸

随着人工智能技术的发展&#xff0c;人们越来越注重人机交互的趣味性和实用性。AI换脸技术正是在这种背景下兴起的一种创新应用。Rope换脸工具以其易用性和卓越的效果&#xff0c;成为了众多用户和专业人士青睐的对象。 Rope是什么&#xff1f; Rope是一款开源的deepfake软件&…
阅读更多...
Redis 的安装与部署（图文）

Redis 的安装与部署（图文）

前言 Redis 暂不支持Windows 系统&#xff0c;官网上只能下载Linux 环境的安装包。但是启用WSL2 就可以在Windows 上运行Linux 二进制文件。[要使此方法工作&#xff0c;需要运行Windows 10 2004版及更高版本或Windows 11]。本文在CentOS Linux 系统上安装最新版Redis&#xf…
阅读更多...
健身房预约小程序开发，高效管理健身场馆！

健身房预约小程序开发，高效管理健身场馆！

随着社会生活的提高&#xff0c;健身成为了人们在日常生活中的必要选择&#xff0c;而健身房也随之成为了大众经常光顾的地方。健身房预约管理系统是一个便捷预约健身的平台&#xff0c;可以让大众灵活预约&#xff0c;提高健身的便捷性和服务体验。同时&#xff0c;健身场馆也…
阅读更多...
JAVA 并发八股

JAVA 并发八股

线程与进程区别 进程是正在运行的程序的实例&#xff0c;进程中包含了线程&#xff0c;每个线程执行不同的任务 不同进程使用不同的内存空间&#xff0c;在当前进程下所有线程可以共享内存空间 线程更轻量&#xff0c;线程上下文切换成本一般上要比进程上下文切换低&#xff0…
阅读更多...
vueJS中wowjs、animate、swiper的使用

vueJS中wowjs、animate、swiper的使用

原文关注公众号 本文演示利用swiper纵向全屏滚动 npm 安装 wow.js&#xff0c;安装 wow.js后animate.css会自动安装&#xff1b; npm install wowjs --save-dev npm 安装 animate.css animate.css文档&#xff1a;http://5kzx.cn/doc.html npm install animate.css --save …
阅读更多...
Python和MATLAB及C++和Fortran胶体粒子数学材料学显微镜学微观流变学及光学计算

Python和MATLAB及C++和Fortran胶体粒子数学材料学显微镜学微观流变学及光学计算

&#x1f3af;要点 二维成像拥挤胶体粒子检测算法粒子的局部结构和动力学分析椭圆粒子成链动态过程定量分析算法小颗粒的光散射和吸收活跃物质模拟群体行为提取粒子轨迹粘弹性&#xff0c;计算剪切模量计算悬浮液球形粒子多体流体动力学概率规划全息图跟踪和表征粒子位置、大小…
阅读更多...
创建docker虚拟镜像，创建启动服务脚本

创建docker虚拟镜像，创建启动服务脚本

进入系统命令服务目录 编辑服务 [Unit] DescriptionDocker Application Container Engine Documentationhttps://docs.docker.com Afternetwork-online.target firewalld.service Wantsnetwork-online.target [Service] Typenotify ExecStart/usr/bin/dockerd ExecReload/bin/…
阅读更多...
Gradle 插件获取所有依赖项，类似 androidDependencies？

Gradle 插件获取所有依赖项，类似 androidDependencies？

诉求 在打包过程中我想知道某个模块的信息&#xff0c;比如&#xff1a; 模块androidx.work:work-runtime是否被依赖&#xff1f;模块androidx.work:work-runtime的版本号是多少&#xff1f; 我们利用 Android studio 已有的任务androidDependencies&#xff0c;双击执行很容…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023