首页 > 编程语言 >2.JavaScript

2.JavaScript

时间:2024-04-16 23:11:40浏览次数:26  
标签:arr name age JavaScript let user 数组

变量/对象

声明

var - 绑定到window,无法清理,且重复声明会污染全局(尽量不用)

let - 只在 let 命令所在的代码块 {} 内有效

const - 与let类似但它是只读常量,值不可修改

参考视频

增删改查

let obj={}//创建对象
obj.a=1//新增属性a,值为1
obj['1']=1//新增属性1,值为1(可以在属性为数字时使用)
obj.a=2//修改a的值为2
obj.a//查询a的属性(若属性为数字可以使用[]查询)
obj//查询obj的所有属性
delete obj.a//删除obj的a属性
console.log()//在控制终端输出括号内容

进阶操作

Object.assign(obj1,obj2)//将obj1的所有属性拷贝到obj2
let {a} = obj1//将obj1的a属性解构出来
?.——let b = obj1?.a//即使obj1为undefined或者null也不报错
??——let b = a??c//a为undefined或者null则使用c赋值b,否则使用a
||——let b = a||c//在上一行代码的基础功能上对a进行布尔值判断,true返回a,false返回c,参考文档

??=——b??=c//若b为undefined或者null则用c赋值b否则b还是本身

forin——idea自动补全,循环对象属性

for (const objKey in obj) {
    console.log(objKey+"="+obj[objKey])
}//遍历并输出对象的属性与属性值

引用拷贝、浅拷贝、深拷贝

数组

声明数组——let array =[1,'a']//声明了一个名为array的数组,内容为array[0]=1,array[1]='a'

增删改查

let arr = []//创建数组arr
arr[0] = 1 arr[2] = 3//直接使用下表增加/修改
arr[0]//查询arr[0]的值
push()//在数组最后增加一项
unshift()//在数组开头增加一项
pop()//删除最后一项
shift()//删除第一项
string.split()//将字符串分隔成数组,

splice[1]拼接

splice(x,y)//从第x项开始向后删除y项
splice(x,y,a,b,c,)//删除之后新添加a,b,c...等新元素,

splice可以同时实现添加、修改、删除等功能

slice截取

array1 = array2.slice(x,y)//从array2中截取第x项到第y项(左闭右开)作为新数组array1(y为空则是x之后所有项)

concat合并

let arr3 = arr1.concat(arr2)//合并数组arr1和arr2,合并后arr1元素在前

let arr1 =[0,1]
let arr2=['ew','dw']
let arr3 = arr1.concat(arr2)

image-20240416181652399

split字符串转数组

将字符串转为数组

let str = 'asdasdasd'//声明字符串str
let arr = str.split('')//将每个字符都分隔

image-20240416181723110

let arr4 = str.split('a')//以a为标识分隔

image-20240416181947791

分隔符不会被识别进数组

let str = 'aaaaasdaaaasdaaasd'//声明字符串str
let arr = str.split('aa')//以aa为标识将每个字符都分隔

image-20240416182650376

开头识别出几个分隔符就有几个'',之后连续识别出n(n$\geq$2)个分隔符时会输出n-1个''

数组转字符串

join()——将数组的','转为括号内的内容,括号内没东西则不转换

let arr = [0,1,2,3,'',4]
let str =arr.join()//原样输出

image-20240416184556070

let arr = [0,1,2,3,'',4]
let str =arr.join('')//取消间隔,''项不显示

image-20240416184620474

let arr = [0,1,2,3,'',4]
let str =arr.join('|')//将','转为'|'

image-20240416184838994

sort 排序

sort会改变原数组,括号内可以编写排序方法,默认以unicode编码排序

let arr = [0,1,2,3,'',4,'!','asd',15,21,19,'你好',143]
console.log(arr.sort())

image-20240416185916611

.sort((a,b) => a-b)将数字从小到大排序

let arr = [0,1,2,3,'',4,'!','asd',15,21,19,'你好',143]
console.log(arr.sort((a,b) => a-b))

image-20240416185955267

indexOf查找元素下标

indexOf(a)——查找数组内的a元素并返回对应下标,如果没有找到就返回-1,如果存在多个相同元素则只返回第一个的下标值,如果使用lastIndexOf则会返回最后一个的下标值

forEach

let user = [{id:0,name:'张三',age:20},{id:1,name:'张三',age:21},{id:2,name:'李四',age:21}]//声明包含三个对象的数组
user.forEach(v=>{
    //遍历user数组中的每一个元素,v为形参
})
user.forEach((item,index)=>{
    //相较于第一种会额外记录每一个元素的下标
})

filter快速筛选

不影响原数组,返回数组

let newuser= user.filter(v=>v.age===21)//筛选出user中所有age为21的元素

=>右边的为筛选条件,符合筛选条件的元素会生成一个新的数组newuser

user=user.filter(v=>v.age!==21)//删除user中所有age为21的元素

使用该技巧可以快速删除数组中符合筛选条件的元素(由于是引用拷贝,暂不确定会发生什么问题)

find寻找符合的元素

不影响原数组,返回对应元素

如果存在多个符合要求的元素,则只能返回第一个

let obt =user.find(v=>v.age===21)

不存在则返回undefine

findIndex返回下标,同样是只能返回第一个,不存在则返回-1

map生成遍历条件的数组

let array =user.map(v=>v.name+'a')

将user中所有对象的name属性输出成新数组array,且每一项后面都加上字符串a

与filter组合使用可以输出符合筛选条件的对象的另一项属性

let username = user.filter(v=>v.age===21)//筛选出age为21的对象
let nameList = username.map(v=>v.name)//输出这些对象的name组成的数组

reduce

针对数组的一个方法,可用于计数、求和

  • 语法:arr.reduce(function(prev,cur,index,arr){...}, init);
  • prev 累计器累计回调的返回值,表示上一次调用回调时的返回值,或者初始值 init
  • cur 表示当前正在处理的数组元素
  • index 表示当前正在处理的数组元素的索引
  • arr 表示原数组
  • init 初始值

以下是两段示例代码——

//将user中所有对象的age求和
let sum =user.reduce(zonghe,0)//0为初始值,应根据实际需求填写初始值
function zonghe(pre,current){
    return pre+current.age
}
//也可以将方法囊括进reduce内
let sum =user.reduce((pre,current)=>{
        return pre+current.age
    },0)//pre为上一次返回的值,current为当前对象
    console.log(sum)

let all = user.reduce(tongji,{})//最终的all为一个对象,因此初始值设置为空对象
    function tongji(pre,current){
        if(current.name in pre){//判断目前的对象的名字是否在之前出现过(pre对象是否有该名字命名的属性名)
            pre[current.name]++//若有则令该属性的值自增1
        }else{
            pre[current.name]=1//若无则新增该属性,值为1
        }
        return pre//返回由user所有对象的名字为属性组成的对象
    }

JSON

一个标准的json数据格式属性名一定是字符串(用双引号“”包裹)

检查JSON格式的网站

  • 标准的 JSON
    • json 对象 {}
    • json 数组 []
  • JSON可以嵌套数组和对象
  • 一个json 数据例子: ["无论是数组还是对象都可以嵌套",1,{"name": "张三", "age": 23, "man": true, "children": [ { "name": "张大宝", "age": 2 },{ "name": "张小宝", "age":1 } ],"wife":{"name":"李四","age":22}}]

其他

  • reverse颠倒数组前后顺序(倒着写一遍,会改变原数组)
  • if (a in b)——a为字符串,b为对象,如果字符串a是对象b的其中一项属性名,则返回true

小知识

  • ==不比较类型只比较值,===比较类型
  • 可以使用debugger调试程序
  • console.log(a,b)两个对象之间用','分隔而不是'+'

本节参考资料——

【带小白做毕设】2. JavaScript极简速成

项目实战网-专门分享实战项目的网站


  1. 用法 ↩︎

标签:arr,name,age,JavaScript,let,user,数组
From: https://www.cnblogs.com/youngtruck/p/18139516

相关文章

  • JavaScript简介:从概念、特点、组成和用法全面带你快速了解JavaScript!
    JavaScript,简称JS,是一种轻量级的解释型编程语言,它是网页开发中不可或缺的三剑客之一,与HTML和CSS并肩作战,共同构建起我们浏览的网页。今天我们就来了解一下JavaScript,看看它在我们的web前端开发中扮演着什么样的角色。一、JavaScript是什么?JavaScript(简称“JS”)是一种具有函数优......
  • JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧
    JavaScript判断图片是否已经加载完毕的方法汇总_javascript技巧 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示:一.onload事件通过监听图片的onload事件,可......
  • [javascript]知识点
    【版权声明】未经博主同意,谢绝转载!(请尊重原创,博主保留追究权)https://www.cnblogs.com/cnb-yuchen/p/18031963出自【进步*于辰的博客】目录1、其他知识点链接2、严格模式3、类、对象3.1介绍3.2自定义对象3.2.1创建对象方法3.2.2建立继承关系4、变量5、this10、关于var与......
  • JavaScript基础
    JavaScript一、js编写位置位置1:script标签中<scripttype="text/javascript"> vara=1;...</script>位置2:标签中绑定事件<buttononlick="alert(123);">Click</button>位置3:超链接的href属性中<ahref="javascript:alert('......
  • JavaScript 迈入 AI 新纪元
    随着人工智能技术的不断进步,JavaScript也迎来了自己的AI时代。JS-Torch是一个全新的深度学习库,专为JavaScript设计,其语法习惯与广受欢迎的PyTorch框架高度相似。这个库提供了一整套深度学习工具,包括可追踪梯度的张量对象、多层网络结构以及自动微分功能。PyTorch,作为JS......
  • JavaScript Array方法汇总
    函数名定义返回值是否改变原数组是否生成新数组push向数组的末尾添加一个或多个元素返回新的数组长度是否pop删除并返回数组的最后一个元素返回数组的最后一个元素是否unshift向数组的开头添加一个或多个元素返回新的数组长度是否shift删除数组的第一项返回第一个元素的值。若......
  • JavaScript String方法汇总
    方法名定义返回值是否改变原字符串是否生成新字符串charAt()查找指定位置的元素返回元素否否concat()连接两个或多个字符串返回连接后的字符串否是indexOf()indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回-1。返回查找到的......
  • 【华为OD】2024年华为OD机试C卷真题集:最新的真题集题库 C/C++/Java/python/JavaScript
    【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript【华为OD】2024年C卷真题集:最新的真题集题库C/C++/Java/python/JavaScript-CSDN博客华为OD机试2024年C卷真题题集题库,有2种分数的题目列表,分别是100分的列表、200分的列表需要订阅请看链接:C卷100......
  • 深入浅出 妙用Javascript中apply、call、bind
    这篇文章实在是很难下笔,因为网上相关文章不胜枚举。巧合的是前些天看到阮老师的一篇文章的一句话:“对我来说,博客首先是一种知识管理工具,其次才是传播工具。我的技术文章,主要用来整理我还不懂的知识。我只写那些我还没有完全掌握的东西,那些我精通的东西,往往没有动力写。炫耀从来......
  • JavaScript处理异步循环的技术详解
    文章的更新路线:JavaScript基础知识-Vue2基础知识-Vue3基础知识-TypeScript基础知识-网络基础知识-浏览器基础知识-项目优化知识-项目实战经验-前端温习题(HTML基础知识和CSS基础知识已经更新完毕)正文使用async/await和Promise:优势:代码简洁,易读,适用于处理依赖关系较强......