JavaScript基础

day01变量,数据类型,运算

1-1JavaScript介绍

一、JavaScript书写位置

书写在在script脚本标签中,一般放在body标签后边。

二、JavaScript注释

1、单行注释。
//
快捷键Ctrl+/。
2、多行注释。
/* */
快捷键shift+Alt+A。

三、JavaScript发展历史

创建公司:网景公司 。
发明人:布兰登.艾克。
名字:由liveScript到JavaScrip。

四、Java与JavaScript的关系

Java是运行在服务器端(后端)的编程语言。
JavaScript是运行在客户端(前端)的编程语言。

五、JavaScript是什么?

JavaScript是一门编程语言,一门脚本语言,是一门解释器语言,是一门动态类型(弱化)语言,是一门基于对象的语言。
1、编程语言:指计算机能接受和处理的,具有一个语法规则的语言。
2、脚本语言:直接解释执行 缩短了编写-编译-链接-运行得过程。
3、解释型语言:解释执行不需要编译过程,直接由解释器(js引擎)解释并执行代码。
4、动态类型语言:程序运行时,待变量被赋值后,才有某种类型。
5、基于对象的语言:具有部分面向对象的特征。

六、JavaScript的组成(重点)

1、ECMAScript:定义了js的语法规范。
2、DOM:Document Object Model:文档对象模型。
3、BOM:Browser Object Model:浏览器对象。

七、JavaScript能做什么

1、网页的动画
2、网页的交互
3、uniapp
4、node.js
5、做桌面应用程序
6、游戏开发

1-2JavaScript 变量

一、什么是变量

变量是计算机内存中存储数据的标准符,根据变量名称可以获取内存中存储的数据。

二、变量名

用来获取数据,修改数据。

三、变量的声明

1、关键字var 变量名;
变量名 = 值;
2、声明后直接赋值

var foo = 'bar';

3、定义多个变量的简写

var foo = 'bar';
align = '居中';
sum = 10

4、不用var定义(不建议)

四、变量的命名规范和规则

1、规则:不能打破,不然会报错

a、变量名由字母、下划线、$,不能以数字开头。
b、不能是关键字和保留字。
c、严格区分大小写。

2、规范:能打破,打破也不会报错

a、驼峰命名法
b、见名知意

五、变量名的重复规则

后面的会覆盖前面的。

六、字面量:固定值表示法(了解)

1-3变量练习

<script>
        // 直接赋值变量
        var name = "zhangsan"
        var myName = name
        console.log(name,myName)
        // 变量值的交换
        // 方法1
        var num1 = 1
        var num2 = 2
        console.log(num1, num2)
        
        var temp = num1
        num1 = num2
        num2 = temp
        console.log(num1,num2)

        // 方法2
        var num1 = 1
        var num2 = 2
        num1 = num1 +num2
        num2 = num1 - num2
        num1 = num1 - num2
        console.log(num1, num2)
        // 获取用户输入的值
        var input = prompt()
        console.log(input)
    </script>

1-4JavaScript代码写法

一、内部写法
书写在在script脚本标签中,一般放在body标签后边。
二、外部写法(需要引入外部js文件)

<script src="./js/script.js"></script>

三、行内写法

<h1 onclick="window.alert('我要弹框啦!!');">我是标题</h1>

四、控制台书写

1-5JavaScript问题总结

1、在一对script的标签中有错误的js代码,那么该错误的代码后面的js代码不会执行
2、如果第一对的script标签中有错误,不会影响后面的script标签中的js代码执行
3、script的标签中可以写type="text/javascript"标准写法或者写language="JavaScript"都可以。但是,目前在我们的html页面中,type和language都可以省略,原因:html是遵循h5的标准。
4、有可能会出现这种情况:script标签中可能同时出现type和language的写法。
5、script标签在页面中可以出现多对。
6、script标签一般是放在body的标签的最后的,有的时候会在head标签中,目前讲课的时候都在body标签的后面(body中的最后)。
7、如果script标签是引入外部js文件的作用,那么这对标签中不要写任何的js代码,如果要写,重新写一对script标签,里面写代码。

1-6数据类型

一、数据类型(重点)

1、基本类型
a、数字类型 number
数值字面量:数值的固定值的表示法, 例如110,1024,60.5
十进制
var num = 9;//进行算数计算时,八进制和十六进制表示的数值最终都被转换成十进制数值。
十六进制
var num = 0xA;
var num = 0x1B;1*16+11=27
//数字序列范围:0~9以及A~F
八进制
var num1 = 07; // 对应十进制的7
var num2 = 011; // 对应十进制的9
var num3 = 021; // 对应十进制的17 //数字序列范围:0~7。
如果字面值中的数值超出了范围,那么前导零将被忽略,后面的数值将被当作十进制数值解析。
浮点数
var n = 5e-5; // 科学计数法 5乘以10的-5次方 。
浮点数值的最高精度是17位小数,但在进行算术计算时其精确度远远不如整数。
var result = 0.1 + 0.2; // 结果不是0.3,而是:0.30000000000000004
注意:不要判断两个浮点数是否相等
就是说由于0.1转换成二进制时是无限循环的,所以在计算机中0.1只能存储成一个近似值
最小值:Number.MIN_VALUE,这个值为: 5e-324。
最大值:Number.MAX_VALUE,这个值为: 1.7976931348623157e+308。
保留n位小数 变量.toFixed()
无穷大:Infinity
无穷小:-Infinity
数值判断
NaN:not a number (可以通过Number()方法判断)。
NaN与任何值都不相等,包括他本身
isNaN(): is not a number (如果 x 是特殊的非数字值 NaN(或者能被转换为这样的值),返回的值就是 true。如果 x 是其他值,则返回 false)。
b、字符串类型 string
1、字符串类型:用单引号或者双引号包起来的。
2、子字符串:字符串中的单个字符或者连续的字符。
3、字符串的长度:字符串中单个字符的个数。
4、空字符串、字符串的长度为0。
5、字符串的拼接:加号拼接或者反引号里面拼接

var name = 'zhy'
        var userName = "我的名字是"
        var trueName = `${userName}${name} `
        console.log(trueName)

加号左右两边有一个字符串,就是字符串的拼接,加号两边都是数字类型就是加法的运算。
6、字符串中的转义字符
一些特殊功能的字符,可以通过转义字符放入字符串中。

转义字符表示符号
\’单引号
\”双引号
\\反斜杠
\n换行符
\r回车符
\t制表符
\b退格符

7、元素名.length获取字符串长度。
c、布尔类型 boolean
真值为true,假值为false。
好多方法的返回值都是boolean类型。
好多运算结果也是boolean类型的。
内存存储boolean类型的规律,true为1,false为0。会发生隐式转换。
隐式转换:不在人工干预的情况下发生类型转换。
isNaN()
纯数字的字符串,null,true,false会在isNaN中发生隐式转换,转换为number类型
d、Object类型和空型 Null

Object类型是一个特殊的类型,通常把他称为引用类型或者复杂类型。
Object类型的使用

var person = {             

name:"zhangsan",            
age:18,            
sex:'nan'        
}        
console.log(person)        
console.log(person.name)

空型
Null存在的意义就是对 对象初始化的。
获取元素拿不到时是null。空型存储时全0存储,获取元素类型是为object。

null和undefined的关系

undefined通常只有在一个变量声明但未初始化时,它的默认值是undefined才会用到。
并且不推荐给一个变量赋值为undefined,所以很少主动使用。

null类型非常常用,当一个变量准备保存一个对象,但这个对象不确定时,我们可以先赋值为null。
e、未定义类型 undefined
变量只声明不赋值的情况下,类型是undefined。
f、唯一值 symbol(ES6学习)
2、引用类型
数组、函数、对象、set(ES6),Map(ES6)

二、typeof 判断数据类型的方法

typeof 变量/值

三、元素类型的转换

1、转换成字符串类型
方法:数字类型和boolean类型

变量/值.tostring()


var number1 = 120.23
number1 = number1.toString()
console.log(typeof number1)//string
var bool3 = true
bool3 = bool3.toString()
console.log(typeof bool3)

空型/未定义类型
string(变量或值)

var nullOne = null
console.log(typeof String(nullOne))//string
var img 
console.log(typeof String(img))//string

隐式转换
a、一个字符串与其他类型进行+操作
如果+运算符左右两边有一个是字符串,那么另一边会自动转换成字符串类型进行拼接。
b、某些函数也会将参数转为字符串类型

2、转换成boolean类型
方法Boolean()


console.log(Boolean(333))//true

什么时候转换为false
0/空字符串/NaN/false/undefined/null。
3、转换为数值类型
方法:
1、Number()
2、parseInt()遇到第一个非数值或者小数点就结束。
3、parseFloat() 遇到第一个非数值或者第二个小数点就结束。

方法字符串类型
Number()a、如果字符串中只包含数字时,将其转换为十进制数值,忽略前导0。b、如果字符串中包含有效浮点数格式,如“1.1”则将其转换为对应的浮点数,1.1转换为1,忽略前导0。c、如果十六进制格式,如“0xf”。则将其转换为相同大小的十进制数值。d、如果字符串为空或是空内容,则将其转换为0。e、如果字符中包括上述格式之外的字符,则将其转换为NaN。
parseInt()遇到第一个非数值或者小数点就结束。
parseFloat()遇到第一个非数值或者第二个小数点就结束。
方法未定义类型
Number()NaN
parseInt()NaN
parseFloat()NaN
方法空类型
Number()0
parseInt()NaN
parseFloat()NaN
方法boolean类型
Number()true:1,false:0
parseInt()NaN
parseFloat()NaN

01-07运算符

一、算数运算符
加+ 减- 乘* 除/ 取余%

二、一元运算符

前置++ ++a,a先加1再赋值给变量++a。
后置++ a++,先把a的值赋给变量a++,a再加1。
三、逻辑运算符
&& 与 两个操作数同时为true,结果为true,否则都是false。
|| 或 两个操作数有一个为true,结果为true,全为false结果为false。
! 非 取反。
四、关系运算符
大于> 小于< 大于等于>= 小于等于<= == 不等于!= 恒等于=== !==

比较两个值的大小
(1)、如果两个字都是纯数字,直接比较大小
(2)、一个数为数字,另一个是纯数字的字符串,将字符串转化为数字比较 (3)、如果两个都是纯数字的字符串。值判断第一个数字的大小 (4)、true和fale转化成1和0进行比较 (5)、规范中提到, 要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,并且规定null 和 undefined 是相等的。 (6)、NaN与任何值都不相等,包括它本身。
五、赋值运算符
= += -= *= /= %= num += 5; //相当于 num = num + 5;(6)、运算符的优先级优先级从高到底如下:括号>点运算符>一元运算符> 算数运算符 >关系运算符>逻辑运算符 >赋值运算符
注意:同级运算符先后顺序如下:

一元运算符 ++ – !
算数运算符 先* / % 后 + -
关系运算符 > >= < <= == != === !==
逻辑运算符 先&& 后||

day02流程控制

一、流程控制介绍

程序的三种基本结构
1、顺序结构:从上到下执行的代码就是顺序结构。
分支结构:根据不同的需求执行相应的代码。if…else/三目运算符/switch…case。
循环结构:重复执行的代码。while/do…while/for循环

二、分支结构

1、if语句
语法:
if (条件判断语句一){
满足条件一的执行语句
}else if(条件判断语句二){
满足条件二的执行语句
} …………
else {
以上条件都不满足的执行语句
}
案例一判断是否大于10


    var count = 9
    if (count > 10) {            
    console.log(count, '大于10')   
    } else if (count < 10) {        
    console.log(count, '小于10')    
    } else {
    console.log(count, '等于10')    
    }

案例二判断一个人的年龄是否成年

	var age = Number(prompt('请输入您的年龄'))
    if (isNaN(age) == false) {
        if (age >= 18) {
            console.log('成年人')
        } else if (age >= 0 && age < 18) {
            console.log('未成年')
        } else {
            console.log('未出生')
        }
    } else {
        alert('您输入的不是年龄')
    }

案例三求两个数的最大值

    var num1 = 99 * 483
    var num2 = 33 + 6546435
    console.log('num1=', num1)
    console.log('num2=', num2)
    if (num1 > num2) {
        console.log('num1:', num1, "最大值")
    } else if (num2 > num1) {
        console.log('num2:', num2, "最大值")
    } else {
        console.log('num2=', "num1")

    }

案例四:if案例奇偶数判断(正整数)

    var count1 = 4323
    if (count1 % 2 == 0) {
        console.log(count1, '是偶数')
    } else {
        console.log(count1, '是奇数')
    }

案例五:百分制转换成等级制

    var score = 88
    console.log(score)
    if (score < 60) {
        console.log('不及格')
    } else if (score >= 60 && score < 70) {
        console.log('合格')
    } else if (score >= 70 && score < 90) {
        console.log('良好')
    } else if (score >= 90 && score <= 100) {
        console.log('优秀')
    }

课堂练习,判断平年还是闰年

    var year = 54324
    if (year % 4 == 0 && year % 100 != 0) {
        console.log(year, '是普通闰年')
    } else if (year % 400 == 0) {
        console.log(year, '是世纪闰年')
    } else {
        a
        console.log(year, '是平年')
    }
    //if类型返回的永远是布尔类型
    if (31) {
        console.log('能返回')
    }
    if ('') {
        console.log('有没有')
    }

2、三目运算符
语法:
表达式1 ? 表达式2 : 表达式3
是对if……else语句的一种简化写法
案例,判断是数值还是非数值

    var count = 'djald'
    isNaN(count) == true ? console.log('非数值') : console.log('数值')

3、switch…case 语句
语法
switch(判断的变量){
case 变量可能的值:
执行语句
break
case 变量可能的值:
执行语句
break
……
default:
执行语句
break
}

案例判断今天星期几

    var day = Number(prompt('请输入数字'))
    switch(day){
        case 1:
        console.log('星期一')
        break
        case 2:
        console.log('星期二')
        break
        case 3:
        console.log('星期三')
        break
        case 4:
        console.log('星期四')
        break
        case 5:
        console.log('星期五')
        break
        case 6:
        console.log('星期六')
        break
        case 7:
        console.log('星期日')
        break   
        default:day
        console.log('重新输入')
        break
    }

if语句和switch语句的区别
1、能用switch实现的一定能用if实现,反正能用if实现的不一定能用switch实现。
2、if的返回值是布尔类型,switch…case后跟的值可以是任何类型。

二、循环结构

1、while
语法:
while(循环判断语句){
循环体
自增自减语句
}
// while案例打印100以内 7的倍数

    var i = 100
    while (i >= 0) {
        if (i % 7 == 0) {
            console.log(i)
        }
        i--
    }

// 演示示例:while案例打印100以内所有偶数 奇数 偶数和 奇数和

    var n = 100
    var sumO = 0//偶数和
    var sumJ = 0//奇数和
    while (n >= 0) {
        if (n % 2 == 0) {
            sumO += n
        } else {
            sumJ += n
        }
        n--
    }
    console.log('偶数和是' + sumO)
    console.log('奇数和是' + sumJ)

2、do…while语句
语法
do{
循环体
自增自减语句
}while(循环判断条件)
}
do……while案例打印100以内 7的倍数

  var n = 100
    do {
        if (n % 7 == 0) {
            console.log(n)
        }
        n--
    } while (n >= 0)
// do...while案例打印100的约数

    var count = 1
    do {
        if (100 % count == 0) {
            console.log(count)
        }
        count++
    } while (count <= 100)

3、for语句

语法
for (初始表达式; 判断表达式; 自增或者自减表达式) {
循环体
}
document.write():将内容渲染在浏览器文档中,能识别标签。
案例

1、求1-100之间的和
    var sum = 0
    for (var n = 1; n <= 100; n++) {
        sum += n
    }
    console.log(sum)
2、100的约数(因数)
    for (var i = 0; i <= 100; i++) {
        if (100 % i == 0) {
            console.log(i)
        }
    }

3、for循环多个变量的判断原理:总是以最后一个判断表达式为准(考试要考的)

    for (var x = 0, y = 0; x < 6, y < 10; x++, y++) {
        // console.log('x:' + x)
        console.log('y:' + y)
    }
 4、嵌套循环实现正方形
    for (var z = 0; z <= 5; z++) {
        for (var j = 0; j <= 11; j++) {
            document.write('♣')
        }
        document.write('<br>')
    }

5、嵌套循环实现三角形

    for (var height = 0; height <= 4; height++) {
        for (var width = 0; width <= height; width++) {
            document.write('♣')
        }
        document.write('<br>')
    }

4、continue和break的区别
break:立即跳出整个循环,即循环结束,开始执行循环后面的内容。
continue:立即跳出当前循环,继续下一次循环。

day03数组与函数

数组

一、为什么要学习数组
存储多个变量时为了节省内存空间。
二、数组的概念
将多个元素按一定顺序排列到一个集合中,那么这个集合我们称之为数组。
关键字:
元素:数组中单个值或者变量。
顺序:数组是有序的。
集合:数组看成集合。
三、创建数组的方式
1、字面量创建
2、构造函数创建(后天讲)
四、数组的特点
1、数组中的元素是任意类型,也可以是表达式。
2、数组是引用类型。
五、数组的长度
数组中元素的个数 .length 一般只获取不设置。
六、空数组:数组的长度为0。
七、获取数组中的元素 数组名[索引值]
1、索引:每个元素都有对应的标识符,从0开始依次累加1,(下标)
2、数组的第一个元素arr[0],数组的最后一个元素arr[arr.length-1]
八、数组元素的添加与删除
栈操作:永远是在栈顶(表尾)进行操作 先进后出
九、遍历数组:将数组中的元素都访问一遍
案例练习
一、求一数组数中的所有元素(number)的和以及平均值

    var arrNum = [23, 34, 54, 67, 78, 89],
        sum = 0
    for (var i = 0; i < arrNum.length; i++) {
        sum += arrNum[i]
    }
    console.log(`数组中的和是${sum},平均值是${sum / arrNum.length}`)
 二、求一数组中的元素(number)的最大值和最小值,以及所在位置
    var arrMax = arrNum[0],
        indexMax = null,
        arrMin = arrNum[0],
        indexMin = null
    for (i = 0; i < arrNum.length; i++) {
        if (arrNum[i] > arrMax) {
            arrMax = arrNum[i]
            indexMax = i
        }
        if (arrNum[i] < arrMax) {
            arrMin = arrNum[i]
            indexMin = i
        }
    }
    console.log(`数组最大值是${arrMax}是数组的第${indexMax + 1}个,数组最小值是${arrMin}是数组的第${indexMin + 1}个`)
 三、将字符串数组用|或其他符号分割,返回一个字符串
    var str = ''
    var arrStr = ['我', '们', '是', '好', '孩', '子']
    for (var i = 0; i < arrStr.length; i++) {
        if (i == arrStr.length - 1) {
            str += arrStr[i]
        } else {
            str += arrStr[i] + '|'
        }
    }
    console.log(str)
// 四、要求将数组中的第一个元素去掉,剩下的元素存入一个新的数组,生成的新数组
    var arrNew = []
    for (var i = 1; i < arrStr.length; i++) {
        if (i == 0) {
            continue
        }
        arrNew.push(arrStr[i])
    }
    console.log(arrNew)
// 五、翻转数组
    var arrNew_1 = []
    for (var i = arrStr.length - 1; i >= 0;i--){
        arrNew_1.push(arrStr[i])
    }
    console.log(arrNew_1)
    

函数

一、为什么使用函数?
在多个地方使用相同代码出现了代码的冗余
二、函数的概念:
把具有特定功能的代码封装在一起,形成一个独立实体,就是函数
三、定义函数的方式:
1、函数的声明 function 函数名(){函数体}
2、函数的表达式 var 函数名 = function(){函数体}
3、构造函数(今天暂不讲)
四、函数命名规范规则===变量命名规范规则
五、函数的调用:函数名()
六、函数的参数:链接函数内部与外部之间的桥梁
形式参数:形参,函数定义中小括号中的变量
实际参数:实参,函数调用时小括号中的变量或者值
实参比形参个数多,按照顺序一一对应,没有对应的形参为undefined
案例
//1、 圆的面积

    function area(r) {
        console.log((Math.PI * r * r).toFixed(2))
    }
    area(10)
// 2、求2个数中的最大值
    function maxNum(x, y) {
        if (x > y) {
            console.log(`x:${x}是最大值`)
        } else if (x < y) {
            console.log(`y:${y}是最大值`)
        } else {
            console.log('x与y相等')
        }
    }
    maxNum(23, 56)
// 3、判断一个数是否是素数
    var prime_Number = function (n) {
        var flag = true
        for (var i = 2; i < n; i++) {
            flag = true
            if (n % i == 0) {
                flag = false
                break
            } else {
                flag = true
            }
        }
        if (flag == true) {
            console.log(n + '是质数')
        } else {
            console.log(n + '是合数')
        }
    }
    for (var x = 2; x <= 50; x++) {
        prime_Number(x)
    }

函数返回值

一、函数的返回值:函数调用的结果就是函数的返回值(重点重点重点)
二、函数返回值的特点:
1、如果函数没有显示的使用 return语句 ,那么函数有默认的返回值:undefined
2、如果函数使用 return语句,那么跟在return后面的值,就成了函数的返回值
3、如果函数使用 return语句,但是return后面没有任何值,那么函数的返回值也是:undefined
4、函数使用return语句后,这个函数会在执行完 return 语句之后停止并立即退出,也就是说return后面的所有其他代码都不会再执行。
推荐的做法是要么让函数始终都返回一个值,要么永远都不要返回值。
案例
求阶乘

    function factorial(n) {
        if (n == 0 || n == 1) {
            return 1
        } else {
            var fact = 1
            for (var i = 1; i <= n; i++) {
                fact *= i
            }
            return fact
        }
    }
    function jiecheng(n) {
        var sum1 = 0;
        for (var i = 1; i <= n; i++) {
            var sum2 = 1;
            for (var j = 1; j <= i; j++) {
                sum2 = sum2 * j;
            }
            sum1 = sum1 + sum2;
        }
        return sum1;
    }
    var result = jiecheng(3)
    console.log(result)

函数进阶

一、如果两个函数都是函数的声明,且函数名相同,那么后边的函数会覆盖前边的。
二、如果两个函数都是函数表达式,且函数名相同,函数的调用会调用最近的且上边的那一个。
三、如果函数表达式与函数声明名字相同,函数表达式覆盖函数声明。
四、匿名函数 自调用 作用:当做回调函数,(将函数当做参数传递)。

    console.log(funct_1());
    (function () {
        console.log('我是匿名函数')
    })();

五、函数的内置对象:任何一个函数都有内置对象arguments。
作用:获取函数中的实参。

    function fn4(x, y, z) {
        console.log(arguments)
        console.log(arguments.length)//实参的个数为2
        console.log(arguments.callee.length)//形参的个数3
        return arguments[0] + arguments[1]

    }
    console.log(fn4(10, 30))

六、函数作为参数传入。

    function fuC(x){
        x()
    }
    fuC(
        function(){
            console.log('我是函数也是参数')
        }
    )

七、函数作为返回值返回。

    function fnB(x){
        return x
    }
    var result = fnB(
        function(){
            console.log('我是返回值也是函数')
        }
    )
    console.log(result)
    result()

八、函数是引用类型

day04预解析 对象 错误

1、进程:是cpu资源分配的最小单位(是能够拥有资源和独立运行的最小单位)。
2、线程:是cpu调度的最小单位。(线程是建立在进程基础上的一次程序)
3、线程的分类:单线程,多线程。
4、JavaScript是单线程的。
5、如果没有遇到条件语句或循环语句,程序按照顺序从上往下执行。
同步:同步任务是指在主线程上排队执行的任务,只有前一个任务执行完毕才能继续执行下一个任务。是依次执行。
异步任务:是指不进入主线程,而进入任务队列的任务,只有任务队列通知主线程,某个异步任务才可以执行 可以跳过中间任务执行后面的任务
异步操作:
1、定时器函数
2、事件函数
3、网络请求 Ajax/axios/wx.request
4、generator 函数
5、promise 对象
6、await/async
定时器函数
setTimeout(回调函数,时间间隔)隔一段时间后去执行回调函数中的内容。此函数的返回值就是定时器的名称。
clearTimeout(定时器名称)清除定时器
setInterval(回调函数,时间间隔)每个一段时间就会执行回调函数中的内容,一直执行。
clearInterval(定时器名称) 清除setInterval

预解析

什么是预解析?
JavaScript引擎在对JavaScript代码进行解析执行之前,会将以关键字var 和function开头的语句块,进行提前处理。
预解析的情况
1、函数的提升

/*     function fn1() {
            console.log('函数声明')
        }
 */
    fn1()
    function fn1(){
        console.log('函数声明')
    }

2、变量的提升,只是声明的提升,没有赋值的提升。

 //var num
    console.log(num)//unDenfined
    var num =1

3、函数声明的函数名与变量名相同时,函数声明提升,变量不提升。

console.log(fn2)//打印函数
    function fn2(){
        console.log('函数fn2')
    }
    var fn2 = '变量2'

正常情况下,函数声明的函数与变量名相同时,变量覆盖函数。
4、函数表达式不能提升。

fn3()//报错fn3 is not a function
    var fn3 =function(){
        console.log('函数表达式')
    }

5、提升不会超出作用域范围。

function count() {
      console.log(str)
      var str = 'web'
    }
    count()//undefined
    console.log(str)//报错

预解析案例
案例一

  function test(a, b) {
        //var a
        console.log(a)//1
        var a = 3
        // function b() { }
        console.log(b)//函数b
        var b = 2
        function b() { }
        console.log(b)//2
    }
    test(1)

案例二

   function test_1() {
        // function a() { }
        console.log(a)//函数a
        // var b
        console.log(b)//undefined
        var b = 234
        console.log(b)//234
        a = 123
        // var a 
        console.log(a)//函数a错  123
        function a(){}
        var a 
        b = 234
        var b = function(){}
        console.log(a)//123
        console.log(b)//234错  函数b
    }
    test_1()

对象

一、世间万物皆为对象
js中的对象
二、js中的对象
1、将现实实物抽象。
2、对象是无序属性的集合。(属性名不重复)
对象的方法也是对象的一种属性,只不过属性值为函数类型。
三、获取对象中的属性,和调用对象中的方法
三、创建对象的方式
1、字面量字面量创建对象

var car = {
        price: 1000000,
        color: 'black',
        name: 'lanbojine',
        id: '冀A88888',
        x: true,
        y: null,
        run: function () {
            console.log(this.name + "会行驶")
        },
        stop: function () {
            console.log('会驻车')
        }
    }
    console.log(car)
    console.log(typeof car)
    console.log(car.price)

2、new Object

 var person = new Object()
    person.name = 'zhangsan'
    person.age = 32
    person.sex = true
    person.eat = function () {
        console.log('喜欢运动')
    }
    console.log(person)
    console.log(typeof person)
    console.log(person.age)
    person.eat()

3、工厂模式

 var creatPerson = function (uName, uAge, uSex, uEat) {

        var person = new Object()
        person.name = uName
        person.age = uAge
        person.sex = uSex
        person.eat = uEat
        return person
    }
    var person1 = creatPerson('张三', 23, 'true', function () {
        console.log('喜欢学习')
    })
    console.log(person1)
    console.log(person1.name)
    person1.eat()
    var p2 = creatPerson('李四', 21, '女', function () {
        console.log('喜欢吃面条')
    })
    console.log(p2)

4、构造函数
注意事项
a、是个函数
b、模板
c、首字母要大写

 function Person(pName, pAge, pSex, pInterest) {
        this.name = pName
        this.age = pAge
        this.sex = pSex
        this.interest = pInterest
    }
    var worker = new Person('码农', 30, '男', function () {
        console.log('喜欢睡觉!')
    })
    console.log(worker)
    console.log(worker.name)
    worker.interest()
    

构造函数中new,this关键字的作用
new
1、创建一个新对象
2、将构造函数中的this指向实例化对象
this
1、在构造函数函数中被实例化对象所调用的函数中this指向实例化对象。
2、在对象方法中this指向当前对象
3、在普通函数中this指向window
对象的遍历
x是指对象中的方法名和属性名

for(x in worker){
        console.log(x)
        console.log(worker[x])

在对象循环遍历中,获取对象的属性值和方法用
对象[x]

day05常用内置对象

学习对象学习对象的属性和方法。
js中的对象包括:自定义对象(person/car),DOM(div/p),BOM(window/console),内置对象。

一、数学对象 Math

1、圆周率 Math.PI

console.log(Number(Math.PI.toFixed(2)))

2、随机数

console.log(Math.random())

3、向下取整

console.log(Math.floor(2.2342))//2

4、向上取整

console.log(Math.ceil(3.66))//4

5、取整且四舍五入

console.log(Math.round(4.77))//5

6、绝对值

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

7、获取最大值和最小值

console.log(Math.max(12,32,343,1,2,3,4))//343
console.log(Math.min(43,54,6523,54,54565,76))//43

8、正弦和余弦

console.log(Math.sin(Math.PI/6))//0.49999999999999994
console.log(Math.cos(Math.PI/3))//0.5000000000000001

9、平方根

console.log(Math.sqrt(25))//5

10、指数幂

console.log(Math.pow(4,2))//16

二、日期对象

通过构造函数 Data()创建
var date = new Date()
1、获取19701月1日至今的毫秒数

console.log(date.getTime())
console.log(date.valueOf())

2、获取今年年份

 console.log(date.getFullYear())

3、获取本月月份 取值0-11

console.log(date.getMonth() + 1)

4、获取今天是几号

console.log(date.getDate())

5、获取今天是星期几

console.log(date.getDay())

6、获取现在是几小时

console.log(date.getHours())

7、获取现在是几分钟

console.log(date.getMinutes())

8、获取现在时几秒秒

 console.log(date.getSeconds())

案例:日期的格式化

function showTime(date_1) {
        var year = farmatTime(date_1.getFullYear())
        var month = farmatTime(date_1 .getMonth()+1)
        var day = farmatTime(date_1.getDate())
        var hour = farmatTime(date_1.getHours())
        var minute = farmatTime(date_1.getMinutes())
        var second = farmatTime(date_1.getSeconds())
        var str = ''
        str = `${year}-${month}-${day}
        &nbsp;&nbsp;&nbsp;&nbsp;
        ${hour}:${minute}:${second}`
        document.write(str)
    }
    showTime(new Date())
    //补0函数
    function farmatTime (time) {
        time = time >= 10 ? time : '0' + time
        return time
    }

三、数组对象

一、构造函数创建数组

 var arr = new Array('张三', 10, true)
    console.log(arr)
    console.log(typeof arr) //object

二、判断数组的方式: 返回值是布尔类型,true为数组false为非数组
1、变量/值 instanceof Array
2、Array.isArray()

var obj = {},
      num = 10,
      str = '',
      bool = false,
      fn1 = function () {}
    console.log(arr instanceof Array) //true
    console.log(obj instanceof Array) //false
    console.log(num instanceof Array) //false
    console.log(str instanceof Array) //false
    console.log(bool instanceof Array) //false
    console.log(fn1 instanceof Array) //false
    console.log('\n')
    console.log(Array.isArray(arr))//true
    console.log(
      Array.isArray(arr),//true
      Array.isArray(obj),//fslse
      Array.isArray(num),//faslse
      Array.isArray(str)//false
    )

三、队列操作:总是在表头(队头)进行操作 先进先出
unshift():添加元素 插队
shift():删除元素 出队

    arr.shift()
    console.log(arr)//[10, true]
    arr.shift()
    console.log(arr)//[true]
    arr.unshift('李四')
    arr.unshift('王五')
    console.log(arr)// ['王五', '李四', true]

四、concat():如果参数是数组,就是连接两个数组。如果参数是非数组,就是给数组的末尾添加元素,都是返回一个新数组,不会改变原数组

var arr_1 = arr.concat('喜洋洋') //push
    console.log(arr_1)//['王五', '李四', true, '喜洋洋']
    var new1 = arr.concat(['a', 'b', 'c'])
    console.log(new1)//['王五', '李四', true, 'a', 'b', 'c']
    console.log(arr)//['王五', '李四', true]

五、截取数组中的元素
1、slice(start,end):start和end都是数组的索引,从start开始截取到end结束,包括start不包括end,返回一个新数组,不会改变原数组
如果参数只有start,那就是从start开始截取到结束
2、splice(start,length):start是索引length是个数,从start开始截取length个元素,返回一个新数组,会改变原数组
如果参数只有start,那就是从start开始截取到结束
如果有第三个参数,原数组截取出来的部分截取成该参数

var arrNum = new Array(10, 20, 30, 40, 50, 60, 70, 80, 90)
    var arrNew_1 = arrNum.slice(2, 5)
    console.log(arrNew_1) // [30, 40, 50]不会取到索引值为5的值
    console.log(arrNum)//[10, 20, 30, 40, 50, 60, 70, 80, 90]
    var arrNum_2 = arrNum.slice(4)
    console.log(arrNum_2)//[50, 60, 70, 80, 90]
    //
    var new_1 = arrNum.splice(2, 3, '哈哈')
    console.log(new_1)
    console.log(arrNum) //
    var new_2 = arrNum.splice(2)
    console.log(new_2) //[60, 70, 80, 90]

六、位置方法
indexOf() 获取到数组的索引,如果有重复的元素则获取第一个,如果有该元素返回元素的索引,没有返回-1
lastIndexOf()获取到数组的索引,如果有重复的元素则获取最后一个,如果有该元素返回元素的索引,没有返回-1

    var arrNum = new Array(10, 20, 30, 70, 20, 60, 70, 80, 90)
    console.log(arrNum.indexOf(30))
    console.log(arrNum.indexOf(20))
    console.log(arrNum.indexOf(100)) //-1
    console.log(arrNum.lastIndexOf(70)) //6
    console.log(arrNum.lastIndexOf(100)) //-1

七、迭代方法:遍历数组,参数是回调函数,回调函数中的第一个参数是元素value,第二个参数索引index
forEach():遍历数组
some():返回值是布尔类型,如果有一个满足条件就返回true
every():返回值是布尔类型,如果都满足条件就返回true
map():返回值是数组,一般用于数学计算
filter():返回值是数组,用于过滤数组

arrNum.forEach(function (value, index) {
      console.log(index + 1 + '===>' + value)
    })
    var flag1 = arrNum.some(function (value, index) {
      return value > 50
    })
    console.log(flag1) //true 
    var flag2 = arrNum.every(function (value, index) {
      return value > 50
    })
    console.log(flag2) // false
    var arr1 = arrNum.map(function (value, index) {
      return value + 1
    })
    console.log(arr1)//[11, 21, 31, 71, 21, 61, 71, 81, 91]
    var arr2 = arrNum.filter(function (value, index) {
      return value > 50
    })
    console.log(arr2)//[70, 60, 70, 80, 90]

四、字符串对象

一、构造函数创建字符串

 var str = new String('abc')
    // var str = 'abc'
    console.log(str)
    console.log(typeof str) //object
    console.log(str.length)//3
    str += 'def'
    console.log(str)//abcdef

二、charAt(索引) //获取指定位置处字符

 console.log(str[1])//b
    console.log(str.charAt(2))//c

三、concat() //字符串的拼接

 var strNew1 = str.concat(str)
    console.log(strNew1)//abcdefabcdef

四、截取字符串
substring(start,end) //从start位置开始,截取到end位置,end取不到,如果只有一个参数,从该参数开始到结束
substr(start,length) //从start位置开始,截取length个字符,如果只有一个参数,从该参数开始到结束
两个方法都不会改变原来的字符串

 var strNew2 = str.substring(0,3)
    console.log(strNew2)//abc
    var strNew3 = str.substring(3)
    console.log(strNew3)//def
    console.log(str)
var strNew4 = str.substr(2,3)
    console.log(strNew4)//cde
    var strNew5 = str.substr(2)
    console.log(strNew5)//cdef

五、位置方法
indexOf() //返回指定内容在原字符串中的位置,如果没有,返回-1;(从前往后,检索到第一个就结束)
lastIndexOf() //返回指定内容在原字符串中的位置,如果没有,返回-1;(从后往前,检索到第一个就结束)

//indexOf()
    console.log(str.indexOf('a'))//有返回字符位置
    console.log(str.indexOf('2'))//没有返回-1
    //lastIndexOf
    console.log(str.lastIndexOf('d'))//3
    console.log(str.lastIndexOf(2))//-1

六、trim() //只能去除字符串前后的空白

    //trim()
    var strEmpty = new String('   123123   ')
    console.log(strEmpty.length)//12
    console.log(strEmpty.trim())//123123
    console.log(strEmpty.trim().length)//6

七、 search()//方法用于检索字符串中指定的子字符串,返回子字符串的起始位置

    //search()
    console.log(strEmpty.search('23'))

八、replace(old,new) //替换字符串替换字符串 new替换old,返回新字符串

//replace
    var n1 = strEmpty.replace('2','5')
    console.log(n1)//   153123 

九、split() //分割字符串 返回的是一个数组。。数组的元素就是以参数的分割的
字符串转数组

    var arr = n1.split()
    console.log(arr)//['   153123   ']
    var arr = n1.split('3')
    console.log(arr)// ['   15', '12', '   ']
  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值