js基础入门

先来一点js基础,其实js大部分的时候都在处理对象或者数组。

对象四个基本操作:增删改查

掌握元素的增删改查,了解如何拷贝,深拷贝和浅拷贝的区别。详情见代码


<script>//创建对象一共有三种赋值声明的语法let obj={} //赋值创建变量的一个语法var obj1={} //现在var不常用了const obj2={}//const是常量的意思//如果你直接创建对象而没有复制的话,console就是undefinedlet obj obj.a='1' //创建对象的属性console.log(obj)obj.a=true //改变对象的值console.log(obj)delete obj.a //删除对象console.log(obj)obj['address']='北京市朝阳区' //这也是赋值的一种方式console.log(obj)//assign的意思是把一个对象内的属性转给另一个对象,这也叫做深拷贝。let teacher ={} //新的对象 老师Object.assign(teacher,obj) //把obj这个对象里的转给新建的这个teacher对象//如何验证是否转移成功方法,先console一下teacher里的值console.log(teacher)//再给teacher添加一个属性,再打印看看其他属性还在不在。teacher.birth='1993-01-01'console.log(teacher)//再看一下obj原来的数组元素console.log(obj)//深拷贝写法2:let teacher1=Object.assign({},obj)console.log(teacher1)//深拷贝写法3let teacher3 =JSON.parse(JSON.stringify(obj))//这样的方式叫浅拷贝,即往新的对象中添加一个元素,这个增删改查的元素会同步到obj对象中let teacher2= objteacher2.xxx='hhh'console.log(teacher2)console.log(obj)</script>

其他操作:

1、obj[a]=1;括号法赋值

obj['address']='北京市朝阳区' //这也是赋值的一种方式console.log(obj)

2、Object.assign() :拷贝

let teacher ={} //新的对象 老师Object.assign(teacher,obj) //把obj这个对象里的转给新建的这个teacher对象

3、let{name}=user 拿对象里的属性

 let{xxx}=objconsole.log(xxx)

4、有时候我们想把对象a内的值给对象b,但是在你不确定a有没有那个值,以下有三种格式可以避免程序报错,这样写也可以让程序更健康。

一、?. b=a?.name(a是undefined或者null,b不报错)

 //赋值1:let a =undefinedlet b=a?.x //a是undefined或者null,b不报错。console.log(b) //b输出是undefined

二、?? b=a??c (a是undefined或者null,则赋值c给b)

 //赋值2(有点类似于三目运算符)let a1=undefinedlet c1=1let b1=a??c1 //如果问号左边是undefined或者null的话,则自动用问号右边的值console.log(b1) //b1输出结果是1

也可以这样写:localStorage.getItem('user')??{}

或者这样写也可以:(来个空json)

let b1=localStorage.getItem('user')??'{}'

或者这样:

let b1=JSON.parse(localStorage.getItem('user')??'{}')

这样的写法不会报错。

在控制台里的application的local storage里新增一个‘user'对象

这样写的话就要求你对象里的数据必须是一个标准的JSON格式。

三、|| b=a||c (a是undefined或者null,则取c)

let res;
let res1 =res || {}console.log(res1.name) //输出结果是undefined

四、??= b ??=a(左侧是undefined或者null,则取右侧的值)

let a;
let b = 1;
console.log(a ??=b) //输出结果为1

知识补充

 //数字也可以作为js的一个keylet jsObj={1:'a',2:'b'}//[]还可以访问字符串的属性console.log(jsObj[1]) //访问js数字属性的方法,输出结果为a

给对象的属性加一些值以及如何写js的循环语句

//在 JavaScript 中,const 是用来声明一个常量的关键字

你发现if语句里的东西没有正确显示,此时你可以debugger

debugger是快速定位并且解决问题的方式

?如何debugger

sources:源代码  block:代码块

所以此时你就知道问题在在于if语句的判断条件里的key值应该是字符串形式,改过来即可。

数组的增删改查

一、新增一个数组:

去查看数组里指定的某一位结果
 console.log(arr1[0]) //输出结果是undefined
往已经有元素的数组里再加新的内容
 arr1.push('嘻嘻')console.log(arr1)

修改(直接改):

 arr1[2]=trueconsole.log(arr1)

tips:

删除:

删除方法一splice:

删除方法三shift:shift就是默认删除首位元素

删除方法四pop:默认删除末尾元素

数组的其他操作:

slice:切割元素

concat:合并数组

split:字符串变成数组

把每一个字都分割成了数组的一个元素

形式一:

 let str = '逆风如解意容易莫摧残'console.log(str.split(''))

形式二:

根据特定的字符去切割成若干个元素

join:把数组里的每一个元素变成一个新的字符串

let arrB=[1,2,3,4]console.log(arrB.join()) //输出结果是1,2,3,4

也可以把你的数组里的每一个元素和你join括号内的分隔符拼在一起变成一个新的字符串

let arrB=[1,2,3,4]console.log(arrB.join('|||||'))//输出结果为1|||||2|||||3|||||4

sort排序:注意这里的坑,这里的排序规则不是按照阿拉伯数字大小去排列的,而是按照unicode编码顺序。

let sortArr=[1,2,10]let newSortArr=sortArr.sort() //unicode编码排序console.log(newSortArr) //结果是[1,10,2]而不是[1,2,10]

解决方法:加一个小函数做判断

let sortArr=[1,2,10]let newSortArr=sortArr.sort((a,b)=>a-b)console.log(newSortArr) //结果是[1,2,10]

reverse函数:翻转(把顺序颠倒过来)

这里虽然没有坑,但是如果你想要排列顺序按照阿拉伯数字的逻辑的话也要加小函数做判断

let reverseArr=[1,2,10,8,6,22,11]console.log(reverseArr.reverse()) //输出结果:[11, 22, 6, 8, 10, 2, 1]//所以要这样写:console.log(reverseArr.sort((a,b)=>b-a)) //输出结果:[22, 11, 10, 8, 6, 2, 1]

indexOf:获取元素下标,但是如果括号里写了3,此时数组里没有下标为3的则会显示-1,有的话会从下标为0的位置开始获取。

lastindexOf则是相反的规则

let indexArr=[1,2,3]console.log(indexArr.indexOf(2)) //输出结果:1

加入现在有两个数组,把年龄大于20的添加到新数组里去,如果直接写代码的话非常麻烦:

 let users=[{name:'张三',age:20},{name:'李四',age:21}]let newUsers = []//遍历users这个数组,aaa是我自主命名的参数users.forEach(aaa=>{if(aaa.age>20){newUsers.push(aaa)}})console.log(newUsers)

神器filter:

 let newUser1=users.filter(aaa =>aaa.age>20)console.log(newUser1)

也可以再多加条件:

功能二:删除数组中的某一项(正常写)

用filter:

神器find:快速查找某一个元素

有两种方法:

神器map:

例如想把一个数组的所有人的名字给找到

reduce:有五个属性,但常用就三个。

pre:之前所有操作的结果

current:当前的一个操作

0:初始值

cuurent.age表示每一个对象的年龄加上之前所有的年龄之和,再通过一个数值0来赋值。

例1:想对某一数组里所有年龄求和:

 let users=[{name:'张三',age:20},{name:'李四',age:21},{name:'王二',age:22}]let sum=users.reduce((pre,current)=>{return pre + current.age},0)console.log(sum) //63

例2:统计数组里每一个人出现的次数

// 定义了一个包含用户信息的数组
let users = [{ name: '张三', age: 20 },{ name: '张三', age: 20 },{ name: '张三', age: 20 },{ name: '李四', age: 21 },{ name: '王二', age: 22 }
];// 使用 reduce 方法统计相同姓名的用户数量
let count = users.reduce((pre, current) => {// 检查当前姓名是否已经存在于结果对象 pre 中if (current.name in pre) {// 如果存在,则递增对应姓名的计数pre[current.name]++;} else {// 如果不存在,则将当前姓名添加到结果对象,并初始化计数为 1pre[current.name] = 1;}// 返回更新后的结果对象return pre;
}, {}); // 初始值为一个空对象// 打印输出统计结果,显示每个姓名对应的数量
console.log(count);

更详细的注解:

pre 是在每一次迭代中被累积的结果对象,current 是数组中的当前元素。

  • if (current.name in pre) 检查 pre 对象中是否已经存在了以 current.name 为键的属性。
  • 如果存在,表示这个姓名已经在 pre 对象中有对应的属性了,那么就将该属性对应的值加 1。这意味着这个姓名已经出现过,计数加一。
  • 如果不存在,意味着这是第一次遇到这个姓名,那么就需要在 pre 对象中创建一个新的属性,键是 current.name,并将这个属性的值初始化为 1。这样就表示这个姓名出现了一次。
  • 最后返回更新后的 pre 对象,作为下一次迭代的起始值。
  • 由于初始值 {} 为空对象,用于存储姓名计数,所以最终结果是一个对象,键是姓名,值是出现次数。

本章最后一个知识点:

JSON——数据传输的格式(前后端交互数据时以JSON这种格式来进行交互的)

json其实就两种

1、json对象{}

2、json数组[]

json数据格式要求:

key必须是字符串{"name":"张三","age":23}

一个标准的json样式:json里可以套用很多数据

可以去json.cn这个网站去验证json

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue 项目关于在生产环境下调试

前言 开发项目时&#xff0c;在本地调试没问题&#xff0c;但是部署到生产会遇到一些很奇怪的问题&#xff0c;本地又没法调&#xff0c;就需要在生产环境/域名下进行调试。 在这里介绍一个插件Vue force dev ,浏览器扩展里下载 即便是设置了Vue.config.devtoolsfalse 只要安…

制作ubuntu上的python容器镜像

制作Ubuntu上的python容器镜像 序言 由于 ubuntu20.04 默认是python3.8&#xff0c;因此3.9需要再安装 拉取镜像基线 docker pull ubuntu:20.04启动容器 docker run -it -e LANGC.UTF-8 ubuntu:20.04安装python 进入容器后安装python包 # 修改 apt源 sed -i shttp://arc…

认知能力测验,③如何破解语言常识类测试题?

作为认知能力测评中的一个环节&#xff0c;语言常识类&#xff0c;是大概率的出现&#xff0c;不同的用人单位可能略有不同&#xff0c;语言是一切的基础&#xff0c;而常识则意味着我们的知识面的宽度。 语言常识类的测试&#xff0c;如果要说技巧&#xff1f;难说....更多的…

zookeeper和nacos区别是什么,注册中心用zookeeper还是nacos

注册中心对比和选型&#xff1a;Zookeeper、Eureka、Nacos、Consul和ETCD zookeeper和nacos区别是什么 Nacos集群raft选举算法原理 Zookeeper和Nacos是两个不同的分布式系统协调组件&#xff0c;它们在设计目标、功能特性和使用方式等方面存在一些区别。以下是它们的主要区别…

c# OpenCV 图像裁剪、调整大小、旋转、透视(三)

图像裁剪、调整大小、旋转、透视图像处理基本操作。 croppedImage 图像裁剪Cv2.Resize() 调整图像大小图像旋转 Cv2.Rotate()旋转Cv2.Flip()翻转Cv2.WarpAffine()任意角度旋转Cv2.GetAffineTransform()透视 一、图像裁剪 // 读取原始图像 Mat image new Mat("1.png&q…

mysql间隙锁,next-key lock,row锁加锁范围分析

介绍 mysql可重复读隔离级别的实现主要依赖mvcc(多版本并发控制)和间隙锁&#xff0c;行锁&#xff0c;多种锁的组合使用来解决可重复读和幻读的问题。 mvcc:主要是给保存每行数据的多个版本&#xff0c;每个版本多了2个字段&#xff0c;一个为最后更新事务的id,一个是删除事务…

maui sqlite开发一个商城加购物车的演示(3)

购物车界面及代码 <?xml version"1.0" encoding"utf-8" ?> <ContentPage xmlns"http://schemas.microsoft.com/dotnet/2021/maui"xmlns:x"http://schemas.microsoft.com/winfx/2009/xaml"xmlns:syncfusion"clr-namesp…

数据修复:.BlackBit勒索病毒来袭,安全应对方法解析

导言&#xff1a; 黑色数字罪犯的新玩具——.BlackBit勒索病毒&#xff0c;近来成为网络安全领域的头号威胁。这种恶意软件以其高度隐秘性和毁灭性而引起广泛关注。下面是关于.BlackBit勒索病毒的详细介绍&#xff0c;如不幸感染这个勒索病毒&#xff0c;您可添加我们的技术服…

ArcMap自定义脚本工具箱迁移至ArcGIS pro

本文记录了将ArcMap10.7创建的自定义脚本工具箱&#xff08;.tbx&#xff09;迁移至ArcGIS pro的过程 ArcGIS Pro使用的是python版本与ArcMap不同&#xff0c;前者为python3&#xff0c;后者为python2。由于python3 和 python2 的部分语法不兼容&#xff0c;以及一些地理处理工…

87 GB 模型种子,GPT-4 缩小版,超越ChatGPT3.5,多平台在线体验

瞬间爆火的Mixtral 8x7B 大家好&#xff0c;我是老章 最近风头最盛的大模型当属Mistral AI 发布的Mixtral 8x7B了&#xff0c;火爆程度压过Google的Gemini。 缘起是MistralAI二话不说&#xff0c;直接在其推特账号上甩出了一个87GB的种子 随后Mixtral公布了模型的一些细节&am…

剑指offer 背包问题求具体方案

剑指offer 背包问题求具体方案 题目 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出 字典序最小的方…

vue3的大致使用

<template><div class"login_wrap"><div class"form_wrap"> <!-- 账号输入--> <el-form ref"formRef" :model"user" class"demo-dynamic" > <!--prop要跟属性名称对应-->…

华为技面三轮面试题

1. 最长回文子串 -- 中心扩散法 给你一个字符串 s&#xff0c;找到 s 中最长的回文子串。 如果字符串的反序与原始字符串相同&#xff0c;则该字符串称为回文字符串。 示例 1&#xff1a; 输入&#xff1a;s "babad" 输出&#xff1a;"bab" 解释&…

磁力计LIS2MDL开发(3)----九轴姿态解算

磁力计LIS2MDL开发.3--九轴姿态解算 概述视频教学样品申请完整代码下载使用硬件欧拉角万向节死锁四元数法姿态解算双环PI控制器偏航角陀螺仪解析代码 概述 LIS2MDL 包含三轴磁力计。 lsm6ds3trc包含三轴陀螺仪与三轴加速度计。 姿态有多种数学表示方式&#xff0c;常见的是四元…

服务器RAID配置及功能介绍

服务器RAID配置及功能介绍 一、RAID磁盘阵列详解1.RAID磁盘阵列介绍2.RAID 03.RAID14.RAID35.RAID56.RAID67.RAID 10总结阵列卡介绍 一、RAID磁盘阵列详解 1.RAID磁盘阵列介绍 ①是Redundant Array of lndependent Disks的缩写中文简称为独立冗余磁盘阵列。 ②把多块独立的物…

聊聊AsyncHttpClient的ListenableFuture

序 本文主要研究一下AsyncHttpClient的ListenableFuture ListenableFuture org/asynchttpclient/ListenableFuture.java public interface ListenableFuture<V> extends Future<V> {/*** Terminate and if there is no exception, mark this Future as done an…

NBA得分数据可视化

简介 这是上学期的一些课外活动内容&#xff0c;将 NBA 得分数据进行可视化&#xff0c;并进行后续的探索性分析和建模&#xff08;本文未介绍&#xff09;。主要研究动机来源于这篇论文&#xff1a; 该论文使用二元的伽马过程来刻画 NBA 主客场得分数据&#xff0c;并且考虑了…

@RabbitHandler和@RabbitListener的区别

RabbitHandler 和 RabbitListener 是Spring AMQP&#xff08;特别是针对RabbitMQ&#xff09;中常用的两个注解&#xff0c;它们在消息处理中扮演着不同的角色。 RabbitListener 定义&#xff1a;RabbitListener 注解用于标记一个方法&#xff0c;使其成为消息队列的监听器&am…

5.5 Linux Apache服务

1、概念介绍 a. Web 服务简介 WEB服务器也称为WWW(WORLD WIDE WEB&#xff0c;万维网)服务器&#xff0c;主要功能是提供网上信息浏览服务。 常用web服务器&#xff1a;httpd&#xff08;apache&#xff09;、nginx、tomcat、IIS 客户端&#xff1a;IE、firefox、chrome b…

高通平台开发系列讲解(AI篇)SNPE工作流程介绍

文章目录 一、转换网络模型二、量化2.1、选择量化或非量化模型2.2、使用离线TensorFlow或Caffe模型2.3、使用非量化DLC初始化SNPE2.4、使用量化DLC初始化SNPE三、准备输入数据四、运行加载网络沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇章主要介绍SNPE模型工作…