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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
DWR实现模拟Google搜索效果实现原理及代码
Jan 30 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
Feb 12 Javascript
js实现继承的5种方式
Dec 01 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
jQuery增加和删除表格项目及实现表格项目排序的方法
May 30 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
Sep 13 Javascript
vue自定义指令实现方法详解
Feb 11 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
Nov 13 Javascript
Vue 基于 vuedraggable 实现选中、拖拽、排序效果
May 18 Javascript
三种方式清除vue路由跳转router-link的历史记录
Apr 10 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
php ci框架中加载css和js文件失败的解决方法
2014/03/03 PHP
Yii rules常用规则示例
2016/03/15 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
js模拟hashtable的简单实例
2014/03/06 Javascript
javascript自定义函数参数传递为字符串格式
2014/07/29 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
2015/10/16 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
2015/11/24 Javascript
JS实现列表的响应式排版(推荐)
2016/09/01 Javascript
vue使用自定义icon图标的方法
2018/05/14 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
vuex + axios 做登录验证 并且保存登录状态的实例
2018/09/16 Javascript
微信小程序学习笔记之本地数据缓存功能详解
2019/03/29 Javascript
微信小程序mpvue点击按钮获取button值的方法
2019/05/29 Javascript
JavaScript实现的滚动公告特效【基于jQuery】
2019/07/10 jQuery
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
原生JavaScript实现滑动拖动验证的示例代码
2019/12/06 Javascript
JS实现网页端猜数字小游戏
2020/03/06 Javascript
JavaScript实现电灯开关小案例
2020/03/30 Javascript
VSCode 添加自定义注释的方法(附带红色警戒经典注释风格)
2020/08/27 Javascript
[01:35]2018年度CS GO最佳战队-完美盛典
2018/12/17 DOTA
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
什么是python的自省
2020/06/21 Python
django使用graphql的实例
2020/09/02 Python
html5 datalist 选中option选项后的触发事件
2020/03/05 HTML / CSS
美国专业级皮肤病和spa品质护肤品的高级零售网站:SkinCareRx
2017/02/06 全球购物
装配车间主任岗位职责
2015/04/08 职场文书
Mac M1安装mnmp (Mac+Nginx+MySQL+PHP) 开发环境
2021/03/29 PHP
Python基础之条件语句详解
2021/06/16 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫