js基础之语言部分必须要掌握的五大方阵

javascript基础部分可以从"数组, 函数, 作用域, 对象, 标准库"这5大方阵进行学习:

(一).数组

数组的声明(2种):;

a,自变量声明 var a = ['a','b'];

b,内置构造函数声明 var b = new Array();

1. 获取数组中最大值：

       1.定义一个函数假设这个变量中的值是最大的

       2.遍历数组

       3.判断如果最大值小于数组中的值,那就输出数组中的值( 数组中的最大值 )

 

循环数组:

1,for循环

2.for in循环

3.Array.forEach()循环

(二).函数

1. 函数的声明：

       1.关键字声明

              function a(){}

       2.表达式声明

              var a = function(){}

       3.内置构造函数声明( 几乎不用,了解 )

              new Function(){}

 

    function 函数名(){

        //函数体

    }

函数声明的时候,函数体并不会执行,只要当函数被调用的时候才会执行. 

2. 函数的调用：

       函数名();

函数可以进行多次调用

    //求1----100之间的数的和
    function getSum(){
        var sum = 0;
        for(var i=0;i<=100; i++){
            sum += i;
        }
        console.log(sum);
    }
    getSum();   //5050
    getSum();   //5050
    getSum();   //5050

 

3. 函数的返回值：

       函数名();

当函数执行完的时候 , 并不是所有函数都需要打印 . 我们期望函数给 我们一些反馈( 比如计算的结果返回进行后续的运算 ) , 这个时候可以让函数返回一些东西,  也就是返回值. 函数通过return返回一个值.

返回值语法:

    //返回值语法
    function 函数名(形参1,形参2,形参3...){
        //函数体
        return 返回值;
    }
    //可以通过变量来接收这个返回值
    var 变量 = 函数名(实参1,实参2,实参3);

返回值详解:

函数有返回,紧跟在return后面的就是函数的返回值.

return语句后面的所有内容全部不执行, 多个return只能有一个起作用.

return后面没有值, 返回undefined 

 

4. 匿名函数和自调用函数：

自调用匿名函数,可以封装作用域.

    //自调用匿名函数
    (function (){
        console.log(1);
    })(); 

将函数作为返回值来使用 ( 闭包 )

    function f1(){
        var h =  function(){
            console.log('11111');
        }
        //将函数作为返回值来使用
        return h;
    }
    var k = f1();

   k();            //11111

把函数当做值传递回去( 回调函数 )

    function f1(k){
        k();
    }
    function f2(){
        console.log(222);
    }
    //将函数当做实参进行传递
    f1(f2);         //222

 

(三).作用域与JS代码的运行

1. 变量提升

变量提升

定义变量的时候, 变量的声明会被提升到作用域的最上面, 变量的赋值不会提升.

函数提升

js解析器首先会把当前作用域的函数声明提前到整个作用域的最前面

 

2. JS代码的运行

代码的运行分为两个阶段:

1.编译阶段:

         语法检查  变量及桉树的声明

2.代码的执行阶段

    function f(){
        console.log(a);
        var a = 1;
    }
    f();        //undefined

上述代码等于下面的代码

    function f(){
        var a;
        console.log(a);
        a = 1;
    }
    f();        //undefined

先提升变量, 后提升函数,所以变量和函数名不要重复.

 

这个案例和上一个一样,  和第一行var n = 10;没有关系

    var n = 10;
    fn();
    function fn(){
        console.log(n); //undefined
        var n = 20;
    }

 

3. 词法作用域

    var n = 1;
    function f(){
        console.log(n);
    }
    f();                //1

    function f(){
        var n =2;
    }
    f();
    console.log(n);         // n is not defined

 

在js中,有两个作用域;

1.全局作用域;

       变量在全局作用域中,就被称为全局变量.

2.局部作用域;

       变量在局部作用域中,就称为局部变量.

局部作用中可以访问全局作用域中的数据,

全局作用域中不能访问局部作用域中的数据.

 

4. 作用域链

   //作用域链
    var n = 0;
    function f1(){
        var n = 1;
        function f2(){
            var n = 2;
            function f3(){
                var n = 3;
                console.log(n);     //3
            }
            f3();
        }
        f2();
    }
    f1();

 

当子函数要使用某个变量时,子函数内部没有这个变量自动向父级函数查找,父级没有就向爷爷级查找,如果没有就继续想上级查找,直到找到全局作用域;查找过程中 如果找到了变量,就会 停止向上级查找的过程.

 

 

(四).对象

1. 对象的声明

字面量方式创建对象

    //字面量方式创建对象
    var obj = {
        name:'熊大',
        age:18,
        f:function(){
            console.log('熊大最帅!');
        }
    };

自定义构造函数获取对象

    //自定义构造函数获取对象
    function f(name,age,job){
        this.name = name;
        this.age = age;
        this.job = job;
        this.sayHi = function(){
            console.log('Hello,everyBody');
        }
    }
    var p1 = new Person('马录',18,'leader');

内置够赞函数创建对象

    // 内置够赞函数创建对象
    var person = new Object();
    person.name = 'lisi';
    person.age = 35;
    person.sayHi = function(){
        console.log('Hello,everyBody');
    }

 

2. this( 大工程啊 后期详细总结 )

函数如果在某个对象下,this就指向这个对象

函数如果直接调用,this指向windows对象

 

 

3. 对象的使用

 

对象.方法名();             //调用对象的方法

 

对象.属性;                   //获取对象的属性

 

 

对对象进行循环

    //for......in
    var obj = {
        n1:'刘能',
        n2:'刘英',
        n3:'刘明',
    };

    for(var k in obj){
        // console.log(k);      //n1,n2,n3
        console.log(obj[k]);    //刘能,刘英,刘明
    }

 

(五).标准库对象( 内置对象 )

1. Math对象

Math.ceil();                       //向上取整

Math.floor();                    //向下取整

Math.abs();                       //取绝对值

Math.max ();                    //最大值

Math.min();                      //最小值

Math.pow();                     //n次方

Math.sqrt();                      //返回平方根

 

随机数公式:   Math.random() * ( max-min ) + min;

案例: 背景颜色随机变换

    var p = document.getElementById('p');
    var a = Math.floor(Math.random()*(256-0)+0)+',';
    a+= Math.floor(Math.random()*(256-0)+0)+',';
    a+= Math.floor(Math.random()*(256-0)+0);
    p.style.background = 'rgb('+a+')';

 

2. Date对象

getFullYear()            //年

getMonth()              //月,+1

getDate()                           //日

getHours()                //时

getMinutes()            //分

getSeconds()            //秒

date.getDay()          //一周中的某一天

date.getTime()        //时间戳

    var d = new Date();
    var ymd = d.getFullYear()+'-'+(d.getMonth()+1)+'-'+d.getDate();
    var hms = d.getHours()+':'+d.getMinutes()+':'+d.getSeconds();
    console.log(ymd+ '  ' +hms);

 

3. 数组对象

arr.push()                   //数组末端添加一个元素

arr.pop()                    //删除数组最后一个元素

arr.slice()                    //从0开始,第2个元素结束

arr.concat()                //用于连接两个或多个数组

arr.join()                            //返回一个包含数组中所有元素的一个字符串

arr.reverse()               //颠倒数组中元素的顺序

arr.sort()                     //对数组排序

arr.toString()                     //把数组转化为字符串

arr.valueOf()                     //返回数组的原始值, 也就是整个数组

 

4. 字符串String类

length()              //返回字符串的长度

indexOfb()          //返回参数在字符串中的索引下标, 默认从0开始

substr(a,b)          //指定长度截取,a从哪里开始截取,b截取多个字符

replace(str1, str2)            //使用str2替换字符串中的str1

toLowerCase()                  //转小写

toUpperCase()                 //转大写

str.trim()                                   //去除字符串前后的空白

str.concat()                       //用于拼接字符串

str.split()                           //把字符串分割成数组的形式返回

str.substring( start,end )        //从start开始,截取到end位置,end取不到

str.substr(start,length)           //从start开始,截取length长度个字符串,默认截取到最后