前端 JS 实用操作总结

目录

1、重构解构

1、数组解构

2、对象解构

3、...展开

2、箭头函数

1、简写

2、this指向

3、没有arguments

4、普通函数this的指向

3、数组实用方法

1、map和filter

2、find

3、reduce


1、重构解构

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

数组拼接:

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

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

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

拼接对象:

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

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

    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、简写
    //非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指向:

    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实参:

    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的指向

首先在严格模式下测试:

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

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

非严格模式下:

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

打印:在全局下为Window对象

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

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

打印:

3、数组实用方法

1、map和filter
    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查找到一个选项后,就立即返回停止执行了。

    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: 原数组

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的初始值:

     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.xdnf.cn/news/16463.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

Clip结合Faiss+Flask简易版文搜图服务

一、实现 使用目录结构&#xff1a; templates ---upload.html faiss_app.py 前端代码&#xff1a;upload.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content&quo…

【鸿蒙开发】第十一章 Stage模型应用组件-任务Mission

目录 1 任务(Mission)管理场景 2 任务&#xff08;Mission&#xff09;与启动模式 2.1 singleton单实例模式 2.2 multiton多实例模式 2.3 specified指定实例模式 3 页面栈及任务链 3.1 页面栈 3.2 任务链 4 设置任务快照的图标和名称 4.1 设置任务快照的图标&#xf…

探索 HTML 和 CSS 实现的模拟时钟

效果演示 这段代码是一个模拟时钟的 HTML 和 CSS 代码。它创建了一个简单的数字时钟界面&#xff0c;包括时针、分针和秒针。 HTML <div class"face"><p class"v-index">II</p><p class"h-index">II</p><d…

CSS预编译器:让样式编写更高效的秘密武器(6)

在现代前端开发中&#xff0c;CSS 预编译器是一种非常有用的工具&#xff0c;它通过扩展 CSS 语言的功能&#xff0c;帮助开发者更高效地编写和维护样式代码。本文将介绍 CSS 预编译器的基本原理&#xff0c;并重点讲解 LESS 的安装和使用方法。 1. 基本原理 编写 CSS 时&…

Vue3中实现插槽使用

目录 一、前言 二、插槽类型 三、示例 四、插槽的分类实现 1. 基本插槽 2. 命名插槽 3. 默认插槽内容 4. 作用域插槽&#xff08;Scoped Slots&#xff09; 5. 多插槽与具名插槽组合 一、前言 在 Vue 3 中&#xff0c;插槽&#xff08;Slot&#xff09;用于实现组件的内…

爬虫——Requests库的使用

在爬虫开发中&#xff0c;HTTP请求是与服务器进行交互的关键操作。通过发送HTTP请求&#xff0c;爬虫可以获取目标网页或接口的数据&#xff0c;而有效地处理请求和响应是爬虫能够高效且稳定运行的基础。Requests库作为Python中最常用的HTTP请求库&#xff0c;因其简洁、易用和…

如何使用EasyExcel生成多列表组合填充的复杂Excel示例

作者&#xff1a;Funky_oaNiu 一、&#xff08;需求&#xff09;生成的表格效果&#xff1a;二、搞一个模板文件三、建立对应的表格实体类四、开始填充五、Vue3前端发起请求下载六、官方文档及AI问答 一、&#xff08;需求&#xff09;生成的表格效果&#xff1a; 其中只有顶部…

三、计算机视觉_02计算机视觉领域的四大基本任务

0、前言 计算机视觉是人工智能领域的一个重要分支&#xff0c;它是一个跨学科的领域&#xff0c;涉及计算机科学、人工智能、机器学习、图像处理、神经科学等多个学科的知识 计算机视觉使用计算机技术来模拟人类视觉系统的功能&#xff0c;使计算机能够从图像或多维数据中提取…

Docker: ubuntu系统下Docker的安装

安装依赖 操作系统版本 Ubuntu Kinetic 22.10Ubuntu Jammy 24.04 (LTS)Ubuntu Jammy 22.04 (LTS)Ubuntu Focal 20.04 (LTS)Ubuntu Bionic 18.04 (LTS) CPU架构支持 ARMx86_64 查看我们的系统版本信息 uname -a通过该命令查得cpu架构是x86_64的&#xff1b; cat /etc/*re…

【已解决】 Tomcat10.1.x使用JSTL标签库

IDEA创建Java EE项目&#xff0c;使用Spring Spring MVC MyBatis框架&#xff0c;使用maven管理依赖。项目当前的环境是&#xff1a; Tomat 10.1.28Maven 3.6.3JDK 17 项目的功能&#xff1a;读取数据库的report表中的数据&#xff0c;返回一个List集合对象reportList在JSP…

LeetCode74. 搜索二维矩阵(2024冬季每日一题 6)

给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。…

数据分析24.11.13

Excel 函数 求和 函数 sum() sumif() SUMIF(range, criteria, [sum_range]) sumifs() average() count() max() min() 逻辑 函数 if() iferror() 查询函数 VLOOKUP()

DveOps-Git-版本控制

1. 概述 分布式版本控制系统 版本控制 2. Git极速上手指南 官方传送门:Git - Branching and Merging 2.1 安装 ## windows https: git-scm.com/download/## Linux(CentOS/Fedora/Rocky Linux/RHEL) yum install -y git ## MacOS brew install git## Ubuntu/Debian apt in…

DevOps工程技术价值流:加速业务价值流的落地实践与深度赋能

DevOps的兴起&#xff0c;得益于敏捷软件开发的普及与IT基础设施代码化管理的革新。敏捷宣言虽已解决了研发流程中的诸多挑战&#xff0c;但代码开发仅是漫长价值链的一环&#xff0c;开发前后的诸多问题仍亟待解决。与此同时&#xff0c;虚拟化和云计算技术的飞跃&#xff0c;…

Tensorflow基本概念

简介&#xff1a;本文从Graph讲到Session&#xff0c;同时讲解了tf.constant创建tensor的用法和variable需要初始化的知识点&#xff0c;可以给你打好一个学习Tensorflow的基础。本文都是基于TensorFlow1.14.0的版本下运行。 本专栏将会系统的讲解TensorFlow在1.14.0版本下的各…

【React】响应事件

1.添加事件处理函数 按照如下三个步骤&#xff0c;即可让它在用户点击时显示消息&#xff1a; 在 Button 组件 内部 声明一个名为 handleClick 的函数。实现函数内部的逻辑&#xff08;使用 alert 来显示消息&#xff09;。添加 onClick{handleClick} 到 <button> JSX …

初遇Python-----python/anaconda/PyCharm安装应用问题

作为一名医学生,小编之前从未用过python,一直将R视为数据分析的利器,至于到底R好用还是Python好用,一直是广大网友们争论的热点,小编资历尚浅,对此就不予评价了。最近需要对部分数据进行建模工作,奈何三方工具完全基于python语言编写的,迫不得已小编也只能挠头学习了。本…

基于reads的宏基因组与宏转录组医学分析流程正式上线!

随着生物医学领域的快速发展&#xff0c;宏基因组学和宏转录组学正逐渐成为研究微生物群落及其在人体健康与疾病中作用的关键技术。然而&#xff0c;医学研究样品往往存在微生物含量较低的情况&#xff0c;这给数据分析带来了挑战。为了解决这一难题&#xff0c;并适应不断增长…

使用Aria2实现离线下载

最近有需要BT下载&#xff0c;但有的资源很冷门&#xff0c;速度很慢&#xff0c;总不能一直开着电脑下载&#xff0c;于是想到部署个离线下载。想起之前用雨云服务器拿来部署兰空图床感觉效果不错&#xff0c;发现内存剩的还挺多&#xff0c;所以继续压榨一下&#x1f60f; 提…

第三百二十三节 Java线程教程 - Java同步器

Java线程教程 - Java同步器 同步器对象与一组线程一起使用。 它维护一个状态&#xff0c;根据它的状态&#xff0c;它让一个线程通过或强迫它等待。 本节将讨论四种类型的同步器&#xff1a; SemaphoresBarriersLatchesExchangers 信号量 信号量用于控制可以访问资源的线程…