js基础入门

news2024/12/23 1:21:25

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

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

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


<script>
  //创建对象一共有三种赋值声明的语法
  let obj={} //赋值创建变量的一个语法
  var obj1={} //现在var不常用了
  const obj2={}//const是常量的意思


//如果你直接创建对象而没有复制的话,console就是undefined
   let 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)

  //深拷贝写法3
  let teacher3 =JSON.parse(JSON.stringify(obj))

  //这样的方式叫浅拷贝,即往新的对象中添加一个元素,这个增删改查的元素会同步到obj对象中
  let teacher2= obj
  teacher2.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}=obj
  console.log(xxx)

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

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

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

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

 //赋值2(有点类似于三目运算符)
 let a1=undefined
 let c1=1
 let 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的一个key
 let 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]=true
 console.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 {
    // 如果不存在,则将当前姓名添加到结果对象,并初始化计数为 1
    pre[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.coloradmin.cn/o/1322738.html

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

相关文章

Relocations for this machine are not implemented,IDA版本过低导致生成汇编代码失败

目录 1、问题描述 2、安卓app发生崩溃&#xff0c;需要查看汇编代码上下文去辅助分析 3、使用IDA打开.so动态库文件&#xff0c;提示Relocations for this machine are not implemented 4、IDA版本较老&#xff0c;不支持ARM64的指令集&#xff0c;使用7.0版本就可以了 5、…

【数据结构】二叉树的模拟实现

前言:前面我们学习了堆的模拟实现&#xff0c;今天我们来进一步学习二叉树&#xff0c;当然了内容肯定是越来越难的&#xff0c;各位我们一起努力&#xff01; &#x1f496; 博主CSDN主页:卫卫卫的个人主页 &#x1f49e; &#x1f449; 专栏分类:数据结构 &#x1f448; &…

创建个人网站(二)前端主页设计和编写一(太阳移动)

前言 以下内容纯纯当乐子来看就行&#xff0c;知识分享一下这样设计的原因&#xff0c;想看正文直接见下一节 为什么创建个人网站一之后几天没有动静了呢&#xff0c;一个是家里有事实在比较忙&#xff0c;第二个原因是没想到主页要设计成什么样&#xff0c;知道前两天问我姐什…

0基础学java-day22(多用户即时通信系统)

一、QQ 聊天项目演示 聊天通讯系统 在运运行过程出现的异常&#xff0c;应该是类的序列化不一致导致的 1 项目 QQ 演示 2 为什么选择这个项目 只做核心部分&#xff0c;界面相对弱化 3 项目开发流程 3.1 需求分析 3.2 界面设计 3.2.1 用户登录 3.2.2 拉取在线用户列表 …

对偶问题笔记(1)

目录 1 从 Lagrange 函数引入对偶问题2. 强对偶性与 KKT 条件3. 对偶性的鞍点特征 1 从 Lagrange 函数引入对偶问题 考虑如下优化问题 { min ⁡ f 0 ( x ) s . t f i ( x ) ≤ 0 , i 1 , ⋯ , p , h j ( x ) 0 , j 1 , ⋯ , q , x ∈ Ω , \begin{align} \begin{cases}\min…

Mimikatz 的使用(黄金票据的制作)

#江南的江 #每日鸡汤&#xff1a;孤独没有什么反义词&#xff0c;但他的近义词是自由&#xff0c;人生成功的道路上充满了孤独&#xff0c;那么也同样告诉你&#xff0c;你离成功后的自由不远了。 #初心和目标&#xff1a;在网络安全里高出名堂。。。 Mimikatz 本文分为两种…

kafka启动报错“输入行太长。 命令语法不正确“

下午想试一下本地安装启动一下 kafak&#xff0c;参考网上的安装文档&#xff0c;结果一直报错&#xff0c;最开始报的是这个错误&#xff1a; Classpath is empty. Please build the project first e.g. by running gradlew jarAll参考了很多网上的解决办法&#xff0c;最后…

科创金融的向善力量:浙商银行多措并举赋能科创企业,打造科技金融服务生态圈

近日&#xff0c;浙商银行科技金融服务发布会在杭州举行。 发布会以“智汇科创&#xff0c;善行未来”为主题&#xff0c;围绕科技金融服务“向善”新生态&#xff0c;浙商银行重磅推出科创企业全图景服务方案&#xff0c;正式发布科创积分贷&#xff0c;与浙江大学联合发布人…

【开源软件】最好的开源软件-2023-第五名 JHipster

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

翻译: LLMs大语言模型影响到高工资的的白领知识工作者 加速各行各业的自动化潜力 Automation potential across sectors

我们已经探讨了生成人工智能可能对您的工作有用&#xff0c;也讨论了分析其对企业的影响。现在&#xff0c;让我们拉远镜头&#xff0c;看看它对不同公司的工作角色以及对不同行业部门的影响。这个视频的结果对特定企业可能不那么直接可行&#xff0c;但也许这会帮助您思考并尝…

IDEA tomcat内存不足

-Xms256m -Xmx256m -XX:MaxNewSize256m -XX:MaxPermSize256m

LLMs推理框架总结

总结一下这些框架的特点&#xff0c;如下表所示&#xff1a; LLM推理有很多框架&#xff0c;各有其特点&#xff0c;下面分别介绍一下表中七个框架的关键点&#xff1a; vLLM&#xff1a;适用于大批量Prompt输入&#xff0c;并对推理速度要求高的场景&#xff1b;Text generat…

14、Kafka 请求是怎么被处理的

Kafka 请求是怎么被处理的 1、处理请求的 2 种常见方案1.1、顺序处理请求1.2、每个请求使用单独线程处理 2、Kafka 是如何处理请求的&#xff1f;3、控制类请求和数据类请求分离 无论是 Kafka 客户端还是 Broker 端&#xff0c;它们之间的交互都是通过 “请求 / 响应” 的方式完…

二叉搜索树第大K节点,剑指offer,力扣

目录 题目地址&#xff1a; 题目&#xff1a; 我们直接看题解吧&#xff1a; 解题方法&#xff1a; 难度分析&#xff1a; 审题目事例提示&#xff1a; 解题分析&#xff1a; 解题思路&#xff1a; 代码实现&#xff1a; 代码补充&#xff1a; 代码实现&#xff08;非递归&…

20倍压缩比!微软提出大模型提示压缩框架LLMLingua

近期&#xff0c;越来越多研究在探索大型语言模型&#xff08;LLM&#xff09;在实际应用中的推理和生成能力。随着 ChatGPT 等模型的广泛研究与应用&#xff0c;如何在保留关键信息的同时&#xff0c;压缩较长的提示成为当前大模型研究的问题之一。 为了加速模型推理并降低成本…

ViewBinding与DataBinding(视图绑定与数据双向绑定)

前言&#xff1a;心中纵是有所盼 严寒没有减 风很冷 我的手已渐蓝 前言 控件查找对于Android开发来说也是一部血泪史&#xff0c;一直为更有效的方案进行了多种方案的研究和探讨。findViewById() 过于繁琐&#xff0c;强制转换不安全&#xff1b;butterkniife 会存在众多臃肿的…

【【UART 传输数据实验】】

UART 传输数据实验 通信方式在日常的应用中一般分为串行通信&#xff08;serial communication&#xff09;和并行通信&#xff08;parallel communication&#xff09;。 我们再来了解下串行通信的特点。串行通信是指数据在一条数据线上&#xff0c;一比特接一比特地按顺序传…

随笔记录-springboot_LoggingApplicationListener+LogbackLoggingSystem

环境&#xff1a;springboot-2.3.1 加载日志监听器初始化日志框架 SpringApplication#prepareEnvironment SpringApplicationRunListeners#environmentPrepared EventPublishingRunListener#environmentPrepared SimpleApplicationEventMulticaster#multicastEvent(Applicati…

字符设备驱动的加载与卸载

一. 简介 前面几篇文章编写了 字符设备驱动模块加载与卸载框架代码&#xff0c;设置了开发板启动方式。文章地址如下&#xff1a; 字符设备驱动框架的编写-CSDN博客 字符设备驱动模块的编译-CSDN博客 字符设备驱动的加载与卸载前工作-CSDN博客 本文学习如何加载与卸载驱动…

windows10 固定电脑IP地址操作说明

windows10 固定电脑IP地址操作说明 一、无线网络的IP地址设置方法二、有线网络的IP地址设置方法 本文主要介绍&#xff0c;windows10操作系统下&#xff0c;不同的网络类型&#xff0c;对应的电脑IP地址设置方法。 一、无线网络的IP地址设置方法 在桌面右下角&#xff0c;点击…