前端第6天

原生js基础

一、常见数据类型

js常用数据类型：数字类型、字符串、布尔、数组

1.数字类型（Number）

typeof(数据) - 所有数字对应的类型

 console.log(typeof(20), typeof(3.1415))  // number  number

数学对象（Math）

• 小数转整数

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

• x的y次方

console.log(Math.pow(3, 2), Math.pow(16, 0.5), Math.pow(8, 1/3))    // 9 4  2

• 求绝对值

console.log(Math.abs(-19))   // 19

• 产生0~1随机小数

console.log(Math.random())

• 产生0~100随机整数

console.log(parseInt(Math.random()*100))

• 产生100~999随机数

console.log(Math.random()*899+100)

类型转换
Number() - 转换成数字（原数据是什么格式的数字，，就转换成什么格式的数字）
parseFloat() - 将数据转换成带小数点的数字
parseInt() - 数据转换成整数
Math.ceil()/ Math.floor()/Math.round()

2.字符串（String）

容器型数据类型，不可变并且有序。

• 表示: 使用’'或者""，模板字符串用``

str1 = '小明'
str2 = "四川成都"
str3 = `我是${str1},我来自${str2}`
console.log(str1, str2, str3)
console.log(typeof(str3))

• 转义字符

str4 = '\t\'abc\n123'
console.log(str4)
str5 = '\u4e00abc'
 console.log(str5)       // 一abc

• 获取字符
  js中下标值范围是0~长度-1

message = 'hello world!'
 console.log(message[0])  // h

下标没有-1，越界也不会保错

console.log(message[-1], message[100])    // undefined   undefined

遍历

for(let x in message){
         console.log(x, message[x])
     }

• 相关操作方法

加法

console.log('abc'+'123', 'abc'+89090, 'abc'+true)    //abc123 abc89090 abctrue

不支持乘法运算

console.log('abc'*3)   // NaN

比较运算（和python一样）

console.log('abc'>'MN')   // true

判断是否是小写字母

chr = 'p'
console.log(chr>='a' && chr<='z')

• 相关方法和属性

获取字符串长度

message = 'hello world!'
console.log(message.length)

获取字符

console.log(message.charAt(1), message.charCodeAt(1))

正则相关

console.log('mms234abc829llo'.match(/\d{3}/))  //['234'] 
console.log('mms234abc829llo'.match(/\d{3}/g))      //['234', '829']

字符串.replace(正则, 新子串)

message = 'abc34and8923kls0akjs98数据2规范'
 console.log(message.replace(/\d+/, '*'))    //abc*and8923kls0akjs98数据2规范
 console.log(message.replace(/\d+/g, '*'))   // abc*and*kls*akjs*数据*规范

字符串.slice(开始下标, 结束下标) - 切片

console.log(message.slice(2,7))    // c34an

类型转换
String(数据) - 将数据转换成字符串

3.布尔

只有true和false两个值。

4.数组（Array）

相当于python中的列表。

• 查

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
console.log(names[0])    // 诸葛亮

• 遍历

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(元素)

 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()

names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
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, "吕布"]
    
names = ['诸葛亮', '赵云', '曹操', '荀彧', '郭嘉', '庞统']
names[-1] = '董卓'    // 报错

• 数组.every(函数) - 检测数组中所有的元素是否满足函数返回值提供的条件；函数 - 需要一个参数，这个参数指向的是数组中的每个元素
• 数组.filter(函数) - 获取数组所有满足函数返回值要求的元素；函数 - 需要一个参数，这个参数指向的是数组中的每个元素

scores = [29, 89, 78, 67, 99, 45, 75, 39]
 result = scores.filter(function(item){
        return item<60
 })
 console.log(result)    // [29, 45, 39]

• 数组.join(分隔符=’,’) - 将数组中所有的元素适用分隔符拼接成一个字符串

 names = ['张小明', '张三', '张三丰', '张无忌', '张翠山']
result = names.join()
console.log(result)   // 张小明,张三,张三丰,张无忌,张翠山

• 数组.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]

• 数组.reduce(函数, 初始值)
  运算规则和python中的reduce一样
• 数组.sort(函数)
  函数有两个参数，指向的都是序列中的元素
  按照元素的大小从小到大排序 - return a-b
  按照元素的大小从大到小排序 - return b-a

二、对象

1.对象

js中的对象可以看成是python中字典和对象的结合

• 对象字面量

stu1 = {
        'name': 'xiaoming',
        'age': 18,
        'sex': '男'
    }
    stu2 = {
        name: '小花',
        age: 20,
        sex: '女'
    }

2.构造函数(定义类)

用来创建对象的函数，函数名就相当于类名。

• 相当于定义类
  function 类名(){
  //添加对象属性和对象方法
  this.属性 = 值
  this.方法 = 函数
  }

 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}`)
       }
   }

• 创建对象
  对象 = new 类名()

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.属性的操作

• 查
  对象[属性名]
  对象.属性
• 改/增
  对象[属性名] = 值 - 如果没有指定属性就是添加，有就是修改
  对象.属性 = 值 - 如果没有指定属性就是添加，有就是修改

4.类的prototype属性

给指定类所有的对象添加属性和方法(这儿的所有的对象可以是添加前创建的，也可以是添加后创建)。
类名.prototype.属性 = 值

三、DOM操作

1.什么是DOM

DOM是 doucument object model的缩写， 文档对象模型。
js中自带一个document对象，指向的是当前网页的内容（包含了body以及body中所有的可见标签）。

2.DOM操作 - js通过操作document对象来操作网页内容

获取节点

• 直接获取
  document.getElementById(id值) - 根据id属性值获取节点(返回的是标签/节点对象)
  document.getElementsByClassName() - 根据class属性值获取节点(返回值是类似数组的容器-HTMLCollection, 容器中的元素是标签对象)
  document.getElementsByTagName() - 根据标签名获取节点（返回HTMLCollection对象，元素是选中的所有标签对象）
• 间接获取
  获取一个标签的父节点：节点对象.parentElement
  获取一个标签的子节点：节点对象.children/节点对象.firstElementChild/节点对象.lastElementChild

3、节点的操作

• 创建节点
  document.createElement(标签名) - 返回节点对象(节点不会添加网页中)
• 添加节点（将节点放到网页中去）
  节点对象1.appendChild(节点对象2) - 将节点对象2添加到节点对象1的最后
  节点1.inserBefore(节点2,节点3) - 在节点1中节点3的前面插入节点2
• 删除节点
  节点.remove() - 删除指定节点
• 拷贝节点
  节点.cloneNode(false) - 浅拷贝一个节点
  节点.cloneNode(true) - 深拷贝一个节点

5.标签的属性操作

• 双标签标签内容属性
  innerText - 普通文本内容
  innerHTML - html内容
• 普通属性（原来标签的属性在js标签对象中都有对应的属性）