说说常见的几个js疑难点

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)都达到了相同的效果,都将字符串,转换成了新的数组。

时间: 2024-10-18 08:38:54

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

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

        JavaScript match() 方法 定义和用法 match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配. 该方法类似 indexOf() 和 lastIndexOf(),但是它返回指定的值,而不是字符串的位置. 语法 //匹配字符串,返回指定的值 stringObject.match(searchvalue) //匹配正则,返回指定的值 stringObject.match(regexp) 使用 match() 来检索一个字符串例子: <html>

JS疑难点和GC原理

1. JS中的typeof是一元操作符,不是函数 在chrome的Console控制台上,输入typeof null,它会输出"object".因此,使用typeof操作符的时候,除了null,都会识别出其他数据的类型. 2. JS中的instanceof来区分Object下的Array.Json.RegEx.Date.Function.Error.Math instanceof对于非对象,返回false instanceof对于原型链上的对象,返回原型链对象 3. Object转St

Node.js源码解析----自己实现一个Node.js的难点与思路

前言: 最近在看Node.js,看了一段时间后便想着自己实现一个Node.js现在已经实现了个大概(绝大部分是模仿人家,不过自己实现一遍基本上就理解Node.js的原理了)下面便说说这个过程中的坑,以及一些需要注意的地方: Node.js需要一定C++基础,建议看完C++Primer再看,否则V8的好多表达方式,指针,引用,模板之类的会看不懂: 代码已上传GitHub地址:   https://github.com/sven36/cNode 编译:我用的win10的环境,具体编译请参考Node.

常见排序算法(JS版)

常见排序算法(JS版)包括: 内置排序,冒泡排序,选择排序,插入排序,希尔排序,快速排序(递归 & 堆栈),归并排序,堆排序,以及分析每种排序算法的执行时间. index.html 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>twobin 常见排序算法 (JS版) </title> 5 <meta http-equiv="content-type" content=&

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

一.入门介绍 二.入门需知 注意:开发人员可以设置DEBUG级别,有助于测试 原文地址:https://www.cnblogs.com/michellexiaoqi/p/8886205.html

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

一:冒泡排序 1. 原理 a. 从头开始比较相邻的两个待排序元素,如果前面元素大于后面元素,就将二个元素位置互换 b. 这样对序列的第0个元素到n-1个元素进行一次遍历后,最大的一个元素就“沉”到序列的最后位置(第n-1个位置,n为待排序元素个数) c.排除此次排序最后面的那个元素(n=n-1),继续对剩余序列重复前面两步 d. 当(n= n-1)=0时,排序完成 2. 具体实现 以如下待排序序列为例: 到此,第一次冒泡完成,最大值7冒泡到最后面. 然后继续对除最后元素(7)外的序列进行冒泡排序

git的一些疑难点

一 .git reset,git revert,git checkout的区别和联系 主要参考:http://www.cnblogs.com/houpeiyong/p/5890748.html git reset.git checkout和git revert是你的Git工具箱中最有用的一些命令.它们都用来撤销代码仓库中的某些更改,而前两个命令不仅可以作用于提交,还可以作用于特定文件. 因为它们非常相似,所以我们经常会搞混,不知道什么场景下该用哪个命令.在这篇文章中,我们会比较git reset

常见6种原生js编写Tab切换(1)

第一种方法为 for循环套for循环,遍历 简单的布局: 三个切换按钮li,和三个div块. <ul> <li>111</li> <li>222</li> <li>333</li> </ul>  <div style=background:red;></div> <div style=background:blue;></div> <div style=ba

selenium 常见操作,使用 js 操作-日期框及文本框

在使用 selenium 对页面进行相关操作时,有时候会遇到以下三种情况: 1.日期框:无法直接输入文本,必须要选择某一天的日期并点击才会填入文本框; 2.检索框:可以直接输入文本,但必须要点击根据输入的文本检索出来的下拉列表的某-项; 3.置灰的文本框:无法直接输入文本 按照常规套路,我们通常都会采取各种元素定位方法按照操作步骤一步步来实现 ,但是遇到上面三种奇葩,页面定位操作就显得有些捉襟见肘了,因此我们可以通过 selenium 中的 javascript 操作来处理它. 我们以12306