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


Posted in Javascript onDecember 25, 2016

本文实例讲述了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();
Javascript 相关文章推荐
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
JavaScript设计模式之建造者模式介绍
Dec 28 Javascript
javascript函数的四种调用模式
Jan 08 Javascript
jquery滚动条插件slimScroll使用方法
Feb 09 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
css和js实现弹出登录居中界面完整代码
Nov 26 Javascript
vue 自定义全局方法,在组件里面的使用介绍
Feb 28 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
详解vue2.6插槽更新v-slot用法总结
Mar 09 Javascript
JavaScript键盘事件响应顺序详解
Sep 30 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
Dec 25 #Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 #Javascript
AngularJS入门教程之Helloworld示例
Dec 25 #Javascript
jQuery实现圣诞节礼物动画案例解析
Dec 25 #Javascript
AngularJS打开页面隐藏显示表达式用法示例
Dec 25 #Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 #Javascript
使用jsonp实现跨域获取数据实例讲解
Dec 25 #Javascript
You might like
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php中使用Akismet防止垃圾评论的代码
2011/06/10 PHP
经常用的图片在容器中的水平垂直居中实例
2007/06/10 Javascript
javascript下IE与FF兼容函数收集
2008/09/17 Javascript
通过一段代码简单说js中的this的使用
2013/07/23 Javascript
基于JavaScript代码实现兼容各浏览器的设为首页和加入收藏
2016/01/07 Javascript
JavaScript过滤字符串中的中文与空格方法汇总
2016/03/07 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
JavaScript中误用/g导致的正则test()无法正确重复执行的解决方案
2016/07/27 Javascript
js仿微信抢红包功能
2020/09/25 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python socket套接字实现C/S模式远程命令执行功能案例
2018/07/06 Python
python看某个模块的版本方法
2018/10/16 Python
python requests 库请求带有文件参数的接口实例
2019/01/03 Python
Python简单I/O操作示例
2019/03/18 Python
python 在sql语句中使用%s,%d,%f说明
2020/06/06 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
移动端HTML5开发神器之vconsole详解
2020/12/15 HTML / CSS
乌克兰最大的家用电器和电子产品连锁店:Eldorado
2019/10/02 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
幼儿园数学教学反思
2014/02/02 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
职务说明书范文
2014/05/07 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
普通党员个人剖析材料
2014/10/08 职场文书
工伤事故赔偿协议书
2014/10/27 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
病危通知书样本
2015/04/17 职场文书
总结几个非常实用的Python库
2021/06/26 Python
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
一文搞懂Python Sklearn库使用
2021/08/23 Python
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js
JS函数式编程实现XDM一
2022/06/16 Javascript