javascript基础学习

js和其他的语言很像，很多的操作都是一样的，比如数值的运算符、循环的控制等，这些基础的语法知识就不再赘述了，本文着重是对比较重要的知识点进行总结，尤其是关于对象和数组这块的处理，因为对于前端来说，大多数数据不是对象(json)就是数组，所以掌握其中的一些api会事半功倍。

一、数据类型

虽然说定义变量都是var，但是其实是分为几种类型的，下面我们来看看。

<script>
     var a = 1;
     var b = 'hello';
     var c = true;
     var d;
     var e = alert;
     var f = null;
    
     /*基本数据类型*/
     console.log(typeof a);
     console.log(typeof b);
     console.log(typeof c);
     console.log(typeof d);
     console.log(typeof e);
     console.log(typeof f);
</script>

我们看到，可以用typeof来查看每个变量的类型，它们是：

二、无限大

<script>
    /*无限大以及NAN*/
    console.log(Number.MAX_VALUE);
    console.log(Number.MAX_VALUE*3);
    console.log(Number.MAX_VALUE*3*0);
    console.log(Number.MAX_VALUE/0);
    console.log(Number.MAX_VALUE*Number.MAX_VALUE);
    console.log(3/0);
</script>

执行的结果是：

我们看到，无穷与0想成则为NAN，就是说它也不知道这到底是啥玩意，其他的基本都是表示无限大的Infinity

三、函数参数问题

在我们比较熟悉的静态语言比如C，C++以及Java中，调用函数的话，参数一定要明确，否则会出错。比如一个函数明明没有任何形参，但是你调用的时候硬生生地传递几个参数进去，那么编译的时候就会报错。但是js中是不会的。一个函数可以定义为无参，但是调用的时候，你可以添加几个参数进去，所以是动态的。

<script>
    //可以没有形式参数
     function add(){
         console.log(arguments.length);
         var sum = 0;
         for(var i=0;i<arguments.length;i++){
             sum += arguments[i];
         }
         return sum;
     }
    
     var a = 2;
     var b = 3;
     console.log(add(a,b));
</script>

所以上面这个程序是可以正常执行的。

四、作用域问题

如果是一个局部变量，那么在外面正常情况下是无法访问到的，比如：

<script>
    //作用域
     function f() {
         if(true){
             var a = 3;
         }
     }
     console.log(a);//error
</script>

这里的a就无法在函数外面访问到，因为这个a是函数f的内部局部变量，外面的只能访问全局变量。这也符合我们其他语言的规范，但是这里要注意，定义在if,while以及for代码块中的局部变量我们依然可以在外面访问到：

<script>
     if(true){
         var a = 3;
     }
     console.log(a);//ok
</script>

五、数组如何定义

数组是一种引用类型。

<script>
    var arr = [1,2,3];
    if(arr instanceof Array){
        alert("arr 是数组");
    }
</script>

在对于传入的参数不清楚的情况下，我们可以先判断一下类型是不是符合我们的要求，这可以提高程序的健壮性，就像先判断是否为空再操作的原则。

六、定义一个对象

<script>
    //第一种 new Object
    var person = new Object();
    person.name = "fossi";
    person.age = 20;
    console.log(person);
</script>

这跟java中定义形式几乎一样，访问它的属性也一样，就是person.name即可。

还有一种比较常用的定义对象的方式：

<script>
    //第二种 new Object
    var person = {"name":"fossi",
                  "age":20,
                  "fun":function () {
                     alert("i am a person");
        }};
    console.log(person);
    person.fun();
    console.log(person["age"]);
</script>

注意，一个函数也可以作为它的成员变量，类似于java中的成员方法。

七、数组打印

数组非常重要，掌握数组常用的技巧将事半功倍。

<script>
    //opeartion of array
    var colors = ["red","yellow","blue"];
    colors[8] = "pink";
    console.log(colors);
    console.log(colors.toString());
    console.log(colors.valueOf());
    console.log(colors.toLocaleString());
    console.log(colors.join("|"));
</script>

这几个基本都是以不同的形式打印出数组来，最后一个是指用|来拼接数组元素再打印。

八、数组实现栈以及队列

数组可以直接用push和pop实现栈的功能。

<script>
    //stack
    var stack = new Array();
    stack.push("fossi");
    stack.push("vainda");
    stack.push("xiaoxu");
    console.log(stack.pop());
    console.log(stack.pop());
    console.log(stack.pop());
    console.log(stack.pop());
</script>

打印结果也显而易见：

下面再用数组来模拟队列，shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值，也是非常简单的。

<script>
    //queue push+shift or unshift+pop
    var queue = new Array();
    queue.push("fossi");
    queue.push("vainda");
    queue.push("xiaoxu");
    console.log(queue.shift());
    console.log(queue.shift());
    console.log(queue.shift());
    console.log(queue.shift());
</script>

打印结果也显而易见：

九、数组的拼接和删除

<script>
    var colors = ["red","yellow","blue","pink"];
    
    //1.后面拼接一个元素进去
    console.log(colors.concat("green"));
    
    //2.从0号开始删除一个元素
    colors.splice(0,1);
    console.log(colors);
    
    //3.从2号元素开始删除一个元素,再插入两个新元素
    colors.splice(2,1,"black","white");
    console.log(colors);
    
    //4.根据元素获取下标索引
    console.log(colors.indexOf("yellow"));
    console.log(colors.lastIndexOf("yellow"));//不存在则返回-1
    
    //5.遍历数组
    colors.forEach(function (item,index,array) {
        console.log(item);
        console.log(index);
        console.log(array);
    });
</script>

关于第5个，每个参数都是啥呢？

十、数组的高级操作

<script>
    var num = [1,4,2,6,8,3,1];
    
    //全部都要满足条件，有一个不满足就返回false
    var flag = num.every(function (item,index,array) {
        //每一个item都必须小于4才返回true，否则返回false
        return num < 4;
    });
    console.log(flag);
    
    //只要有一个满足条件即可，也是返回true或者false
    var num = [1,4,2,6,8,3,1];
    var res = num.some(function (item) {
         //只要有一个满足条件即可
        return item < 4;
    });
    console.log(res);
    
    //过滤出符合条件的值
    var num = [1,4,2,6,8,3,1];
    var res = num.filter(function (item) {
        return item > 4;
    });
    console.log(res);
    
    //对每一个元素进行同样的操作
    var num = [1,4,2,6,8,3,1];
    var res = num.map(function (item) {
        return item*2;
    });
    console.log(res);
    
    //对元素进行统计
    var num = [1,4,2,6,8,3,1];
    var sum = num.reduce(function (pre,curr,index,array) {
        return pre+curr;
    });
    console.log(sum);
</script>

前面的几个都比较好理解，最后两个可能比较抽象一点。其实这个在大数据中式比较常用的概念，比较典型的就是MapReduce这个组件，其实就是两个过程，一个是map一个是reduce，前者是对每个值进行相应的操作，后者是对这些处理完的值进行合并。从而达到一些数据统计的目的。比如这里，我对每个值简单乘以2，那么数组就变为[2,8,4,12,16,6,2]；下面一个实现的是求和功能，算出来是25.还可以进行很多的操作。

ok，后续其他的再学习，且记录到这里。