听飞狐聊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

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

讲类型就是基本的一个过渡介绍,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类型。

注:此系飞狐原创,转载请注明出处

    原文作者:设计模式
    原文地址: https://segmentfault.com/a/1190000003923665
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞