本篇文章主要总结,js很多方法可以实现同样功能,他们的区别在哪里。
1.substr()、substring()、slice()区别
三者都可以字符串截取,但是它们究竟有哪些细微的区别呢?
首先要看下手册对三个方法的定义:
方法 | substr |
---|---|
定义和用法 | substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。 |
语法 | stringObject.substr(start,length) |
参数 | 描述 |
start | 必需。要抽取的子串的起始下标。必须是数值。如果是负数,那么该参数声明从字符串的尾部开始算起的位置。也就是说,-1 指字符串中最后一个字符,-2 指倒数第二个字符,以此类推。 |
length | 可选。子串中的字符数。必须是数值。如果省略了该参数,那么返回从 stringObject 的开始位置到结尾的字串。 |
返回值 | 一个新的字符串,包含从 stringObject 的 start(包括 start 所指的字符) 处开始的 length 个字符。如果没有指定 length,那么返回的字符串包含从 start 到 stringObject 的结尾的字符。 |
方法 | subtring |
---|---|
定义和用法 | substring() 方法用于提取字符串中介于两个指定下标之间的字符。 |
语法 | stringObject.substring(start,stop) |
参数 | 描述 |
start | 必需。一个非负的整数,规定要提取的子串的第一个字符在 stringObject 中的位置。 |
stop | 可选。一个非负的整数,比要提取的子串的最后一个字符在 stringObject 中的位置多 1。如果省略该参数,那么返回的子串会一直到字符串的结尾。 |
返回值 | 一个新的字符串,该字符串值包含 stringObject 的一个子字符串,其内容是从 start 处到 stop-1 处的所有字符,其长度为 stop 减 start。 |
说明 | substring() 方法返回的子串包括 start 处的字符,但不包括 stop 处的字符。 |
说明特殊情况 | 如果参数 start 与 stop 相等,那么该方法返回的就是一个空串(即长度为 0 的字符串)。如果 start 比 stop 大,那么该方法在提取子串之前会先交换这两个参数。 |
方法 | slice |
---|---|
定义和用法 | slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。 |
语法 | stringObject.slice(start,end) |
参数 | 描述 |
start | 要抽取的片断的起始下标。如果是负数,则该参数规定的是从字符串的尾部开始算起的位置。也就是说,-1 指字符串的最后一个字符,-2 指倒数第二个字符,以此类推。 |
end | 紧接着要抽取的片段的结尾的下标。若未指定此参数,则要提取的子串包括 start 到原字符串结尾的字符串。如果该参数是负数,那么它规定的是从字符串的尾部开始算起的位置。 |
返回值 | 一个新的字符串。包括字符串 stringObject 从 start 开始(包括 start)到 end 结束(不包括 end)为止的所有字符。 |
说明 | String 对象的方法 slice()、substring() 和 substr() (不建议使用)都可返回字符串的指定部分。slice() 比 substring() 要灵活一些,因为它允许使用负数作为参数。slice() 与 substr() 有所不同,因为它用两个字符的位置来指定子串,而 substr() 则用字符位置和长度来指定子串。 |
可以看出上面的三种方法相同点可以截取字符串,不同点则如下。
substr | substring | slice | |
---|---|---|---|
start | 是整数即可 | 必须是非负数的整数 | 是整数即可 |
length\stop\end | 从start开始截取为长度为length的字符串 | 从start开始截取到stop-1位置的字符串 | 从start开始截取到end位置的字符串(不包括end) |
2.slice()和splice()区别
两者都是Array 对象方法,长得又那么相似,好像一对同父同母的双胞胎,但是它们两个的作用可有天差地别的效果。
方法 | slice |
---|---|
定义和用法 | slice() 方法可从已有的数组中返回选定的元素。 |
语法 | arrayObject.slice(start,end) |
参数 | 描述 |
start | 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。 |
返回值 | 返回一个新的数组,包含从 start 到 end (不包括该元素)的 arrayObject 中的元素 |
说明 | 请注意,该方法并不会修改数组,而是返回一个子数组。如果想删除数组中的一段元素,应该使用方法 Array.splice()。 |
方法 | splice |
---|---|
定义和用法 | splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。 |
语法 | arrayObject.splice(index,howmany,item1,…,itemX) |
参数 | 描述 |
index | 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。 |
howmany | 必需。要删除的项目数量。如果设置为 0,则不会删除项目。 |
item1, …, itemX | 可选。向数组添加的新项目。 |
返回值 | 类型为Array,包含被删除项目的新数组,如果有的话。 |
说明 | splice() 方法可删除从 index 处开始的零个或多个元素,并且用参数列表中声明的一个或多个值来替换那些被删除的元素。如果从 arrayObject 中删除了元素,则返回的是含有被删除的元素的数组。 |
从手册对它们的定义上我们就可以看出,它们的性质是不一样的
方法 | slice | splice |
---|---|---|
说明 | 该方法并不会修改数组,而是返回一个子数组 | 该方法会直接对数组进行修改,并返回修改后的数组 |
细心的同学可以发现,arrayObject.slice(start,end) 和stringObject.slice(start,end)方法一模一样。
3.for循环 、forEach的区别
首先看下手册对它们的定义:
for - 循环代码块一定的次数
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
实例
for (var i=0; i<5; i++)
{
x=x + "The number is " + i + "<br>";
}
需要注意几点:
for循环语句都是可选的,如下面实例:
var list=[1,2,3,4];
//省略语句1;
var i=1;
for ( ;i<list.length; i++){
console.log(i);
}
//省略语句2;
for (var i=0; ;i++){
if (i>3) {
break;
}
console.log(i);
}
//省略语句3;
for (var i=0;i<list.length; ){
console.log(i);
i++;
}
方法 | forEach |
---|---|
定义和用法 | forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。 |
语法 | array.forEach(function(currentValue, index, arr), thisValue) |
参数 | 语法 |
function(currentValue, index, arr) | 必需。 数组中每个元素需要调用的函数。 |
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值。 |
arr | 可选。当前元素所属的数组对象。 |
thisValue | 可选。传递给函数的值一般用 “this” 值。如果这个参数为空, “undefined” 会传递给 “this” 值 |
由于手册给出条件较少,我对此也是一知半解,在自己多试验了几次和网友提供的区别建议,我认为有几下几点区别:
方法 | for | forEach |
---|---|---|
循环方式 | 下标 | 数组的key或者对象的属性 |
执行效率 | 循环对象length确定效率高 | 循环对象length不确定,效率高 |
对象操作 | 对循环对象可以进行修改操作 | 循环对象不可进行修改操作 |
跳出循环 | 可以使用return或break,跳出循环 | 不可中途跳出循环 |
说到循环我不得不在多说两个方法,for… in和for…of ;
两者都可以遍历数组和对象,但是有什么区别呢?
方法 | for…in | for…of |
---|---|---|
js版本 | ES5版本 | ES6版本 |
编辑对象 | 遍历key | 遍历value |
下面举个栗子(证明遍历对象区别的):
Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};
let iterable = [3, 5, 7];
iterable.foo = 'hello';
for (let i in iterable) {
console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom"
}
for (let i of iterable) {
console.log(i); // logs 3, 5, 7
}