JavaScript 学习笔记 day12 2021-4-20

JavaScript 学习笔记 day12 2021-4-20

1.js的组成

ECMAScript ：JavaScript语法

DOM ：页面文档对象模型

BOM：浏览器对象模型

1.3 数据类型的分类

js把数据类型分为两类：

• 简单数据类型（Number,String,Boolean,Undefined,Null）

• 复杂数据类型（Object）

2.字符串转义符

\n 换行符，n是newline的意思

\ \ 斜杠\

’ '单引号

* *双引号

\t tab缩进

\b 空格，b是blank的意思

4.字符串拼接

+号总结口诀：数值相加，字符相连

2.5 布尔型Boolean

布尔型与数字相加的时候，true的值为1，false的值为0

2.6 Undefined 和 Null

Undefined + 1 等于NaN

Underfined + true 等于 NaN

null + 11 等于 11

true + null 等于 1

4.1 数据类型转换

• 转换为字符串类型

• 转换为数字型

• 转换为布尔型

//1.把数字型转换为字符串型
var num = 10
var str = num.toString()
console.log(str)
//2.我们利用String
console.log(String(num))
//3.利用"+" 隐式转换
console.log(num+'')

4.4 转换为布尔型

• 代表空、否定的值会被转换为false，如" "、0、NaN、null、undefined

• 其余值都会被转换为true

//1.我们程序里面的等于符号 是 == 默认转换数据类型 会把字符串型的数据转换为数字型 只要求值相等
console.log(18 == '18')//true
//2.我们程序里面有全等 一模一样 要去 两侧的值 还有 数据类型完全一致才可以 true
console.log(18 === '18')//false

5.1 逻辑运算符

&& 全真为真
|| 有真为真

5.4 短路运算（逻辑中断）

1.逻辑与

• 语法：表达式1&&表达式2
• 如果第一个表达式的值为真，则返回表达式2
• 如果第一个表达式的值为假，则返回表达式1

2.逻辑或

• 语法：表达式1||表达式2
• 如果表达式1结果为真，则返回表达式1
• 如果表达式1结果为假，则返回表达式2

7.运算符优先级

• 一元运算符里面的逻辑非优先级很高
• 逻辑与比逻辑或优先级高

continue关键字 退出本次（当前次的循环）继续执行剩余次数循环

如果实参的个数小于形参的个数 多余的形参定义为undefined 最终的结果就是NaN

形参可以看做是不用声明的变量 num2 是一个变量但没有接受值 结果就是undefined

return 终止函数 return语句之后的代码不被执行

return返回的结果是最后一个值

5. arguments的使用

arguments展示形式是一个伪数组，因此可以进行遍历，伪数组具有以下特点

• 具有length属性
• 按索引方式存储数据
• 不具有数组的push，pop等方法

函数声明的两种方式

//1.利用函数关键字自定义函数（命名函数）
function fn() {

}
fn()
//2.函数表达式（匿名函数）
var fun = function () {
  console.log('我是函数表达式')
}
fun()
//(1)fun是变量名 不是函数名
//(2)函数表达式声明方式跟声明变量差不多，只不过变量里存的是值 而 函数表达式里面存的是函数
//(3)函数表达式也可以进行传递参数

JavaScript作用域

//1.javascript作用域：就是代码名字（变量）在某个范围内起作用和效果 减少命名冲突
//2.js的作用域（es6）全局作用域 局部作用域
//3.全局作用域 整个script标签
//4.局部作用域 （函数作用域）在函数内部就是局部作用域 这个代码的名字只在函数内部起效果和作用
var num = 10
var num = 30
console.log(num)
function fn() {
  var num = 20
  console.log(num)
}
fn()

变量的作用域

  //变量的作用域：根据作用域不同分为全局变量和局部变量
  //1.全局变量：在全局作用域下的变量
  //注意 如果在函数内部 没有什么直接赋值的变量也属于全局变量
  var num = 10;
  console.log(num)
  function fn() {
    console.log(num)
  }
  //2.局部变量 在局部作用域下 后者在函数内部的变量就是 局部变量
  //函数的形参也可以看作是局部变量
  function fun() {
    var num1 = 10
    num2 = 20
  }
fun()
  console.log(num1)
  //3.从执行效率来看全局变量和局部变量
  //(1)全局变量只有浏览器关闭的时候才会销毁，比较占内存资源
  //(2)局部变量 当我们程序执行完毕就会销毁，比较节约内存资源

js中没有块级作用域 js的作用域 全局作用域 局部作用域 现阶段我们js 没有 块级作用域
我们js 也是在es6的时候新增的块级作用域
块级作用域{} if{} for{}

 java
// if(xx){
//   int num = 10;
// }
//外面是不能调用num的

3. 作用域链

• 只要是代码，就至少有一个作用域
• 写在函数内部的局部作用域
• 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
• 根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链

function f1() {
  var num = 123
  function f2() {
    console.log(num)//站在目标出发，一层一层的往外查找
  }
  f2()
}
var num = 456
f1()

4.预解析

预解析和代码执行

1.我们js引擎运行js 分为两步 ：预解析 代码执行

(1) 预解析 js引擎会把js 里面所有的var 还有 function 提升到当前作用域的最前面

(2) 代码执行 按照代码书写的顺序从上往下执行

2.预解析分为 变量预解析（变量提升） 和 函数预解析 （函数提升）

(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作

(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数

5.利用对象字面量创建对象{}

//利用对象字面量创建对象{}
//var obj = {} //创建了一个空的对象
var obj = {
  uname: '张三',
  age: 18,
  sex: 'male',
  sayHi: function () {
    console.log('hi~')
  }
}
//(1)里面的属性或者方法我们采取键值对的形式
//(2)多个属性或者方法中间用逗号隔开的
//(3)方法冒号后面跟的是一个匿名函数
//2.使用对象
//(1) 调用对象的属性 我们采取 对象名.属性名
console.log(obj.uname)
//(2) 调用属性还有一种方法 对象名['属性名']
console.log(obj['age'])
//(3) 调用对象的方法 sayHi 对象名.方法名 千万别忘记添加小括号
console.log(obj.sayHi())

变量、属性、函数、方法区别

变量 单独声明并赋值 使用的时候直接写变量名 单独存在

属性 在对象里面的不需要声明的 使用的时候必须是 对象.属性

函数和方法的相同点 都是实现某种功能 做某件事

函数是单独声明 并且调用的 函数名（）单独存在的

方法 在对象里面 调用的时候 对象.方法（）

利用new Object 创建对象

var obj = new Object()obj.name = 'zhangsan'obj.age = 20obj.sex = 'male'obj.sayHi = function () {  console.log('hi')}/** (1) 我们是利用 等号 = 赋值的方法 添加对象的属性和方法* (2) 每个属性和方法之间用 分号结束* */console.log(obj.name)console.log(obj['age'])obj.sayHi()

利用构造函数创建对象

1.构造函数名字首字母要大写

2.我们构造函数不需要return 就可以返回结果

3.我们调用构造函数 必须使用 new

4.我们只要new Star() 调用函数就创建一个对象 ldh { }

function Star(name, age, sex) {  this.name = name  this.age = age  this.sex = sex}var ldh = new Star('liudehua', 18, 'male')//调用函数返回的是一个对象var zxy = new Star('zhangxueyou', 58, 'male')//调用函数返回的是一个对象console.log(ldh.name);console.log(ldh['sex']);console.log(zxy.name);console.log(zxy.age);

构造函数和对象

1.构造函数 明星 泛指的某一大类 它类似于java语言里面的 类（class）
2.对象 特指 是一个具体的事物 刘德华
3.我们利用构造函数创建对象的过程我们也称为对象的实例化

new关键字执行过程

1.new 构造函数可以在内存中创建一个空的对象
2.this 就会指向刚才创建的空对象
3.执行构造函数代码，给这个空对象添加属性和方法
4.返回这个对象

遍历对象

//for in 遍历我们的对象for(let k in obj){  console.log(k)//i 变量 输出 得到的是 属性名  console.log(obj[k])//obj[k] 得到的是 属性值}

1.内置对象

Javascript中的对象分为3种：自定义对象、内置对象、浏览器对象

日期对象

Date() 日期对象 是一个构造函数 必须使用new 来调用创建我们的日期对象

1.使用Date

  var date = new Date()  console.log(date)

2.参数常用的写法 数字型

  var date1 = new Date(2019, 10, 1)  console.log(date1)//返回的是11月 不是10月  var date2 = new Date('2019-10-1 8:8:8')  console.log(date2)

日期格式化

//格式化日期 年月日var date = new Date()console.log(date.getFullYear())//返回当前日期的年 2021console.log(date.getMonth())//月份小1个月 记得月份+1console.log(date.getDate())//返回几号console.log(date.getDay())//返回周几//我们写一个2021年4月21日星期三var year = date.getFullYear()var month = date.getMonth() + 1var datee = date.getDate()var arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六']var day = date.getDay()console.log('今天是' + year + '年' + month + '月' + datee + '日' + ',' + arr[day])

//格式化日期 时分秒var date = new Date()console.log(date.getHours())console.log(date.getMinutes())console.log(date.getSeconds())

时间戳

//获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数//1.通过 valueof() getTime()var date = new Date()console.log(date.valueOf())console.log(date.getTime())//2.简单地写法var date1 = +new Date()console.log(date1)//3. H5新增 获得毫秒数console.log(Date.now())

function countDown(time) {  var nowTime = +new Date()  var inputTime = +new Date(time)  var times = (inputTime - nowTime) / 1000  var d = parseInt(times / 60 / 60 / 24)  var h = parseInt(times / 60 / 60 % 24)  var m = parseInt(times / 60 % 60)  var s = parseInt(times % 60)  var d = d < 10 ? '0' + d : d  var h = h < 10 ? '0' + h : h  var m = m < 10 ? '0' + m : m  var s = s < 10 ? '0' + s : s  return d + '天' + h + '时' + m + '分' + s + '秒'}console.log(countDown('2021-4-21 15:0:0'))

检测数组

//检测是否为数组//(1)instanceof 运算符 它可以用来检测是否为数组//(2)Array.isArray(参数)console.log(Array.isArray(arr))

添加删除数组元素方法

/*1.push() 在我们数组的末尾 添加一个或者多个数组元素* */var arr = [1,2,3]//arr.push(4,'pink')console.log(arr.push(4,'pink'))console.log(arr)/*2.unshift 在我们数组的开头 添加一个或者多个数组元素* */console.log(arr.unshift('red'))console.log(arr)

• (1)push是可以给数组追加新的元素
• (2)push()参数直接写 数组元素就可以了
• (3)push完毕之后，返回的结果是 新数组的长度
• (4)原数组也会发生变化

  /*3.pop() 它可以删除数组的最后一个元素  * */  console.log(arr.pop())  console.log(arr)  /** (1)pop是可以删除数组的最后一个元素 记住一次只能删除一个元素* (2)pop()没有参数* (3)pop完毕之后，返回的结果是 删除的元素* (4)原数组也会发生变化* */  /*4.shift() 它可以删除数组的第一个一个元素  * */  console.log(arr.shift())  console.log(arr)  /** (1)pop是可以删除数组的第一个元素 记住一次只能删除一个元素* (2)shift()没有参数* (3)shift完毕之后，返回的结果是 删除的元素* (4)原数组也会发生变化* */

//数组排序//1.翻转数组var arr = ['pink', 'red', 'blue']arr.reverse()console.log(arr)//2.数组排序(冒泡排序)var arr = [3, 4, 7, 1]arr.sort(function (a, b) {  //return a - b //升序排列  //return b - a //降序排列})console.log(arr)

返回数组元素索引号方法 indexOf(数组元素) 作用就是返回该元素的索引号 从前面开始查找

它只返回第一个满足条件的索引号

如果在该元素找不到该元素，则返回的是-1

数组去重（重点）

var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']function unique(arr) {  var newArr = []  for (let i in arr) {    if (newArr.indexOf(arr[i]) === -1) {      newArr.push(arr[i])    }  }  return newArr}console.log(unique(arr))

数组转换为字符串

  //1. toString() 将数组转换为字符串  var arr = [1,2,3]  console.log(arr.toString())  //2.join(分隔符)  var arr1 =['green','blue','pink']  console.log(arr1.join('-'));

字符串查找位置和数量

  var str = 'abcoefoxyozzopp'  var j = str.indexOf('o')  var count = 0  while (str.indexOf('o', j) != -1) {    console.log(str.indexOf('o', j))    j = str.indexOf('o', j) + 1    count++  }  console.log(count)  var str = 'abcoefoxyozzopp'  var index = str.indexOf('o')  var count = 0  while (index !== -1) {    console.log(index)    index = str.indexOf('o', index + 1)    count++  }  console.log(count)

根据位置返回字符

//判断一个字符串'abcoefoxyozzopp'中出现次数最多的字符，并统计其次数/*核心算法：利用charAt()遍历这个字符串把每个字符串都存储给对象，如果对象没有该属性，就为1，如果存在了就+1遍历对象，得到最大值和该字符* */  var str = 'abcoefoxyozzopp'  var word = {}  for (var i = 0; i < str.length; i++) {    var chars = str.charAt(i)    if (word[chars]) {      word[chars]++    } else {      word[chars] = 1    }  }  var max = 0  var ch = ''  for (var j in word) {    //k 得到是 属性名    //o[k] 得到的是属性值    if (word[j] > max) {      max = word[j]      ch = j    }  }  console.log(max)  console.log('最多的字符是'+ch)