JavaScript基础（三）

流程控制

while循环语法

while(条件){

​ 循环体

}

dowhile语法

do{

​ 循环体

}while（条件）

while do while 的区别

while:先判断条件是否成立，然后执行循环体

do while ：新执行一次循环体，在判断条件

如果初始条件不成立，do while 会执行一次循环体

for 和while 和do while的区别

知道循环的次数，优先考虑for循环，如果知道的是循环的条件用while或者do while

循环里的跳转语句

​ break：跳出当前所在的 整个循环

​ continue：跳出当前循环，如果条件满足，继续执行下一次循环。

数组

用来存储一系列相同或相关的容器

定义数组

• var arr=[ ]

  初始化数组元素

数据类型（object）

初始化数组元素

声明的同时进行赋值

var arr=[ 1,2,3,4,5,6]

声明之后进行赋值、

var arr=[]

arr[0]=1,arr[1]=2

访问数组元素

通过下标的方式进行访问

var arr=[1,2,3,4,5,6]

arr[0],arr[1]

下标

下标从0开始

下标范围：0-length-1

允许 越界访问，不会报错，没有赋值，默认undefined

注意

数组长度是可变的

数组可以存储任意的数据类型

数组元素的默认值是undefined

属性/方法

属性：属性值是一个初始数据类型

方法：属性值是函数

数组去空：数组非空元素放到另一个数组

如何能够快速的实现任意行，任意列的表格？

**函数（function）

实现某一个特定功能的代码片段，重复调用。

优点：代码的逻辑结构清晰

​ 方便维护

定义一个函数

基本语法：

function functionName([形参1]，[形参2]……){
​ //函数体

​ [turn] 返回值，

​ []:可有可无

自变量/字面量

​ var variable=function([形参1]，[形参2]……){

​ //函数体

​ []return] 返回值，}

对象的方式

调用一个函数

函数名+（）functionName();

变量名+（）variable();

注意

alert(tan) 变量值 tan()调用函数

自变量方式声明的函数存在覆盖，先声明，后调用

基本语法声明的函数，在声明前后都可调用，也存在覆盖

+++基本语法和自变量声明同一个函数，赋值之前进行调用基本语法声明的函数

​ 赋值之后调用自变量声明函数

函数的参数

参数能够动态的改变函数体内部的变量，函数更加灵活，更加强大

形参

函数定义时候，（）里写的变量，接收实参

实参

函数调用时，（）里的值，用来给形参传递值

参数可以是任意的数据类型*

参数的个数

​ 个数相同，从前往后，一一对应

​ 实参少于形参，多余的形参默认undefined

​ 实参多于形参，多余的实参，用argument对象接收

argument对象

​ argument：用来接收参数的详细信息，

​ 在函数内部js自动创建的一个对象，只能在函数内部调用

​

​ 函数内部的对象，每个函数里都有，

参数默认值（有些参数，可传可不传）

​ 1 分支结构 if else

​ 2 三元表达式

​ 3 逻辑运算符 ||

​ 4 给一个默认值：function functionName（variable=值）{ } 【es6】

注意

​ 形参不要有重复的（重名的）

​ 一般情况，带有默认值的参数写到最后

​ undefined会触发默认参数

rest参数

​ 剩余的参数，当做形参写在函数里面。写在最后面

​ 直接用，就是一个数组

return（返回值）

​ 给函数一个返回值，将函数内部的一个数据返回到函数调用的地方，在函数外部使用函数内部的数据，

​ 如果函数没有返回值，默认是undefined

​ return只能返回一个值，值可以是任意的数据类型

​ return会终止函数的执行，return后面的不执行，

08-02变量的作用域

​ 变量或者函数起作用的范围。

作用域的分类（通过函数划分）

全局作用域

​ 全局变量：任意的地方都能访问到的变量

​ 声明方式：声明在函数最外边的变量

​ 不加关键字var 声明的变量

局部作用域

​ 局部变量：只能在函数内部访问的变量

​ 声明方式：通过var关键字修饰声明在函数内部的变量

​ 形参也是局部变量

        局部变量优势：函数运行结束，局部变量可以节省内存

函数也是有作用域的

局部作用域

​

环境

​ 宿主环境

​ 浏览器运行的环境

​ 执行环境

​ 决定函数，变量的作用域

​ 变量的作用域是在声明时候决定的，

解析过程

​ 从上往下，按照script标签对依次进行解析

​ 到script标签对里解析关键字，将 var function等放进内存

*调函数（四则运算）

​ 将一个函数作为一个参数进行传递，在另一个函数里面进行调用这个参数，就相当于调用外部的函数，将该函数称为回调函数。

递归（不是循环）（深拷贝/浅拷贝）

​ 函数直接或间接调用自己本身

​ 递归函数必须有一个出口

深拷贝

拷贝的是值

浅拷贝

拷贝的是地址

闭包

箭头函数

var b=num =>num

alert（b（1））

等价于

var b=function（num）{

return num

}

alert（b（1））

08-03变量的声明方式（let）

let

块级作用域

​ 1 let只能在大括号里用

​ 2 let声明变量后，不存在变量的提升（声明之前不可调用）

​ 3 暂时性的死区(TDZ)/隐式暂时性死区

4 同一个作用域里，不允许重复声明变量

/ 5 参数不允许用let再声明

​ 6 块级作用域允许嵌套块级作用域

​ 7 全局作用域对var let 都是有效的

const(常量的声明)（默认大写，声明在最前面）

​ 声明后不可修改

​ 声明赋值必须同时进行，先声明后赋值会报错

​ 必须先声明后调用

​ 识别块级作用局，局部作用域

​ 区分大小写

内置顶层函数

数据类型转换（强制数据类型转换）

​ escape（编码）unescape（解码）： 将汉字转换成数字字母特殊字符相结合的

​ Number（）： 0打头表示8进制

​ 布尔值转换成0/1，null转换成0，undefined转换成NaN

​ 字符串里面不识别进制，会删去无用的0

​ 只有数字型字符串，能转换成数字，

​ String（）：. 任意数据类型都能转换成字符串数据类型

​ Boolean： 0 ‘’ false undefined null NaN 转换成false，其余全true

​ isNaN:(能否转换成数字) true/false

​ parseInt(将字符串转换成数字) 不识别小数点，不识别进制，会删掉无意义的东西

​ 允许有字符，从开头开始，一直找到第一个非字符结束

​ 以数字 空格 + -开头的字符串才能转换，会忽略掉空格，

​ NaN

​ parseFloat（转换成浮点数） 识别小数点，只识别第一个小数点，规则和parseInt相同

数据的隐式类型转换

​ 四则运算时会默认调用Number（）

​ if while

​ 三元表达式中也存在隐式数据类型转换

对象

类：对象的抽象

对象：一系列属性和方法的无序集合

创建一个对象

​ 1 json（js原生，天然就支持的）：let obj={ }

​ 2 构造函数的方式：function phone（）{ }

​ let apple=new phone（）

​ 3 let a=new object

​ 4 class Person{

​ }

​ let zhangsan=new Person

​ alert（typeof zhangsan）

声明同时进行添加属性和方法

let zhangsan={

​ ‘heught’:180,

​ ‘age’:20

​ //方法

​ ’eat‘：function（）{

​ alert（’eat‘）

​ }

}

​ 定义属性

​ 属性名：属性值，‘height’：20，

​ 属性名：属性值

​ 访问属性

​ 对象.属性名 zhangsan.height

​ 对象[‘height’] zhangsan[‘height’]

​ 访问方法

​ alert（zhangsan.eat()）

声明之后添加属性和方法

​ zhangsan.xueli=’本科‘

​ alert（xueli）

​ zhangsan.study=function（）{

​ alert（’学习‘）

}

alert（study）

构造函数方式

function Phone（）{

}

let apple=new Phone（）；

apple.brand=‘iPhone’

apple.size=’5.5’

apple.color=’red’

//方法

apple.call=function（）{

​ alert（‘call’）

}

​ alert(apple.size)//alert(apple[‘color’])

apple.call（）

属性和方法在构造函数内部

this.谁来调用构造函数，就指向谁，

class

class Person{

​ constructor(){

​ //属性

​ this.name=‘zhangsan’

​ this.age=20;

​ this.sex=”nan”;

​ }

​ //方法

​ eat(){

​ alert(‘eat’)

​ }

​ play(){

​ alert(‘play’)

}

}

let zhangsan= new Person()

alert(zhangsan.name)

/数字只能用方括号访问/

08-04对象（复合数据类型）

console.dir（）输出对象的详细属性

当访问的对象没有该属性，不会报错，显示undefined；

​ 没有方法，会报错

加括号，表示调用方法，不加括号，表示调用属性

对象遍历

​ 使用for in i代表字符串，所以用[ ]访问i的值

​ for（let i in zhangsan）{

​ console.log（zhangsan[i]）

​ }

​ 删除对象的某一个属性或某一个方法：delete 对象.属性/方法

​ 删除一个对象：对象名=null

比较

​ 复合数据类型中，数组，对象，函数比的是地址而不是值

判断一个对象是否从某个函数中实例出来的/是否属于某一个类

​ 1 对象 instanceof 函数名

​ eg：zhangsan instanceof person

​ 2 弹出构造函数（每个对象都对应有一个constructor）

​ eg：alert（zhangsan.constructor == person）

判断是不是一个数组（instanceof / constructor）

​ let arr=new Array（）

​ alert（arr instanceof Array）

​ arr.constructor ===Array

原型对象（prototype）

属性和方法可以定义在构造函数里面，也可以定义在构造函数的原型对象（prototype）上面

原型对象上的属性或方法的地址一样

prototype存在代码段里，

​ 类名.prototype={ }

作用

​ 1 用来进行继承，不同对象拥有相同的属性/方法地址

​ 2 可以节省一些空间，习惯把属性写在构造函数中，方法写在原型对象（prototype）上

对象的两个属性

​ 每个对象都有constructor，通过constructor指向构造函数

​ 每个对象上面都有_ _ proto _ _，指向构造函数的原型对象

继承：如果自己构造函数上的，其次原型对象，最后继承父元素的方法属性

_ proto _ 每个对象都有的属性，指向对象的原型对象

prototype：函数才有的属性，指向当前函数 作为构造函数构造出来的的对象的原型对象

08-07

function Student(){
this.name=’aaaa’,
this.sex=’nv’
}
Student.prototype={
study:function(){
alert(‘study’)
},
tall:190
}

    function Person(){
        this.name='zhangsan'
        this.age=20
        this.sex='nan'
        this.say=function(){
            alert(1)
        }   
    }

    Person.prototype={
        say:function(){
            alert(1)
        },
        tall:180
    }
    Person.Hello="hello wlord"               //添加给Person而不是zhangsan，zhangsan不会有hello属性
    Person.prototype = new Student()        //继承Student方法和属性
    let zhangsan= new Person()
    let lisi= new Person()

类如何实现继承

class Person{
class Person{
constructor(){
this.name=’zhangsan’;
this.sex=’nv’
}
}
class Student extends Person{
constructor(){
super(); //将Person中的this实例化出来
// this.age=20;
this.sex=’nan’;
}
}
let zhangsan=new Student();
console.log(zhangsan.name)

js中的内置对象

对象的分类

内置对象

​ Global（理论上的全局对象）

​ Object（顶层对象）

​ Number

​ String

​ Boolean

​ Array

​ Date

​ RegExp（正则）

​ Math

​ Object

宿主对象

​ BOM

​ DOM

Math

本身就是一个对象，不需要new实例化

math中常用方法
console.log(Math.abs(-1)) //绝对值
console.log(Math.round(5.8)) //四舍五入
console.log(Math.floor(5.11)) //向下取整
console.log(Math.ceil(5.11)) //向上取整
console.log(Math.max(1,2,3,4,5,6,7)) //最大值
console.log(Math.min(1,2,3,4,5,6,7)) //最大值
console.log(Math.pow(x,y)) //x的y次幂
console.log(Math.sqrt(9)) //开根号，平方根
console.log(Math.random()) //随机数

let a = [1,3,5,7]
console.log(Math.max(..a))        //相当于把数组a拆开,求最大值（ES6中的扩展运算符）

​ 随机数

//随机数      random（范围0-1，不包括01）
for(let i=0;i<10;i++){
    console.log(Math.random()*10)    // *10表示求0-10之间的随机数
}
//-10-10的随机数，
for(let j=0;j<10;j++){
    console.log(Math.random()*20-10)
}

String

查看对象的属性和方法

​ console.dir()

​ str._proto _

属性：

​ 字符串的length属性是不可写的,不可修改，

console.log(str.constructor)   //构造函数
console.log(str.length)//(只读)字符串的长度，不区分中英文，识别空格（一空格代表一个属性）

方法

​ 查找

str.charAt(1)           //获取特定位置的字符，只能是正数   
str.charCodeAt(n)       //返回指定位置的字符的unicode编码
String.fromCharCode(n)       //返回指定位置的unicode编码对应的字符

​ 位置

str.indexOf('ab' )     //用来返回某字串在另一个字符串中首次出现的位置，找不到返回-1
str.lastIndexOf('ab' ) //用来返回某字串在另一个字符串中最后一次出现的位置，找不到返回-1

存在，返回下标，不存在返回-1

​ 查找

​ str.match(‘ab’)//判断是否包含某元素包含匹配到的元素，位置，返回数组，如果匹配不到，返回null

​ 包含

​ str.includes(‘zhangsan’)//判断是否包含某元素，返回true/false

​ 替换

​ console.log(str.replace(‘str1’,’str2‘)) //只能替换第一个，替换之后原来字符串不会改变

​ 重复

​ str.repeat（num） //重复若干次

​ serch

​ 转换

​ str1.split(字符,length) //把字符串拆分成数组，length用来指定转换之后数组的长度

​ 去空

​ console.log(str1.trim()) //去空，之后对原字符串没有影响

​ 转换大小写

    console.log(toUpperCase())          //转换成大写
    console.log(toLowerCase())          //转换成小写

​ 改变颜色，大小

    document.write('asdf'.fontcolor('red')) //改变颜色
    document.write('asdf'.fontsize(7)) //改变大小

截取

都不会影响原来字符串；

str.slice(start，end) //接收两个参数，开始位置，结束位置，不包括结束位置

​ //不给定结束位置默认截取到最后，支持负数，从末尾开始计数

str.substring(start，end) //和slice一样，不支持负数

str.substr(start，length) //不给定长度，默认截取到末尾

Array(数组)

​ 创建数组

​ let arr=[]

​ 面向对象

• letarr=new Array（1，2，3，4)

​ 如果构造函数直接接受一个参数，并且这个参数是一个数字，这个数字代表数组的长度

​ 解决方法：Array.of(num)

​ Array.isArray(arr):判断对象是不是数组///constructor///intancesof

属性

constructor //返回构造函数

length //返回 或 设置数组长度

方法

​ 添加或者删除

​ arr.push(1,2,3) //数组的末尾添加一个或多个元素，并且返回新数组的长度,修改数组

​ arr.unshift //数组的开头添加新的元素，返回新数组的长度

​ arr.pop //删除数组的最后一个元素，返回被删掉的元素

​ arr.shift //删除数组的第一个元素，返回被删掉的元素

​ arr.splice（start，num，ele1，ele2…）

​ //万能的添加或删除，start：删除的位置，num：要删除的个数，ele：要添加的元素，返回被删的元素

​ arr.sort //排序，按ASCII码排序

​ arr.sort（function（a，b）{

​ return a-b} ） //从小到大排序

合并

​ arr.concat（1，2,，3,） //合并，返回合并后的数组，对原数组无影响 /可传数组，字符串，也可以直接传数组元素

​ arr.push（…[1,2,3] ） //合并，改变原数组 /把数组拆开用

转换

​ arr.join（‘连接符’） //数组转化为字符串，数组通过特定的连接符转换为字符串，默认的是逗号，对原数组无影响

indexOf lastIndexOf

reverse（翻转）

​ arr.reserve //会改变原来的数组

forEach //执行某一个特定的回调函数

arr.forEach(function(value,index,obj){

​ sum +=value

})

接收回调函数 接收三个参数 value（数组元素）index（数组下标）ob（当前遍历的数组）

仅用来遍历，无返回值

​ 遍历：

​ 1 使用循环for

​ 2 for in （i） //代表对应的下标，把数组当作对象

    3  for of （i）//对应的是对象的值，把数组当作对象

​ 4 forEach（function（value，index，obj）{}）//仅用来遍历，无返回值

判断some every

每一个数组元素都会执行回调函数（判定函数）根据回调函数的结果返回true/false

some只要有一个元素执行回调函数返回true，some返回true

every需要所有都返回true，every返回true

​ let result = arr.some(function(value){

​ return value >0

​ })

映射

得到新的数组，元素数组中的每一个元素调用回调函数，用回调函数的返回值作为新数组的元素

对原数组无影响

arr.map(function(value,index){

​ return value*2 //通过一个数组得到另一个数组

})

筛选

得到新的数组，新数组是原数组的子集，元素数组中的每一个元素调用回调函数，用回调函数的返回值为true的作为新数组的元素，对原数组无影响

arr.filter(funtion(value,index){

​ return typeof value == ‘String’ //返回数组中的字符串

})

箭头函数（一般写在回调函数里面）

1  不可当做构造函数用

2  没有arguements对象，但有...rest参数

​ rest：接收剩余参数

​ arguement：接收所有的参数

​ 3 箭头函数的this由定义的时候决定的，function的this是由调用时候决定的，

arr.filter（value=>value%2==0）

​ 名字 参数 代码块

let fn = (num,num1) =>num+num1

let fn1 = (num,num1) =>{alert(num);alert(num1)} //语句过多，用{ } 包起来，{}不是一个对象

let fn3 = () =>({name:’zhangsan’,age:15}) //用小括号包起来可识别成对象

模板字符串“(制表符)

识别样式，可排成2行 ，可运算，可执行函数

${} 识别变量