一、常见数据类型
js常用数据类型：数字类型、字符串、布尔、数组
1.数字类型（Number） - 所有数字对应的类型
1）typeof(数据) - 获取指定数据对应的类型
2）数学对象（Math）
a.小数转整数
console.log(Math.ceil(5.8)) // 6
console.log(Math.floor(5.8)) // 5
console.log(Math.round(5.8), Math.round(5.4)) // 6 5
b.常用运算
// x的y次方
console.log(Math.pow(3, 2), Math.pow(16, 0.5), Math.pow(8, 1/3)) // 9 4 2
console.log(2**3)
// 求绝对值
console.log(Math.abs(-19))
c.随机数
// 产生0~1随机小数
console.log(Math.random())
// 产生0~100随机整数
console.log(parseInt(Math.random()*100))
// 产生100~999随机数
console.log(Math.random()*899+100)
3)类型转换
Number() - 转换成数字（原数据是什么格式的数字就转换成什么格式的数字）
parseFloat() - 将数据转换成带小数点的数字
parseInt() - 将数据转换成整数
Math.ceil() - 向上取整
Math.floor() - 向下取整
Math.rount() - 四舍五入
2.字符串(String) - 容器型数据类型，不可变并且有序
1)表示：使用’'或者""，模板字符串用``
2)转义字符
str4 = '\t\'abc\n123'
console.log(str4)
str5 = '\u4e00abc'
console.log(str5) // 一abc
3)获取字符
js中下标值得范围是0~长度-1
// js中下标值的范围是 0 ~ 长度-1
message = 'hello world!'
console.log(message[0])
// 下标没有-1，越界也不会报错
console.log(message[-1], message[100]) // undefined undefined
// 遍历 只能获取下标
for(let x in message){
console.log(x, message[x])
}
4)相关操作
a.加法 （不支持乘法运算）
b.比较运算（和python一样）
// 判断是否是小写字母
chr = 'p'
console.log(chr>='a' && chr<='z')
5)相关方法和属性
a.获取字符串长度
b.获取字符
c.正则相关
d字符串.match(正则表达式) - 查找字符串能够满足正则得子串
e.字符串.replace(正则，新子串)
f.切片 - 字符串.slice(开始下标，结束下标)
6)类型转换
String(数据) - 将数据转换成字符串
3.布尔（Boolean）
只有true和false两个值
4.数组（Array）
相当于python中的列表
1）增删改查
查：遍历、数组.forEach(一个或者两个参数的函数)
// 遍历
for(let index in names){
console.log(index, names[index])
}
// 数组.forEach(有一个或者两个参数的函数)
names.forEach(function(item,index){
console.log(`x:${item}, y:${index}`)
})
names.forEach(function(item){
console.log('item:', item)
})
增：数组.push(元素)
数组.splice(下标,0,元素1,元素2,…) - 在指定下标前加入指定元素
// 数组.push(元素)
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.push('貂蝉')
console.log(names) // ["诸葛亮", "赵云", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]
// 数组.splice(下标,0,元素1,元素2,元素3,...) - 在指定下标前插入指定元素
names.splice(2,0,'刘备')
console.log(names) //["诸葛亮", "赵云", "刘备", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]
names.splice(1,0,'孙尚香', '大乔', '小乔', '甄姬')
console.log(names) // ["诸葛亮", "孙尚香", "大乔", "小乔", "甄姬", "赵云", "刘备", "曹操", "荀彧", "郭嘉", "庞统", "貂蝉"]
删：数组.pop() - 删除最后一个
数组.splice(下标,删除个数) - 从指定下标开始删除指定个数的元素
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
// 数组.pop()
names.pop()
console.log(names) // ["诸葛亮", "赵云", "曹操", "荀彧", "郭嘉"]
// 数组.splice(下标, 删除个数) - 从指定下标开始删除指定个数的元素
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.splice(2,1)
console.log(names) // ["诸葛亮", "赵云", "荀彧", "郭嘉", "庞统"]
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names.splice(2,2)
console.log(names) // ["诸葛亮", "赵云", "郭嘉", "庞统"]
改：数组[下标] = 值
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names[3] = '貂蝉'
console.log(names) // ["诸葛亮", "赵云", "曹操", "貂蝉", "郭嘉", "庞统"]
names[10] = '吕布'
console.log(names) // ["诸葛亮", "赵云", "曹操", "貂蝉", "郭嘉", "庞统", empty, empty, empty, empty, "吕布"]
2)相关方法
a.数组.every(函数) - 检测数组中所有的元素是否满足函数返回值提供的条件
函数 - 需要一个参数，这个参数指向的是数组中的每个元素
// 检测scores中是否所有的元素都大于20
scores = [29, 89, 78, 67, 99, 45, 75, 39]
result = scores.every(function(item){
return item>20
})
console.log(result)
// 检测names中所有的名字是否都姓 张
names = ['张小明', '张三', '张三丰', '张无忌', '张翠山']
result = names.every(function(item){
return item[0]=='张'
})
console.log(result)
b.数组.filter(函数) - 获取数组中满足函数返回值要求的元素
函数 - 需要一个参数，这个参数指向的是数组中的每个元素
scores = [29, 89, 78, 67, 99, 45, 75, 39]
result = scores.filter(function(item){
return item<60
})
console.log(result) // [29, 45, 39]
c.数组.join(‘分隔符’) - 将数组中所有的元素用分隔符拼接成一个字符串
names = ['张小明', '张三', '张三丰', '张无忌', '张翠山']
result = names.join()
console.log(result) // 张小明,张三,张三丰,张无忌,张翠山
result = names.join('')
console.log(result) // 张小明张三张三丰张无忌张翠山
d.数组.map(函数) - 将原数字中所有的元素按照函数指定的操作后，产生新的数组
scores = [29, 89, 78, 67, 99, 45, 75, 39]
newScores = scores.map(function(item){
return item / 10
})
console.log(newScores) // [2.9, 8.9, 7.8, 6.7, 9.9, 4.5, 7.5, 3.9]
e.数组.reduce(函数,初始值)
运算规则和python中的reduce一样
scores = [29, 89, 78, 67, 99, 45, 75, 39]
// 求所有元素的和
result = scores.reduce(function(x, item){
return x+item
}, 0)
console.log(result)
// 求所有元素个位数的和
result = scores.reduce(function(x, item){
return x+item%10
}, 0)
console.log(result)
f.排序：数组.sort(函数)
函数有两个参数指向的都是序列中的元素
scores = [29, 89, 78, 67, 99, 45, 75, 39]
scores.sort(function(a, b){
// 按照元素的大小从小到大排序
// return a-b
// 按照元素的大小从大到小排序
// return b-a
// 按照元素个位数的大小从小到大排序
// return a%10 - b%10
二、对象
1.对象
js中的对象可以看成时候python中字典和对象的结合
对象字面量
stu1 = {
'name': 'xiaoming',
'age': 18,
'sex': '男'
}
stu2 = {
name: '小花',
age: 20,
sex: '女'
}
console.log(stu1['name'], stu1.name)
console.log(stu2['sex'], stu2.sex)
2.构造函数（定义类）
用来创建对象的函数，函数名就相当于类名
1）相当于定义类
function 类名(){
//添加对象属性和对象方法
this.属性 = 值
this.方法 = 函数
}
2)创建对象
对象 = new 类名()
function Student(name, age=18, sex='男'){
// 添加对象属性
this.name = name
this.age = age
this.sex = sex
this.score = 0
// 添加对象方法
this.eat = function(food){
console.log(`${this.name}在吃${food}`)
}
}
stu3 = new Student('张三')
console.log(stu3) // Student {name: "张三", age: 18, sex: "男", score: 0, eat: ƒ}
stu4 = new Student('李四', 30, '女')
console.log(stu4) // Student {name: "李四", age: 30, sex: "女", score: 0, eat: ƒ}
// 使用对象属性
console.log(stu3['name'], stu3.name)
// 调用对象方法
stu4.eat('豆腐')
stu3.eat('酸辣粉')
3.属性的操作
1）查
对象[属性名]
对象.属性
2）改/增
对象[属性名] = 值 - 如果没有指定属性就是添加，有就是修改
对象.属性 = 值 - 如果没有指定属性就是添加，有就是修改
4.类的prototype属性
给指定类的所有对象添加属性和方法（这儿的所有对象可以是添加前创建的，也可以是添加后创建的）
类名.prototype.属性 = 值
DOM操作
1.什么是DOM
DOM是 doucument object model的缩写， 文档对象模型
js中自带一个document对象，指向的是当前网页的内容（包含了body以及body中所有的可见标签）
2.DOM操作 - js通过操作document对象来操作网页内容
1)获取节点(获取标签)
a.直接获取
document.getElementById(id值) - 根据id属性值获取节点(返回的是标签/节点对象)
document.getElementsByClassName() - 根据class属性值获取节点(返回值是类似数组的容器-HTMLCollection, 容器中的元素是标签对象)
document.getElementsByTagName() - 根据标签名获取节点（返回HTMLCollection对象，元素是选中的所有标签对象）
b.间接获取
获取一个标签的父节点：节点对象.parentElement
获取一个标签的子节点：节点对象.children/节点对象.firstElementChild/节点对象.lastElementChild
节点
1.创建节点
document.createElement(标签名) - 返回节点对象(节点不会添加网页中)
2.添加节点（将节点放到网页中去）
节点对象1.appendChild(节点对象2) - 将节点对象2添加到节点对象1的最后
节点1.inserBefore(节点2,节点3) - 在节点1中节点3的前面插入节点2
3.删除节点(删除网页中指定标签)
节点.remove() - 删除指定节点
4.拷贝节点
节点.cloneNode(false) - 浅拷贝一个节点
节点.cloneNode(true) - 深拷贝一个节点
标签的属性操作
1.双标签标签内容属性
innerText - 普通文本内容
innerHTML - html内容