JS常见疑难点分析之match,charAt,charCodeAt,map,search用法分析

本文实例讲述了JS常见疑难点分析之match,charAt,charCodeAt,map,search用法。分享给大家供大家参考,具体如下:

JavaScript match() 方法

定义和用法

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置。

语法

匹配字符串,返回指定的值

stringObject.match(searchvalue)

匹配正则,返回指定的值

stringObject.match(regexp)

使用 match() 来检索一个字符串例子:

<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))
</script>
</body>
</html>

最终出现的结果为,world,null,null,world!

使用 match() 来检索一个正则表达式的匹配例子:

<html>
<body>
<script type="text/javascript">
var str="1 plus 2 equal 3";
//这里的正则表达式必须加上g,全局匹配,不然就会匹配一个值即返回
document.write(str.match(/\d+/g))
</script>
</body>
</html>

通常来说,我们用match用在正则上面比较多,也可以用其来代理indexOf和lastIndexOf来判断字符串里面是否存在此值。

JavaScript search() 方法

定义和用法

search() 方法用于检索字符串中指定的子字符串,或检索与正则表达式相匹配的子字符串,检索到则返回匹配的子串的起始位置,无法检索到值,返回-1。

语法

stringObject.search(regexp)

该参数可以是需要在 stringObject 中检索的子串,也可以是需要检索的 RegExp 对象。

要执行忽略大小写的检索,请追加标志 i。

search() 例子:

<script type="text/javascript">
var str="Visit W3School!"
document.write(str.search(/W3School/))
</script>

返回索引值为6,search通常与正则配合使用,可以达到indexOf的效果。

JavaScript charAt() 方法

定义和用法

charAt() 方法可返回指定位置的字符。

请注意,JavaScript 并没有一种有别于字符串类型的字符数据类型,所以返回的字符是长度为 1 的字符串。

语法

返回指定位置的字符串

stringObject.charAt(index)

chartAt实例:

<script type="text/javascript">
var str="Hello world!"
document.write(str.charAt(1))
</script>

最终返回结果为:e,通常我们可以通过chartAt来从某个字符串取得具体的字符。

JavaScript charCodeAt() 方法

定义和用法

charCodeAt() 方法可返回指定位置的字符的 Unicode 编码。这个返回值是 0 - 65535 之间的整数。

方法 charCodeAt() 与 charAt() 方法执行的操作相似,只不过前者返回的是位于指定位置的字符的编码,而后者返回的是字符子串。

语法

stringObject.charCodeAt(index)

charCodeAt()实例

注释:字符串中第一个字符的下标是 0。如果 index 是负数,或大于等于字符串的长度,则 charCodeAt() 返回 NaN。

<script type="text/javascript">
var str="Hello world!"
document.write(str.charCodeAt(1))
//返回H的Unicode 编码101
</script>

js中Array.prototype.map()方法

定义和用法

map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。

语法

array.map(callback[, thisArg])

callback原数组中的元素经过该方法后返回一个新的元素。
currentValue,callback 的第一个参数,数组中当前被传递的元素。
index,callback 的第二个参数,数组中当前被传递的元素的索引。
array,callback 的第三个参数,调用 map 方法的数组。
thisArg执行 callback 函数时 this 指向的对象。

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用;那些从来没被赋过值或者使用

delete 删除的索引则不会被调用。callback 函数会被自动传入三个参数:数组元素,元素索引,原数组本身。

使用map()的第一个例子:

下面的代码将一个数组中的所有单词转换成对应的复数形式.

function fuzzyPlural(single) {
 var result = single.replace(/o/g, 'e');
 if( single === 'kangaroo'){
  result += 'se';
 }
 return result;
}
var words = ["foot", "goose", "moose", "kangaroo"];
console.log(words.map(fuzzyPlural));

最后结果:

["feet", "geese", "meese", "kangareese"]

求数组中每个元素的平方根例子

var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
/* roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9] */

在字符串上使用 map 方法

var map = Array.prototype.map
var a = map.call("Hello World", function(x) { return x.charCodeAt(0); })
// a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <script type="text/javascript">
    //var map = Array.prototype.map
    var a = Array.prototype.map.call("Hello World", function(x) { return x.charCodeAt(0); })
    // a的值为[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100]
    alert(a);
  </script>
</body>
</html>

map兼容旧环境

map 是在最近的 ECMA-262 标准中新添加的方法;所以一些旧版本的浏览器可能没有实现该方法。在那些没有原生支持 map 方法的浏览器中,你可以使用下面的 Javascript 代码来实现它。所使用的算法正是 ECMA-262,第 5 版规定的。假定Object, TypeError, 和 Array 有他们的原始值。而且 callback.call 的原始值也是 Function.prototype.call。

// 实现 ECMA-262, Edition 5, 15.4.4.19
// 参考: http://es5.github.com/#x15.4.4.19
if (!Array.prototype.map) {
 Array.prototype.map = function(callback, thisArg) {
  var T, A, k;
  if (this == null) {
   throw new TypeError(" this is null or not defined");
  }
  // 1. 将O赋值为调用map方法的数组.
  var O = Object(this);
  // 2.将len赋值为数组O的长度.
  var len = O.length >>> 0;
  // 4.如果callback不是函数,则抛出TypeError异常.
  if ({}.toString.call(callback) != "[object Function]") {
   throw new TypeError(callback + " is not a function");
  }
  // 5. 如果参数thisArg有值,则将T赋值为thisArg;否则T为undefined.
  if (thisArg) {
   T = thisArg;
  }
  // 6. 创建新数组A,长度为原数组O长度len
  A = new Array(len);
  // 7. 将k赋值为0
  k = 0;
  // 8. 当 k < len 时,执行循环.
  while(k < len) {
   var kValue, mappedValue;
   //遍历O,k为原数组索引
   if (k in O) {
    //kValue为索引k对应的值.
    kValue = O[ k ];
    // 执行callback,this指向T,参数有三个.分别是kValue:值,k:索引,O:原数组.
    mappedValue = callback.call(T, kValue, k, O);
    // 返回值添加到新书组A中.
    A[ k ] = mappedValue;
   }
   // k自增1
   k++;
  }
  // 9. 返回新数组A
  return A;
 };
}

通常生成时间戳的巧妙方法

第一种方式

function getTimeStamp()
{
var timestamp=new Date().getTime();
var timestampstring = timestamp.toString();//一定要转换字符串
oldTimeStamp = timestampstring;
return timestampstring;
}

第二种方式

new Date().toString() //同样可以达到效果,更简洁

如何使用md5加密方法:

引用google,md5加密的库文件:http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5.js

其实蛮简单的,里面CryptoJS.SHA1(),直接引用加密即可,举个栗子:

就这样直接调用就可以了

var keyvaluestring = "ddddd";
sign = CryptoJS.SHA1(keyvaluestring).toString();

PS:这里再提供几款相关的加密与正则工具供大家参考使用:

JavaScript正则表达式在线测试工具:
http://tools.jb51.net/regex/javascript

正则表达式在线生成工具:
http://tools.jb51.net/regex/create_reg

BASE64编码解码工具:
http://tools.jb51.net/transcoding/base64

URL网址16进制加密工具:
http://tools.jb51.net/password/urlencodepwd

MD5在线加密工具:
http://tools.jb51.net/password/CreateMD5Password

在线散列/哈希算法加密工具:
http://tools.jb51.net/password/hash_encrypt

更多关于JavaScript相关内容可查看本站专题:《JavaScript常用函数技巧汇总》、《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

(0)

相关推荐

  • JavaScript初学者的10个迷你技巧第1/2页

    在之前的编程语言排行榜中,我们曾介绍过转正在即的JavaScript语言,正如文章中阐明的那样,JavaScript不仅是最具活力的脚本语言,还是是最有用的编程语言之一.因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它.JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛.许多程序员过去常常认为JavaScript是一门"玩具语言",但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能. 由于这个发明的出

  • 初学js 新节点的创建 删除 的步骤

    特羡慕写出这些特效的高级程序员.我想学习,可总是不知道怎么去思考,不知道怎么去逻辑.有时候也很着急,这些都不怕,幸好还有人教我,指点我,这是我比较幸运的.但是我过不了自己这关了,自己最大的缺点就是 逃避,不会做的就放弃了,不会了就不会了,也不敢问了.改,这个大缺点一定得改.以下,是洋哥指点我的学习技巧,思路清晰,效率也有很大的提高..废话就不扯了,言归正传: 题目:btton 按钮 一个添加 一个删除 ,点击添加按钮就会添加一个节点,点击删除按钮就会删除最后一个节点,添加的新元素点击一下就会被删

  • 初学JavaScript第一章第1/2页

    JavaScript的数据类型 Number:整形,浮点型 String:字符型数据,JavaScript不区分单个字符和字符串, 任何字符或字符串都可以用又引号或单引号引起来. Boolean:布尔型 Undefined:未定义类型,用于不存在或者没有被赋初值的变量或对象的属性如: var name;此时的name即为Undefined Null:空值,一般将Undefined型和Null型等同对待 Function:函数,可以通过new操作符和构造函数Function()来动态创建所需要功能

  • 走出JavaScript初学困境—js初学

    从开始接触JS这东西有一年时间了,心头总是有一些说不出来的苦闷.在论坛里也常常有人这么说.那么苦在何处呢?总是感觉学的不深入,一些简单的东西可以做但也是不能得心应手.能不能把这种苦再说的具体点儿呢?都说了是"说不出来的苦闷"怎么具体呀? 何为难言之隐?说不出来,不能具体,不能把问题落到实处就不能得到解决的办法.这就是难言之隐!我认为这也就是初学者的"困境".之所以要用"我认为"正好迎合了本文标题中的"心得"二字.如果能对大家有

  • 你有必要知道的10个JavaScript难点

    能够读懂这篇博客的JavaScript开发者,运气不会太差- 1. 立即执行函数 立即执行函数,即Immediately Invoked Function Expression (IIFE),正如它的名字,就是创建函数的同时立即执行.它没有绑定任何事件,也无需等待任何异步操作: (function() { // 代码 // ... })(); function(){-}是一个匿名函数,包围它的一对括号将其转换为一个表达式,紧跟其后的一对括号调用了这个函数.立即执行函数也可以理解为立即调用一个匿名

  • 初学JavaScript_03(ExtJs Grid的简单使用)

    <html> <head> <title>Ext中的Grid例子</title> <link rel="stylesheet" type="text/css" href="../AllRes/resources/css/ext-all.css"/> <script type="text/javascript" src="../AllRes/adapte

  • 国外的为初学者写的JavaScript教程

    Embedding and including write and writeln Document object Message box Function Event handler Form Link Date Window Frame Embedding and including Let's first see a simple example: <html> <head> <title>This is a JavaScript example</titl

  • Javascript技术难点之apply,call与this之间的衔接

    1.apply定义 apply:调用函数,并用指定对象替换函数的 this 值,同时用指定数组替换函数的参数. 语法:apply([thisObj[,argArray]]) thisObj 可选.要用作 this 对象的对象. argArray 可选.要传递到函数的一组参数. 2.call定义 call:调用一个对象的方法,用另一个对象替换当前对象. 语法:call([thisObj[, arg1[, arg2[, [, argN]]]]]) thisObj 可选.将作为当前对象使用的对象. a

  • 初学js者对javascript面向对象的认识分析

    复制代码 代码如下: var obj = document.getElementById("name"); function clickMe() { alert(this.value); this.value += "!!!!"; alert(this.value); } var ActionBinder = function() {//定义一个类 } ActionBinder.prototype.registerDOM = function(doms) { thi

  • javascript下数值型比较难点说明

    1.数字长长的,在c#里合法的长整型数字在javascript下竟然...... 看下面几行简单代码: 复制代码 代码如下: var a = 2010060612120909191; //按时间生成的Id1 var b = 2010060612120909199; //按时间生成的Id2 alert(a == b); //alert(a); //有什么惊人发现吗? //alert(b); //最后几位好像... //alert(Number(a) == Number(b)); //alert(p

随机推荐