JavaScript(尚硅谷学习总结)

1.控制浏览器弹出一个警告

alert(“11111111!”)

2.让计算机再页面中输出一个内容

document.write()可以向body中输出一个内容
document.write("1111111111")

3.向控制台输出一个内容

console.log("11111111111111")

4.编写位置

//可以将js代码编写到标签的onclick属性中
<button onclick="alter('111111')">111</button>
//可以将js代码写在超链接的href属性中
<a href="javascript:alert('1111111')">1111</a>
//在script标签中写
<script>
alert("111111")
</script>
//外部js文件  编写到外部js文件,通过script标签引入.  
<script type="text/javascript" src="js/script.js"></script>
//script标签一旦用于引用外部文件了,就不能在编写代码了,编写了也不生效。如果想写 在重新创建一个script标签
<script type="text/javascript" src="js/script.js"></script>
<script>
    alert("11111111")
</script>

5.基本语法

/* js注释
    多行注释,注释中的内容不会被执行,但是可以在源代码中查看
*/

//单行注释

/*
    1.JS中严格区分大小写
    2.JS中每一条语句以分号(;)结尾
                --如果不写,浏览器会自动添加,但是会消耗一些系统资源,
                    而且有些时候,浏览器会加错分号,所以开发中分号必须写
    3.JS中会忽略多个空格和换行,所以我们可以利用空格和换行对代码进行格式化
*/

6.字面量和变量

/*
    字面量,都是一些不可以改变的值,都是可以直接使用的,但是我们一般都不会直接使用字面量
        比如:1 2 3 4 5

    变量:可以用来保存字面量,而且变量的值是可以任意改变的,变量可以更加方便我们使用
        x = 1
*/

//声明变量,在JS中使用var关键字声明一个变量
var a;
//为变量赋值
a = 123;

//声明和赋值同时进行
var b = 123;

7.标识符

/*
 标识符
    在JS中所有的可以由我们自主命名的都可以称为标识符
    例如,变量名,函数名,属性名都属于标识符
    命名一个标识符时需要遵守如下规则:
        1.标识符中可以含有字母,数字,_ ,$
        2.标识符不能以数字开头
        3.标识符不能是ES中的关键字或者保留字  var var = 123;(不可以)
        4.标识符一般都采用驼峰命名法
                    -首字母小写,每个单词的开头字母大写,其余字母小写 helloWord

    JS底层保存标识符时,实际上采用Unicode编码UTF-8
        所以理论上讲,所有的UTF-8中都可以作为标识符
*/

var abc_
var $c

8.Number

/*
    可以使用一个运算符typeof来检查一个变量得类型
    语法:typeof 变量
    检查字符串时,会返回string
    检查数值时,会返回Number
    NAN表示的是一个数字,NOT A Number。Number类型
    
*/
console.log(typeof a)
console.log(Number.MAX_VALUE)//1.7976931348623157+308 如果使用Number表示的数字超过了最大值,则会返回一个Infinity,正无穷
console.log(Number.MIN_VALUE)//大于0的最小值,5e-324
/*
    在JS中整数的运算基本可以保证精确
    如果使用JS进行浮点运算,可能得到一个不精确的结果。
*/

9.Boolean布尔值

布尔值只有两个  真or假,主要用来做逻辑判断
true 
        --表示真
false
        --表示假
使用typeof检查一个布尔值时,会返回boolean

var bool = true;
console.log(typeof bool);//boolean
console.log(bool);//true
     

10.Null和undefined

/*Null(空值)类型得值只有一个,就是null
    null这个值专门用来表示一个为空的对象
    使用typeof检查一个null值时,会返回object
*/
var a = null;
console.log(typeof a);//object

/*Undefined(未定义)类型得值只有一个,就是undefined
    当声明一个变量,但是并不给变量赋值时,它的值就是undefined
    使用typeof检查一个undefined时,也会返回undefined
*/
var b;
console.log(b);//undefined

11.强制类型转换

/*
    强制类型转换
    -指一个数据类型强制转换为其他的数据类型
    -类型转换只要指,将其他的数据类型,转换为
        String Number Boolean
*/
/*
    将其他数据类型转换为String
    方式一:
            -调用被转换数据类型的toString()方法
            -该方法不会影响原变量,他会将转换的结果返回
            -但是注意:null和undefined这两个值没有toString()方法,如果调用会报错
    方式二:
            -调用String()函数,并将我们被转换的数据作为参数传递给函数
            -使用String()函数被强制类型转换时,
                对于Number和Boolean实际上就是调用的toString()方法
                但是对于Null和Undefined,就不会调用toString()方法
                    它会将null 直接转换成“null”
                    将undefined,直接转换成“undefined”
*/
------------------------------
var a = 123;
//调用a的toString方法
//调用xxx的yyy()方法,就是xxx.yyy()
a.toString();
var b = a.toString();
console.log(typeof a);//number
console.log(a);//"123"
console.log(b);//String
--------------------------------
a = 123;
//调用String()函数。来将a转换为字符串
a = String(a);
console.log(typeof a);string
consloe.log(a);"123"

/*
    将其他的数据类型转换为Number
        转换方式一:
            使用Number()函数
                字符串--》数字
                    1.如果是纯数字的字符串,则直接将其转换为数字
                    2.如果字符串中有非数字的内容,则转换为NAN
                    3.如果字符串是一个空串或者是一个全是空格的字符串,则转换为0
                布尔--》数字
                    true 转换1
                    false 转换0 
                Null--》数字 ==0
                undefined--》数字 NaN
        转换方式二:
            --这种方式专门用来对付字符串
            -parseInt()把一个字符串转换为一个整数
            -parseFloat()把一个字符串转换为一个浮点数
            如果对非String使用parseInt()或parseFloat()
            它会将其转换为String然后再操作
*/
var a = "123";
//调用Number()函数将a转换为Number类型
a = Number(a);
console.log(typeof a);//number
console.log(a);
a = "123px";
a = parseInt(a);//parseInt()可以将一个字符串中的有效的整数内容取出来,然后转换为Number 123a456,只读a之前的123.
console.log(typeof a);//number
console.log(a);//123

/*
    将其他的数据类型转换为Boolean
    -使用Boolean()函数
            -数字--》布尔
                除了0和NaN,其余的都是true
            -字符串--》布尔
                除了空串,其余的都是true
            -null和undefined都会转换为false
            -对象也会转换为true
*/
var a = 123;
//调用Boolean()函数,将a转换为布尔值
a = Boolean(a);

12.其他进制的数字

/*
    再js中,如果需要表示16进制的数字,则需要以0x开头
        如果需要表示8进制的数字,则需要以0开头  
        如果要表示二进制数字,则需要以0b开头,但是不是所有的浏览器都支持
*/
a = 0x10;//16
a = 070;//56

a = "070";
a = parseInt(a,10);//可以在parseInt()中传递一个第二个参数,来指定数字的进制

13.算数运算符

/*
    运算符也叫操作符
    通过运算符可以对一个或多个值进行运算,并获取运算结果
    比如:typeof就是运算符,可以来获取一个值的类型
        它会将该值的类型以字符串的形式返回
        number string boolean undefined object

    算数运算符
        当对非Number类型的值进行运算时,会将这些值转换为Number然后再运算 。任何值和NaN做运算都得NaN
        +
            可以对两个值进行加法运算,并将结果返回
            如果对两个字符串进行加法运算,则会做拼串
                会将两个字符串拼接为一个字符串,并返回任何的值和字符串做加法运算,都会先转换为字符串,然后再和字符串做拼串的操作
        -
            可以对两个值进行减法运算,并将结果返回
        *
            可以对两个值进行乘法运算
        /
            可以对两个值进行除法运算
        %
            取模运算(取余数)


任何值做- * /运算时,都会自动转换为Number
我们可以利用这一特点做隐式的类型转换
        可以通过为一个-0 *1 /1来将其转换为Number
        原理和Number()函数一样,使用起来更加简单
*/

var c = 123;
var b = "123";
c = c + "";//这样可以将c转换为字符串
d = d - 0;//将d转换为number

14.一元运算符

/*
 一元运算符,只需要一个操作数
    + 正号
        正号不会对数字产生任何影响
    - 负号
        负号可以对数字进行符号的取反操作
    对于非Number的值
        先转换为number,然后再运算
        可以对一个其他的数据类型使用+,来将其转换为Number
        他的原理和Number()函数一样
*/
var a = 123;
a = +a;//直接转换成number类型
console.log(a);
a = true;
a = -a;//类型转换number  值-1

15.自增和自减

/*
 自增 ++
    通过自增可以使变量再自身的基础上增加1
    对一个变量自增以后,原变量的值会立即增加1
    自增分成两种:后++(a++)和前++(++a)
        无论是a++还是++a,都会立即使变量的值自增1
            不同的是a++和++a的值不同
        a++的值等于原变量的值(自增前的值)
        ++a的值等于原变量的值(自增后的值)
 自减 --
    通过自减可以使变量再自身的基础上减1
        自减氛围两种  后--(a--)和前--(--a)
            无论是a--还是--a都会立即使原变量的值自减1
                不同的是a--和--a的值不同
            a--的值是变量的原值(自减前的值)
            --a是变量的新值(自减后的值)
*/
var a = 1;
a++;//a=2
++a;//a=2

16.逻辑运算符

/*
JS中为我们提供了三种逻辑运算符
!  非 
    !可以用来对一个值进行非运算
        所谓非运算就是值对一个布尔值进行取反操作,
            true变false,false变true
         如果进行两次取反,不会变化
        如果对非布尔值进行运算,则会将其转换为布尔值,然后取反
            所以我们可以利用该特点,来将其他数据类型转换为布尔值
            可以为一个任意数据类型取两次反,来将其转换为布尔值
            原理和boolean()一样
&& 与
    &&可以对符号两侧的值进行与运算并返回结果
    运算规则   true&&true
        两个值中只要有一个值为false就返回false,只有两个值都为true时,就返回true
        JS中的“与”属于短路的与,如果第一个值为false,则不会再看第二个值
|| 或
    ||可以对符号两侧的值进行或运算并返回结果
    运算规则:
        两个值中只要有一个true,就返回true
            如果两个值都为false,才返回false
        JS中的“或”属于短路的或
            如果第一个值为true,则不会再看第二个值
    
*/
var a =true;
a = !a;//false

/*
    && || 非布尔值的情况
        对于非布尔值进行与或运算时,
        会将其转换为布尔值,然后再运算,并且返回原值
    与运算:
        如果第一个值为true,则必然返回第二个值
        如果第一个值为false,则直接返回第一个值
    或运算:
        如果第一个值为true,则直接返回第一个值
        如果第一个值为false,则返回第二个值
*/
//如果两个值都为true,则返回后面的,
//如果两个值中有false,则返回靠前的fasle
var result = 1 && 2;//2
result = 0 && 2;//0
result = 2 && 0;//0

17.赋值运算符

/*
    =
    可以将符号右侧的值赋值给符号左侧的变量
    +=
        a+=5等价于a = a+5;
    -=
        a-=5等价于 a = a-5
    *=
        a *= 5 等价于 a = a*5
    /=
    %=
*/
var a = 123;
a = a + 5;
a +=5;

18.关系运算符

/*
通过关系运算符可以比较两个值之间的大小关系;
  如果关系成立它会返回true,如果关系不成立则返回false

>大于号
    判断符号左侧的值是否大于右侧的
    如果关系成立,返回true,如果关系不成立则返回false
>=大于等于
    判断符号左侧的值是否大于或等于右侧的值
<小于号
<=小于等于

非数值的情况
    对于非数值进行比较时,会将其转换为数字然后再比较
    任何值和NAN做任何比较都是false
    如果符号两侧的值都是字符串,不会将其转换成数字进行比较,而会分别比较字符串中的Unicode编码
    比较字符编码时是一位一位进行比较
    如果两位一样,则比较下一位,所以借用它来对英文进行排序

如果比较的两个字符串型的数字,可能会得到不可预期的结果
注意:比较两个字符串型的数字时,一定要转型

*/

19.Unicode编码

/*
再字符串中使用转义字符输入Unicode编码
    \u四位编码

*/
console.log("\u2620");
/*
再网页中使用Unicode编码
    &#编码,这里的编码需要的是10进制
    将编码转换成10进制的数进行使用。
*/
<h1>&#9760</h1>

20.相等运算符

/*
    相等运算符,用于比较两个值是否相等
    如果相等会返回true,否则返回false
    
    使用== 来做相等运算
        当使用==来比较两个值时,如果值的类型不同,则会自动进行类型转换,将其转换成相同的类型,然后再比较。 console.log("1" == 1);//true
        
    undefined衍生自null   所以两个值相等判断时,会返回true
    NaN不和任何值相等,包括他本身

    可以通过isNaN()函数来判断一个值是否时NaN
        如果该值时NaN返回true,否则false

    不相等
        不相等用来判断两个值是否不相等,如果不相等返回true,否则返回false
        使用!=用来做不相等运算
        不相等也会对变量进行自动的类型转换,如果转换后相等也会返回false

    ===
        全等
            用来判断两个值是否全等,它和相等类似,
            不同的是不会做类型转换
            如果两个值的类型不同,不会转换,直接返回false
    !==
        不全等
            用来判断两个值是否不全等,和不等类似
            不同的是不会自动的做类型转换
             如果两个值的类型不同,直接返回true
*/

21.条件运算符也叫三元运算符

/*
    三元运算符
        语法:
            条件表达式?语句1:语句2;
        执行流程:
            条件运算符在执行时,首先对条件表达试进行求值,
            如果该值为true,则执行语句1,并返回执行结果
            如果该值为false,则执行语句2,并返回执行结果
        如果条件的表达式的求值结果试一个非布尔值,会将其转换为布尔值然后再运算。
*/
var a = 10;
var b = 20;
a > b ? alert("a大"):alert("b大")

//获取a和b中的最大值
var max = a > b ? a : b;

22.运算符的优先级

/*
    ,运算符
        使用,可以分割多个语句,一般可以再声明多个变量时使用
      使用,运算符声明多个变量:  var  a , b , c;
                               var a=1 , b=2 , c=3;

    
*/
/*
    JS中的运算符的优先级:
    比如:先乘除后加减
    再JS中有一个运算符优先级的表,再表中位置越靠上,优先级越高,优先级越高越优先计算,
    如果优先级相同,从左向右计算
    但是这个表我们并不需要记忆,如果遇到优先级不清楚的,
    可以使用()来改变优先级。
*/

23.代码块

/*
我们的程序是一条一条语句构成的
 语句是按照自上向下的顺序一条一条执行的
  在JS中可以使用{}来为语句进行分组,
    同一个{}中的语句我们称为是一组语句
    它们要么都执行,要么都不执行
    一个{}中的语句我们也称为叫一个代码块
    在代码块的后边就不用再编写;了

JS中的代码块,只具有分组的作用,没有其他的用途
    代码块内容的内容,再外部是完全可见的
*/

{
    var a =10;    
    alert("hello");
    console.log("你好");
    document.write("与");
}
console.log("a = " +a);

24.流程控制语句if,switch,while,

/*
    流程控制语句
        JS中的程序是从上到下一行一行执行的
        通过流程控制语句可以控制程序的执行流程
            使程序可以根据一定的条件来选择执行
        语句分类:
            1.条件判断
            2.条件分支
            3.循环语句


        条件判断语句:    
            使用条件判断语句可以再执行某个语句之前进行判断,如果判断条件成立才会执行语句,条件不成立则语句不执行。
            if语句:
                语法一:
                    if(条件表达式)
                        {语句
                        }
                       
                if语句再执行时,会先对条件表达式进行求值判断,
                如果条件表达式的值为true,则执行if后的语句
                如果条件表达式的值为false,则不会执行if后的语句
                
                语法二:
                    if(条件表达式)
                    {
                        语句...
                    }else{
                        语句...
                    }
                if...else...语句
                    当该语句执行时,会先对if后的条件表达式进行求值判断,
                    如果该值为true,则执行if的语句
                    如果该值为false,则执行else后的语句
                    
                语法三:
                     if(条件表达式)
                    {
                        语句...
                    }else if(条件表达式){
                        语句...
                    }else if(条件表达式){
                        语句...
                    }else{
                        语句...
                    }
                if...else if...else
                    当该语句执行时,会从上到下依次对条件表达式进行求值判断
                    如果值为true,则执行当前语句
                    如果值为false,则继续向下判断
                    如果所有的条件都不满足,则执行最后一个else后的语句
    
        条件分支语句也叫switch语句
            语法:
                switch(条件表达式){
                    case 表达式:
                        语句...
                        break;
                    case 表达式:
                        语句...
                        break;
                    case 表达式:
                        语句...
                        break;
                    case 表达式:
                        语句...
                        break;
                    default:
                        语句...
                        break;
                }
            
           执行流程:
            switch...case..语句
            在执行时会依次将case的表达式的值和switch后的条件表达式的值进行全等比较
                如果比较结果为true,则从当前case处开始执行代码,
                    当前和case后的代码都会被执行,可以在case的后边跟着一个break,这样可以确保
                    只执行当前语句,不会执行之后的语句。
                如果比较结果为false,则继续向下比较
                如果所有的比较结果都为false,则执行default后的语句

     switch语句和if语句的功能实际上有重复的,使用switch可以实现if的功能,
        同样使用if可以实现switch的功能,所以我们使用时,根据自己的习惯选择。

            循环语句:
                通过循环语句可以反复的执行一段代码多次

            while循环
                语法:
                    while(条件表达式){
                                    语句...
                    }

                    while语句在执行时,
                        先对条件表达式进行求值判断,
                            如果值为true,则执行循环体,
                                 循环体执行完事以后,继续对表达式进行判断
                                 如果为true,则继续执行循环体,以此类推。
                            如果值为false,则终止循环


            do...while循环
                语法:
                    do{
                        语句...
                    }while(条件表达式)

                执行流程:
                    do...while语句执行时,会先执行循环体,
                    循环提执行完毕以后,在对while后的条件表达式进行判断,
                    如果结果为true,则继续在执行循环体,执行完毕继续判断以此类推。
                    如果结果为false,则终止循环。

                实际上这两个语句功能类似,不同的是,while是先判断后执行。
                        do...while是先执行后判断。
                do...while可以保证循环体至少执行一次,  而while不能。
                
*/

//向这种将条件表达式写死为true的循环,叫做死循环。该循环不会停止,除非浏览器关闭,死循环在开发中慎用。可以使用break,来终止循环。
while(true){
    alert(n++);

//退出循环
if(n == 10){
break;
}
}

25.for循环

/*
for语句,也是一个循环语句,也称为for循环
    在for循环中,为我们提供了专门的位置用来放三个表达式:
        1.初始化表达式
        2.条件表达式
        3.更新表达式

    for循环的语法:
        for(初始化表达式;条件表达式;更新表达式){
            语句...
        }

     for循环的执行流程:
        1.执行初始化表达式,初始化变量(初始化表达式只会执行一次)
        2.执行条件表达式,判断是否执行循环。
        如果为true,执行循环。
        如果为false,终止循环。
        3.执行循环
        4.执行更新表达式,更新表达式执行完毕,继续重复2.

    for循环中国的三个部分可以省略,也可以写在外部.
        如果在for循环中,不写任何的表达式,只写两个分号“;”。
        此时,我们的这个循环,是一个死循环,会一直执行下去。慎用。
        for(;i<10;){
            alert(i++);
        }
*/
---------------------------------
//创建一个执行10次的while循环
//初始化表达式
var i = 0;
//创建一个循环,定义条件表达式
while(i<10){
    //设置更新表达式
        alert(i++);
}
---------------------------------
//与上方的while循环相同
for(var i = 0 ; i < 10 ; i++){
    alert(i);
}

26.break和continue

/*
    break关键字可以用来推出switch或循环语句
        不能再if语句中使用break和continue
    break关键字,会立即终止离他最近的那个循环语句,只对离他最近的循环语句起作用。
    
    continue关键字可以用来跳过当次循环
        同样continue也是默认只会对离他最近的循环起作用。
*/

for(var i = 0;i < 10 ; i++ )
{
    if(i == 2){
        break;//这里的break不作用于if,作用于for循环,可以这么使用。
}
}

/*
    可以为循环语句创建一个label,来标识当前的循环
      label:循环语句
    使用break语句时,可以再break后跟着一个label,
    这样break将会结束指定的循环,而不是最近的
*/

27.对象

/*
    JS中的数据类型
        String 字符串
        Number 数字
        Boolean 布尔值
        Null 空值
        Undefined 未定义
            以上五种类型属于基本数据类型,以后我们看到的值
            只要不是上边的五种,全部是对象
        Object对象
    
        基本数据类型都是单一的值 “hello” 123 true,
            值和值之间没有任何的联系。
        
        再JS中来表示一个人的信息(name gender age),
        var name = "11";
        var gender = "11";
        var age = "11";
        如果使用基本数据类型的数据,我们所创建的变量都是独立的,不能成为一个整体。

        对象属于一种复合的数据类型,再对象中可以保存多个不同数据类型的属性

        对象的分类:
            1.内建对象
                由ES标准中定义的对象,再任何的ES的实现中都可以使用
                比如:Math String Number Boolean Function Obiect....
            2.宿主对象
                由JS的运行环境提供的对象,目前来讲主要指由浏览器提供的对象
                比如BOM DOM
            3.自定义对象
                由开发人员自己创建的对象
*/

//创建对象
/*
使用new关键字调用的函数,是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时,会返回object
*/
var obj = new Object();

/*
 向对象中保存的值称为属性
 向对象添加属性
     语法:
        对象.属性名 = 属性值;
*/
//向obj中添加一个name属性
obj.name = "11";
//向obj中添加一个gender属性
obj.gender= "11";
//向obj中添加一个age属性
obj.age = "11";

/*
    读取对象中的属性
    语法:
        对象.属性名
    console.log(obj.name);
    如果读取对象中没有的属性,不会报错而是会返回undefined
*/

/*
    修改对象的属性值
        语法:
            对象.属性名 = 新值
        
*/
obj.name = "22";
/*
    删除对象的属性
        语法:
            delate 对象.属性名
*/
delate obj.name;






/*
    向对象中添加属性
    属性名:
        对象的属性名不强制要求遵守标识符的规范
            什么乱七八糟的名字都可以使用
        但是我们使用时还是尽量按照标识符的规范去做
*/
obj.name = "张三";

/*
    如果要使用特殊的属性名,不能采用.的方式来操作
      需要使用另一种方式,
            语法:
                对象["属性名"] = 属性值
        读取时也需要采用这种方式
    
    使用[]这种形式去操作属性,更加的灵活,
    再[]中可以直接传递一个变量,这种变量值是多少就会读取那个属性
*/
obj["123"] = 789;
console.log(obj["123"]);

/*
    属性值
        JS对象的属性值,可以是任意的数据类型
    甚至也可以是一个对象
*/
obj.test = "hello";
obj.test = 123;
obj.test = true;
obj.test = null;
obj.test = undefined;

//创建一个对象
var obj2 = new Object();
obj2.name = "11";
//将obj2设置为obj的属性
obj.test = obj2;


/*
    in运算符
        通过该运算符可以检查一个对象中是否含有指定的属性
            如果有则返回true,没有则返回false    
        语法:
            "属性名" in 对象
*/
console.log("test" in obj);

28.基本数据类型和引用数据类型

/*
    基本数据类型
        String Number Boolean Null Undefined

    引用数据类型
        Object

    JS中的变量都是保存在栈内存中的
        基本数据类型的值直接在栈内存中存储
        值与值之间是独立存在的,修改一个变量不会影响其他变量

        
        对象是保存到堆内存中的,每创建一个新的对象,就会在堆内存中开辟出一个新的空间
        而变量保存的是对象的内存地址(对象的引用),如果两个变量保存的是同一个对象的
        引用,当通过一个变量修改属性时,另一个也会受影响。

        当比较两个基本数据类型的值时,就是比较值
        当比较两个引用数据类型时,比较的是对象的内存地址
            如果两个对象是一摸一样的,但是地址不同,也会返回false
*/

29.对象字面量

/*
    使用对象的字面量来创建一个对象
*/
var obj = {};//  var obj = new Object();

obj.name = "11";


/*
    使用对象字面量,可以在创建对象时,直接指定对象中的属性
    语法:
    {属性名:属性值,属性名:属性值...}
        对象字面量的属性名可以加引号,也可以不加,建议不加。
        如果要使用特殊的名字,则必须加引号

    属性名和属性值是一组一组的名值对结构,
        名和值之间使用:连接,多个名值对之间使用,隔开
        如果一个属性之后没有其他的属性了,就不要写。
*/

var obj2 = {name:"11",age:22};

30.函数的简介

/*
    函数function
        函数也是一个对象
        函数中可以封装一些功能(代码),在需要时可以执行这些功能(代码)
        函数中可以保存一些代码在需要的时候调用
        使用typeof检查一个函数对象的时候,会返回function
*/
//我们在实际开发中很少使用构造函数来创建一个对象
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
var fun = new Function();

//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数   语法:   函数对象()
//当调用函数时,函数中封装的代码会按照顺序执行
fun();


/*
    使用函数声明来创建一个函数
        语法:
            function 函数名(形参1,形参2...形参N){
                语句...
            }
            
*/
function fun2(){
    console.log("111111111111111");
}
//调用fun2
fun2();

/*
    使用函数表达式来创建一个函数
    var 函数名 =  function(形参1,形参2...形参N){
                语句...
            }
*/
var fun3 = function(){
    console.log("11111111111");
}

fun3();

31.函数的参数

/*
 定义一个用来求两个数和的函数
    可以在函数的()中来指定一个或多个形参(形式参数)
    多个形参之间使用,隔开,声明形参相当于在函数内部声明了对应的变量
    但是并不赋值
*/

function sum(a,b){
console.log(a+b);
 }
/*
在调用函数时,可以在()中指定实参(实际参数)
实参将会赋值给函数中对应的形参
*/
sum(1,2);

/*
调用函数时,解析器不会检查实参的类型,
所以要注意,是否有可能会接收到非法的参数,如果有可能则需要对参数进行类型的检查
函数的实参可以是任意的数据类型
*/
sum(123,"hello");//123hello
sum(true,false);//1

/*
调用函数时,解析器也不会检查实参的数量
多余的实参不会被赋值
如果实参的数量少于形参的数量,则没有对应实参的形参将是undefined
*/

32.函数的返回值

/*
创建一个函数,用来计算三个数的和
可以使用return 来设置函数的返回值
语法:
    return 值;

return后的值将会作为函数的执行结果返回,
    可以定义一个变量来接收结果

在函数中return后的语句都不会执行

如果return语句后不跟任何值,就相当于返回一个undefined
如果函数中不写return,也会返回undefined

return后可以跟任意类型的值
*/
function sum(a,b,c){

    var d = a + b + c;
    return d;
    alert("111")//不执行
}

//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(1,2,3);

33.实参可以是任何值

/*
实参可以是任意的数据类型,也可以是一个对象
当我们的参数过多时,可以将参数封装到一个对象中,然后通过对象传递
*/
var obj = {
    name:"11";
    age:11;
}
function sayhello(o){
console.log(o.name + o.age);
}
/*
实参可以是一个对象,也可以是一个函数
mianji(r){
return 3.14*r*r
}
fun(mianji(10));//314
mianji()
    调用函数
    相当于使用的函数的返回值
mianji
    函数对象
    相当于直接使用函数对象
*/

34.返回值的类型

/*
使用break可以退出当前循环
使用continue跳过当次循环
使用return可以结束整个函数
*/

/*
返回值可以是任意的数据类型
也可以是一个对象,也可以是函数
*/
function fun(){
    var obj = {name:"11"}
    return 10;//null  undefined true  obj
}

var a = fun();

35.立即执行函数

/*
立即执行函数
函数定义完,立即被调用,这种函数叫做立即执行函数
立即执行函数往往只会执行一次
*/
(function(){
alert("11111");
})();

(function(a,b){
console.log(a);//111
console.log(b);//222
alert("11111");
})(111,222);

36.方法

/*
函数也可以成为对象的属性,
 如果一个函数作为一个对象的属性保存,
 那么我们称这个函数是这个对象的方法
 调用这个函数就说调用对象的方法(method)

但是他只是名称上的区别没有其他的区别
*/

37.枚举对象for...in

/*
枚举对象中的属性
使用for...in语句
    语法:
        for(var 变量 in 对象){

}
for...in语句 对象中有几个属性,循环体就会执行几次
 每次执行时,会将对象中的一个属性的名字赋值给我们的变量
*/

var obj = {
    name:"11";
    age:11;
}
for(var n in obj){
    console.log(n);//属性名  name age
    console.log(obj[n]);//属性值
}

38.全局作用域

/*
作用域
    作用域指一个变量的作用的范围
    
    在JS中一共有两种作用域:
        1.全局作用域
            直接编写在script标签中的JS代码,都在全局作用域中
            全局作用域在页面打开时创建,页面关闭时销毁
            在全局作用域中有一个全局对象window,它代表的是一个浏览器的窗口,由浏览器创建,我们可以直接使用
            在全局作用域中:
                创建的变量都会作为window对象的属性保存
                创建的函数都会作为window对象的方法保存
变量的声明提前
   使用var关键字声明的变量,会在所有的代码执行之前被声明(但是不会赋值)
    但是如果声明变量时,不使用var关键字,则变量不会被声明提前

函数的声明提前
    使用函数声明形式创建的函数function 函数(){}
        它会在所有的代码执行之前就被创建,所以我们可以在函数的声明之前调用函数
         使用函数表达式创建的函数,不会被声明提前,不能再声明之前调用
        2.函数作用域
            调用函数时调用函数作用域,函数执行完毕以后,函数作用域销毁
            每调用一次函数就会创建一个新的函数作用域,他们之间时互相独立的
            再函数的作用域中,可以访问到全局作用域的变量。
            再全局作用域中,无法访问到函数作用域的变量
        当再函数作用域中操作一个变量时,它会现在自身的作用域中寻找,如果有就直接使用,如果没有就向上一级作用域中寻找。直到找到全局作用域,如果全局作用域中依然没有找到,则会报错ReferenceError。(引用异常)
        再函数中要访问全局的变量可以使用window对象

        再函数作用域中也有声明提前的特性,使用var关键字声明的变量,会在函数中所有的代码执行之前声明
        再函数中,不使用var声明的变量都会成为全局的变量
    
        定义形参就相当于再函数中声明了变量
        function(e){
        alert(e);
        }
*/
var a = 10;
function fun(){
console.log(a);//访问得到a
}
fun();

39.this

/*
解析器再调用函数时每次都会向函数的内部传递进一个隐含的参数
    这个隐含的参数就是this,this指向的是一个对象
    这个对象我们称为函数执行的上下文对象
    根据函数的调用方式的不同,this会指向不同的对象
        1.以函数的形式调用 时,this永远都是window
        2.以方法的形式调用时,this就是调用方法的对象
*/
function fun(){

}
fun();

40.使用工厂方法创建对象

/*
创建一个对象
*/
var obj = {
    name:"11",
    age:11,
    sayName:function(){
    alert(this.name);
    }
 }

/*
使用工厂方法创建对象
通过该方法可以大批量创建对象
*/
function createPerson(name,age){
    //创建一个新的对象
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    obj.sayName = function(){
    alert(this.name);
};
}
var obj1 = createPerson("11",11);
var obj2 = createPerson("22",22);

41.构造函数

/*
用来创建狗的对象
使用工厂方法创建的对象,使用的构造函数都是Object
所以创建的对象都是Object这个类型
就导致我们无法区分多种不同的对象
*/
function createDog(name,age){
    var obj = new Object();
    obj.name = name;
    obj.age = age;
    sayHello = function(){
    alert("wangwang");
    }
}
var dog = createDog("gougou",2);


/*
    创建一个构造函数,专门来创建Person对象的
    构造函数就是一个普通的函数,创建方式和普通函数没有区别
    不同的是构造函数习惯上首字母大写

    构造函数和普通函数的区别就是调用的方式不同
    普通函数就是直接调用
    构造函数需要使用new关键字来调用
    
    构造函数的执行流程:
        1.立刻创建一个新的对象
        2.将新建的对象设置未函数中的this,在构造函数中可以使用this来引用新建的对象
        3.逐行执行函数中的代码
        4.将新建的对象作为返回值返回

    使用同一个构造函数创建的对象,我们称为一类对象,也将一个构造函数称为一个类
    我们将通过一个构造函数创建的对象,称为时该类的实例

      使用instanceof可以检查一个对象是否是一个类的实例
        语法:
            对象 instanceof 构造函数
        如果是,则返回true,否则返回false

    所有的对象都是Object的后代,
        所以任何对象和Object在instanceof检查时都会返回true


        this的情况
        1.当以函数的形式调用时,this是window
        2.当以方法的形式调用时,谁调用方法this就是谁
        3.当以构造函数的形式调用时,this就是新创建的那个对象

    
    创建一个Person构造函数
        在Person构造函数中,为每一个对象都添加了一个sayName方法,
            目前我们的方法时在构造函数内部创建的,也就是构造函数每执行一次就会创建一个新的sayName方法
        也是所有实例的sayName都是唯一的
        这样就导致了构造函数执行一次就会创建一个新的方法
        执行1000次就会创建1000个新的方法,而1000个方法都是一模一样的。
         将函数在构造函数外定义成全局的,在构造函数内调用就可。
            但是将函数定义在全局作用域,污染了全局作用域的命名空间
        而且定义在全局作用域中也很不安全
*/
function Person(){
    this.name = "11";
}
var Per = new Person();//构造函数的调用

42.原型对象

/*
原型prototype

我们所创建的每一个函数,解析器都会向函数中添加一个属性prototype
    这个属性对应着一个对象,这个对象就是我们所谓的原型对象
    
    如果我们的函数作为普通函数调用,prototype没有任何作用
    当函数通过构造函数调用时,他所创建的对象中都会有一个隐含的属性
        指向该构造函数的原型对象,我们可以通过__proto__来访问该属性

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象
    我们可以将对象中共有的内容,统一设置到原型对象中

当我们访问对象的一个属性或方法时,它会先在对象自身中寻找,如果有则直接使用,如果没有则会去原型对象中寻找,如果找到直接使用。
以后我们创建构造函数时,可以将这些对象共有的属性和方法,同意添加到构造函数的原型对象中,
这样不用分别为每一个对象添加,也不会影响到全局作用域,就可以使每个对象都具有这些属性和方法了。
*/
Person.prototype.sayName = function(){
alert("1111");
}

/*

*/

function MyClass(){
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";
var mc = new MyClass();
mc.age = 18;
//使用in检查对象中是否含有某个属性时,如果对象中没有但是原型中有,也会返回true
console.log("name" in mc);//true
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性,使用该方法只有当对象自身中含有属性时,才会返回true
console.log(mc.hasOwnProperty("age"))
/*
 原型对象也是对象,所以他也有原型
    当我们使用一个对象的属性或方法时,会先在自身中寻找
        自身中如果有,则直接使用
        如果没有则去原型对象中寻找,如果原型对象中有,则使用
        如果没有则去原型的原型中寻找,直到找到Object对象的原型,
        Object对象的原型没有原型,如果在Object中依然没有找到,则返回undefined
*/









43.toString()

/*
当我们直接在页面中打印一个对象时,实际上是输出的对象的toString()方法的返回值
如果我们希望在输出对象时不输出[object,Object],可以为对象添加一个toString()方法
*/

44.数组

/*
    内建对象
        数组(Array)
            数组也是一个对象
            它和普通的对象功能类似,也是用来存储一些值的
            不同的是普通对象是使用字符串作为属性名的,
                而我们的数组是使用数字来作为索引操作元素的
            索引(index):
                从0开始的整数就是索引
            数组的存储性能比普通对象要好,在开发中我们经常使用数组来存储一些数据
                
*/
//创建数组对象
var arr = new Array();

//使用typeof检查一个数组时,会返回object
console.log(typeof arr);
/*
    向数组中添加元素
    语法:
        数组[索引] = 值
*/
arr[0] = 10;

/*
读取数组中的元素
    语法:
        数组[索引]
    如果读取不存在的索引,他不会报错而返回undefined
*/
console.log(arr[0]);

/*
获取数组长度
可以使用lenth属性来获取数组的长度(元素的个数)
语法:
    数组.length

对于连续的数组,使用length可以获取到数组的长度(元素的个数)
对于非连续的数组,使用length会获取到最大的索引加1
    尽量不要创建非连续的数组

/*
修改length
    如果修改的length大于原长度,则多出的部分会空出来
    如果修改的length小于原长度,则多出的元素会被删除
*/

*/
//创建数组
var arr = new Array();
//使用字面量创建数组  语法:[]
var arr = [];

//使用字面量创建数组时,可以在创建时就指定数组中的元素
var arr = [1,2,3,4,5];

//数组中的元素可以是任意的数据类型
arr = ["hello",1,true,null,undefined];

//数组中也可以放数组,如下这种数组就可以称为二维数组
arr = [[1,2,3],[6,5,7]];
//创建数组
var arr = ["11","22","33"];
/*
    push()
    该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
    可以将要添加的元素作为方法的参数床底
    这样这些元素将会自动添加到数组的末尾
    该方法会将数组新的长度作为返回值返回
*/
arr.push("55","66");

/*
    pop()
        该方法可以删除数组的最后一个元素,
        并将删除的元素作为返回值返回
*/
arr.pop();

/*
    unshift()
        向数组的开头添加一个或多个元素,并返回新的数组长度
        向前边插入元素以后,其他的元素索引会依次调整
*/
arr.unshift("00","11");

/*
    shift()
    可以删除数组的第一个元素,并将被删除的元素作为返回值返回
*/
    arr.shift();
//创建一个数组
var arr = ["111","222","333"];
//所谓的遍历数组,就是将数组中所有的元素都取出来
for(var i = 0; i < arr.length ; i++){}

//创建一个Person对象
var per = new Person("11",11);
var per2 = new Person("22",22);
var per3 = new Person("33",33);
var per4 = new Person("44",44);
var per5 = new Person("55",55);

/*
将这些person对象放入到一个数组中
*/
var perArr = [per,per2,per3,per4,per5];
/*
创建一个函数,可以将perArr中的满18岁的Person提取出来,
然后封装到一个新的数组中并返回
arr
形参,要提取信息的数组
*/
function getAdult(arr){
    //创建一个新的数组
    var newArr = [];
    //遍历arr,获取arr中Person对象
    for(var i = 0; i <arr.length ; i++){
        var p = arr[i];
    if(p.age >=18){
        //如果大于等于18,则将这个对象添加到newArr中
        //将对象放入到新数组中
    newArr.push(p);
    }
}
    //判断Person对象的age是否大于等于18

    //如果大于18,则将这个对象添加到newArr中

//将新的数组返回
return newArr;
}


45.forEach

/*
    一般我们都是使用for循环去遍历数组
    JS中还为我们提供了一个方法,用来遍历数组
    forEach()
        这个方法只支持IE8以上的浏览器
        IE8及以下的浏览器均不支持该方法,如果兼容IE8,还是用for循环
*/
//创建一个数组
var arr= ["111","222","333"];
/*
    forEach()方法需要一个函数作为参数
    像这种函数,由我们创建但不由我们调用的,称为回调函数
    数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素
    以实参的形式传递进来,我们可以来定义形参,来读取这些内容
    浏览器会在回调函数中传递三个参数:
        第一个参数:就是当前正在遍历的元素
        第二个参数:就是当前正在遍历的元素的索引
        第三个参数:就是正在遍历的数组  
*/
arr.forEach(function(value,index,obj){
    console.log("hello");
})

46._slice和splice

var arr = ["111","222","333"];

/*
    slice()
        可以用来从数组提取指定元素
        该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回
        参数:
            1.截取开始的位置的索引,包含开始索引
            2.截取结束的位置的索引,不包含结束索引
                第二个参数可以省略不写,此时会截取从开始索引往后的所有元素
             索引可以传递一个负值,如果传递一个负值,则从后往前计算
                -1倒数第一个
                -2倒数第二个
*/

var result = arr.slice(1,2);//222

/*
    splice()
        可以用于删除数组中的指定元素
        使用splice()会影响到原数组,会将只当元素从原数组中删除
        并将被删除的元素作为返回值返回
    参数   
        第一个,表示开始位置的索引
        第二个,表示删除的数量
        第三个及以后,
            可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边
*/
arr.splice(0,2);

47.数组去重

//创建数组
var arr = [1,1,2,3,3,4,4,4,4,5,6,7];
 //去除数组中的重复数字
//获取数组中的每一个元素
for(var i = 0; i < arr.length ; i++){
    //获取当前元素后的所有元素
    for(var j = i + 1; j<arr.length ; j++){
        //判断两个元素是否相等
    if(arr[i] == arr[j]){
    //如果相等则证明出现了重复的元素,则删除j对应的元素
        arr.splice(j,1);
    //当删除了当时j所在的元素以后,后边的元素会自动补位
    //此时将不会再比较这个元素,我们需要再比较一次j所在位置的元素
    //使j自减
    j--;
    }
    }
}

48.数组得其他方法

var arr = ["111","222","333"];
var arr2 = ["444","555","666"];
var arr3 = ["777","888","999"];

/*
    concat() 可以连接两个或多个数组,并将新的数组返回
    该方法不会对原数组产生影响
*/
var result = arr.concat(arr2,arr3,"000");

/*
    join()
    该方法可以将数组转换为一个字符串
    该方法不会对原数组产生影响,而是将转换后得字符串作为结果返回
    再join()中可以指定一个字符串作为参数,这个字符串会成为数组中元素的连接符
    如果不指定连接符,则默认使用,作为连接符
*/
result = arr.join(“-”);//111-222-333

/*
    reverse()
    该方法用来反转数组(前边的去后边,后边的去前边)
    该方法会直接修改原数组
*/
    arr.reverse();//333,222,111

/*
    sort()
        可以用来对数组进行排序
        也会影响原数组,默认会按照Unicode编码进行排序

        对纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序
        所以对数字进行排序时,可能会得到错误的结果

        我们可以自己来指定排序的规则
        我们可以再sort()添加一个回调函数,来指定排序规则
            回调函数中需要定义两个形参,    
            浏览器将会分别使用数组中的元素作为实参去调用回调函数
            使用哪个元素调用不确定,但是肯定的是再数组中a一定再b前边
        浏览器会根据回调函数的返回值来决定元素的顺序
        如果返回一个大于0的值,则元素会交换位置
        如果返回一个小于0的值,则元素位置不变
        如果返回一个等于0的值,则认为两个元素相等,也不交换位置
*/
arr = ["b","d","e","a","c"];

arr.sort();//a,b,c,d,e

arr = [5,4];
arr.sort(function(a,b){
    //前边的大
 /*  if(a>b){
     return 1;
    }else if(a < b){
        return -1;
    }else{
        return 0;
    }
*/ 
//简便方法
//升序排列
return a - b;
//降序排列
return b - a;
});

49.call和apply

/*
    call()和apply()
        这两个方法都是函数对象的方法,需要通过函数对象来调用
        当对函数调用call()和apply()都会调用函数执行
        在调用call和apply()可以将一个对象指定为第一个参数
        此时这个对象将会成为函数执行时的this
    call()方法可以将实参在对象之后依次传递
    apply()方法需要将实参封装到一个数组中统一传递

    this的情况
        1.以函数形式调用时,this永远都是window
        2.以方法的形式调用时,this时调用方法的对象
        3.以构造函数形式调用时,this时新创建的那个对象
        4.使用call和apply调用时,this是指定的那个对象
*/ 

function fun(a,b){
    
    }
fun.call(obj,2,3);
fun.apply(obj,[2,3]);

50._arguments

/*
    在调用函数时,浏览器每次都会传递进两个隐含的参数
        1.函数的上下文对象 this
        2.封装实参二点对象 arguments
            是一个类数组对象,也可以通过索引来操作数据,也可以获取长度
            在调用函数时,我们所传递的实参都会在arguments中保存
            arguments.length可以用来获取实参的长度
            我们即使不定义形参,也可以通过arguments来使用实参,
            只不过比较麻烦
            arguments[0]表示第一个实参
            arguments[1]表示第二个实参

        它里面有一个属性叫做callee
            这个属性对应一个函数对象,就是当前正在执行的函数的对象
*/ 
function fun(a,b){
console.log(arguments instanceof Array);
console.log(Array.isArray(arguments));
console.log(arguments[1]);
console.log(arguments.length);
console.log(arguments.callee == fun);
    
}
fun("hello",true);

51.Date对象

/*
Date对象
      在JS中使用Date对象来表示一个时间
*/ 
//创建一个对象
//如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间
var d = new Date();

//创建一个指定的时间对象
//需要在构造函数中传递一个表示时间的字符串作为参数
//日期的格式  月份/日/年时:分:秒
var d2 = new Date("12/03/2016 11:10:30");

/*
getDate()
    获取当前日期对象是几日
*/ 
var date = d.getDate();

/*
getDay()
获取当前日期对象是周几
会返回一个0-6的值
0表示周日
1表示周一
----
*/ 
var day = d.getDay();

/*
getMonth()
获取当前时间对象的月份
会返回要给0-11的值
0表示1月
11表示12月
*/ 
var month = d.getMonth();

/*
getFullYear()
    获取当前日期对象的年份
*/ 
var year = d.getFullYear();

/*
getTime()
    获取当前日期对象的时间戳
    从1970年1月1日到当前日期所花费的毫秒数(1秒 = 1000毫秒)
    计算机底层在保存时间时使用的都是时间戳
*/ 

//获取 当前时间戳
time = Date.now();

52.Math

/*
    Math
        Math和其他的对象不同,它不是一个构造函数
            它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法
    比如
    Math.PI 表示的圆周率

    abs()可以用来计算一个数的绝对值
    Math.ceil()
        可以对一个数进行向上取整,小数位只有有值就自动进1
    Math.floor()
        可以对一个数进行向下取整,小数部分会被去掉//1.1 1.5 1.6 就是1
    Math.round()
        可以对一个数进行四舍五入取整
    Math.random()
    可以用来生成一个0-1之间的随机数,不会出现0不会出现1
    生成一个0-10的随机数Math.random()*10
    Math.round(Math.random()*10)//生成0-10之间的随机数

    生成一个0-x之间的随机数
    Math.round(Math.random()*x)

    生成一个x-y之间的随机数
    Math.round(Math.random()*(y-x)+x)
*/

/*
    Math.max() 可以获取多个数中的最大值
    Math.min() 可以获取多个数中的最小值
*/

/*
    Math.pow(x,y)
    返回x的y次幂
    Math.sqrt()
    用于对一个数进行开方运算
*/

53.包装类,字符串的方法

/*
 基本数据类型
    String Number Boolean Null Undefined
 引用数据类型
    Object

    在JS中为我们提供了三个包装类,通过这三个包装可以将基本数据类型的数据转换为对象
    String()
    可以将基本数据类型字符串转换为String对象
    Number()
    可以将基本数据类型的数字转换为Number对象
    Boolean()
    可以将基本数据类型的布尔值转换为Boolean对象
    
但是注意,我们在实际应用中不会使用基本数据类型的对象,
    如果使用基本数据类型的对象,在做一些比较时,可能会带来一些不可预期的结果
*/
//创建一个Number类型的对象
var num = new Number(3);
num.hello = "abcdefg";//可以向对象添加属性

/*
方法和属性只能添加给对象,不能添加给基本数据类型
当我们对一些基本数据类型的值去调用属性和方法时,浏览器会临时使用包装类将其转换为对象,然后再调用对象的属性和方法
调用完以后,再将其转换为基本数据类型
*/

/*
在底层字符串是以字符数组的形式保存的 ["H","e","l","l","o"]
lenght可以用来获取字符串长度
charAt()可以返回字符串中指定位置的字符
        根据索引可以获取指定的字符
charCodeAt()获取指定位置字符的字符编码(Unicode编码)
String.formCharCode()可以根据字符编码获取字符
concat()可以用来连接两个或多个字符串,作用和+号一样
indexof()该方法可以检索一个字符串中是否会有指定内容,如果字符串中含有该内容,则会返回其第一次出现的索引。 如果没有找到指定的内容,则返回-1.
        可以指定一个第二个参数,指定开始查找的位置 str.indexof("h",1)从第一位还是向后找
lastIndexOf()该方法的用法和indexOf()一样,不同的是indexOf是从前向后找,它是从后向前找,也可以指定开始查找位置
slice()可以从字符串中截取指定的内容,不会影响原字符串,而是将截取到的内容返回。
        参数:
            第一个,开始位置的索引(包括开始位置)
            第二个,结束位置的索引(不包括结束位置)
                如果省略第二个参数,则会截取到后边的所有
            也可以传递一个负数作为参数,负数的话将会从后边计算
substring()可以用来截取一个字符串,和slice()类似
        参数:
            第一个,开始位置的索引(包括开始位置)
            第二个,结束位置的索引(不包括结束位置)
            不同的是这个方法不能接收负值作为参数,如果传递了一个负值则默认使用0
            而且他会自动调整参数的位置,如果第二个参数小于第一个,则自动交换
split()
        可以将一个字符串拆分为一个数组
        参数:
            需要一个字符串作为参数,将会根据该字符串去拆分数组  str.split(",");
            如果传递一个空串作为参数,则会将每个字符都拆分为数组元素。
toUpperCase()可以将字符串转换为大写并返回  会影响原字符串
toLowerCase()可以将字符串转换为小写并返回  会影响原字符串
*/
str = "11111";
result = str.concat("222");
result = str.slice(1,4);

54.正则表达式

/*
    正则表达式
        admin
        admin@atguigu.com
    正则表达式用于定义一些字符串的规则,
        计算机可以根据正则表达式,来检查一个字符串是否符合规则
        获取将字符串中符合规则的内容提取出来
*/

//创建正则表达式的对象
/*
语法:
var 变量 = new RegExp("正则表达式","匹配模式");
在构造函数中可以传递一个匹配模式作为第二个参数
    可以是
        i 忽略大小写
        g 全局匹配模式
*/
var reg = new RegExp(“a”);//这个正则表达式检查一个字符串是否含有a
var str = "abvcdf";
/*
正则表达式的方法:
test()
    使用这个方法可以用来检查一个字符串是否符合正则表达式的规则
        如果符合则返回true,否则返回false
*/
var result = reg.test(str);//true

55.正则语法

/*
    使用字面量来创建正则表达式
    语法: var 变量 = /正则表达式/匹配模式
*/

var reg = new RegExp("a","i");
reg = /a/i;   //跟上面作用一样

//创建一个正则表达式,检查一个字符串中是否有a或b
/*
使用|表示或者的意思
*/
reg = /a|b/;


/*
创建一个正则表达式检查一个字符串中是否有字母
[]里的内容也是或的关系 [ab] == a|b
[a-z] 任意小写字母
[A-Z] 任意大写字母
[A-z] 任意字母
*/
reg = /[a-z]/;

/*
检查一个字符串中是否含有abc或adc或aec
*/
reg = /a[bde]c/;

/*
[^ ]除了
*/
reg = /[^ab]/;//除了ab以外

56.字符串和正则的相关方法

var str = "1224b4214213nff";
/*
    split()
        可以将一个字符串拆分为一个数组
        方法中可以传递一个正则表达式作为参数,这样方法将会根据正则表达式去拆分字符串
        这个方法即使不指定全局匹配,也会全部拆分
*/

/*
根据任意字母来将字符串拆分
*/
var result = str.split(/[A-z]/);


/*
search()
可以搜索字符串中是否含有指定内容
如果所有到指定内容,则会返回第一次出现的索引,如果没有搜索到返回-1
它可以接收一个正则表达式作为参数,然后会根据正则表达式去检索字符串
search()只会查找第一个,即使设置全局匹配也没有用
*/
str = "hello 123  abc ";
result = str.search("abcd");//返回索引

/*
搜索字符串中是否含有abc  或aec 或afc
使用正则
*/
result = str.search(/a[bef]c/);



/*
match()
    可以根据正则表达式,从一个字符串中将符合条件的内容提取出来
    默认情况下我们的match只会找到第一个符合要求的内容,找到以后就停止检索
        我们可以设置正则表达式为全局匹配模式,这样就是匹配所有的内容
        可以为一个正则表达式设置多个匹配模式,且顺序无所谓  ig  gi
    match()会将匹配的内容封装到一个数组中返回,即使只查询到一个结果
*/
str = "1fiejdo344523der312";
result = str.match(/[A-z]/g);


/*
replace()
可以将字符串中指定内容替换为新的内容
参数:
    1.被替换的内容,可以接收一个正则表达式作为参数
    2.新的内容
    默认只会替换第一个 可以通过g全局等
*/
result = str.replace(/e/,"Q-Q");

57.正则表达式语法

/*
创建一个正则表达式检查一个字符串是否含有aaa
*/
/*
量词
    通过量词可以设置一个内容出现的次数
    量词只对它前边的一个内容起作用,可以对想要检查的内容添加括号。
    {n}正好出现n次
    {m,n}出现m-n次
    {m,}m次以上
    + 表示至少一个,相当于{1,}
    * 表示0个或多个,相当于{0,}
    ? 表示0个或1个  相当于{0,1}
*/
var str = "aaacdsdsw";
var reg = /a{3}/;
var reg = /(abcd){3}/;
var reg = /ab{1,3}c/;//abc  abbc  abbbbbc(false);


/*
检查一个字符串中是否以a开头
^ 表示开头
$ 表示结尾
*/

reg = /^a/;
reg = /a$/;
reg = /^a$/;//如果在一个正则表达式中同时使用^$,则要求字符串完全符合正则表达式。  只有a是对的


/*
创建一个正则表达式,用来检查一个字符串是否是一个手机号
手机号的规则:
        11位
    第一个位 以1开头  ^1
    第二位 不能是0,1,2  [3-9]
    三位以后任意数字9个  [0-9]{9}$
    
*/

reg = /^1[3-9][0-9]{9}$/;
/*
检查一个字符串中是否含有.
.表示任意字符
在正则表达式中使用\作为转义字符
\.来表示.
\\ 才表示一个\

注意 : 使用构造函数时,由于它的参数是一个字符串,而\时字符串中转义字符
        如果要使用\则需要使用\\来代替
*/
var reg = /\./;

reg = new RegExp("\\.");


/*
\w
    任意字母,数字,_  相当于[A-z0-9_]
\W
    除了字母,数字,_  相当于[^A-z0-9_]   中括号里面的^表示除了
\d
    任意数字 [0-9]
\D
    除了数字 [^0-9]
\s
    空格
\S
    除了空格
\b
    单词边界
\B
    除了单词边界
*/

/*
   创建一个正则表达式检查一个字符串中是否含有单词child
*/

reg = /\bchild\b/ // 必须是一个child  前后不挨着任何单词  achild不行  children不行  child行

//去除字符串中的空格
var str = "          hello           ";
//去除空格使用“”来替换
str = str.replace(/\s/g,"");//万一是  he    llo   中间的空格也会去掉
//去掉开头的空格 /^\s*/,""
//去掉结尾的空格  /\s*$/,""
str = str.replace(/^\s*|\s*$/g,"");//匹配开头结尾空格去掉

58.DOM

/*
什么是DOM
DOM,全名Document Object Model 文档对象模型
JS通过DOM来对HTML文档进行操作,只要理解了DOM就可以随心所欲操作WEB页面
文档
文档表示的就是整个的HTML页面文档、
对象
对象表示将网页中的每一个部分都转换为了一个对象
模型
使用模型来表示对象之间的关系,这样方便我们获取对象
*/
/*
节点
节点:Node--构成HTML文档的最基本的单元
常用节点分为四类
文档节点:整个HTML文档
元素节点:HTML文档中的HTML标签
属性节点:元素的属性
文本节点:HTML标签中的文本内容
*/


<button id="btn">anniu</button>
<script type="text/javascript>
/*
浏览器已经为我们提供文档节点  这个对象是window的属性
可以在页面中直接使用,文档节点代表的整个网页
*/
//获取到button对象
var btn = document.getElementById("btn");
//修改按钮的文字
btn.innerHtML = "1111";
</script>

59.事件

/*
事件,就是用户和浏览器之间的交互行为
比如:点击按钮,鼠标移动。。。。

我们可以在事件对应得属性中设置一些js代码
这样当事件被触发时,这些代码将会执行
*/

60.文档的加载

/*
浏览器在加载一个页面时,是按照自上向下的顺序加载的
读取到一行就运行一行,如果将script标签写到页面的上边
在代码执行时,页面还没有加载,DOM对象也没有加载
无法获取DOM对象
*/

/*
onload事件会在整个页面加载完成之后才触发
为window绑定一个onload事件
    该事件对应的响应函数将会在页面加载完成之后执行
    这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
    window.onload = function(){}
*/

61.DOM查询

获取元素节点
通过document对象调用
1.getElementById()
通过id属性获取一个元素节点对象
2.getElementsByTagName()
通过标签名获取一组元素节点对象
3.getElementsByName()
通过name属性获取一组元素节点对象

通过具体的元素节点调用
1.getElementsByTagName()
方法,返回当前节点的指定标签名后代节点
2.childNodes
属性,表示当前节点的所有子节点
会获取包括文本节点在内的所有节点,根据DOM标签标签间的空白也会当成文本节点
注意:在IE8及以下的浏览器中,不会将空白文本当成子节点,所以该属性在IE8中会返回4哥子元素而其他浏览器是9个
children属性可以获取当前元素的所有子元素
3.firstChild
属性,表示当前节点的第一个子节点(包括空白文本节点)
firstElementChild获取当前元素的第一个元素,不支持IE8及以下的浏览器,如果需要兼容他们尽量不要使用
4.lastChild
属性,表示当前节点的最后一个子节点


获取父节点和兄弟节点
通过具体的节点调用
1.parentNode
属性:表示当前节点的父节点
2.previousSibling
属性,表示当前节点的前一个兄弟节点
3.nextSibling
属性,表示当前节点的后一个兄弟节点

/*
innerText该属性可以获取到元素内部的文本内容
它和innerHTML类似,不同的是它会自动将html去除

document.createElement()
可以用于创建一个元素节点对象,
它需要一个标签名作为参数,将会根据该标签名创建元素节点对象
并将创建好的对象作为返回值返回

document.createTextNode()
可以用来创建一个文本节点对象
需要一个文本内容作为参数,将会根据该内容创建文本节点,并将新的节点返回

appendChild()
向一个父节点中添加一个新的子节点
用法:父节点.appendChild(子节点);
insertBefore()
可以在指定的子节点前插入新的子节点
语法:
父节点.insertBefore(新节点,旧节点);

removeChild()
可以删除一个子节点
语法:父节点.removeChild(子节点);

子节点.parentNode.removeChild(子节点);

使用innerHTML也可以完成DOM的增删改的相关操作
一般我们会两种方式结合使用
*/


62.操作内联样式

/*
通过JS修改元素的样式:
语法:
元素.style.样式名 = 样式值
box.style.width = "300px";
注意:如果CSS的样式名中含有-
这种名称在JS中是不合法的比如:background-color
需要将这种样式名修改为驼峰命名法
去掉-,然后将-后的字母大写

我们通过style属性设置的样式都是内联样式,
而内联样式有较高的优先级,所以通过JS修改的样式往往会立即显示

但是如果在样式中写了!important,则此时样式会有最高的优先级,
即使通过JS也布恩那个覆盖该样式,此时将会导致JS修改样式失效
所以尽量不要为样式添加!important

通过style属性设置和读取的都是内联样式
无法读取样式表中的样式   box.style.width
*/


/*
获取元素的当前显示的样式
语法:元素.currentStyle.样式名
它可以用来读取当前元素正在显示的样式 
如果当前元素没有该样式,则获取他的默认值
currentStyle只有IE浏览器支持,其他的不行

其他浏览器中可以使用
getComputerStyle()这个方法来获取元素当前的样式
这个方法是window的方法,可以直接使用
需要两个参数
    第一个:要获取样式的元素
    第二个:可以传递一个伪元素 ,一般都是null
 getComputerStyle(box,null);
该方法会返回一个对象,对象中封装了当前元素对应的样式
    可以通过  对象.样式名  来读取样式
 如果获取的样式没有设置,则会获取到真实的值,而不是默认值
比如,没有设置width,他不会获取到auto,而是一个长度
*/
/*
clientWidth
clientHeight
这两个属性可以获取元素的可见宽度和高度
这些属性都是不带px的,返回都是一个数字,可以直接进行计算
会获取元素宽度和高度,包括内容区和内边距
这些属性都是只读的,不能修改
*/

/*
offsetWidth
offsetHeight
获取元素的整个的宽度和高度,包括内容区,内边距和边框
offsetParent
可以用来获取当前元素的定位父元素
会获取到离当前元素最近的开启了定位的祖先元素
    如果所有的祖先元素都没有开启定位,则返回body
offsetLeft
当前元素相对于其定位元素的水平偏移量
offsetTop
当前元素相对于其定位元素的垂直偏移量
*/

/*
scrollWidth
scrollHeight
可以获取元素整个滚动区域的宽度和高度
scrollLeft
获取水平滚动条滚动的距离
scrollTop
获取垂直滚动条滚动的距离

当满足scrollHeight - scrollTop == clientHeight
说明垂直滚动条滚动到底了

当满足scrollWidth - scrollLeft == clientWidth
说明水平滚动条滚动到底
*/

/*
当垂直滚动条滚动到底时使表单项可用
onscroll
该事件会在元素的滚动条滚动时触发
*/

63.事件对象

/*
onmousemove
该时间啊将会在鼠标在元素中移动时被触发

    事件对象:
        当事件的响应函数被触发时,浏览器每次都会将一个事件对象作为实参传递进响应函数
            在事件对象中封装了当前事件相关的一切信息,比如,鼠标的坐标 键盘哪个按键被按下,鼠标滚轮滚动的方向。。。
*/
areaDIv.onmousemove = function(event){
/*
clientX可以获取鼠标指针的水平坐标
clientY可以获取鼠标指针的垂直坐标
var x = event.clientX;
*/
}

64.事件冒泡

/*
事件的冒泡(Bubble)
所谓的冒泡指的就是事件的向上传导,当后代元素上的事件被触发时,其祖先元素的相同事件也会被触发
在开发中,大部分情况 冒泡都是非常有用的,如果不希望发生事件冒泡可以通过事件对象来取消冒泡
可以将事件对象的cancelBubble设置为true,即可取消冒泡
event.cancelBubble = true;
*/

65.事件的委派

/*
事件的委派
指将事件统一绑定给元素的共同的祖先元素,这样当后代元素上的事件被触发时,会一直冒泡到祖先元素
从而通过祖先元素的响应函数来处理事件
    事件委派是利用了冒泡,通过委派可以减少事件绑定的次数,提高程序的性能。
*/

66.事件的绑定

/*addEventListener()
    通过这个方法也可以为元素怒绑定响应函数
    参数:
        1.事件的字符串,不是on
        2.回调函数,当事件触发时该函数会被调用
        3.是否在捕获阶段触发事件,需要一个布尔值,一般都传false

使用addEventListener()可以同时为一个元素的相同事件同时绑定多个响应函数,
这样当事件被触发时,响应函数将会被按照函数的绑定顺序执行

attachEvent()
在IE8中可以使用attachEvent()来绑定事件
参数:
1.事件的字符串,要on
2.回调函数

这个方法也可以同时一个事件绑定多个处理函数
不同的是它是后绑定先执行,执行顺序和addEventListener()相反


addEventListener() 中的this,是绑定事件的对象
attachEvent()中的this,是window需要统一两个方法this


*/

67.事件传播

/*
事件的传播

W3C综合了两个微软和网景的方案,将事件传播分成了三个阶段
1.捕获阶段
    在捕获阶段时从最外层的祖先元素,向目标元素进行事件的捕获,但是默认此时不会触发事件
2.目标阶段
    事件捕获到目标元素,捕获结束开始在目标元素上触发事件
3.冒泡阶段
    事件从目标元素向他的祖先元素传递,依次触发祖先元素上的事件
*/

68.BOM

/*
BOM
浏览器对象模型
BOM可以使我们通过JS来操作浏览器
在BOM中为我们提供了一组对象,用来完成对浏览器的操作
BOM对象
Window
    代表的整个浏览器窗口,同时window也是网页中的全局对象
Nacigator
    代表的当前浏览器的信息,通过该对象可以来识别不同的浏览器
Location
    代表当前浏览器的地址栏信息,通过Location可以获取地址栏信息,或者操作浏览器跳转页面
History
    代表浏览器的历史记录,可以通过对象来操作浏览器的历史记录
    由于隐私的原因,改对象不能获取到具体的历史记录,只能操作浏览器向前或向后翻页
    而且该操作只在档次访问时有效
Screen
    代表用户的屏幕的信息,通过该对象可以获取到用户的显示器的相关的信息


这些BOM对象在浏览器中都是作为window对象的属性保存的,
可以通过window对象来使用,也可以直接使用
    
*/



/*
Navigator
代表的当前浏览器的信息,通过该对象来识别不同的浏览器
navigator.appName
由于历史原因,Navgator对象中的大部分属性都已经不能帮助我们识别浏览器了。
一般我们只会使用userAgent来判断浏览器的信息
userAgent是一个字符串,这个字符串中包含有用来表述浏览器信息的内容
不同的浏览器会有不同的userAgent

如果通过UserAgent不能判断,还可以通过一些浏览器中特有的对象,来判断浏览器的信息
比如,ActiveXObject
*/

69.History

/*
History
对象可以用来操作浏览器向前或向后翻页
length
属性,可以获取到当前访问的连接数量
*/、

/*
back()
可以用来回退到上一个页面,作用和浏览器的回退按钮一样

foeward()
可以跳转到下一个页面,作用和浏览器的前进按钮一样

go()
可以用来跳转到指定页面
它需要一个整数作为参数
1, 表示向前跳转一个页面
2, 表示向前跳转两个
-1  向后跳转一个
-2  向后跳转两个
*/

70.Location

/*
Loaction
该对象中封装了浏览器的地址栏的信息

assign()
用来跳转到其他的页面,作用和直接修改location一样
location.assign(http://....);

reload()
用于重新加载当前页面,作用和刷新按钮一样
如果方法中传递一个true,作为参数,则会强制清空刷新页面

replace()
可以使用一个新的页面替换当前页面,调用完毕也会跳转页面
不会生成历史记录,不能使用回退按钮回退
*/

71.定时器

/*
setInterval()
定时调用
可以将一个函数,每隔一段时间执行一次
参数:
    1.回调函数,该函数会每隔一段时间被调用一次
    2.每次调用间隔得时间,单位是毫秒

返回值:
返回一个Number类型得数据
这个数字用来作为定时器得唯一标识
*/
var num = 1;
var timer = setInterval(function(){
count.interHTML = num++;
if(num == 11){
clearInterval(timer);
}
},500);

/*
clearInterval()可以用来关闭一个定时器
方法中需要一个定时器得标识作为参数,这样将关闭标识对应得定时器
*/
//clearInterval(timer);

72.类的操作

/*
toggleClass可以用来切换一个类
如果元素中具有该类,则删除
如果元素中没有该类,则添加
*/
function toggleClass(obj,cn){
if(hasClass(obj,cn){
removeClass(obj,cn);
}else{
addClass(obj,cn);
})
}

73.JSON

/*
JSON
JS中的对象只有JS自己认识,其他的语言都不认识
JSON就是一个特殊格式的字符串,这个字符串可以被任意的语言所识别
并且可以转换为任意语言中的对象,JSON再开发中主要用来数据的交互
JSON
    JavaScript Object Notation JS对象表示法
    JSON和JS对象的格式一样,只不过JSON字符串中的属性名必须加双引号
    其他的和JS语法一致
JSON分类:
1.对象{}
2.数组[]
JSON中允许的值:
1.字符串
2.数值
3.布尔值
4.null
5.对象
6.数组


json-->js对象
JSON.parse()
    可以将以JSON字符串转换为js对象
    它需要一个JSON字符串作为参数,会将该字符串转换为JS对象

js-->json对象
JSON.stringify()
    可以将一个JS对象转换为JSON字符串
    需要一个js对象作为参数,会返回一个JSON字符串

eval()
这个函数可以用来执行一段字符串形式的JS代码,并将执行结果返回
如果使用eval()执行的字符串中含有{},它会将{}当成代码块
如果不希望将其当成代码块解析,则需要再字符串前后各加一个()

eval()这个函数的功能很强大,可以直接执行一个字符串中的js代码
但是再开发中尽量不要使用,首先它的执行性能比较差,然后他还具有安全隐患
*/

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值