js常用方法和一些封装(1)1.字符串相关2.数组相关

博主在js上已经花费了很长时间,不禁深深地被其轻巧而强大的功能,以及优雅灵活的写法所折服,一直没找到机会来总结一下,最近发现了简书这个不错的平台,正好把学习的东西做一个汇总。

题外话

我始终认为,学习编程最好的方式就是去写,甭管写的怎样,也要去练习。

当初学完了数组,我记得自己是先把里面的每一个方法都敲了一遍,然后反复思考,通过这些方法,我能够做些什么?

很多语法我一开始也是很不理解的,然而在不断地运用过程中,慢慢地就开始明白过来了。只要抓住一个大方向,然后不断地练,就一定能深入理解!

正如国外一个有名的数学家所言,只有抓住了主树干,枝叶方面的细节便会奇迹般地丰富起来。

很多初学者,包括当年的我自己,总是觉得这个也要学,那个也要学,不敢直接去找工作,总想着全部学完了才行。可是呢,怎样算是个头呢,技术这东西日新月异。css3来了,一股脑儿跑去学css3,后来各种框架如雨后春笋般破土而出,ext.js,easy-ui,bootstrap,等等,面对各种各样的新框架,真的感觉时间不够。

其实,现在我个人感觉真不必这样,要知道,所有的js框架都是以js为源头,当自己js的功底足够牢固,那么就一切OK。我之前认识的一个朋友,从来没接触过bootstrap,后来公司要用,看了两三天直接就上手,用bootstrap来开发项目了。

js + css是根,真是如此的。

否则,你永远会觉得自己在学习,却不知道这样的目的是什么。所以,不管三七二十一,如果你现在还是一个处于迷茫求职阶段的毕业生,或者是刚培训完,那么,不用慌,先找一份工作干起来再说,在工作中慢慢积累。

不要害怕,觉得自己好多不懂,会不会有问题,真没关系的,不要企图把所有技术学完了再去找工作。

哈,闲话不多说,开始记录。

1.字符串相关

1.1 format方法

在各种编程语言中,字符串的format方法是比较常见的,以下通过js扩展的方式,实现了js版本的format方法。目前貌似还没有浏览器支持这一个方法。

if(!String.prototype.format ){
    String.prototype.format = function() {
        var e = arguments;
        return this.replace(/{(\d+)}/g,function(t, n) {
            return typeof e[n] != "undefined" ? e[n] : t;
        })
    };
}

例子:

var template = "今天的天气很{0},大家一起去{1}!";
alert(template.format("晴朗","郊游"));

效果:

Paste_Image.png

2.数组相关

1.2 forEach(callback,context) 操作数组中的每一个元素

ie9以上的浏览器,以及其他非IE浏览器都支持这一方法。 以下是兼容性的扩展写法:

/**
    forEach除了接受一个必须的回调函数参数,还可以接受一个可选的上下文参数(改变回调函数里面的this指向)(第2个参数)。
*/
if (!Array.prototype.forEach && typeof Array.prototype.forEach !== "function") {
    Array.prototype.forEach = function(callback, context) {
       // 遍历数组,在每一项上调用回调函数,这里使用原生方法验证数组。
       if (Object.prototype.toString.call(this) === "[object Array]") {
           var i,len;
           //遍历该数组所有的元素
           for (i = 0, len = this.length; i < len; i++) {
               if (typeof callback === "function"  && Object.prototype.hasOwnProperty.call(this, i)) {
                   if (callback.call(context, this[i], i, this) === false) {
                       break; // or return;
                   }
               }
           }
       }
    };
}

例子:

var drinks = ['雪碧','可乐','脉动','红牛','农夫山泉'];
        
var context = {
    str1 : '【',
    str2 : '】'
};
        
drinks.forEach(function(item){
    console.log(this.str1 + item + this.str2);
},context);

效果:

Paste_Image.png

这个方法在各大浏览器都得到了较好的支持。

1.3 indexOf(searchvalue,fromindex) 查询数组中某一个值的下标

ie9以上的浏览器,以及其他非IE浏览器都支持这一方法。以下是兼容性的扩展写法:

//获取某元素在数组中第一次出现的下标
if (!Array.prototype.indexOf) {
  Array.prototype.indexOf = function(searchElement, fromIndex) {
    var k;
    // 1. Let O be the result of calling ToObject passing
    //    the this value as the argument.
    if (this == null) {
      throw new TypeError('"this" is null or not defined');
    }

    var O = Object(this);

    // 2. Let lenValue be the result of calling the Get
    //    internal method of O with the argument "length".
    // 3. Let len be ToUint32(lenValue).
    var len = O.length >>> 0;

    // 4. If len is 0, return -1.
    if (len === 0) {
      return -1;
    }

    // 5. If argument fromIndex was passed let n be
    //    ToInteger(fromIndex); else let n be 0.
    var n = +fromIndex || 0;

    if (Math.abs(n) === Infinity) {
      n = 0;
    }

    // 6. If n >= len, return -1.
    if (n >= len) {
      return -1;
    }

    // 7. If n >= 0, then Let k be n.
    // 8. Else, n<0, Let k be len - abs(n).
    //    If k is less than 0, then let k be 0.
    k = Math.max(n >= 0 ? n : len - Math.abs(n), 0);

    // 9. Repeat, while k < len
    while (k < len) {
      // a. Let Pk be ToString(k).
      //   This is implicit for LHS operands of the in operator
      // b. Let kPresent be the result of calling the
      //    HasProperty internal method of O with argument Pk.
      //   This step can be combined with c
      // c. If kPresent is true, then
      //    i.  Let elementK be the result of calling the Get
      //        internal method of O with the argument ToString(k).
      //   ii.  Let same be the result of applying the
      //        Strict Equality Comparison Algorithm to
      //        searchElement and elementK.
      //  iii.  If same is true, return k.
          if (k in O && O[k] === searchElement) {
            return k;
          }
          k++;
        }
        return -1;
      };
    }

例子:

var index = drinks.indexOf('雪碧');
alert(index);//0

类似的还有lastIndexOf,用于获取数组中某个元素最后一次出现的位置。如果数组没有这个元素,则返回-1。顺便贴上该方法的实现:

//获取某元素在数组中最后一次出现的下标
if (!Array.prototype.lastIndexOf) {
      Array.prototype.lastIndexOf = function(searchElement /*, fromIndex*/) {
    'use strict';

    if (this === void 0 || this === null) {
      throw new TypeError();
    }

    var n, k,
        t = Object(this),
        len = t.length >>> 0;
    if (len === 0) {
      return -1;
    }

    n = len - 1;
    if (arguments.length > 1) {
      n = Number(arguments[1]);
      if (n != n) {
        n = 0;
      }
      else if (n != 0 && n != (1 / 0) && n != -(1 / 0)) {
        n = (n > 0 || -1) * Math.floor(Math.abs(n));
      }
    }

    for (k = n >= 0
          ? Math.min(n, len - 1)
          : len - Math.abs(n); k >= 0; k--) {
      if (k in t && t[k] === searchElement) {
        return k;
      }
    }
    return -1;
  };
}

通过这两个方法,我们可以来做一些有意思的事情了。 比如,判断一个对象是否为数组?

IE9 以上的浏览器,已经支持通过Array.isArray()来验证一个对象是否为数组了。

比如:

var result = Array.isArray([]);
alert(typeof []);//object
alert(result); //true

那么,如果我们自己来实现,又该如何做呢?下面给出一个简单思路,简单模拟一下这个过程:

//首先,让我们来看一看数组的构造器是咋样的?
console.log([].constructor.toString());

/*
    打印出来是这样的:
    function Array() { [native code] }
*/

于是乎。。。

var Array = function(){

}

Array.isArray = function(obj){
    return obj.constructor.toString().indexOf('Array') != -1;
}

var result = Array.isArray([]); 
alert(result); //true

虽然取巧了点,不过目的确实达到了。

数组封装

通过数组的一些基本方法,我们可以开始自己模拟一下java中的ArrayList了,话不多说,贴上代码:

//模拟ArrayList
function ArrayList(){
    var arr = []; //用于保存数据的数组
    var length = 0; //数组的长度,默认为0
    
    /**
     * 判断是否为空
     */
    this.isEmpty = function(){
        return length == 0;
    }
    
    /**
     * 获取列表长度
     */
    
    this.size = function(){
        return length;
    }
    
    /** 
    * 判断对象中是否包含给定对象
    */ 
    this.contains = function(obj){
        if(arr.indexOf(obj) != -1){
            return true;
        }
        return false;
    }
    
    /** 
    * 新增
    */
   this.add = function(obj){
    length = length + 1;
    arr.push(obj);
   }
   
   /**
    * 删除
    * 参数1  obj : 需要删除的元素
    * 参数2  deleteAll: 是否全部删除,否则默认删除第一个匹配项
    */
   this.remove = function(obj,deleteAll){
        var len = arr.length;
        for(var i = 0 ;i < len ;i++){
            if(arr[i] == obj){
                arr.splice(i,1);
                length = length - 1;
                if(!deleteAll){
                    break;
                }
            }
        }
   }
   
   
   /**
    * 根据索引获取对应的元素
    */
   this.get = function(index){
    if(index > length - 1){
        return null;
    }
    return arr[index];
   }
   
   /**
    * 获取列表数组
    */
   this.toArray = function(){
     return arr;
   }
   
   /**
    * 获取某一个元素的角标
    * 如果只出现一次,就返回一个数字,如果大于一次,就返回数组
    */
   this.indexOf = function(obj){
     var rstArr = [];
     var count = 0;
     for(var i = 0 ;i < length ;i++){
        if(obj == arr[i]){
            rstArr[count++] = i;
        }
     }
     if(count == 1){
        return rstArr[0];
     }
     return rstArr;
   }
   
   this.toString = function(){
    return arr.toString();  
   }
}

//测试代码
var list = new ArrayList();
list.add('张三');
list.add('李四');
list.add('王五');
list.add('赵六');
list.add('王五');
console.log(list.size());
console.log(list.toString());
console.log(list.contains('张三'));
list.remove('王五',true); //null,undefined,''
console.log(list.toString());
console.log(list.get(0));
console.log(list.get(1));
console.log(list.get(2));
console.log(list.size());

console.log(list.toArray());
list.add('张三');
list.add('张三');
console.log(list.toArray());
console.log(list.indexOf('张三'));
console.log(list.indexOf('赵六'));

运行结果:

Paste_Image.png

本章结束 ...

剽悍一小兔,电气自动化毕业。 参加工作后对计算机感兴趣,深知初学编程之艰辛。 希望将自己所学记录下来,给初学者一点帮助。

免责声明: 博客中所有的图片素材均来自百度搜索,仅供学习交流,如有问题请联系我,侵立删,谢谢。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏AzMark

Python字典的介绍

14320
来自专栏take time, save time

你所能用到的数据结构(八)

十一、不能被应用的理论不是好研究 前面介绍了堆栈的一些小小的理论模型,那么这样一个东西有什么作用呢?实际中不可能有那么一辆停在站台前方堵死的火车的,即使有,也...

28440
来自专栏我的小碗汤

一文带你读懂:最小栈问题

设一个变量int min = -1; 当一个元素进入栈时,把最小值的下标记录成0,后面进来的数和stack[min]做比较,如果大于等于当前的最小值,那就不做变...

11830
来自专栏chenjx85的技术专栏

leetcode-70-Climbing Stairs

26590
来自专栏企鹅号快讯

PHP弱类型在CTF中的应用

PHP作为世界上最好的语言(然而人生苦短,我用python),在CTF web题中大放异彩,深受出题人的喜爱。P神在对web题出题套路总结的第三条指出,出题人喜...

96750
来自专栏从流域到海域

《笨办法学Python》 第35课手记

《笨办法学Python》 第35课手记 本节课讲函数和分支的,实际上是一次综合练习,代码有点长,请先纠正代码中的错误使脚本能够运行。 原代码中使用三个空格来进行...

224100
来自专栏web前端教室

=>,Es6箭头符号的前世今生

看代码能看错行,一看书就头疼且双眼流泪,没办法啊,都是娘胎里带出来的毛病,能看点是点吧。es6这种东西,虽然有一些语法糖,但毕竟也是新东西啊,得学。不学就落后,...

241100
来自专栏CSDN技术头条

为什么我坚持使用 JavaScript 函数声明

时光溯回到上世纪 90 年代晚期,在初次接触 JavaScript 时,老师教我们使用函数声明写下Hello World,它看上去是这样的······ fun...

21780
来自专栏技术墨客

Java函数式开发——优雅的Optional空指针处理

    在Java江湖流传着这样一个传说:直到真正了解了空指针异常,才能算一名合格的Java开发人员。在我们逼格闪闪的java码字符生涯中,每天都会遇到各种nu...

13820
来自专栏iKcamp

翻译连载 |《你不知道的JS》姊妹篇 |《JavaScript 轻量级函数式编程》- 第 7 章: 闭包 vs 对象

原文地址:Functional-Light-JS 原文作者:Kyle Simpson-《You-Dont-Know-JS》作者 第 7 章: 闭包 vs 对象 ...

25170

扫码关注云+社区

领取腾讯云代金券