JavaScript入门速成
菜鸟教程：JavaScript 教程 | 菜鸟教程 (runoob.com)
对象操作
1. 对象增删改查
1.1 创建对象 let obj = {}
1.2 新增属性 obj.a = 1
1.3 修改属性 obj.a = 'a'
1.4 查询属性 obj.a
1.5 删除属性 delete obj.a
测试1：可以直接用浏览器的控制台测试
测试2：创造一个html文件，浏览器打开文件，用console.log输出到控制台
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript演示</title> </head> <body> <script> let obj = {} // const obj2 = {} 常量 // var obj = {} 不常用 obj.a = '1' console.log(obj) obj.a = 'xxx' console.log(obj) obj.a = true console.log(obj) console.log(obj.a) delete obj.a console.log(obj) </script> </body> </html>
2. 其他操作
2.1 obj[a] = 1 //对象属性赋值
2.2 Object.assign(目标对象，原对象) //对象属性复制给另一个对象，深拷贝
2.3 let { name } = user //解构语法，相当于let name = user.name
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript演示2</title> </head> <body> <script> //其他操作 let user = {} user.name = '张三' user.age = 23 user['address'] = '中国北京' console.log(user) let teacher = {} Object.assign(teacher, user) //深拷贝 console.log('=====================') console.log(teacher) teacher.birth = '1993.01.01' console.log('===========teacher==========') console.log(teacher) console.log('===========user==========') console.log(user) let teacher1 = Object.assign({}, user) let teacher2 = user //浅拷贝 teacher2.xxx = 'hahaha' console.log('=============teacher2=============') console.log(teacher2) console.log(user) let teacher3 = JSON.parse(JSON.stringify(user))//深拷贝,先把user转换成字符串，再把字符串转换成JSON对象，javascript里的对象和json对象可以等同使用 teacher3.yyy = 'ssssss' console.log('=============teacher3=============') console.log(teacher3) console.log(user) console.log('==============user拿出一个属性================') console.log(user.name) console.log(user['name']) console.log('===============解构语法======================') let { name } = user // 相当于let name = user.name console.log(name) </script> </body> </html>
2.4 ?. b = a?.name a是undefined或者null b不报错
let a = null
let b = a.name
console.log(b)
2.5 ?? b = a ?? c a是undefined或者null 则赋值c给b
2.6 || b = a || c a是undefined或者null 则取c
2.7 ??= b ??= a 左侧undefined或者null 则取右侧的值
3. 循环对象属性for (const key in obj) obj[key]
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript演示3</title> </head> <body> <script> let a = null let b = a?.name console.log(b) let c = null let d = 1 let e = c ?? d console.log(e) let f = c || d console.log(f) console.log(c ??= d) let jsObj = { 1 : 'a', 2 : 'b' } console.log(jsObj) for(const key in jsObj){ jsObj[key] = jsObj[key] + '111' //对象的key是数字时，只能使用 obj[key] 的形式，不能用 obj.key 的形式获取值 debugger if(key === 1){ // == 只比较内容，不比较类型， === 比较内容和类型 jsObj[key] = jsObj[key] + 'bbb' } } console.log(jsObj) </script> </body> </html>
debugger可以实现前端调试，看到属性的内容，for循环时key是字符串所以 ===1 不成立
数组操作
1. 数组的增删改查
1.1 创建数组 let arr = []
1.2 新增元素
arr[0] = 'a' arr[2] = 3
push(‘aa’) //往数组尾部新增一个内容
unshift() //往数组头部新增一个内容
1.3 删除元素
splice(start, num) //从 start 开始 删除num个，删完后数组长度 = 原长度 - num
pop() ////从尾部删除一个，删完后数组长度 = 原长度 - 1
shift() //从头部删除一个，删完后数组长度 = 原长度 - 1
1.4 修改元素 arr[index] = 1
1.5 查询元素 arr[index]
1.6 截取数组 slice(start，end) //从 start 开始到 end 位置结束，切割后的数组包括start不包括end，不写end会切割到最后
1.7 合并数组 concat(arr1, arr2) //合并后的数组内容arr1在前arr2在后
1.8 字符串变数组 split(reg) //按照reg分割字符串，生成数组，reg可以是 '' ，分割每一个字
1.9 数组变字符串 join(reg) //数组元素用reg拼接，默认使用逗号分割
1.10 排序sort() //[有坑] [1,2,10] -> [1,10,2] ，根据unicode编码排序， sort((a,b) => a-b) 这样就能解决
1.11 倒序reverse() //[有坑] 使用 sort((a,b) => b-a) 这样就能实现倒序
1.12 获取元素序号 indexOf() lastIndexOf()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript-array数组演示</title> </head> <body> <script> //新建数组、新增元素、修改数组、查询数组 let arr = [] console.log(arr) let arr1 = new Array() console.log(arr1) arr1[1] = 'xxxx' console.log(arr1) arr1.push('yyyyy') console.log(arr1[2]) arr1[3] = true console.log(arr1) arr1.unshift('aaaa') console.log(arr1) arr1[9999] = 1 console.log(arr1) //删除元素 arr1.splice(0, 1) console.log(arr1) arr1.shift() console.log(arr1) arr1.pop() console.log(arr1) //截取数组、合并数组、字符串转换、排序数组 let arrN = [1,2,3,4,5,6] let arrM = arrN.slice(1 , 3) //包头不包尾 console.log(arrM) arr3 = [1,3] arr4 = [4,2] arr5 = arr3.concat(arr4) console.log(arr5) let str = '测试数组' console.log(str.split('')) console.log(arrN.join('|||')) let sortArr = [1,2,10,7,9,22,11] console.log(sortArr.sort()) console.log(sortArr.reverse()) console.log(sortArr.sort((a,b)=>a-b)) console.log(sortArr.sort((a,b)=>b-a)) let indexArr = [1,2,3,4] console.log(indexArr.indexOf(2)) console.log(indexArr.lastIndexOf(2)) </script> </body> </html>
1.13 [神器] filter() //可以筛选和删除元素，返回的是一个组数
1.14 [神器] find() //返回的是数组里的一个元素，如果有多个满足的元素，返回第一个满足的元素
1.15 [神器] map() [1,2,3].map(v => v * 2) [{name:'a'},{name:'b'}].map(v => v.name) //返回一个数组
1.16 forEach((item.index) => {...})
1.17 reduce
语法：arr.reduce(function(pre,cur,index,arr){...},init);
prev累计器累计回调的返回值，表示上一次调用回调时的返回值，或者初始值 init
cur表示当前正在处理的数组元素
index表示当前正在处理的数组元素的索引
arr表示原数组
init初始值
arr = [1,2,3] let sum = arr.reduce((pre, cur) => pre + cur)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript-array数组演示2</title> </head> <body> <script> // filter let users = [{name: '张三', age: 20}, {name: '张三', age: 20}, {name: '李四', age: 21}, {name: '王五', age: 21}] let newUsers = users.filter(user => user.age > 20 && user.name.includes('李')) console.log(newUsers) let newUsers2 = users.filter(user => user.name !== '李四') console.log(newUsers2) // find let lisi = users.find(user => user.name === '李四') console.log(lisi) let user2 = users.find(user => user.age > 20) console.log(user2) let lisiIndex = users.findIndex(user => user.name === '李四') console.log(lisiIndex) // map let names = users.map(user => user.name + 'a') console.log(names) // forEach users.forEach((item, index) => { console.log(item) console.log(index) }) // reduce let sum = users.reduce((pre, current) => { return pre + current.age },0) console.log(sum) let nameCount = users.reduce((pre, current) => { if (current.name in pre){ pre[current.name]++ } else { pre[current.name] = 1 } return pre },{}) console.log(nameCount) </script> </body> </html>
JSON - 数据传输的形式
https://www.json.cn/ json格式校验和格式优化显示
1.标准的JSON //key必须是字符串，双引号
1.1 json对象 {}
let jsonObj = {"name": "张三","age": 23,"man": true, "bank": {"addr": "", "money": 100}, "children": [{"name": "李四","age": 23}]}
1.2 json数组 []
let jsonArr = [1, "a", true, {}, [{"name": "李四","age": 23}]]
1.3 JSON.parse()，将字符串转换成json对象
JSON.stringify()，将对象转换成字符串
浙公网安备 33010602011771号