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

前言

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

另外,我的以为JavaScript是很文艺的一门语言,文艺范儿会更适合这门语言(我的观点,不喜勿喷),JS基础学习资料在网上很是多,因此咱们这里从JS面向对象开始(注:须要一(zha)定(shi)的JS基础),本系列做为JavaScript扩展读物(有讲错的地方,欢迎你们指出),又扯了这么多,这回真的来进入正题了:java

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类型,spa

  • 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类型。


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

相关文章
相关标签/搜索