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 相关文章推荐
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
JavaScript将数据转换成整数的方法
Jan 04 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
jQuery AjaxUpload 上传图片代码
Feb 02 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
Nov 29 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
jQuery用noConflict代替$的实现方法
Apr 12 jQuery
vue实现商城上货组件简易版
Nov 27 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
vue+swiper实现左右滑动的测试题功能
Oct 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
下拉列表多级联动dropDownList示例代码
2013/06/27 PHP
php网页标题中文乱码的有效解决方法
2014/03/05 PHP
phpStudy访问速度慢和启动失败的解决办法
2015/11/19 PHP
ThinkPHP打水印及设置水印位置的方法
2016/10/14 PHP
很多人都是用下面的js刷新站IP和PV
2008/09/05 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
微信小程序 前端源码逻辑和工作流详解
2016/10/08 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
jQuery实现frame之间互通的方法
2017/06/26 jQuery
在一般处理程序(ashx)中弹出js提示语
2017/08/16 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
2018/09/25 Javascript
微信小程序实现文字无限轮播效果
2018/12/28 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
Vue项目部署的实现(阿里云+Nginx代理+PM2)
2019/03/26 Javascript
JQueryDOM之样式操作
2019/03/27 jQuery
angula中使用iframe点击后不执行变更检测的问题
2020/05/10 Javascript
[02:16]DOTA2超级联赛专访Burning 逆袭需要抓住机会
2013/06/24 DOTA
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
python常见的格式化输出小结
2016/12/15 Python
python分治法求二维数组局部峰值方法
2018/04/03 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python小白切忌乱用表达式
2020/05/29 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
BIBLOO捷克:购买女装、男装、童装、鞋和配件
2017/01/27 全球购物
演讲比赛获奖感言
2014/02/02 职场文书
机电专业求职信
2014/06/14 职场文书
应届毕业生自荐书
2014/06/18 职场文书
政协调研汇报材料
2014/08/15 职场文书
保险公司增员口号
2015/12/25 职场文书
python实现三阶魔方还原的示例代码
2021/04/28 Python
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript