iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript常用方法和封装详情
  • 351
分享到

JavaScript常用方法和封装详情

2024-04-02 19:04:59 351人浏览 薄情痞子
摘要

目录1.字符串相关1.1 fORMat方法2.数组相关1.2 forEach(callback,context) 操作数组中的每一个元素1.3 indexOf(searchvalue

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("晴朗","郊游"));

效果:

2.数组相关

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

ie9以上的浏览器,以及其他非IE浏览器都支持这一方法。

以下是兼容性的扩展写法:


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);

效果:

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

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 ) {
    '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());
 

于是便有了

 var Array = function(){
 
}
 
Array.isArray = function(obj){
    return obj.constructor.toString().indexOf('Array') != -1;
}
 
var result = Array.isArray([]); 
alert(result); //true

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

3.数组封装

通过数组的一些基本方法,我们可以开始自己模拟一下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);
   }
   
   
   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('赵六'));

运行结果:

到此这篇关于javascript常用方法和封装详情的文章就介绍到这了,更多相关JavaScript方法和封装内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: JavaScript常用方法和封装详情

本文链接: https://www.lsjlt.com/news/143779.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • JavaScript常用方法和封装详情
    目录1.字符串相关1.1 format方法2.数组相关1.2 forEach(callback,context) 操作数组中的每一个元素1.3 indexOf(searchvalue...
    99+
    2022-11-13
  • JavaScript常用方法和封装实例分析
    这篇文章主要介绍了JavaScript常用方法和封装实例分析的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇JavaScript常用方法和封装实例分析文章都会有所收获,下面我们一起来看看吧。1.字符串相关1.1 ...
    99+
    2023-06-29
  • 常用的前端JavaScript方法封装
    目录1、输入一个值,返回其数据类型**2、数组去重3、字符串去重4、深拷贝 浅拷贝5、reverse底层原理和扩展6、圣杯模式的继承7、找出字符串中第一次只出现一次的字母8、找元素的...
    99+
    2022-11-12
  • CSS和JavaScript常用工具封装方法是什么
    这篇文章主要介绍“CSS和JavaScript常用工具封装方法是什么”,在日常操作中,相信很多人在CSS和JavaScript常用工具封装方法是什么问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”CSS和Jav...
    99+
    2023-06-04
  • RedisTemplate常用方法封装
    RedisTemplate常用方法封装 序列化和配置 package com.gitee.ccsert.mall.common.redis.config; import com.fasterxml.jackson.annotation....
    99+
    2014-05-04
    RedisTemplate常用方法封装
  • 分享JavaScript和CSS常用工具方法封装教程
    本篇内容介绍了“分享JavaScript和CSS常用工具方法封装教程”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学...
    99+
    2022-10-19
  • CSS常用的封装方法有哪些
    小编给大家分享一下CSS常用的封装方法有哪些,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!1. pc-reset PC样式初始化html {  line-height: 1.15;&...
    99+
    2023-06-08
  • JavaScript中数组reduce()方法使用详情
    语法: reduce()对数组中的每个元素进行累加,返回一个新的值,可以传入初始值简单的讲就是返回数组中所有元素的和数  不会改变原始组的值  不会对空数组执行回...
    99+
    2022-11-13
  • nodejs各类数据库常用方法封装
    在Node.js中,常见的数据库有MySQL、MongoDB、Redis等。下面是各类数据库常用方法的封装示例。1. MySQL数据...
    99+
    2023-09-21
    nodejs
  • web前端中常用的封装方法是什么
    本篇内容介绍了“web前端中常用的封装方法是什么”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! &nbs...
    99+
    2022-10-19
  • 详解JavaScript数组的常用方法
    目录数组的常用方法pop()unshift()shift()slice()splice()数组元素去重concat()join()reverse()sort()总...
    99+
    2022-11-12
  • ThinkPHP封装方法的概念和使用方法是什么
    今天小编给大家分享一下ThinkPHP封装方法的概念和使用方法是什么的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。什么是封装...
    99+
    2023-07-05
  • Vue使用Swiper封装轮播图组件的方法详解
    目录Swiper为什么要封装组件开始封装1.下载安装Swiper2.引入css样式文件3.引入js文件4.把官网使用方法中的HTML结构复制粘贴过来5.初始化Swiper自定义效果完...
    99+
    2022-11-13
  • Vue封装通过API调用的组件的方法详解
    目录前言封装通过API调用的组件的设计思路封装组件的方式单例模式定义单例模式的优缺点1、优点2、缺点单例模式适用场景使用API调用组件的示例拓展:父子组件通信最后前言 在前端开发中,...
    99+
    2022-12-26
    前端vue封装api然后调用 vue api封装 vue中组件封装
  • php分页封装和调用的方法是什么
    在PHP中,可以使用以下方法来封装和调用分页功能:1. 分页封装方法:- 创建一个名为`Pagination`的类,该类将包含分页所...
    99+
    2023-09-27
    php
  • C语言库的封装和使用方法总结
    目录前言windows下静态库创建和使用静态库的创建静态库的使用方法一:添加工程中方法二:配置项目属性方法三:使用编译语句静态库优缺点缺点windows下动态库创建和使用静态库中生成...
    99+
    2022-11-12
  • matlab函数封装和调用的方法是什么
    在Matlab中,可以通过创建函数文件来封装函数,并通过函数名调用函数。以下是具体的方法:1. 打开Matlab编辑器,选择新建函数...
    99+
    2023-10-08
    matlab
  • Python安装第三方库常用方法 超详细~
    Python安装第三方库常用方法 前言安装方法1. 通过pychram安装2. pip安装大法3. 下载whl文件到本地离线安装3.1 补充 4.其他方法4.1 Python官方的Pyp...
    99+
    2023-09-01
    python pycharm pip
  • JS数组方法some、every和find的使用详情
    目录1、some2、every3、find1、some 在MDN中这样定义:some()方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的值...
    99+
    2022-11-12
  • react使用axios进行api网络请求的封装方法详解
    目录前言准备工作开始封装axiosconfig.jsrequest.js进行请求总结前言 最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴...
    99+
    2022-11-13
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作