2.JavaScript

变量/对象

声明

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. 用法 ↩︎

posted @ 2024-04-16 23:05  羊卡车  阅读(6)  评论(0编辑  收藏  举报