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"]





执行代码复制代码保存代码提示:您能够先改动部分代码再执行!power by W3Cfuns.com





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



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;

};

}







方法javascript中Array.prototype.slice.call(arguments)



另一个常见的知识点,可能曾经我们通常看到Array.prototype.slice.call(arguments,1)或者Array.prototype.slice.call(arguments),都有点摸不着头脑,事实上我们就是借助Array.prototype中



slice()将arguments变成一个数组,而且使用该数组工作更方便。

样例



<script type="text/javascript">

var b=Array.prototype.slice.call("HelloWorld");

console.log(b);

</script>





最后输出结果为数组['H','e','l','l','o','W','o','r','l','d']





两者延伸对照Array.prototype.map.call(obj,charFun)和Array.prototype.slice.call(obj).map(charFun)



<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);



function char(x) { return x.charCodeAt(0); }

var b=Array.prototype.slice.call("HelloWorld").map(char);

console.log(b);

</script>





输出的结果都是[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100],Array.prototype.map.call(obj,charFun)和Array.prototype.slice.call(obj).map(charFun)都达到了同样的效果,都将字符串。转换成了新的数组。

说说常见的几个js疑难点的更多相关文章

  1. 常见的几个js疑难点,match,charAt,charCodeAt,map,search

            JavaScript match() 方法 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastI ...

  2. JS疑难点和GC原理

    js解析与序列化json数据(一)json.stringify()的基本用法: 对象有两个方法:stringify()和parse().在最简单的情况下,这两个方法分别用于把JavaScript对象序 ...

  3. 常见排序算法(JS版)

    常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html <! ...

  4. finereport---FineReport入门常见疑难点

    一.入门介绍 二.入门需知 注意:开发人员可以设置DEBUG级别,有助于测试 三.数据准备 数据集sql中可以使用参数宏${}动态地生成过滤条件,${}中的语句在FineReport报表中执行,将${ ...

  5. 常见排序算法基于JS的实现

    一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列 ...

  6. 常见开发需求之js处理url汉字编码中的乱码

    需求及解决    两个页面传值的需求是很常见的,angular中有很多常见的方法用于传值,而且都不会受到字符编码的影响,而采用传统的url中拼字符串进行传值的操作,如果拼串中涉及到中文字符,我们就要考 ...

  7. git的一些疑难点

    一 .git reset,git revert,git checkout的区别和联系 主要参考:http://www.cnblogs.com/houpeiyong/p/5890748.html git ...

  8. 常见面试算法题JS实现-仅用递归函数和栈操作逆序一个栈

    前言: 因为JAVA和JS语言特性的不同,有些东西在JAVA中可能需要一些技巧和手段才能实现的复杂程序,但是在JS中可能就是天然存在的,所以这套书里面的题目不会全部用JS去实现一遍,因为可能JS的实现 ...

  9. 常见面试算法题JS实现-设计一个有getMin功能的栈

    前言: 已经确定工作了-下周一正式入职,按理说应该是可以好好浪荡一周的,但是内心总是不安,总觉得自己这个水平真的太菜了,还是趁着现在有自己的时间,赶紧多看看书,多学习学习吧orz所以把之前校招买的书, ...

随机推荐

  1. JMeter 十四:最佳实践

    参考:http://jmeter.apache.org/usermanual/best-practices.html 1. 总是使用最新版本的JMeter 2. 使用合适数目的Thread Threa ...

  2. js 终止 forEach 循环

    1.因为 forEach() 无法通过正常流程终止,所以可以通过抛出异常的方式实现终止. try{ var array = ["first","second", ...

  3. js实现页面元素随着内容的滚动而滚动

      CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...

  4. 【MySQL】玩转定时器

    1.前置条件,你需要将服务器和mysql的时间都设置成东八区,php.ini和my.cnf配置(参考上篇文章) 2.进入mysql客户端,推荐Navicat for mysql 3.首先查看是否开启了 ...

  5. 阿里云web播放器

    原文地址:https://help.aliyun.com/document_detail/51991.html?spm=5176.doc61109.6.703.ZTCYoi 一.概念说明 1. pla ...

  6. java基础讲解03-----java的结构

    前面我们说了java是面向对象的语言,java程序的基本组成单元是类,类中又属性,方法两个部分,每个应用程序都会有一个mian函数,含有main()方法的类,我们称为主类 package  Test; ...

  7. 冻结 锁定 固定 行 列 表头 抬头 html table jquery 全兼容常见浏览器

    转:http://www.cnblogs.com/sorex/archive/2011/06/30/2093499.html <!DOCTYPE html PUBLIC "-//W3C ...

  8. Linux 系统 pptpd+radius+mysql 安装攻略

    分类: 原文地址:Linux 系统 pptpd+radius+mysql 安装攻略 作者:wfeng .你所需要的软件 内核最好能升级到2.6 如果你是centos的用户,可以通过yum update ...

  9. 在Unity控制台下使用富文本

    之前都不知道,最近看了csdn一位开发者的博文突然发现 <b>asd</b> <color="red">asd</color> &l ...

  10. 多线程-ReentrantReadWriteLock

    ReentrantLock具有完全互斥排他的效果,即同一时间只有一个线程在执行ReentrantLock.lock()方法后面的任务.这样做虽然保证了实例变量的线程安全,但效率却是非常低下的.JDK中 ...