一、JS
菜鸟教程：https://www.runoob.com/js/js-tutorial.html
HTML 定义了网页的内容
CSS 描述了网页的布局
JavaScript 控制了网页的行为
（一）对象操作
-
对象增删改查
1.1 创建对象 let obj = { }
1.2 新增属性 obj.a = 1
1.3 修改属性 obj.a = ‘a’
1.4 查询属性 obj.a
1.5 删除属性 delete obj.a -
其他操作
<script>
控制台可查看输出
1.
//创建对象
var obj1 = {}//不推荐使用
let obj = {}
const obj2 = {}
2.
obj.a = '1'//创建对象的属性
console.log(obj)//打印浏览器控制台查看Object { a: "1" }
obj.a = true
console.log(obj)//Object { a: true }
delete obj.a
console.log(obj)//Object { }
3.
//对象赋值
let user = {}
user.name = '张三'
user.age = 23
user['address'] = '山东省临沂市'
console.log(user)//Object { name: "张三", age: 23, address: "山东省临沂市" }
4.深拷贝和浅拷贝？
Object.assign()为浅拷贝，JSON.parse(JSON.stringify(obj))是深拷贝的实现方式
4.1
let teacher = {}
Object.assign(teacher,user)
//Object.assign()为浅拷贝，
//JSON.parse(JSON.stringify(obj))是深拷贝的实现方式
console.log('==============')
console.log(teacher)
teacher.birth = '2000.02.02'
console.log('===========user============')
console.log(user)//Object { name: "张三", age: 23, address: "山东省临沂市" }
console.log('===========taecher=========')
console.log(teacher)//Object { name: "张三", age: 23, address: "山东省临沂市", birth: "2000.02.02" }
let teacher1 = Object.assign({}, user)
4.2
let teacher2 = user//类似指针
teacher2.xxx = '哈哈哈哈哈哈'
console.log('============teacher2============')
console.log(teacher2)//Object { name: "张三", age: 23, address: "山东省临沂市", xxx: "哈哈哈哈哈哈" }
console.log('============user================')
console.log(user)//Object { name: "张三", age: 23, address: "山东省临沂市", xxx: "哈哈哈哈哈哈" }
4.3
let teacher3 = JSON.parse(JSON.stringify(user))
//当对象只有一级属性，没有二级属性的时候，此方法为深拷贝。
//但是对象中有对象的时候，此方法在二级属性以后就是浅拷贝。
teacher3.yyy = '啦啦啦啦啦啦'
console.log('===========teacher3==========')
console.log(teacher3)//Object { name: "张三", age: 23, address: "山东省临沂市", xxx: "哈哈哈哈哈哈", yyy: "啦啦啦啦啦啦" }
console.log('============user================')
console.log(user)//Object { name: "张三", age: 23, address: "山东省临沂市", xxx: "哈哈哈哈哈哈" }
5.let { name } = user
console.log('=======user拿出一个属性==========')
console.log(user.name)
console.log(user['name'])
let { name } = user
console.log('==========解构语法==========')
console.log(name)
6.?. （?.和||用的最多）
b = a?.name a是undefined或者null b不能报错
let a = {}//或者let a = null或undefined
let b = a ?.x
console.log(b)//返回值为undefined
7.??
b = a ?? c a是undefined或者null 则赋值c给b
let a = null
let c = 1
let b = a ?? c
console.log(b)//返回值为1
8. || 或
b = a || c a是undefined或者null 则取c
//从服务端拿到数据
let res
let res1 = res || {}
console.log(res1.name)
9. ??=
b ??= a 左侧是undefined或者null 则取右侧的值
两侧都有数值的话，取第一个值
let a;
let b;
console.log(a ??= b)
</script>
- 循环对象属性 for key in obj Object keys(obj)
（二）数组操作
- 数组的增删改查
1.1 创建数组
1.2 新增数组
<script>
1.数组的定义、创建
let arr = []
console.log(arr)//输出[]
let arr1 = new Array()
console.log(arr1)//输出[]
arr1[1] = 'xxx'
console.log(arr1)//输出[空白,'xxx']
console.log(arr1[0])//输出undefined
console.log(arr1[1])//输出xxx
2.新增元素
arr1[0] = 'aa'
arr1.push('bb')
console.log(arr1)//输出[ "aa", "xxx", "bb" ]
3.修改元素
arr1[2] = true
console.log(arr1)//输出[ "aa", "xxx", true ]
4.删除元素
arr1.splic(0,1)//(数组下标，数量)删完之后会改变原数组
arr1.pop()//从尾部扔/抛出去1个
arr1.shift()//头部属性扔/抛出去1个
5.截取数组 slice() //切割的时候包头不包尾
slice要与splic区分开
let arrM = [1,2,3]
let arrN = arrM.slice(0,1)
console.log(arrN)//输出[1]
let arrM1 = [1,2,3]
let arrN1 = arrM1.slice(1)
console.log(arrN1)//输出[2，3]
6.合并元素 concat()（连接）
let arr2 = [1,2]
let arr3 = [2,3,4,5]
let arr4 = arr2.concat(arr3)
console.log(arr4)//[ 1, 2, 2, 3, 4, 5 ]
7.字符串变数组 split()
let str = '今天天气真的很好呢'
console.log(str.split(''))//[ "今", "天", "天", "气", "真", "的", "很", "好", "呢" ]
let str1 = '是啊，真是风和日丽呢'
console.log(str1.split(','))//[ "是啊，真是风和日丽呢" ]
8.数组变字符串 join() 默认使用,分隔
let arrA = [1,2,3]
console.log(arrA.join())//数字数组变成了字符串，输出1,2,3
console.log(arrA.join('|||'))//1|||2|||3
9.排序 sort()
直接用有坑：[1,2,10] -> [1,10,2]
可以解决坑：sort((a,b) => a-b)
let sortArr = [1,2,10]
let newSortArr = sortArr.sort()//按照unicode编码排序，而不是阿拉伯数字
console.log(newSortArr)//[ 1, 10, 2 ]
let sortArr = [1,2,10,8,6,22,11]
let newSortArr = sortArr.sort((a,b) => a-b)//按照阿拉伯数字编码排序
console.log(newSortArr)//[ 1, 2, 6, 8, 10, 11, 22 ]
10.倒序
倒序：reverse()反转
降序：sort((a,b) => b-a)
let reverseArr = [11,22,2,3,10,5,9]
console.log(reverseArr.reverse())//[ 9, 5, 10, 3, 2, 22, 11 ]
console.log(reverseArr.sort((a,b) => b-a))//[ 22, 11, 10, 9, 5, 3, 2 ]
11.获得元素序号 indexOf() lastIndexOf()
let indexArr = [1,2,3]
console.log(indexArr.indexOf(3))//2,没有这个元素时为-1，有就从零开始编号
12.[神器] filter()可以筛选和删除元素
let users = [{ name: '张三', age:22 },{ name:'李四',age:16},{name: '王五',age: 21}]
//筛选
// 1.1forEach
let newUsers = []
users.forEach(aaa => {//=>是箭头
if (aaa.age > 20){
newUsers.push(aaa)
}
})
console.log(newUsers)
//1.2filter
let newUser1 = users.filter(aaa => aaa.age >20)
console.log(newUser1)
//删除数组某一项
//2.1forEach
let inx
users.forEach((item,index) => {
if (item.name === '李四'){
inx = index
}
})
users.splice(inx,1)
console.log(users)
//2.2filter
let newArr = users.filter(v => v.name !== '李四')//v表示数组的每一项
console.log(newArr)
13.[神器]find()
let li = users.find(v => v.name === '李四')
console.log(li)
let liIndex = users.findIndex(v => v.name === '张三')
console.log(liIndex)//0
let liIndex1 = users.findIndex(v => v.name === '王五')
console.log(liIndex1)//2
</script>
14.[神器]map()
map箭头右侧是函数体，返回的是经过函数体处理的新数组
let names = users.map(v => v.name)
console.log(names)//[ "张三", "李四", "王五" ]
let names1 = users.map(v => v.name + '啦啦啦')
console.log(names1)//[ "张三啦啦啦", "李四啦啦啦", "王五啦啦啦" ]
15.forEach([item,index])
16.reduce
语法：arr.reduce(function(prev,cur,index,arr){...},int)
prev累计器累计回调的返回值，表示上一次调用回调时的返回值，或者初始值init
cur表示当前正在处理的数组元素
index表示当前正在处理的数组元素的索引
arr表示原数组
init初始值
arr=[1，2，3] let sum = arr.reduce((pre,cur) => pre + cur)
let sum = users.reduce((pre,current) => {
return pre + current.age
},0)
console.log(sum)//59
- 搜索
（三）JSON - 数据传输的格式
- 标准的JSON
json对象{}
json数组[]
let jsonArr = [true,false,“1”,1,{},[{“name”:“张三”}]] - json数据格式：{“name”:“张三”,“age”:23,“man”:true,“children”:[
{“name”:“张小宝”,“age”:20}
] }
json里的key必须是字符串双引号包裹""
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
