JavaScript基础知识

一.计算机基础知识

1.编程语言

​ 机器语言： 0 1

​ 汇编语言： %##&&

​ 高级语言: Java python c c++ c# go php javascript，node andriod objective-c swift

注意点： html css 不是编程语言 标记语言

2.计算机组成

​ 硬件：显示器，… 硬盘 内存

​ 硬盘：可以永久存储数据

​ 内存： 数据计算空间（容器）

软件： 操作系统（windows macOS Linux andriod ios）-> 应用软件（qq,云音乐…）

存储单位： 1G = 1024M 1m= 1024K 1k= 1024B

二.javascript入门

1.概念

​ javascript是一门运行在’客户端‘，面向对象的 ，事件驱动的，单线程的 编程语言。

2.js的作用

• 表单动态校验（密码强度检测） （ JS 产生最初的目的 ）

• 网页特效（webAPI）

• 服务端开发(Node.js)

• 桌面程序(Electron)

• App(flutter)

• 控制硬件-物联网(Ruff)

• 游戏开发(cocos2d-js)

  网站开发：vue.js 微信小程序 react.js

3.js代码是怎么执行

浏览器内核分为两部分：渲染引擎 解析引擎

渲染引擎：解析html css

解析引擎: 解析javascript

4.js的组成

分为三部分：ECMAScript 与 DOM,BOM

1.ECMAScript(欧州机算机标准协会): 制定js的语法规范

2.DOM与BOM: 可以做浏览器上网页特效（webAPI）

了解一下原生javasript有哪些: js基础语法，webAPI, js高级，ajax

5.js代码的书写位置

1.行内式(一般不会写行内式的js，了解即可)

<div onclick="alert(123)">点我</div>     //当点击时触发点击事件

2.内嵌式

<script>
    这里写js代码
</script>

3.外联式

<script src='xxx.js'>不要在这里写js代码</script>

6.js中的注释

1.内行注释 ctrl + /

2.多行注释

7.js的常见的输入方式

alert(‘xxx’) 警式框

console.log(‘xxxx’) 控制台语句

prompt(‘请输入你的信息’) 输入框

confirm(‘你确定要删除码’) 确定选择框

三.js基础

编程的三要素：数据 流程控制 函数

“xiaosa” 18

1.数据

1.1变量

作用

是一个存放数据的空间 , 这个空间只能存放一个数据

变量的使用

// 变量分为两个部分:   变量名   变量值
// 1.声明变量名 var === variable
   var age;
// 2.赋值
   age = 18;

// 重点:一般连起来写
   var age = 18

变量的语法注意点

//1.变量是可以更新的
var myname = "jack"
myname = "rose"
console.log(myname)   //rose

//2.一次可以声明多个变量
var myname='tom',age=4,gender="公";
console.log(myname,age,gender) 

//3.变量只声明不赋值 结果为undefined
var gender
console.log(gender)   //undefined

//4.变量不声明直接打印会报错,除了name和一些特殊的名字
console.log(tel)   //报错 age is not defined

变量名的定义规范

规则
由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：usrAge, num01, _name
严格区分大小写。var app; 和 var App; 是两个变量
不能 以数字开头。 18age 是错误的
不能 是关键字、保留字。例如：var、for、while
变量名必须有意义。 MMD BBD nl → age

重点案例练习：两个变量交换数据

// 两个变量相互交换数据
  var a = 10;
  var b = 100;
  var temp;

  temp = a;
  a = b
  b = temp;

  console.log(a,b); //  100   10

1.2 数据类型–重点

在javascript中数据分为两大类，8小类

1.基本数据类型（值类型）： 数值型Number 字符串型String 布尔型Boolean 未定义型undefined 空型Null

2.复杂数据类型（引用类型）： 对象型Object 数组Array(但是数组也是对象) 函数型 function(){}

变量的数据类型是由变量的值决定的，它是可变的

数值型Number

var a = 100
var b = 99.8;
var c = -10;

进制问题：二进制 八进制 十进制 十六进制

八进制 ：数字以0开头

十六进制：数字以0x开头

最大值：Number.MAX_VALUE

最小值：Number.MIN_VALUE

无穷大：Infinity

无穷小：-Infinity

(重点)非数字：NaN (not a number) 不是一个数字 (当一个数据向数值类型转换时，转换不过去，就是NaN)

isNaN函数

//isNaN()   判断  是否 不是一个数字
console.log(isNaN(100))   //false
consolo.log(isNaN('jack'))   //true

字符串型String

概述：用单引号或双引号包裹起来的数据就是字符串类型,es6还可以用反引号``来包裹

var str = "我是一个字符串"
var str = '123'
var str = `abc`   //反引号可以写变量${变量名}

字符串嵌套

var str = '我是一个"字符串"'
var str = "我是一个\"字符串\""

转义字符：

转义符	解释说明
\n	换行符，n 是 newline 的意思
\ \	斜杠 \
’	’ 单引号
"	”双引号
\t	tab 缩进
\b	空格 ，b 是 blank 的意思

字符串的长度length (重点)

var str = "我是武汉传智播客的老师"
console.log(str.length)  //11

字符串的拼接 ”+“

口决：数值相加，字符相连

var str = "我是"+"老师"   //”我是老师"
var str = "pink" + 10    //"pink10"
//左右两边只要有一个字符串就是拼接

字符串拼接加强

建议大家用 反引号+${变量} 这种写法

var age = 18
var str = "我今年"+age+"岁"    //"我今年18岁"    不要用这种写法
var str = `我今年${age}岁`     //"我今年18岁"    用这种写法

布尔型Boolean

只有两个值 true false

var flag = true
var flag = false

未定义型undefined

var un = undefined    // 这个变量有值 但是不知道数据类型

空型Null

var nl = null         //这个变量的值是空的

数据类型检测 typeof 或 typeof()

console.log(typeof 10);   //number
console.log(typeof(10));  //number

console.log(typeof 'abc'); //string
console.log(typeof(abc));  //string

console.log(typeof true);  //boolean
console.log(typeof(false));//boolean

console.log(typeof undefined)  //undefined

console.log(typeof null)  //object

字面量：

概念：从表面就可以看出这个数据是什么类型

8,  "string"   true   []    {}     function(){}

1.3数据类型之间的相互转换

a.基它类型转换为字符串型

1.toString()

var num=10
console.log(num.toString())    //'10'

var flag = true
console.log(flag.toString())   //'true'

2.String()

var num=10
console.log(String(num))    //'10'

var flag = true
console.log(String(flag))   //'true'

3.加上空字符串 + ‘’

var num=10
console.log(num+'')    //'10'

var flag = true
console.log(flag+'')   //'true'

b.其它类型转换为数值型

parseInt (parse integer)

var str = "520肖战"
console.log(parseInt(str))   //520

var str = "宋祖儿5201314"
console.log(parseInt(str))  //NaN

parseFloat(parse float)

var str = "520.1314肖战"
console.log(parseFloat(str))   //520.1314

var str = "宋祖儿520.1314"
console.log(parseFloat(str))  //NaN

Number

var str = '100'
console.log(Number(str))   //100

隐式转换 - * /

console.log('123' - 0)   //123
console.log('123' * 1)   //123
console.log('123' / 1)   //123

c.其它类型转换为布尔型

Boolean()这个函数转换为布尔型，但是我们一般不用写，因为有隐式转换

哪此值代表false呢？  
'',0,NaN,undefined,null   这些值在隐匿转换中都表示假false

1.4运算符

a.算术运算符

加+ 减- 乘* 除/ 取余% 自增 ++ 自减 –

//自增运算符  自身值加1    
// 注意点：变量++    var num=10    num++
var num=10
num++   //  11
或
++num   //  11
//总结：前置自增与后置自增 单独是一行，没有区别，都是自身变量+1

//1.前置自增:先自增,再返回，
++num

//2.后置自增 : 先返回，再自增
num++

b.比较运算符

大于： >

小于：<

大于等于： >=

小于等于： <=

等于：== （值相等，数据类型有可能不一致）

console.log(10=='10')   //true

不等于： !=

全等于：=== (值相等，数据类型也要一致)

console.log(10==='10')   //false

不全等于： !== （只要是值不相等或类型不相等，结果为真true）

console.log(10 !== 11);    //true
console.log(10 !== '10');  //true
console.log(10 != '10');   //false

c.逻辑运算符

非：! 取反

console.log(!true)  //false
console.log(!false)  //true

与：&& 两边都为真，结果为真

或：|| 只要有一个为真，结果为真

重点：短路运算 逻辑中断

逻辑与中断    只要是碰到假，就会中断
consoloe.log(123 && 0 && 456)   //0
逻辑或中断    只是是碰到真，就会中断
consoloe.log(123 || 0 || 456)   //123


案例：
var num = 10;
console.log(123&&''&&num++)  //''
console.log(num)  //10

d.赋值运算符

赋值：= += -= *= /= %=

  var a = 10;
  a += "10"    //a = a+"10"
  a++
  console.log(a);  // '1010'

  

e.三元运算符（三目运算符）

语法：

结果 = 条件表达式 ? 表达式1 : 表达式2

当条件表达式为真时，结果是表达式1的值。当条件表达式为假时，结果是表达式2的值

//案例： 求两个数的最大值
var a = 3
var b = 10
var res = a > b ? a : b

//经典面试题：用一行代码实现求三个数的最大值

 var a = 100
 var b = 30
 var c = 10

 var res = a > b ? (a > c ? a : c) : (b > c ? b : c)

二.流程控制

数据+流程控制 = 算法

分类：顺序 分支 循环

1.顺序 不用学

2.分支：

2.1单分支

//语法
if(条件表达式  => boolean){
    ...业务逻辑代码
}

// 当单分支的业务逻辑代码只有一行时，{}可以省略

//案例
var year = 3
if(year >= 1){
    console.log("有年终奖")
}
console.log("加油,好好干")

2.2双分支

//语法
if(条件表达式  => boolean){
    如果为真：...执行业务逻辑代码1
}else {
    如果为假：...执行业务逻辑代码2
}

//案例：判断是否是闰年
//算法: 年份能被4整除但不能被100整除 或  年份能被400整除
var year  = prompt('请输入年份')
if(year%4==0 && year %100 !=0 || year % 400 ==0){
    console.log("闰年")
}else {
    console.log('平年')
}

2.3多分支

//语法
if(条件表达式  => boolean){
    如果为真：...执行业务逻辑代码1
}else if(条件表达式) {
    如果为假：...执行业务逻辑代码2
}else if(条件表达式){
    ...
}...else {
    ...
}

2.4switch case

语法：

​ switch(条件表达式){

​ case value1:

​ 表达式1;

​ break

​ case value2:

​ 表达式2;

​ break

​ …

​ default:

​ 表达式

​ break

}

注意事项：1.case后面的break不能丢,除了default外 2.条件表达式的值与case后的value必须 全等

//用switch case方式打印学生的成绩   大于90 优秀   大于80 良好  大于70 一般    大于60及格    小于60  不及格

 var score = prompt('请输入学生成绩');
 var data = parseInt(score / 10)   

 switch(data){
     case 10:
         console.log("棒棒哒");
         break
     case 9:
         console.log("优秀");
         break
     case 8:
         console.log("良好");
         break
     case 7:
         console.log("一般");
         break
     case 6:
         console.log("及格");
         break;
     default:
         console.log("不及格");
 }

总结：多分支一般用来处理 “范围” 的业务逻辑，switch case处理 “定值” 的业务逻辑

3.循环

作用：重复的执行代码

3.1 for 一般跟 计数 相关

语法：

for(初始化变量;条件表达式;操作表达式){

​ …循环业务代码

}

执行顺序：

​ 初始化->条件表达式->循环体->操作表达式

​ 条件表达式(真)->循环体->操作表达式

​ 条件表达式(假)->循环结束

//案例
for (var i = 1; i <= 3; i++) {
    console.log(i);  //1 2 3
}

console.log(i);// 4   全局变量

//案例   求1~3的和
var sum = 0
for(var i = 1;i<=3;i++){
    sum = sum +i
}
console.log(sum)

//求1~100之间所有数的平均值
var sum = 0;
var average = 0;
for(var i = 1; i<=100; i++){
    sum += i;
}
average = sum / 100;
console.log(average)

//求1~100之间偶数与奇数的和
var even = 0;
var odd = 0;
for(var i = 1; i <= 100; i++){
    if(i % 2 == 0){
        even += i
    }else {
        odd += i
    }
}
console.log(`偶数和为${even}`)
console.log(`奇数和为${odd}`)

//求1~100之间能被3整除的和
var res = 0;
for(var i = 1; i <= 100; i++){
    if(i % 3 == 0){
        res += i
    }
}
console.log(res)

//循环字符串拼接
var str = '';
for(var i = 1; i <= 5; i++){
    str += '☆'
}
console.log(str)

双重for循环

语法：

​ for (外层的初始化变量; 外层的条件表达式; 外层的操作表达式) {

​ for (里层的初始化变量; 里层的条件表达式; 里层的操作表达式) {

​ // 执行语句;

​ }

​ }

//案例：
//打印五行五列的小星星
var str = ""
for(var i=1; i<=5; i++){   //行
    for(var j = 1; j<=5; j++){  //列
        str  = str + "☆"    
    }
    str +=  '\n'
}

console.log(str);

//打印10行的倒三角形
// 算法1:
var str = ""
for (var i = 1; i <= 10; i++) {
    for (var j = 1; j <= 10 - i + 1; j++) {
        str += "☆"
    }
    str += "\n"
}
console.log(str);
// 算法2：
var str = ""
for (var i = 10; i >= 1; i--) {
    for (var j = 1; j <= i; j++) {
        str += "☆"
    }
    str += "\n"
}
console.log(str);

//打印 九九乘法表
var str =""
for (var i = 1; i <= 9; i++) {
    for (var j = 1; j <= i; j++){
        str += `${j}×${i}=${j*i}\t`
    }
    str += '\n' 
}
console.log(str);

3.2 while

语法：

while(条件表达式){

​ 循环体

}

注意点：在循环体中要有修改条件表达式的操作，否则就可以成为死循环了

//案例 求1~100所有整数的和
var sum = 0
var j=1;
while(j <= 100){
    sum += j
    j++
}
console.log(sum)

//案例：弹出一个提示框，你爱我吗？如果输入我爱你，就提示结束，否则一直弹
var message = prompt('你爱我吗')
while( message !== '我爱你' ){
    message = prompt('你爱我吗')
}
alert("我也爱你")

3.3 do…while

语法：

do {

​ 循环体

} while(条件表达式)

注意点：在循环体中要有修改条件表达式的操作，否则就可以成为死循环了。do至少会执行一次

//案例 
do {
    var message = prompt('你爱我吗')
} while( message !== '我爱你')
alert('我也爱你')

3.4.循环中的两个关键词 break 与continue

break: 中断所有循环

continue:中断本次循环,跳到下一个循环

//案例：吃包子出现虫子
for (var i = 1; i <= 5; i++) {
    if (i == 2) {   // 第二个出现虫子,扔掉第二个，接着吃
        continue;   
    }

    if (i == 4) {   // 第四个出现虫子,扔掉，不再吃包子了
        break;
    }

    console.log(`我正在吃第${i}个包子`);
}

循环ATM机作业题

var money = 100;
do {
    var operation = prompt("请输入您要的操作\n 1.存钱 \n 2.取钱 \n 3.显示余额 \n 4.退出");
    if (operation === '1') {
        var m = prompt("请输入你要存的钱数")
        money += parseInt(m)
        alert('你的余额为：' + money)
    } else if (operation === '2') {
        var m = prompt("请输入你要取的钱数")
        money -= parseInt(m)
        alert('你的余额为：' + money)
    } else if (operation === '3') {
        alert('你的余额为：' + money)
    } else if (operation === '4') {
        var flag = confirm('你确定要退出吗')
        if(!flag){
            operation = null
        }
    } else {
        alert('请输入正确的操作数字')
    }
} while (operation !== '4')

三.数组

1.概念

数据的有序集合，可以用来存储多个数据

2.创建的两种方式

1.构造函数方式：var arr = new Array()

var arr = new Array();  //创建了一个空的数组
console.log(arr);      // []

2.字面量

var arr = [1,'string',true,undefined,null,[],{},function(){}]
//数组中的成员（元素）可以是任意的数据类型

数组的索引（下标）：从 0 开始

数组的的元素的访问：

var arr = ['胖虎','静香','大雄'] 
console.log(arr[2])   //'大雄'

3.数组长度

​ arr.length

4.遍历

var arr = ['胖虎','静香','大雄']
for(var i=0; i< arr.length; i++){
    console.log(arr[i])
}

// 扩展
arr.forEach(function(value,index){
    console.log(value,index);
})

5.案例

//1.求数组中的最大值
var arr = [1,2,3,9,5,7]
var max = arr[0];
for(var i=1; i<arr.length; i++){
    if(arr[i] > max){
        max = arr[i]
    }
}
console.log(max)


//数组中存放10个整数（1~10）
var arr = []
for(var i = 1; i <= 10; i++){
    arr[i-1] = i
}
console.log(arr)

//数组筛选 将大于5的值筛选出来
//方案1
    var arr = [1,2,5,3,4,6,9] 
    var newArr = []
    var j = 0 //j的作用相当于一个计数器
    for(var i = 0; i<arr.length; i++){
        if(arr[i] >= 5){
            newArr[j] = arr[i]
            j++
        }
    }
    console.log(newArr)

//方案2
    var arr = [1,2,5,3,4,6,9] 
    var newArr = []
    //利用了newArr.length的长度是动态的特性
    for(var i = 0; i<arr.length; i++){
        if(arr[i] >= 5){
            newArr[newArr.length] = arr[i]
        }
    }
    console.log(newArr)



// 求数组中出现次数最多的元素及它的次数
var arr = [1,2,3,'a',"b",2,"c","a","d","a"]


//数组的反转
//方案1
var arr = ['胖虎','静香','大雄','小夫'] 
var newArr = [];
for (var i = 0; i < arr.length; i++) {
    newArr[arr.length - i - 1] = arr[i]
}
console.log(newArr);

//方案2
var arr = ['胖虎','静香','大雄','小夫'] 
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
    newArr[newArr.length] = arr[i]
}
console.log(newArr);


//数组的冒泡排序从小到大
var arr = [9, 2, 17, 8, 5, 3]   // =>[2,3,5,8,9,17]

for (var j = 0; j < arr.length - 1; j++) {   //外层控制是趟数 行
    for (var i = 0; i < arr.length - 1-j; i++) {
        if (arr[i] > arr[i + 1]) {
            var temp = arr[i]
            arr[i] = arr[i + 1]
            arr[i + 1] = temp
        }
    }
}

四.函数

1.概念

将相同的业务逻辑封装起来，重复使用

2.语法

从现实中理解函数的使用：函数声明相当于是 ’做榨汁机‘，函数调用相当于是 ’使用榨法机‘。

分为两部分: 函数的声明 函数的调用

函数声明：

function 函数名 ([形参列表]) {

​ 函数体

​ [return 返回值]

}

函数调用

​ 函数名 ([实参列表])

//案例
function getSum(){   //函数声明
   var sum = 0
   for(var i=1; i<=100; i++){
       sum += i
   }
   console.log(sum)
}
getSum()   //函数调用

3.形参与实参

function getSum(a,b){   //a,b是形参
    console.log(a+b)
}
getSum(1,2)   // 1,2是实参


//形参与实参的个数不匹配的情况
function getSum(a,b){
    console.log(a+b)
}

getSum(1,2)    //形参与实参个数一至
getSum(1,2,3)  //把3传给函数，但是在函数中没有形参来接收，就不接收
getSum(4)      //相当于b接收是undefined

4.返回值

函数可以有返回值，也可以没有返回值，根据业务逻辑

function foo(name){
    return name+",大傻逼"   // return 返回值
}
var res = foo("傻逼")
console.log(res)

注意事项：

1.return 可以终止函数的执行，return后面可以不跟 数据

2.如果函数没有return 默认返回就是undefined

5.函数小案例

//利用函数求两个数的最大值
function getMax(a, b) {
     // if(a>b){
     //     return a;
     // }else {
     //     return b
     // }

     return a > b ? a : b;
 }

var res = getMax(4, 6)
console.log(res);

//利用函数求三个数的最大值
function getMax(a, b, c) {
     // if(a>b){
     //     //a大于b  
     //     if(a>c){
     //         return a
     //     }else {
     //         return c
     //     }
     // }else {
     //     //b大于a
     //     if(b>c){
     //         return b
     //     }else {
     //         return c
     //     }
     // }
     return a > b ? (a > c ? a : c) : (b > c ? b : c)
 }
var res = getMax(19, 10, 3)
console.log(res);

6.arguments的使用

1.在任意函数内部都有一个看不见的arguments，除了箭头函数外

2.arguments是一个长的像数组的伪数组，可以对它进行遍历

3.函数调用的实参变成了arguments的元素

function getSum(){
   var sum = 0
   // arguments = [[1,2,3]]   [[2,3,9,4,5]]
   for(var i = 0; i< arguments.length; i++){
       sum += arguments[i]
   }
   return sum
}
var res1 = getSum(1,2,3)
console.log(res1);  //6
var res2 = getSum(2,3,9,4,5)
console.log(res2);  //23

7.函数声明的两种形式

a.声明式

function fn(){
    console.log("我是声明式的函数")
}
fn()

b.表达式式（匿名式） 函数也是一种数据类型

var fn = function(){
    console.log("我是表达式式的函数")
}
fn()

8.作用域

概念：代码（变量）起作用效果的区间范围

分类：全局作用域 局部作用域

重点：es6之前只有函数的{}才有限定作用域

<script>
    var a = 10;     //全局
    
    function fn(){
        var b = 20  //局部
    }

	if(true){
        var c = 30   //全局
    }

	while(true){
        var d = 40   //全局的
    }
</script>

9.全局变量与局部变量

全局变量：变量声明在全局作用域下

局部变量：变量声明在函数内部

注意点：在函数内部变量没有声明，直接赋值，就是全局变量（这句话在一定的条件下有问题）

10.变量的生命周期

变量的生命周期指的是变量从什么时候开始创建，么时候销毁。

全局变量的生命周期：

​ 生：代码开始运行

​ 死：关闭浏览器当前的窗口

局部变量的生命周期：

​ 生：函数开始调用时

​ 死：调用函数完毕时 （将来学习闭包时这句话又要注意）

11.作用域链

函数内部是可以套函数的，因此函数内部形成了作用域链

重点：函数内部的变量如果没有找到，就向上一层查找，上一层出没有，再向上一层查找，因为形成了一条查找的链条。

做题时的原则：就近原则

function fn1(){      //   0级链    有函数 fn1
    var a = 1
    function fn2(){  //   1级链    有a=1 与函数 fn2
        var b = 2
        function fn3(){   //2级链       有b=2  与函数 fn3
            var c = 3
            console.log(c)   //3级链    有c = 3
        }
        fn3()
    }
    fn2()
}

fn1()

五.对象

1.概念

现实生活：对象就是东西，是一个具体的事物。万物皆对象

程序角度: 对象是一组无序的数据的集合。包含属性与方法

2.对象的创建

方式1：字面量

var person = {
     name:"jack",
     age:18,
     sex:'男',
     showFilm:function(){
         console.log("I can showFilm");
     },
     liaoMei:function(){
         return "I can liaoMei"
     }
}

//属性输入打印
console.log(person.name); //jack
//关联数组的写法
console.log(person['age']); //18
//如果属性不加引号就是变量名
var gender = 'sex'
console.log(person[gender]);  //男

//方法调用
person.showFilm()
//方法调用关联数组写法
var res = person['liaoMei']()
console.log(res)

方式2: new Object()

var obj = new Object()   //相当于创建了一个空的对象   var obj = {}

//对象的动态特性
obj.name = "项**";
obj.age = 21;
obj.type = "女海王"
obj.dance = function(){
    console.log("I can dance")
}


// 属性输入
console.log(obj.name)
console.log(obj['type'])
// 方法调用
obj.dance()
obj['dance']()

方式3： 构造函数

以上的两种方式都只能创建一个对象，如何多次创建对象呢？批量的生产对象

工厂函数:

function person(name,age,gender){
    var obj = {};
    obj.name = name;
    obj.age = age;
    obj.gender = gender;
    return obj   
}

var p1 = person('jack',18,"男")
console.log(p1);
var p2 = person('rose',21,"女")
console.log(p2);

构造函数:

function Mario(name,color,height){   //模板  模具   类class
     this.name = name
     this.color = color
     this.height = height
     this.smallJump = function(){
         console.log("smallJupm");
     }
     this.bigJump = function(){
         console.log("bigJupm");
     }
     this.attack = function(){
         console.log("attack");
     }
 }

var m1 = new Mario("redMario",'red',"100cm")   // new构造函数的过程也叫   实例化
console.log(m1);
var m2 = new Mario("greenMario",'green',"100cm")
console.log(m2);

//m1,m2可以称为实例

构造函数的注意事项：

1.构造函数的函数首字母一般建议大写

2.构造函数的返回值如果没有写return 默认返回this

3.构造函数调用时前面要用关键词 new

new关键词执行的过程

1.在内存中开辟了一个空间

2.this变量指向了这个空间

3.进入函数体执行代码

4.有一个看不见的return this

3.对象的遍历 for…in

var obj = {
    name: "jack",
    age: 18,
    gender: "male",
    fn:function(){}
}

for(var k in obj){
    console.log(k)
    console.log(obj[k])
    console.log(k,obj[key]);
}

六.内置对象

学习内置对象： Math 数学 Date 日期 String字符串 Array 数组

怎么学：多写，多记方法名，后期多练

Math 数学

属性：Math.PI

方法：

//1.最大值
Math.max(1,2,4,9)  //9

//Math.max() 不能求数组的最大值
Math.max([3,65,76,2,9])   //NaN
//求数组的最大值解决方案，后期学
Math.max.apply(null,[3,65,76,2,9])   //76
Math.max(...[3,65,76,2,9])  //76


//2.求绝对值
Math.abs(-1)    //1
Math.abs(1)     //1
//3.向下取整
Math.floor(1.3) //1
Math.floor(1.9) //1
//4.向上取整
Math.ceil(1.2)  //2
Math.ceil(1.9)  //2
//5.四舍五入
Math.round(1.1)  //1
Math.round(1.8)  //2
Math.round(-1.1) //1
Math.round(-1.5) //1   负数时,  .5往大了取整


//6.取随机数  [0,1)   从0到1,包括0，不包括1
Math.random()
//获取两个数之间的整数，包括两个整数的算法
Math.floor(Math.random() * (max - min + 1)) + min; //含最大值，含最小值 

Date 日期

var date = new Date()  //获取当天时间对象
var date = new Date('2021-4-17')   //取参数时间对象
//date不好用

date.getFullYear()  //年
date.getMonth()+1   //月份    注意date.getMonth()要加1才能得到正确的月份
date.getDate()      //日期
date.getDay()       //星期几   注意date.getDay()得到的值是[0-6]  星期日是0

date.getHours()     //时
date.getMinutes()   //分
date.getSeconds()   //秒

时间戳：

解释：从1970年1月1日 到 一个时间点 经过了多少毫秒

//方式1：valueOf  getTime
var date = new Date()    //从1970年1月1日 到 现在 经过了多少毫秒
cosole.log(date.valueOf())
console.log(date.getTime())

//方式2： +new Date
var date = +new Date('2000-01-01') //从1970年1月1日 到 '2000-01-01' 经过了多少毫秒
console.log(date)

//方式3： Date.now()   //从1970年1月1日 到 现在 经过了多少毫秒
var date = Date.now()
console.log(date)

//案例:计算从你出生到现在活了多少天?
var nowTime = Date.now()
var birthTime = +new Date('2001-3-20')

var time = Math.ceil((nowTime-birthTime)/1000/60/60/24)
console.log(time);

//案例：倒计时效果
function countDown(time) {
    var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
    var inputTime = +new Date(time); // 返回的是用户输入未来时间的总毫秒数
    var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
    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); // 当前的秒
  
    return d + '天' + h + '时' + m + '分' + s + '秒';
}

Array数组

1.数组类型检测

var arr = [1,2,3]
console.log(typeof arr);  //object

//arr 是否是 Array的实例
var arr = new Array()
console.log(arr instanceof Array);  //true
console.log(Array.isArray(arr));  //true

2.数组元素的添加与删除

//push  在数组的后面添加元素
1.修改了原数组
2.参数：追加的元素
2.返回值：是追加后数组的长度
var arr= [1,2,3]
arr.push(4,5)    //返回值是5   原数组变成了[1,2,3,4,5]
arr.push([4,5])  //返回值是4   原数组变成了[1,2,3,[4,5]]


//unshift  在数组的前面追加元素
1.修改了原数组
2.参数：追加的元素
2.返回值：是追加后数组的长度
var arr= [1,2,3]
arr.unshift(4,5)   //返回值是5   原数组变成了[4,5,1,2,3]


//pop  删除数组的最后一个元素
1.修改了原数组
2.参数：无
2.返回值：删除的那个元素
var arr= [1,2,3]
arr.pop()   //返回值是3   原数组变成了[1,2]

//shift 删除数组的第一个元素
1.修改了原数组
2.参数：无
2.返回值：删除的那个元素
var arr= [1,2,3]
arr.shift()   //返回值是1   原数组变成了[2,3]

3.数组的反转

//数组.reverse()  反转数组

var arr = [1,2,3,4]
arr.reverse()
console.log(arr)   //[4,3,2,1]

4.数组的排序

//数组.sort()     数组排序
var arr = [4,2,8,12,9]

arr.sort(function(a,b){
    return a - b    //数组升序
})
console.log(arr)   //[2,4,8,9,12]


arr.sort(function(a,b){
    return a -b    //数组降序
})
console.log(arr)   //[12，9，8，4，2]

5.数组的索引

//根据元素找下标   indexOf()    lastIndexOf()  
//indexOf()   从数组的左边向右边找，找到一个就马上返回下标   没有找到返回-1
//lastIndexOf()   从数组的右边向左边找，找到一个就马上返回下标   没有找到返回-1

var arr = [1,2,3,4,5,3]
console.log(arr.indexOf(3))      //2
console.log(arr.indexOf(8))      //-1

console.log(arr.lastIndexOf(3))  //5
console.log(arr.indexOf(7))      //-1


//案例 数组去重
//方案1
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
    if(newArr.indexOf(arr[i])===-1){
        newArr.push(arr[i])
    }
}
console.log(newArr)

//方案2   暂时了解   可以关注数组的includes方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = []
for(var i=0; i<arr.length; i++){
    if(!newArr.includes(arr[i])){
        newArr.push(arr[i])
    }
}
console.log(newArr)

//方案3  暂时了解   可以关注数组的reduce方法
var arr = [1,2,3,'a',"b",2,"c","a"]
var newArr = arr.reduce(function(acc,value,index){
    if(!acc.includes(value)){
        acc.push(value)
    }
    return acc
},[])
console.log(newArr)

6.数组转换为字符串

//数组.join()
var arr =[1,2,3]
var str = arr.join()
console.log(str)   //1,2,3

var str = arr.join("&")
console.log(str)   //1&2&3

7.数组合并

//数组.concat()
var arr = [1,2,3];
var newArr = arr.concat([4,5,6]);
console.log(arr);    //没有修改原数组
console.log(newArr); //[1,2,3,4,5,6]

8.数组的截取

//数组.slice(start,end)   
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.slice(1,3);
console.log(newArr);     //['blue','yellow']
console.log(arr);        //没有修改原数组

//数组.splice(start,count)
var arr = ['red','blue','yellow','pink','purple'];
var newArr = arr.splice(1,3);
console.log(newArr);     //['blue','yellow','pink']
console.log(arr);        //原数组修改了，截取后剩下的元素


//面试题
var arr = ["小泷",'小天',"小苍","小泽","xiaosa"];  //=> [["小泷",'小天',"小苍"],["小泽","xiaosa"]]
var newArr = []
while (true) {
    if (arr.length === 0) {
        break
    }
    newArr.push(arr.splice(0, 3))
}

console.log(newArr);

String字符串

1.根据字符找索引

//str.indexOf()  从左向右根据字符找索引，如果没有找到就返回-1
//str.lastIndexOf()  从右向左根据字符找索引，如果没有找到就返回-1

2.根据索引找字符

//str.charAt(索引)

//求字符串'abcaba'出现次数最多的字符及次数
// 'abcaba' => (a 3)
// 第一步：'abcaba' => {a:3,b:2,c:1}
// 第二步：{a:3,b:2,c:1} => a 3
var str = "abcaba"
var obj = {}
for (var i = 0; i < str.length; i++) {
    if (str.charAt(i) in obj) {
        obj[str.charAt(i)]++     //obj.a++   num++
    } else {
        obj[str.charAt(i)] = 1   //{a:1,b:1,c:1}
    }
}
// console.log(obj);
var char = null
var max = 0

for (var k in obj) {   //{a:3,b:2,c:1}
    if (obj[k] > max) {
        max = obj[k]
        char = k;
    }
}

console.log(`出现次数最多的字符是${char},次数是${max}`);

3.截取

// 字符串.substr(start,length)  
var str = "傻逼，你在哪里？"
var str1 = str.substr(0,2)
console.log(str1);  //傻子

//字符串.substring(start,end)
var str = "傻逼,你在哪里？"
var str2 = str.substring(0,3)
console.log(str2);  //傻子,

4.替换

//字符串.replace(原字符,要替换的字符)

var str = "我爱武汉傻子和傻子们";
var str1 = str.replace("傻子","小可爱")
var str2 = str.replace(/傻子/g,"小可爱")   //正则表达式可以实现全部替换
console.log(str1);   //我爱武汉小可爱和小太妹们
console.log(str2);   //我爱武汉小可爱和小可爱们

5.分割

// 字符串.split(要分割的字符)
var str = "小苍×刘虎×小泽"
var arr = str.split("×")
console.log(arr);   //["小苍", "刘虎", "小泽"]

6.大小写转换

//字符串.toUpperCase()
var str = "Hello World"
var upper = str.toUpperCase()
console.log(upper); //HELLO WORLD


//字符串.toUpperCase()
var str = "Hello World"
var lower = str.toLowerCase()
console.log(lower); //hello world

七.数据类型为什么分为值类型和引用类型

值类型：变量中存的是值本身

引用类型：变量中存的是地址

//练习
console.log(123===123) //true
console.log({}==={})   //false
console.log([]===[])   //false
console.log(function(){} ===function(){})  //false

//基本数据类型赋值操作  传的值 
//修改了其中的一个，另一个不变
var a = 100
var b = a
a=1000;
console.log(b)  // 100


//复杂数据类型赋值操作  传的地址
//修改了其中的一个，另一个也会变
var arr1 = [1,2,3]
var arr2 = arr1
arr1[1]=20;
console.log(b)  //[1,20,3]

//案例
var c;	
var changStuff = function (a,b,c){
	a = a*10;
	b.item = "changed";
	c = {item:"changed"};                     
}
var num = 10;
var obj1 = {item:"unchanged"};
var obj2 = {item:"unchanged"};

changStuff(num,obj1,obj2);
console.log(num);         //10           
console.log(obj1.item);   //changed            
console.log(obj2.item);   //unchanged      
console.log(c);           //undefined

八.预解析

预解析：代码执行分为两个步骤：预解析阶段 和 执行阶段

预解析相当于是对代码的扫描

关注两个关键词： var 与 function (这个function不是匿名函数的function，而是声明式的function)

1.var 变量名

​ 判断当前内存作用域中是否存在变量

​ a.如果不存在，在内存中开辟空间 变量名指向该空间，这个空间此时的值是undefined

​ b.如果存在，忽略，不再在内存中开辟空间了。

2.function 函数名

​ 判断当前内存作用域中是否存在函数名

​ a.如果不存在，在内存中开辟空间 函数名指向该空间，并且这个空间保存的是函数体的地址

​ b.如果存在，在内存中不开辟空间 但是这个空间也会指向函数体的地址

3.函数调用时，进入函数体内也会在函数内作用域进行预解析