前端编程艺术（4）---JavaScript进阶(vue前置知识)

于 2024-10-05 19:38:47 发布
阅读量607 收藏 9
点赞数 13
文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lys20221113242/article/details/142717211
版权

目录

1.变量和常量

2.模版字符串

3.对象

4.解构赋值

1.数组的解构

2.对象的解构

5.箭头函数

6.数组和对象的方法

7.扩展运算符

  8.Web存储

9.Promise

10.Async+Await

11.模块化

1.变量和常量

        JavaScript 中的变量和常量是用于存储数据的标识符。变量可以被重新赋值，而常量的值一旦被设置就不能被更改。

        变量用var或let关键字声明，let是块级作用域在{}之内可见，之外不可见：

function test() {
  let x = 5;
  console.log(x); // 输出 5
}

console.log(x); // 报错，x is not defined

        使用var声明的变量可以在声明之前使用，类型是undefined，而let声明的变量不可以：

console.log(x); // 报错，x is not defined
let x = 5;

        常量用const声明，一旦被赋值，值不会再改变：

const PI = 3.14159;

        但const声明数组和对象时，可以进行对数组和对象进行修改：

 const arr=[1,2,3];
 arr.push(4);
console.log(arr);

arr.shift()
console.log(arr)

const obj={
    name:'vue3',
    age:9
}
obj.birth=2015;
        
console.log(obj);
obj.age=10;

2.模版字符串

        模版字符串用反引号``表示：

let name=`Jack`;
let msg=`Hello world`;

        其中的字符串可以随意换行：

let htmlStr=`<div class="hot-goods-box">
   <h1>热门商品</h1>
    <p>卖爆了卖爆了卖爆了</p>
</div>`

        它还可以在字符串中嵌入表达式${内容}，可以替换用+拼接字符串：

let name='Bit';
let age=9;
let str=`My name is ${name},I am ${age} years old,I am ${age>=18?'已成年':'未成年'}`;
console.log(str);

3.对象

        对象：一个个的个体，具体的。对象=属性+方法，一堆属性和方法的集合。

        取值：点/中括号。

        简写：当对象的属性名和属性值名字一样的时候，可以只写一个，通常会配合变量使用。

const obj={
    name:'vue3',
    age:9
}
console.log(obj.name);
console.log(obj.age);

console.log(obj['name'])     
console.log(obj['age']) 
        
let x='name';
let y='age';
console.log(obj[x])
console.log(obj[y])

let min=1;
let max=99;

const obj1={
    min:min,
    max:max
}
console.log(obj1)

4.解构赋值

1.数组的解构

        JavaScript中，数组解构（Array Destructuring）是一种使用简洁语法同时将数组中的多个值赋给多个变量的方法。

const arr=[11,22,33];
// let [a,b,c]=arr;
// console.log(a,b,c);

let [,b,c]=arr;
console.log(b,c);

let [a,...rest]=arr;
console.log(a,rest);

        解构语法使用 [ ] 包裹要解构的变量，并通过逗号分隔。

        注意，解构赋值是按顺序赋值的。

2.对象的解构

        在JavaScript中，对象解构（Object Destructuring）是一种使用简洁语法同时将对象中的多个属性赋给多个变量的方法。

const obj={
    name:'上海第二工业大学',
    age:9,
    address:'上海市浦东新区'
}

// let name=obj.name;
// let age=obj.age;
// let adress=obj.address;

let {name:name,age:age,address:address}={
    name:'上海第二工业大学',
    age:9,
    address:'上海市浦东新区'
}
//let {name,age,address}=obj,简写版;
console.log(name,age,adress);

        解构语法使用 { } 包裹要解构的属性名，并通过逗号分隔。

        注意，解构赋值是根据属性名进行匹配的，所以 name 会得到对象 obj 中的 name 属性的值，age 得到 age 属性的值，以此类推。

5.箭头函数

        箭头函数（Arrow Function）是ECMAScript 6（ES6）中引入的一种更简洁的函数声明方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn(){}

        const fn=function(){}

        const result=fn()

        const fn=()=>{}

        const add=(x,y)=>{
            return x+y;
        }
        const result1=add(1,1);
        console.log(result1);

        const log=arg=>{//参数只有一个可以省略小括号
            console.log(log);
        }
        log(666);

        const add1=(x,y)=>x+y;//函数体只有一个语句，此时自带return功能

        const state=()=>({//返回对象时，为了简写，要给对象加一对小括号
            token:'xxx',
            userInfo:{
                name:'admin',
                id:1
            }
        })

        setTime(function(){//可用于回调函数传参
            console.log(666);
        },2000)
    </script>
</body>
</html>

6.数组和对象的方法

        数组是JavaScript中最常用的数据结构之一，提供了许多用于操作和处理数组的方法。下面是一些常用的数组方法：

数组的常用方法有如下几种：

        添加元素：push()、unshift()

const arr = [1, 2, 3];

arr.push(4); // 添加元素到数组末尾
console.log(arr); // [1, 2, 3, 4]

arr.unshift(0); // 添加元素到数组开头
console.log(arr); // [0, 1, 2, 3, 4]

        删除元素：pop()、shift()

const arr = [0, 1, 2, 3, 4];

arr.pop(); // 删除数组末尾的元素
console.log(arr); // [0, 1, 2, 3]

arr.shift(); // 删除数组开头的元素
console.log(arr); // [1, 2, 3]

        包含元素：includes()

const arr = [1, 2, 3];

console.log(arr.includes(2)); // true
console.log(arr.includes(4)); // false

        遍历元素：forEach()

const arr = [1, 2, 3];

arr.forEach(item => {
  console.log(item);
});

        过滤元素：filter()

const arr = [1, 2, 3, 4, 5];

const filteredArr = arr.filter(item => item % 2 === 0);
console.log(filteredArr); // [2, 4]

        映射元素：map()

const arr = [1, 2, 3];

const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // [2, 4, 6]

        检测每一个元素：every()

const arr = [1, 2, 3];

const isAllPositive = arr.every(item => item > 0);
console.log(isAllPositive); // true

        汇总元素：reduce()

const arr = [1, 2, 3];

const sum = arr.reduce((accumulator, item) => accumulator + item, 0);
console.log(sum); // 6

  Object.keys() 是 JavaScript 中的一个内置方法，用于获取一个对象的所有可枚举属性的键名，并返回一个由这些键名组成的数组。

        以下是 Object.keys() 方法的使用示例：

const obj = {
  name: 'John',
  age: 30,
  gender: 'male'
};

const keys = Object.keys(obj);

console.log(keys); // ['name', 'age', 'gender']

        在上面的示例中，我们声明了一个对象 obj，包含了三个属性。然后，通过调用 Object.keys(obj) 方法，我们获取了 obj 对象的所有键名，并将它们存储在 keys 数组中。

        需要注意的是，Object.keys() 方法只返回对象的可枚举属性的键名，不包括原型链上的属性或不可枚举的属性。如果需要获取所有属性，包括原型链上的属性，可以使用 for...in 循环。

for (let key in obj) {
  console.log(key); // 输出所有键名：name, age, gender
}

7.扩展运算符

        扩展运算符（Spread Operator）是ES6引入的一种语法，它可以将一个可迭代对象（如数组、字符串）展开为多个元素，用于函数调用、数组字面量、对象字面量等场景。

        函数调用中的扩展运算符：

function sum(a, b, c) {
  return a + b + c;
}

const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 6

        数组字面量中的扩展运算符：

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

        对象字面量中的扩展运算符：

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };

const combinedObject = { ...obj1, ...obj2 };
console.log(combinedObject); // { x: 1, y: 2, z: 3 }

        字符串中的扩展运算符：

const str = 'hello';

const chars = [...str];
console.log(chars); // ['h', 'e', 'l', 'l', 'o']

        扩展运算符还可以用于数组或对象的浅拷贝，如：

const arr = [1, 2, 3];
const copyArr = [...arr];

const obj = { x: 1, y: 2 };
const copyObj = { ...obj };

  8.Web存储

        Web存储是一种用于在浏览器中存储数据的机制，它允许开发人员在客户端存储和检索数据，以便在不同页面和会话之间进行持久化。

Web存储主要有以下两种方式：

  1. Local Storage（本地存储）：它提供了一种在浏览器中存储数据的简单方式，数据将一直保存在用户的本地存储空间中，直到被显式删除。使用Local Storage，可以存储大容量的数据，并且数据在浏览器关闭后仍然可用。

// 设置数据
localStorage.setItem('key', 'value');

// 获取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

        2.Session Storage（会话存储）：它与Local Storage类似，但数据仅在当前会话中有效。当          用户关闭浏览器标签页或会话结束时，会话存储中的数据将被清除。

// 设置数据
sessionStorage.setItem('key', 'value');

// 获取数据
const value = sessionStorage.getItem('key');

// 删除数据
sessionStorage.removeItem('key');

        3.Cookies（Cookie）：它是一种通过在浏览器中存储小型文本文件的方式，来跟踪用户和记录信息的机制。Cookies有一些限制，如存储容量较小（4KB）且需要在每个请求中传递给服务器。

// 设置Cookie
document.cookie = 'name=value';

// 获取Cookie
const cookieValue = document.cookie;

9.Promise

        Promise是一种用于处理异步操作的JavaScript对象。它是一种用于管理异步代码的设计模式，使得处理异步操作更加简洁和可读性更高。

        Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。初始状态是pending，当异步操作完成时，Promise会转为fulfilled状态，表示操作成功，或者转为rejected状态，表示操作失败。

Promise主要有以下方法：

  1. then()：用于处理Promise的成功状态，接受两个参数，分别是成功回调函数和可选的失败回调函数。

    promise.then(successCallback, errorCallback);

  2. catch()：用于处理Promise的失败状态，接受一个参数，即失败回调函数。

    promise.catch(errorCallback);

  3. finally()：在Promise无论成功或失败都会执行的回调函数。

    promise.finally(callback);

  4. Promise.resolve()：将一个值或者另一个Promise对象转为一个已解析（fulfilled）状态的Promise对象。

    const resolvedPromise = Promise.resolve(value);

  5. Promise.reject()：将一个错误原因转为一个拒绝（rejected）状态的Promise对象。

    const rejectedPromise = Promise.reject(reason);

  6. Promise.all()：接受一个Promise对象的数组，并返回一个新的Promise对象，该新Promise对象在所有的输入Promise对象都成功解析后才会成功解析。

    const allPromises = Promise.all([promise1, promise2, promise3]);

  7. Promise.race()：接受一个Promise对象的数组，并返回一个新的Promise对象，该新Promise对象在任何一个输入Promise对象成功解析或拒绝后就会解析或拒绝。

    const racePromise = Promise.race([promise1, promise2, promise3]);

下面是一个简单的示例，演示如何使用Promise处理异步操作：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data);
    }, 2000);
  });
};

fetchData()
  .then(response => {
    console.log('Success:', response);
  })
  .catch(error => {
    console.log('Error:', error);
  });

        在这个例子中，fetchData()函数返回一个Promise对象，通过定时器模拟异步操作。然后通过then()方法处理成功状态，并通过catch()方法处理失败状态。

10.Async+Await

        Async/Await是一种用于简化和改进异步操作处理的JavaScript语法。它建立在Promise之上，提供了一种更简洁、更易读的编写异步代码的方式。

        通过在函数前面添加async关键字，可以将该函数声明为异步函数。异步函数内部可以使用await关键字来等待一个Promise对象的解析结果，并将其赋值给一个变量。await关键字使得异步操作的代码看起来像是同步的，提高了代码的可读性。

下面是一个使用Async/Await的简单示例：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = 'Hello, World!';
      resolve(data);
    }, 2000);
  });
};

const fetchDataAsync = async () => {
  try {
    const response = await fetchData();
    console.log('Success:', response);
  } catch (error) {
    console.log('Error:', error);
  }
};

fetchDataAsync();

        在上面的示例中，fetchDataAsync函数是一个异步函数。它通过await关键字等待fetchData函数返回的Promise对象的解析结果。如果Promise对象被成功解析，结果将被赋值给response变量，然后打印出成功消息。如果Promise对象被拒绝，将会捕获错误并打印出错误消息。

        Async/Await使得异步代码可读性更高，且可以使用try/catch语句来处理错误，使得错误处理更加简洁。

        需要注意的是，Async/Await只能用于处理返回Promise对象的函数。

11.模块化

        模块化是一种组织和管理代码的方法，它将代码分割成不同的模块，每个模块负责特定的功能或任务。模块化的主要目的是提高代码的可维护性、可重用性和可扩展性。

在JavaScript中，有多种实现模块化的方式。下面介绍常用的几种模块化方法：

  1. 原始的模块化方法：通过使用全局对象（如window对象）来定义和访问模块，将模块的代码放在不同的script标签中。这种方法简单易懂，但容易导致全局命名冲突，不适合大型项目。

  2. 命名空间模式：使用对象来组织模块，并使用对象的属性来表示模块的方法和属性。这种方式可以避免全局命名冲突，但需要手动管理模块之间的依赖关系。

  3. AMD（Asynchronous Module Definition）：异步模块定义是一种异步加载模块的规范，主要用于浏览器环境。通过使用require函数和define函数来定义和加载模块。Require.js是一个实现AMD规范的流行库。

  4. CommonJS：CommonJS是一种用于服务器端的模块化规范，在Node.js中得到广泛应用。使用require函数来加载模块，使用module.exports来导出模块。

  5. ES6模块化：ES6模块化是在ECMAScript 6标准中引入的官方模块化规范。使用import关键字来导入模块，使用export关键字来导出模块。ES6模块化在语法上更加简洁和直观，并且可以静态分析，有利于编译器进行优化。

模块化的好处包括：

  • 代码的可维护性提高，模块之间相互独立，修改一个模块不会影响其他模块；
  • 代码的可重用性提高，可以在不同的项目中复用模块；
  • 开发效率提高，可以并行开发不同的模块；
  • 可测试性提高，可以对各个模块进行单元测试。

        总的来说，模块化是一种重要的开发方式，它帮助我们组织和管理代码，提高代码质量和开发效率。不同的项目和环境可能采用不同的模块化方法，根据具体情况选择适合的模块化方式。

        导入和导出是模块化中常用的概念，用于在不同模块之间共享和使用代码。

在JavaScript中，我们可以使用不同的语法来进行导入和导出。

导入（Import）：

  • ES6模块化：使用import关键字来导入模块。例如，import { functionName } from './module';。
  • CommonJS：使用require函数来导入模块。例如，const functionName = require('./module').functionName;。

导出（Export）：

  • ES6模块化：使用export关键字来导出模块。例如，export function functionName() { }。
  • CommonJS：使用module.exports来导出模块。例如，module.exports.functionName = functionName;。

        在ES6模块化中，还可以使用export default来导出默认值。例如，export default functionName;。 在导入时，可以使用import moduleName from './module';来导入默认值。

        需要注意的是，导入和导出的具体语法和规则在不同的模块化规范中有所差异。而且，不同的环境（如浏览器、Node.js等）对于模块化的支持也有所不同。

沥川同学
关注
CSS，HTML，JS 以及Vue前端面试题八股文总结【看完你就变高手】
蒙奇不想敲代码的博客
01-30 1万+
集合了前端大部分基础知识以及常见面试题，看完过初试完全没问题
Vue.js的魔法之路：探索Vue Router的奥秘与实战技巧【含代码示例】
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-31 1043
Vue Router作为Vue生态系统中的重要一环，极大地丰富了Vue应用的可能性。从简单的页面跳转到复杂的权限管理，Vue Router都能从容应对。但路由的配置与管理也是一门艺术，合理的组织结构和恰当的守卫策略能够大幅提升应用的用户体验和安全性。你在使用Vue Router的过程中遇到过哪些有趣或棘手的问题？又有哪些独到的解决办法或心得？欢迎在评论区分享你的故事，让我们共同探讨Vue Router的无限可能。欢迎来到我的博客，很高兴能够在这里和您见面！
前端进阶之路
ef_ef的博客
03-18 266
前端进阶之路 思维导图地址 https://zh.javascript.info/ 红宝书：JavaScript高级程序设计 绿宝书：JavaScript语言精髓与编程实践 黄宝书：你不知道的JavaScript(上/中) 蓝宝书：JavaScript设计模式与开发实践 react工程师修炼指南 JS DOM编程艺术（第2版）：看红宝书的前置书，因为比较简单 min-vue源码 didact源码 算法第四版 http权威指南 迷你书籍: DOM启蒙 Ja
谷粒商城 - 个人笔记(基础篇一)
知行
09-26 5万+
电商后台管理系统+电商系统，掌握微服务的全套方案。该系统有商品服务、仓储服务、订单服务、购物车服务、检索服务、认证中心服务、网关服务、用户服务、秒杀服务、第三方服务。使用SpringBoot+SpringCloud并配套SpringCloud Alibaba系列，引入全套微服务治理方案：Nacos注册中心/配置中心、Feign远程调用、Gateway网关、Redisson缓存、基于ElasticSearch7全文检索、异步编排与线程池、RabbitMQ柔性事务方案、Redisson分布式锁、分布式信号量等。
Vue2进阶篇学习笔记
热爱编程、热爱生活、热爱探索
09-07 1759
在这篇文章中，我将为你介绍Vue.js的一些进阶知识，帮助你快速入门并掌握Vue开发的一些进阶技巧。Vue.js是一个流行的JavaScript框架，被广泛用于构建现代化、交互式的Web应用程序。它采用了MVVM（Model-View-ViewModel）架构模式，通过数据驱动视图的方式实现了高效的前端开发。在这片文章中我们将学习**Vue脚手架**的使用、**组件的封装与使用**、**事件与动画**、**插槽**、**Vuex**和**VueRouter**、最后还有一些常用Vue组件库的推荐，如果你是一
春招面试题集
Xu_Angel的专栏
03-10 606
个人博客新地址→ 点我♪(＾∀＾●)ﾉ React和Vue对比 相同点: 数据驱动视图，提供了响应式（Reactive）和组件化（Composable）的视图组件。 都有Virtual DOM，组件化开发，通过props参数进行父子组件数据的传递，都实现webComponents规范 数据流动单向 都支持服务端渲染 都有支持native的方案，React的React native，Vue的...
Web前端框架应用：第3章 Vue开发基础-组件进阶.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 实例属性 组件进阶 学习目标 目录 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 实例属性 ☞点击查看本节相关知识点 ☞点击查看本节相关知识点 组件进阶 知识架构 ...
21-Vue 常考进阶知识点.htm
04-12
21-Vue 常考进阶知识点.htm
vue教程-入门学习-进阶
04-03
一个学习Vue的笔记及心得
vue-shop (2).zip 进阶版
04-11
vue-shop (2).zip 进阶版
图文详解Vue slot和slot-scope的用法和区别
热门推荐
weixin_43178406的博客
08-16 5万+
本文通过图文的形式详细介绍了Vue slot和slot-scope的用法和区别，希望能对学习Vue的同学们有所帮助。 文章目录 1. 背景描述 2. 什么是slot 3. slot分类 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 4. 2.6之后版本的变化
knowLedge-Vue I18n 是 Vue.js 的国际化插件
2301_76671906的博客
09-30 877
Vue 2 中使用 Vue I18n 插件实现中英文切换
JavaScript ArrayBuffer的读写与类型转换
白瑕 的博客
10-01 417
所有视图的基本单位是ArrayBuffer, ArrayBuffer中只存储二进制格式的数据.ArrayBuffer不可直接读写, 必须通过视图(比如DataView)暴露的API.
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞
2301_77012231的博客
10-01 386
沂机管理系统/data/Ajax.aspx接口存在SQL注入漏洞，攻击者可以获取服务器权限。bp 报错泄露绝对路径。sqlmap确认有漏洞。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 582
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Web认识 -- 第一课
ZxVSaccount的博客
09-30 1167
这里是我们进入前端学习的开端,在本次更新之后我会陆续上传html,css,javaScript等相关语言的教程,有感兴趣的小伙伴们点点关注,未来我们一起学习!IE、火狐和谷歌是目前互联网上的三大浏览器，其他常用的浏览器还有苹果的Safari浏览器和欧朋浏览器等。对于一般的网站，只要兼容IE浏览器、火狐浏览器和谷歌浏览器，就能满足绝大多数用户的需求。本节主要简单介绍了一下关于HTML、CSS、JavaScript的一些基本概念,有感兴趣的朋友,点点关注我们一起学习,博主持续更新中!
如何使用Redisson的布隆过滤器？
最新发布
付聪
10-02 322
【代码】如何使用Redisson的布隆过滤器？
React响应式修改数组和对象
警警的博客
09-30 776
React的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。你不能直接修改对象中的属性，而是需要创建一个新的对象来更新状态。不可变性（Immutability）：React中的状态是不可变的，这意味着你不能直接修改状态对象中的数组元素，而是需要创建一个新的数组来更新状态。避免直接修改状态：React的状态是不可变的，直接修改状态（如this.state.items.push(4)）不会触发重新渲染，因为React无法检测到这种变化。// 修改name属性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值