资讯专栏INFORMATION COLUMN

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

CHENGKANG / 2154人阅读

摘要:前言大家好,小弟飞狐,爱学习,爱装逼,乐于分享,初来乍到,请多多关照。特别注意一下,函数在中是对象,不是一种数据类型,这可是世界的一等公民。和,和的关系又很暧昧,后面细说,要不然会晕菜。基本数据类型,,,,,这五种基本数据类型是按值访问的。

前言

大家好,小弟飞狐,爱学习,爱装逼,乐于分享,初来乍到,请多多关照(~ 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提供了三个特殊的引用类型,主要为了便于操作基本类型的值,包括:

Boolean

Number

String

单体内置对象,包括:

Global对象,这是个无形的对象,

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
话外音

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

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

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

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

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

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86094.html

相关文章

  • 飞狐JavaScript设计模式系列12

    摘要:,对组合对象执行的操作可以向下传递到叶子节点进行操作。组合模式之图片库图片库可以有选择地隐藏或显示图片库的全部或某一部分单独的或是部分的。 本回内容介绍 上一回,聊了桥接模式,做了一道计算题;介一回,聊组合模式(Composite),官方描述组合模式将对象组合成树形结构以表示部分-整体的层次结构,组合模式使得用户对单个对象和组合对象的使用具有一致性。 组合模式特性 这里我理了一下,就组...

    HitenDev 评论0 收藏0
  • 飞狐JavaScript设计模式系列06

    本回内容介绍 上一回聊到JS中模拟接口,装饰者模式,掺元类,分析了backbone的继承源码,感觉还好吧! 介一回,偶们来聊一下在JS单例模式(singleton),单例模式其实运用很广泛,比如:jquery,AngularJS,underscore吖虾米的都是单例模式,来吧,直接开始咯: 1. 单例模式 保证一个类只有一个实例,从全局命名空间里提供一个唯一的访问点来访问该对象。其实之前写过的对象...

    hiYoHoo 评论0 收藏0
  • 飞狐JavaScript设计模式系列02

    摘要:本回内容介绍上一回聊到数据类型,简单的过了一遍,包括个数组新特性等,这一回来聊聊对象,结合数组来实战一些例子,在做题中成长,记忆会更深刻,来吧,开始咯创建实例的方式有两种使用操作符后跟构造函数飞狐使用对象字面量表示法飞狐也可以飞狐这种写法与 本回内容介绍 上一回聊到JS数据类型,简单的过了一遍,包括9个数组新特性等,这一回来聊聊Object对象,结合数组来实战一些例子,在做题中成长,记...

    tangr206 评论0 收藏0
  • 飞狐JavaScript设计模式系列11

    摘要:桥接模式之特权函数特权函数,用一些具有特权的方法作为桥梁以便访问私有空间,可以回忆一下之前的系列。连续自然数分组,计算最多组的个数将至这个连续自然数分成组使每组相加的值相等。个数组中数字最多的一组有个此时的和为。 本回内容介绍 上一回,聊了适配器模式,图片预加载,介一回,聊桥接模式(Bridge),跟之前一样,难度比较小,桥接模式将抽象部分与它的实现部分分离,通过桥接模式联系彼此,同时...

    wanglu1209 评论0 收藏0
  • 飞狐JavaScript设计模式系列10

    摘要:本回内容介绍上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式,用一个新的接口对现有类的接口进行包装,处理类与的不匹配。这一回,主要聊了适配器模式,图片预加载,主要还是理解下一回,聊一聊桥接模式,顺便做一做计算题。 本回内容介绍 上一回,聊了代理模式,虚拟代理,图片懒加载,介一回,也比较容易,适配器模式(Adapter),用一个新的接口对现有类的接口进行包装,处...

    yexiaobai 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<