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 相关文章推荐
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JavaScript中对象property的删除方法介绍
Dec 30 Javascript
JavaScript给input的value赋值引发的关于基本类型值和引用类型值问题
Dec 07 Javascript
javascript时间戳和日期字符串相互转换代码(超简单)
Jun 22 Javascript
BootStrap Fileinput初始化时的一些参数
Dec 30 Javascript
Vue使用mixins实现压缩图片代码
Mar 14 Javascript
Angular6 正则表达式允许输入部分中文字符
Sep 10 Javascript
js如何验证密码强度
Mar 18 Javascript
使用Vant完成Dialog弹框案例
Nov 11 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
Apr 30 Vue.js
vue中data里面的数据相互使用方式
Jun 05 Vue.js
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
php数组函数序列之array_unshift() 在数组开头插入一个或多个元素
2011/11/07 PHP
php比较两个字符串长度的方法
2015/07/13 PHP
php提高网站效率的技巧
2015/09/29 PHP
javascript+xml技术实现分页浏览
2008/07/27 Javascript
简单通用的JS滑动门代码
2008/12/19 Javascript
早该知道的7个JavaScript技巧
2013/03/27 Javascript
JavaScript等比例缩放图片控制超出范围的图片
2013/08/06 Javascript
用原生js做个简单的滑动效果的回到顶部
2014/10/15 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
2015/09/19 Javascript
快速掌握Node.js模块封装及使用
2016/03/21 Javascript
node.js 中国天气预报 简单实现
2016/06/06 Javascript
jQuery仿京东商城楼梯式导航定位菜单
2016/07/25 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
javascript深拷贝和浅拷贝详解
2017/02/14 Javascript
JavaScript登录记住密码操作(超简单代码)
2017/03/22 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
vue.js2.0点击获取自己的属性和jquery方法
2018/02/23 jQuery
详解小程序用户登录状态检查与更新实例
2019/05/15 Javascript
Ajax请求时无法重定向的问题解决代码详解
2019/06/21 Javascript
微信小程序引入模块中wxml、wxss、js的方法示例
2019/08/09 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
使用Vue Composition API写出清晰、可扩展的表单实现
2020/06/10 Javascript
Python 除法小技巧
2008/09/06 Python
Python中的包和模块实例
2014/11/22 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python实现ssh批量登录并执行命令
2016/10/25 Python
如何在vscode中安装python库的方法步骤
2021/01/06 Python
CSS3 实用技巧:实现黑白图像效果示例代码
2013/07/11 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
农行实习自我鉴定
2013/09/22 职场文书
公司领导班子对照检查存在问题整改措施
2014/10/02 职场文书
校园学雷锋广播稿
2014/10/08 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
大学生奶茶店创业计划书
2019/06/25 职场文书