听飞狐聊JavaScript设计模式系列01

前言

大家好，小弟飞狐，爱学习，爱装逼，乐于分享，初来乍到，请多多关照(～ o ～)~zZ。出道几年，对JavaScript情有独钟，聊技术之前，啰嗦啰嗦，虽然咱们都系程序猿，但是一定要多锻炼，跑跑步，爬爬山虾米的，身体系革命的本钱。

另外，个人觉得JavaScript是很文艺的一门语言，文艺范儿会更适合这门语言（个人观点，不喜勿喷），JS基础学习资料在网上非常多，所以我们这里从JS面向对象开始（注：需要一（zha）定（shi）的JS基础），本系列作为JavaScript扩展读物（有讲错的地方，欢迎大家指出），又扯了这么多，这回真的来进入正题了：

JS数据类型介绍

• ECMAScript的数据类型值分为基本类型值和引用类型值。

• 用typeof操作符来判断类型，当然如何准确判断类型，后面还会聊到。

• Function特别注意一下，函数在ECMAScript中是对象，不是一种数据类型，这可是JS世界的一等公民。

• undefined和null，null和object的关系又很暧昧，后面细说，要不然会晕菜。

• 基本数据类型:Undefined，Null，Boolean，Number，String，这五种基本数据类型是按值访问的。

    var o;            // undefined表示变量声明了，却没有赋值
    var o=null;        // null表示空值
    var o="字符串";    // string字符串
    var o=false;    // boolean布尔值包括true，false
    var o=1;        // number，可以是整数和小数
    var o=NaN        // 非数字

JavaScript是弱类型语言，存在丢失精度问题，本系列以面向对象为主，所以不讨论此问题；

JS引用类型介绍

• 包括：Object类型，Array类型，Date类型，RegExp类型，

• Function类型，需要特别注意一下，函数在ECMAScript中是对象，不是一种数据类型，每个函数都是Function类型的实例，函数名是指向函数对象的指针，这可是JS世界的一等公民

• 基本包装类型，ECMAScript提供了三个特殊的引用类型，主要为了便于操作基本类型的值，包括：

  1. Boolean

  2. Number

  3. String

• 单体内置对象，包括：

  1. Global对象，这是个无形的对象，

  2. Math对象，这是用来做各种数学运算的内置对象

• 引用类型的值是保存在内存中的对象，也就是说，在操作对象时，实际上是在操作对象的引用，而不是实际的对象

    var o=[1,2,3];        // Array
    var o=new Date();    // Date
    var o={};            // Object

讲类型就是基本的一个过渡介绍，Object和Function后面还会细讲，其余的类型可以根据上面列出的，具体的去参考书籍（推荐JavaScript高级程序设计）或其他资料，正题开始，先来个预热篇，吼吼~~

ECMAScript5数组的新特性

作为预热篇，我们先来聊聊，ECMAScript5中数组的新特性，个人做了如下区分：

• 位置方法：indexOf，lastIndexOf

• 迭代方法：every，filter，forEach，some，map

• 缩小方法：reduce，reduceRight

(注：迭代方法回调支持3个参数，第1个是遍历的数组内容；第2个是对应的数组索引，第3个是数组本身)

来吧，每个方法都过一遍，敲敲代码：

indexOf

包含两个参数，第一个是要检索的字符串值，第二个是可选参数，表示开始检索的位置，注：必须是合法值(0,length-1);返回值是该字符串首次出现的位置，找不到则返回-1；

    var arr = ["卫士",3,5,"皮带",8,6,"包裹"];
    var i = arr.indexOf("皮带");
    alert(i);        // 返回3
    
    var arr = ["卫士",3,5,"皮带",8,6,"包裹"];
    var i = arr.indexOf("皮带",6);
    alert(i);        // 返回-1

由上面的例子，我们可以掌握indexOf的基本用法，可如果一个数组中重复存在相同的值，怎么样把重复项的索引一一找出来嘞，让帅狐show给你看，如下:

    var arr = ["卫士",3,5,"包裹",8,6,"皮带","包裹","包裹"];
    var oArr = [];    // 定义一个存放索引的数组
    var i = arr.indexOf("包裹");    // 索引位置
    
    while(i>-1){    // 用while循环，直到找不到索引为止
        oArr.push(i);
        i = arr.indexOf("包裹",i+1);
    }
    alert(oArr);
    

怎么样，帅吧，next...

lastIndexOf

跟indexOf，基本一样，不同的是，这个方法是从后往前检索；

    var arr = ["卫士",3,5,"包裹",8,6,"皮带","包裹","包裹"];
    var oArr = [];    // 定义一个存放索引的数组
    var i = arr.lastIndexOf("包裹");
    alert(i);        // 返回8
    

every

对数组的每个元素都进行函数运行，如果每个都是true，则返回true，否则，如果有一个是false的话，嘿嘿~~，那就返回false咯

    var arr = ["卫士",3,5,"包裹",8,6,"皮带","包裹","包裹"];
    var res = arr.every(function(item){
        return typeof item=="string";    // 这里复习下typeof操作符
    })    
    alert(res);    // false，把数组中的数字项全部去掉，则返回true

filter

对数组的每个元素都进行函数运行，返回过滤后的选项

    var arr = ["卫士",23,"包裹",565,"皮带","包裹","包裹"];
    var res = arr.filter(function(item){
        return typeof item=="string";    // 这里复习下typeof操作符
    })    
    alert(res);    // 卫士, 包裹, 皮带, 包裹, 包裹

forEach

对数组的每个元素都进行函数运行，注：该方法没有返回值

    var arr = {                            // 定义一个对象字面量
        num: [[1,3,5],[2,3,8],[9,6,1]],    // 一个二维数组
        numR:function(o)                // 处理函数                
        {
            o.reverse();        // 数组反向
        }
    };

    arr.num.forEach(function(item){
        arr.numR(item);
    })

这个例子，刚接触面向对象的童鞋会觉得略难，多敲代码多理解，无他，唯手熟尔~

some

对数组的每个元素都进行函数运行，对任一项返回为true，则返回为true，跟上面的every相似，好像every是处女座样(^__^)

    var arr = [1,3,5];
    var res = arr.some(function(item){
        return item>6;
    })
    alert(res);    // 返回false

map

对数组的每个元素都进行函数运行，返回每次函数调用的结果组成的数组(略抽象),来吧，看例子

    var arr = [1,3,5];
    var res = arr.map(function(item){
        return item+item;
    })
    alert(res);    // 返回2,6,10

reduce和reduceRight

这俩一起说，兄弟俩嘛，这俩方法都会选代数组所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后，reduceRight则相反

    var arr = [1,3,5];
    var res = arr.reduce(function(prev,cur,index,array){
        return prev+cur;
    })
    alert(res);    // 返回9
    
    var arr = [[1,3,5],[9,8,6,2,1],[6,2,1]];    
    function s(prev,cur){
        return prev.concat(cur);    // 合并二维数组
    }
    function m(prev,cur){
        return prev>cur?prev:cur;    // 取最大值
    }
    var res = arr.reduce(s).reduceRight(m);        // 链式调用
    alert(res);    // 返回9

话外音

1. 既然咱聊的是面向对象，设计模式，还是再啰嗦一下，在这就不要去争论JavaScript是基于对象还是面向对象，不管是轩辕剑还是七星剑，能灵活运用才是关键(这么说会不会有点贱-_-)

2. 面向对象的基础扎实了，学框架(AngularJS,React)，或者学其他脚本语言(Php)等，上手都会很快

3. 再则程序世界学东西都是锻炼思维，掌握以前未掌握的，变成自己的一套才是精髓

4. 另外重申一下，本系列是JS进阶，初学者慎读，尤其设计模式的一些知识会跟java进行比较，模拟等

5. 预热篇介绍的数组新特性在后面的设计模式实战中会用到，其他基础知识，如数组，闭包等请参阅书籍或其他资料

这一回主要介绍了下JavaScript的数据类型，聊了ES5中数组的9个新特性，下一回聊JavaScript的Object类型。

---

注：此系飞狐原创，转载请注明出处