前端开发者html5前端开发总结|nodejs前端开发|前端jsp开发模式
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>
[color=Red]最终出现的结果为，world，null，null，world！[/color]
使用 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 函数只会在有值的索引上被调用；[color=Red]那些从来没被赋过值或者使用
delete 删除的索引则不会被调用[/color]。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”]
代码片段 1
<!DOCTYPE HTML>
<html lang=”en-US”>
<head>
<meta charset=”UTF-8″>
<title>前端js开发神器</title>
</head>
<body>
<script type=”text/javascript”>
function fuzzyPlural(single) {
var result = single.replace(/o/g, ‘e’);
if (single === ‘kangaroo’) {
result += ‘se’;
}
return result;
}
var words = [“foot”, ‘goose’, ‘moose’, ‘kangaroo’];
alert([“foot”, ‘goose’, ‘moose’, ‘kangaroo’].map(fuzzyPlural));
</script>
</body>
</html>
求数组中每个元素的平方根例子
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变成一个数组，并且使用该数组工作更方便，[color=Red]第二个参数是从索引值，开始将其变成数组，例Array.prototype.call(“22223”,2)和Array.prototype.call([1,2,3,4],2)，从字符串第二个开始[/color]。
例子
<scripttype=”text/javascript”>
var b=Array.prototype.slice.call(“HelloWorld”);
console.log(b);
</script>
[color=Red] 最后输出结果为数组[‘H’,’e’,’l’,’l’,’o’,’W’,’o’,’r’,’l’,’d’][/color]
两者延伸对比Array.prototype.map.call(obj,charFun)和Array.prototype.slice.call(obj).map(charFun)
<scripttype=”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);
functionchar(x) { returnx.charCodeAt(0); }
varb=Array.prototype.slice.call(“HelloWorld”).map(char);
console.log(b);
</script>
[color=Red] 输出的结果都是[72, 101, 108, 108, 111, 32, 87, 111, 114, 108, 100][/color]，Array.prototype.map.call(obj,charFun)和Array.prototype.slice.call(obj).map(charFun)都达到了相同的效果，都将字符串，转换成了新的数组。
js中Object.prototype.toString()方法
在JavaScript中,想要判断某个对象值属于哪种内置类型,最靠谱的做法就是通过Object.prototype.toString方法.
var arr = [];
console.log(Object.prototype.toString.call(arr)) //”[object Array]”
Object.prototype.toString()
在toString方法被调用时,会执行下面的操作步骤:
1. 获取this对象的[[Class]]属性的值.
2. 计算出三个字符串”[object “, 第一步的操作结果Result(1), 以及 “]”连接后的新字符串.
3. 返回第二步的操作结果Result(2).
function isType(arg){
return Object.prototype.toString.call(arg);
}
alert( Object.prototype.toString(‘522’)); // 结果 [object Object] ,因为没有指定this作用域，则this指向window对象，需要通过call修改this指向
console.log(isType([1,2,3,4]) === “[object Array]”); // 结果[object Array]
console.log(isType({name:”222″,age:”22255″})===”[object Object]”); // 结果[object Object]
console.log(isType(“1223″)===”[object String]”);// 结果[object String]
[color=Red]让其检查，object，string，array 更有语义化：[/color]
function isType(type){
return function (arg){
return Object.prototype.toString.call(arg) === [object type]
}
}
var isObject = isType(“Object”),
isString = isType(“String”),
isArray = isType(“Array”);
isObject({name:’pingfan’});
isArray([pingfan,w3c]);
isString(“string”);
java前端开发研究方向|html5前端开发的书|做前端开发_想买mac
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册