说说常见的几个js疑难点

2024-06-10 17:38
文章标签 常见 几个 js 疑难

本文主要是介绍说说常见的几个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)都达到了相同的效果,都将字符串,转换成了新的数组。

这篇关于说说常见的几个js疑难点的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1048825

相关文章

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

每天认识几个maven依赖(ActiveMQ+activemq-jaxb+activesoap+activespace+adarwin)

八、ActiveMQ 1、是什么? ActiveMQ 是一个开源的消息中间件(Message Broker),由 Apache 软件基金会开发和维护。它实现了 Java 消息服务(Java Message Service, JMS)规范,并支持多种消息传递协议,包括 AMQP、MQTT 和 OpenWire 等。 2、有什么用? 可靠性:ActiveMQ 提供了消息持久性和事务支持,确保消

在JS中的设计模式的单例模式、策略模式、代理模式、原型模式浅讲

1. 单例模式(Singleton Pattern) 确保一个类只有一个实例,并提供一个全局访问点。 示例代码: class Singleton {constructor() {if (Singleton.instance) {return Singleton.instance;}Singleton.instance = this;this.data = [];}addData(value)

uva 10061 How many zero's and how many digits ?(不同进制阶乘末尾几个0)+poj 1401

题意是求在base进制下的 n!的结果有几位数,末尾有几个0。 想起刚开始的时候做的一道10进制下的n阶乘末尾有几个零,以及之前有做过的一道n阶乘的位数。 当时都是在10进制下的。 10进制下的做法是: 1. n阶位数:直接 lg(n!)就是得数的位数。 2. n阶末尾0的个数:由于2 * 5 将会在得数中以0的形式存在,所以计算2或者计算5,由于因子中出现5必然出现2,所以直接一

Node.js学习记录(二)

目录 一、express 1、初识express 2、安装express 3、创建并启动web服务器 4、监听 GET&POST 请求、响应内容给客户端 5、获取URL中携带的查询参数 6、获取URL中动态参数 7、静态资源托管 二、工具nodemon 三、express路由 1、express中路由 2、路由的匹配 3、路由模块化 4、路由模块添加前缀 四、中间件

EasyPlayer.js网页H5 Web js播放器能力合集

最近遇到一个需求,要求做一款播放器,发现能力上跟EasyPlayer.js基本一致,满足要求: 需求 功性能 分类 需求描述 功能 预览 分屏模式 单分屏(单屏/全屏) 多分屏(2*2) 多分屏(3*3) 多分屏(4*4) 播放控制 播放(单个或全部) 暂停(暂停时展示最后一帧画面) 停止(单个或全部) 声音控制(开关/音量调节) 主辅码流切换 辅助功能 屏

使用JS/Jquery获得父窗口的几个方法(笔记)

<pre name="code" class="javascript">取父窗口的元素方法:$(selector, window.parent.document);那么你取父窗口的父窗口的元素就可以用:$(selector, window.parent.parent.document);如题: $(selector, window.top.document);//获得顶级窗口里面的元素 $(

js异步提交form表单的解决方案

1.定义异步提交表单的方法 (通用方法) /*** 异步提交form表单* @param options {form:form表单元素,success:执行成功后处理函数}* <span style="color:#ff0000;"><strong>@注意 后台接收参数要解码否则中文会导致乱码 如:URLDecoder.decode(param,"UTF-8")</strong></span>

JVM 常见异常及内存诊断

栈内存溢出 栈内存大小设置:-Xss size 默认除了window以外的所有操作系统默认情况大小为 1MB,window 的默认大小依赖于虚拟机内存。 栈帧过多导致栈内存溢出 下述示例代码,由于递归深度没有限制且没有设置出口,每次方法的调用都会产生一个栈帧导致了创建的栈帧过多,而导致内存溢出(StackOverflowError)。 示例代码: 运行结果: 栈帧过大导致栈内存

js react 笔记 2

起因, 目的: 记录一些 js, react, css 1. 生成一个随机的 uuid // 需要先安装 crypto 模块const { randomUUID } = require('crypto');const uuid = randomUUID();console.log(uuid); // 输出类似 '9b1deb4d-3b7d-4bad-9bdd-2b0d7b3dcb6d'