前端 JS 实用操作总结

ops/2024/11/17 1:02:37/

目录

1、重构解构

1、数组解构

2、对象解构

3、...展开

2、箭头函数

1、简写

2、this指向

3、没有arguments

4、普通函数this的指向

3、数组实用方法

1、map和filter

2、find

3、reduce


1、重构解构

1、数组解构
javascript">    const arr = ["唐僧", "孙悟空", "猪八戒", "沙和尚"]
javascript">    const [a, b] = arrconsole.log(a, b)//打印  唐僧 孙悟空
javascript">    const [a, b, c] = arrconsole.log(a, b, c)//打印  唐僧 孙悟空 猪八戒
javascript">    const [a, b, , d] = arr  //跳过元素console.log(a, b, c, d)//打印  唐僧 孙悟空 沙和尚
javascript">    const [a, b, ...c] = arrconsole.log(c)//打印  [猪八戒,沙和尚]
2、对象解构
javascript">    const obj = {name: "Jack",age: 18,like: "jogging"}let a, b, c
javascript">    ({name: a, age: b, like: c} = obj)  //可读性差,不建议这样写console.log(a, b, c)//打印 Jack 18 jogging
javascript">    const {name, age, like} = objconsole.log(name, age, like)//打印 Jack 18 jogging
3、...展开
javascript">    //只要是可以遍历的对象,就可以通过...展开function fn(a, b, c) {return a + b + c}const arr = [1, 2, 3]let res = fn(...arr)console.log(res)//打印 6

数组拼接:

javascript">    //数组拼接const arr = [1, 2, 3]let arr2 = [...arr, 4, 5]console.log(arr2)//打印 [1, 2, 3, 4, 5]

将obj里的值在新对象中展开,相当于浅拷贝

javascript">    const obj = {name: "Jack",age: 18,like: "jogging"}const obj2={...obj}  //将obj里的值在新对象中展开,相当于浅拷贝console.log(obj2)//打印 {name: 'Jack', age: 18, like: 'jogging'}

拼接对象:

javascript">    const obj2 = {...obj, sex: "male"}console.log(obj2)//打印 {name: 'Jack', age: 18, like: 'jogging', sex: 'male'}

若有重复的属性,后面的会直接覆盖前面的属性,这里的name属性被后面的覆盖了:

javascript">    const obj2 = {...obj, sex: "male", name: "Mark"}console.log(obj2)//打印 {name: 'Mark', age: 18, like: 'jogging', sex: 'male'}

2、箭头函数

特点:传统函数的简写

(1)箭头函数没有自己的this,箭头函数里的this用的是父级作用域里的this

(2)箭头函数中没有实参arguments

(3)不能作为构造函数调用

(4)箭头函数的this,一旦确定后是无法更改的,无法使用call、bind、apply来修改this指向

1、简写
javascript">    //非0结尾的函数是对应简写//返回值必须是一个表达式才能简写//若返回值是对象必须加()const getObj0 = () => {return {name: "Jack"}}const getObj = () => ({name: "Jack"})const sum0 = (a, b, c) => {return a + b + c}const sum = (a, b, c) => a + b + cconst logTxt0 = a => {console.log(a)}const logTxt = a => console.log(a)const getData0 = () => {return "abc"}const getData = () => "abc"
2、this指向

测试箭头函数的this指向:

javascript">    const go = () => {console.log(this)}function Man() {const go = () => {console.log(this)}return {go}}let man = new Man()man.go()go()

打印:可以得出:箭头函数没有自己的this,箭头函数里的this用的是父级作用域里的this。

3、没有arguments

测试arguments实参:

javascript">    const go = (a, b, ...arg) => {try {console.log(arguments)} catch (error) {console.log("go没有arguments")}}function drive(a, b, ...arg) {console.log("function:", arguments)}go("a", "b", "c", "d", "e")drive("a", "b", "c", "d", "e")

打印:可以得出箭头函数并没有arguments实参,直接写肯定报错。

4、普通函数this的指向

首先在严格模式下测试:

javascript"><script>"use strict"function drive(a, b, ...arg) {console.log(this)}drive("a", "b")
</script>

打印:在严格模式下普通函数在全局中的this为undefined

非严格模式下:

javascript"><script>function drive(a, b, ...arg) {console.log(this)}drive("a", "b")
</script>

打印:在全局下为Window对象

其他情况下,不论是严格函数非严格模式,普通函数的this指向都是依调用者来定,即谁调用就指向谁:

javascript">    "use strict"function User() {function go() {console.log(this)}return {go}}const user = new User()user.go()

打印:

3、数组实用方法

1、map和filter
javascript">    const arr = [1, 2, 3, 4, 5, 6, 7]/*** @param value 每项元素* @param index 元素的索引* @param array 原数组*/const newArr = arr.map((value, index, array) => value + array[index])console.log("map会生成一个遍历后的新数组", newArr)/*** @param value 每项元素* @param index 元素的索引* @param array 原数组* 选项返回true则留,返回false则剔除,会生成一个由留下元素生成的数组*/const newFilterArr = arr.filter((value, index, array) => value % 2 === 0)console.log("会生成一个由留下元素生成的数组,偶数的数组:", newFilterArr)

打印:

2、find

与filter类似,选项返回true则留,返回false则剔除;不同在于,find查找到一个选项后,就立即返回停止执行了。

javascript">    const arr = [1, 2, 3, 4, 5, 6, 7]/*** @param value 每项元素* @param index 元素的索引* @param array 原数组* 与filter类似,选项返回true则留,返回false则剔除* 不同在于,find查找到一个就立即返回停止执行了*/const item = arr.find((value, index, array) => value % 2 === 0)console.log(item)

打印:

3、reduce

这个方法可以用来整合数组,他可以对数组中的值进行计算,最终数组中的所有元素合并为一个值。使用场景,累加、累乘等。

prev: 上一次运算结果

curr: 当前项

index: 当前索引

array: 原数组

javascript">const arr = [1, 2, 3, 4, 5, 6, 7]/*** @param prev 上一次运算结果* @param curr 当前元素*/const result = arr.reduce((prev, curr) => {console.log(prev, curr)return prev + curr})console.log("result",result)
</script>

打印:

也可以给它指定一个prev的初始值:

javascript">     const arr = [1, 2, 3, 4, 5, 6, 7]const result = arr.reduce((prev, curr, index) => {console.log(index, prev, curr)return prev + curr}, 9)console.log("result", result)

打印:

后续再添加。


http://www.ppmy.cn/ops/134282.html

相关文章

Odoo :一款免费开源的日化行业ERP管理系统

文 / 开源智造Odoo亚太金牌服务 概述 构建以 IPD 体系作为核心的产品创新研发管控体系&#xff0c;增进企业跨部门业务协同的效率&#xff0c;支撑研发管控、智慧供应链、智能制造以及全渠道营销等行业的场景化&#xff0c;构筑行业的研产供销财一体化管理平台。 行业的最新…

《深度学习》AlexNet网络

文章目录 1.AlexNet的网络架构2.示例&#xff1a;手写数字识别2.1 数据读取 学习目标&#xff1a; 知道AlexNet网络结构能够利用AlexNet完成图像分类 2012年&#xff0c;AlexNet横空出世&#xff0c;该模型的名字源于论⽂第⼀作者的姓名AlexKrizhevsky 。AlexNet使⽤了8层卷积…

Spring Boot编程训练系统:从概念到实现

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

【2025最新计算机毕业设计】基于SpringBoot+Vue电脑在线装机指南教程网站【源码+文档】

作者简介&#xff1a;✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌ 主要内容&#xff1a;&#x1f31f;Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能…

C++__day1

1、思维导图 2、如果登录失败&#xff0c;提示用户登录失败信息&#xff0c;并且提示错误几次&#xff0c;且重新输入&#xff1b;如果输入错误三次&#xff0c;则退出系统 #include <iostream> using namespace std;int main() {string id , pswd;string user"admi…

12. Redis实现会话管理和token认证

在现代Web应用中&#xff0c;会话管理和身份认证是实现用户登录、权限管理等功能的基础。传统的会话管理通过服务器端保存会话信息来实现&#xff0c;但随着应用的扩展&#xff0c;尤其在分布式系统中&#xff0c;这种方式的局限性逐渐显现。Redis作为分布式缓存系统&#xff0…

flask+vue使用jwt验证

为什么要使用jwt验证&#xff1f; jwt&#xff08;json web token&#xff09;主要用来解决单点登录&#xff08;SSO&#xff09;问题。设想一个场景&#xff0c;你在淘宝登录了你的账号&#xff0c;然后打开天猫&#xff08;天猫属于淘宝的子网站&#xff09;&#xff0c;那么…

什么是UDP和TCP?有什么区别?应用场景分别都有哪些?

UDP&#xff08;用户数据报协议&#xff09;和TCP&#xff08;传输控制协议&#xff09;都是互联网协议套件的一部分&#xff0c;用于在网络中传输数据。它们都位于OSI模型的传输层&#xff0c;但两者在工作方式、可靠性和使用场景上存在显著差异。 UDP (User Datagram Protoc…