在前端开发中,我们要经常用到js中的数组的内置方法,在控制台中的打印中,我们可以看到数组中的内置方法。
Array.concat()
该方法可以合并一个或者多个数组
let arr = [1,2,3];
let arr1 = [4,5,6];
let arr2 = [7,8,9];
let newArr = arr.concat(arr1); //[1,2,3,4,5,6]
let newArr1 = arr.concat(arr1,arr2); //[1,2,3,4,5,6,7,8,9]
Array.copyWithin()
该方法复制数组内的某些值到到另一个索引位置,用法arr.copyWithin(target,start,end)执行后,该数组发生改变,可以传三个参数
target 是目标索引
start 复制源索引的开始,可以忽略,默认为0,复制源包含该索引的值
end 复制源索引的结束,可以忽略,默认为arr.length+1,复制源不包含该索引的值
let arr = [1,2,3,4,5,6];
let arr1 = [1,2,3,4,5,6];
let arr2 = [1,2,3,4,5,6];
let arr3 = [1,2,3,4,5,6];
arr.copyWithin(0,2,3); //[3,2,3,4,5,6]
arr1.copyWithin(0,2,4); //[3,4,3,4,5,6] 这里可以看到如果复制源为多个值,他也会替换掉目标索引后面的值
arr2.copyWithin(3) //[1,2,3,1,2,3] 这里默认start=0,end=5,也就是整个数组都是复制源,从目标索引为3的位置开始复制,因为后面只有三个位置,所以复制源后面的4,5,6就没有再复制,也就是数组长度不会变
arr3.copyWithin(3,-2,-4) //[1, 2, 3, 3, 4, 6] 负数的时候从右边开始算
Array.every()
遍历数组,遍历的时候检测一旦有值不符合就返回false,他的使用arr.every(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
var arr = [2,5,6,7,4,5];
var arr1 = [15,34,55,654,4343];
arr.every(function(item,index.array){
return item>5
}) //false
arr1.every(function(item,index.array){
return item>5
}) //true
Array.fill()
向数组特定位置插入某个值,使用fill(value,start,end);value要插入的值,start插入的开始索引,默认为0,end插入的结束索引,默认为array.length
[1,2,3,4,5].fill(3) //[3,3,3,3,3]
[1,2,3,4,5].fill(3,2) //[1,2,3,3,3]
[1,2,3,4,5].fill(3,2,4) //[1,2,3,3,5]
[1,2,3,4,5].fill(3,-5,-2) //[3, 3, 3, 4, 5] start和end允许负值
Array.filter()
通过遍历数组来过滤某些值,它的使用arr.fill(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
[null,1,2,3,4,null].filter(function(item,index,array){
return item
}) //[1,2,3,4]
Array.find()
查找数组的第一次出现的值,它的使用arr.find(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
var arr= [
{
name:"教师1",
teaid:1
},
{
name:"教师2",
teaid:2
},
{
name:"教师1",
teaid:3
}
]
arr.find(function(item,index,array){
return item.name=="教师1"
}) // {name: "教师1", teaid: 1} 只返回找到的第一个值
Array.findIndex()
查找数组的第一次出现的值的索引,没有找到返回-1,它的使用arr.findIndex(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
[1,2,3,4].findIndex(function(item,index,array){
return item == 2
}) //1
[1,2,3,4].findIndex(function(item,index,array){
return item == 25
}) //-1
Array.flat()
通过遍历可以将数组内的数组合并成为一个数组,用法arr.flat(deep) 参数deep为合并的层数,该方法会改变原数组
[1,2,[3,4,[5,6]],7,8].flat() //[1,2,3,4,[5,6],7,8]
[1,2,[3,4,[5,6]],7,8].flat(2) //[1,2,3,4,5,6,7,8]
Array.forEach()
该方法可以遍历数组内的每一项,用法arr.forEach(callback(item,index,array),thisArg),该方法不会改变数组本身
var arr= [
{
name:"教师1",
teaid:1
},
{
name:"教师2",
teaid:2
},
{
name:"教师1",
teaid:3
}]
arr.forEach((item,index,array)=>{
console.log(item.name)
})// 教师1 教师2 教师1
Array.includes()
判断数组中是否含有某个值,如果有返回true,没有返回false,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找。
var arr=["hello","world"]
arr.includes("hello") //true
arr.includes("hello",1)//false
Array.indexOf()
查找数组中是否含有某个值,如果有返回找到的第一个值的下标,没有返回-1,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找
var arr=[1,2,3,4,5]
arr.indexOf(1)//0
arr.indexOf(4)//3
arr.indexOf(2,3)//-1
Array.join()
将数组内的值全部拼成一个字符串,用法arr.join(partition),partition是指定某个字符将数组内的元素隔开,默认为","
var arr=["hello","world"]
arr.join(); //"hello,world"
arr.join("-"); //"hello-world"
arr.join(" "); //"hello world"
Array.lastIndexOf()
和indexOf()相似,该方法会返回数组中最后一个值的下标,没有返回-1,只是checkIndex是从该下标开始逆向查找
var arr=[1,2,1,4,5,4,2]
arr.lastIndexOf(1)//2
arr.lastIndexOf(6)//-1
arr.lastIndexOf(2,3)//1
Array.map()
遍历数组,并根据处理返回一个新的数组,但是不会改变原来数组,和forEach用法类似,与forEach区别是map()方法要有返回值;
var arr=[1,2,3,4];
var newArr=arr.map((item,index,array)=>{
return item+2
})
arr //[1,2,3,4]
newArr //[3,4,5,6]
Array.pop()
删除数组最后一个值并返回数组最后一个值,该方法会改变原来数组
var arr=[1,2,3,4,5]
var lastNum=arr.pop();
lastNum//5
arr//[1,2,3,4]
Array.push()
从数组尾部添加元素并返回数组改变后的数组长度,该方法会改变原来数组
var arr=[1,2,3,4,5]
var arrlength=arr.push(6);
arr.push(6,7,8,9);
arr //[1,2,3,4,5,6]
arrlength //6
Array.reverse()
将原数组反转,该方法会改变原数组
var arr=[1,2,3,4,5]
arr.reverse()
arr// [5,4,3,2,1]
Array.shift()
删除数组中的第一个元素,该方法会改变原数组
var arr=[1,2,3,4,5]
var shiftNum=arr.shift();
shiftNum//1
arr//[2,3,4,5]
Array.unshift()
从数组开始位置添加数据,该方法会改变原数组
var arr=[1,2,3,4,5]
var length=arr.unshift();
length//6
arr//[2,3,4,5]
Array.slice()
提取数组特定下标范围内的值,用法arr.slice(start,end),start开始提取的下标值,end结束提取的下标值(提取出来的数组包含start下标的元素值,不包含end下标的元素值),该方法不会改变数组
var arr=[1,2,3,4,5]
var sliceArr=arr.slice(1,2)
arr// [1,2,3,4,5]
sliceArr//[2]
Array.some()
遍历判断数组内是否符合要求的元素,只有有一个就返回true,没有就返回false,它的使用arr.some(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数当前处理的数组元素item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
//判断是否有大于2的元素
[null,1,2,3,4,null].some(function(item,index,array){
return item>2
})//true
Array.sort()
对数组进行排序,用法arr.sort(callback(compareFir,compareSed)),compareFir、compareSed分别是比较的第一个和第一个元素,该方法会改变原来数组排序;
var arr=[1,56,2,54,776];
arr.sort() // arr=[1,2,54,56,776]
//也可以用于成绩排序之类的
var stuScore=[
{
stuName:'job',
score:45,
},
{
stuName:'jack',
score:4
},
{
stuName:'tom',
score:90,
},
{
stuName:'alice',
score:89,
},
{
stuName:'lei',
score:63,
}
]
stuScore.sort((firVal,sedVal)=>{
if(firVal.score>sedVal.score){
return 1
}else{
return -1
}
return 0
})
console.log(stuScore) //
[
{stuName: "jack", score: 4}
{stuName: "job", score: 45}
{stuName: "lei", score: 63}
{stuName: "alice", score: 89}
{stuName: "tom", score: 90}
]
Array.splice()
该方法可以删除或者向数组内添加元素,用法arr.splice(start,deleteSum,item1,item2...),start表示开始删除或者添加开始的下标,deleteSum表示要删除元素的个数,要添加元素时,deleteSum应为0或者为负数,item1,item2...这些表示要添加的元素,该方法会修改原来数组。
var arr=[1,2,3,4,5];
var spliceArr=arr.splice(2,2) //此时arr为[1,2,5],spliceArr为[3,4]
arr.splice(2,0,5,6) //此时arr为[1,2,5,6,3,4,5]
Array.toString()
将数组转换成字符串,
var arr = [1,2,3,4,5]
arr.toString() //"1,2,3,4,5" 该方法不会改变原数组,arr依然是[1,2,3,4,5]
Array.concat()
该方法可以合并一个或者多个数组
let arr = [1,2,3];
let arr1 = [4,5,6];
let arr2 = [7,8,9];
let newArr = arr.concat(arr1); //[1,2,3,4,5,6]
let newArr1 = arr.concat(arr1,arr2); //[1,2,3,4,5,6,7,8,9]
Array.copyWithin()
该方法复制数组内的某些值到到另一个索引位置,用法arr.copyWithin(target,start,end)执行后,该数组发生改变,可以传三个参数
target 是目标索引
start 复制源索引的开始,可以忽略,默认为0,复制源包含该索引的值
end 复制源索引的结束,可以忽略,默认为arr.length+1,复制源不包含该索引的值
let arr = [1,2,3,4,5,6];
let arr1 = [1,2,3,4,5,6];
let arr2 = [1,2,3,4,5,6];
let arr3 = [1,2,3,4,5,6];
arr.copyWithin(0,2,3); //[3,2,3,4,5,6]
arr1.copyWithin(0,2,4); //[3,4,3,4,5,6] 这里可以看到如果复制源为多个值,他也会替换掉目标索引后面的值
arr2.copyWithin(3) //[1,2,3,1,2,3] 这里默认start=0,end=5,也就是整个数组都是复制源,从目标索引为3的位置开始复制,因为后面只有三个位置,所以复制源后面的4,5,6就没有再复制,也就是数组长度不会变
arr3.copyWithin(3,-2,-4) //[1, 2, 3, 3, 4, 6] 负数的时候从右边开始算
Array.every()
遍历数组,遍历的时候检测一旦有值不符合就返回false,他的使用arr.every(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
var arr = [2,5,6,7,4,5];
var arr1 = [15,34,55,654,4343];
arr.every(function(item,index.array){
return item>5
}) //false
arr1.every(function(item,index.array){
return item>5
}) //true
Array.fill()
向数组特定位置插入某个值,使用fill(value,start,end);value要插入的值,start插入的开始索引,默认为0,end插入的结束索引,默认为array.length
[1,2,3,4,5].fill(3) //[3,3,3,3,3]
[1,2,3,4,5].fill(3,2) //[1,2,3,3,3]
[1,2,3,4,5].fill(3,2,4) //[1,2,3,3,5]
[1,2,3,4,5].fill(3,-5,-2) //[3, 3, 3, 4, 5] start和end允许负值
Array.filter()
通过遍历数组来过滤某些值,它的使用arr.fill(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
[null,1,2,3,4,null].filter(function(item,index,array){
return item
}) //[1,2,3,4]
Array.find()
查找数组的第一次出现的值,它的使用arr.find(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
var arr= [
{
name:"教师1",
teaid:1
},
{
name:"教师2",
teaid:2
},
{
name:"教师1",
teaid:3
}
]
arr.find(function(item,index,array){
return item.name=="教师1"
}) // {name: "教师1", teaid: 1} 只返回找到的第一个值
Array.findIndex()
查找数组的第一次出现的值的索引,没有找到返回-1,它的使用arr.findIndex(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数每项的值item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
[1,2,3,4].findIndex(function(item,index,array){
return item == 2
}) //1
[1,2,3,4].findIndex(function(item,index,array){
return item == 25
}) //-1
Array.flat()
通过遍历可以将数组内的数组合并成为一个数组,用法arr.flat(deep) 参数deep为合并的层数,该方法会改变原数组
[1,2,[3,4,[5,6]],7,8].flat() //[1,2,3,4,[5,6],7,8]
[1,2,[3,4,[5,6]],7,8].flat(2) //[1,2,3,4,5,6,7,8]
Array.forEach()
该方法可以遍历数组内的每一项,用法arr.forEach(callback(item,index,array),thisArg),该方法不会改变数组本身
var arr= [
{
name:"教师1",
teaid:1
},
{
name:"教师2",
teaid:2
},
{
name:"教师1",
teaid:3
}]
arr.forEach((item,index,array)=>{
console.log(item.name)
})// 教师1 教师2 教师1
Array.includes()
判断数组中是否含有某个值,如果有返回true,没有返回false,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找。
var arr=["hello","world"]
arr.includes("hello") //true
arr.includes("hello",1)//false
Array.indexOf()
查找数组中是否含有某个值,如果有返回找到的第一个值的下标,没有返回-1,用法arr.includes(value,checkIndex),checkIndex表示数组从下标几开始查找
var arr=[1,2,3,4,5]
arr.indexOf(1)//0
arr.indexOf(4)//3
arr.indexOf(2,3)//-1
Array.join()
将数组内的值全部拼成一个字符串,用法arr.join(partition),partition是指定某个字符将数组内的元素隔开,默认为","
var arr=["hello","world"]
arr.join(); //"hello,world"
arr.join("-"); //"hello-world"
arr.join(" "); //"hello world"
Array.lastIndexOf()
和indexOf()相似,该方法会返回数组中最后一个值的下标,没有返回-1,只是checkIndex是从该下标开始逆向查找
var arr=[1,2,1,4,5,4,2]
arr.lastIndexOf(1)//2
arr.lastIndexOf(6)//-1
arr.lastIndexOf(2,3)//1
Array.map()
遍历数组,并根据处理返回一个新的数组,但是不会改变原来数组,和forEach用法类似,与forEach区别是map()方法要有返回值;
var arr=[1,2,3,4];
var newArr=arr.map((item,index,array)=>{
return item+2
})
arr //[1,2,3,4]
newArr //[3,4,5,6]
Array.pop()
删除数组最后一个值并返回数组最后一个值,该方法会改变原来数组
var arr=[1,2,3,4,5]
var lastNum=arr.pop();
lastNum//5
arr//[1,2,3,4]
Array.push()
从数组尾部添加元素并返回数组改变后的数组长度,该方法会改变原来数组
var arr=[1,2,3,4,5]
var arrlength=arr.push(6);
arr.push(6,7,8,9);
arr //[1,2,3,4,5,6]
arrlength //6
Array.reverse()
将原数组反转,该方法会改变原数组
var arr=[1,2,3,4,5]
arr.reverse()
arr// [5,4,3,2,1]
Array.shift()
删除数组中的第一个元素,该方法会改变原数组
var arr=[1,2,3,4,5]
var shiftNum=arr.shift();
shiftNum//1
arr//[2,3,4,5]
Array.unshift()
从数组开始位置添加数据,该方法会改变原数组
var arr=[1,2,3,4,5]
var length=arr.unshift();
length//6
arr//[2,3,4,5]
Array.slice()
提取数组特定下标范围内的值,用法arr.slice(start,end),start开始提取的下标值,end结束提取的下标值(提取出来的数组包含start下标的元素值,不包含end下标的元素值),该方法不会改变数组
var arr=[1,2,3,4,5]
var sliceArr=arr.slice(1,2)
arr// [1,2,3,4,5]
sliceArr//[2]
Array.some()
遍历判断数组内是否符合要求的元素,只有有一个就返回true,没有就返回false,它的使用arr.some(callback(item,index,array),thisArg),参数callback为一个函数,该函数可以传三个参数当前处理的数组元素item,该值索引index以及原数组array,thisArg为执行callback时this指向,该方法不会改变原来数组。
//判断是否有大于2的元素
[null,1,2,3,4,null].some(function(item,index,array){
return item>2
})//true
Array.sort()
对数组进行排序,用法arr.sort(callback(compareFir,compareSed)),compareFir、compareSed分别是比较的第一个和第一个元素,该方法会改变原来数组排序;
var arr=[1,56,2,54,776];
arr.sort() // arr=[1,2,54,56,776]
//也可以用于成绩排序之类的
var stuScore=[
{
stuName:'job',
score:45,
},
{
stuName:'jack',
score:4
},
{
stuName:'tom',
score:90,
},
{
stuName:'alice',
score:89,
},
{
stuName:'lei',
score:63,
}
]
stuScore.sort((firVal,sedVal)=>{
if(firVal.score>sedVal.score){
return 1
}else{
return -1
}
return 0
})
console.log(stuScore) //
[
{stuName: "jack", score: 4}
{stuName: "job", score: 45}
{stuName: "lei", score: 63}
{stuName: "alice", score: 89}
{stuName: "tom", score: 90}
]
Array.splice()
该方法可以删除或者向数组内添加元素,用法arr.splice(start,deleteSum,item1,item2...),start表示开始删除或者添加开始的下标,deleteSum表示要删除元素的个数,要添加元素时,deleteSum应为0或者为负数,item1,item2...这些表示要添加的元素,该方法会修改原来数组。
var arr=[1,2,3,4,5];
var spliceArr=arr.splice(2,2) //此时arr为[1,2,5],spliceArr为[3,4]
arr.splice(2,0,5,6) //此时arr为[1,2,5,6,3,4,5]
Array.toString()
将数组转换成字符串,
var arr = [1,2,3,4,5]
arr.toString() //"1,2,3,4,5" 该方法不会改变原数组,arr依然是[1,2,3,4,5]
inline-blcok元素中间的空白符引起的间隙,处理方法总结包括:改变书写结构、使用font-size:0、使用margin负值、使用letter-spacing或word-spacing、丢失结束标签、W3C推荐 导航方法(兼容IE6等)、YUI的inline-block间隙处理等...
本文实例讲述了JS实现碰撞检测的方法。分享给大家供大家参考,具体如下:一个简单的碰撞检测例子,检测div1是否和div2发生碰撞,当div1碰到div2时,改变div2的颜色
css实现边竖条的多种方式:border、使用伪元素、外 box-shadow、内 box-shadow、drop-shadow、渐变 linearGradient、轮廓 outline、滚动条
记录下与Math有关的常用方法,如:求最大值、最小值等,或者是保留几位数啥的。本文主要介绍了JavaScript中Math对象的方法,具有一定的参考价值,下面跟着小编一起来看下吧
Split是切割字符串的一种方法,该方法主要用于把一个字符串分割成字符串数组。splice()方法向/从数组中添加/删除元素,然后返回被删除的元素组成的数组。slice()方法主要用于截取数组,并返回截取到的新数组。
第一种:获取的时间戳是把毫秒改成000显示,因为这种方式只精确到秒,第二种和第三种是获取了当前毫秒的时间戳。
在web开发中我们经常会遇到页面的一个二级联动技术,二级联动字面解释就是说我在选择一级select不同的option,下面的二级option的属性值在进行相应的变化。
经常会用到原生JS来写前端。。。但是原生JS的一些方法在适应各个浏览器的时候写法有的也不怎么一样的,一下的方法都是包裹在一个EventUtil对象里面的,直接采用对象字面量定义方法了
是通过 js 操作 textarea input 输入框,只能操作输入框,不能操作其它元素。所有的 复制/剪切/粘贴 都是要在选中输入框中的文本之后,才进行操作的。
async函数是Generator 函数的语法糖,async函数就是将 Generator 函数的星号(*)替换成async,将yield替换成await,仅此而已。async函数对Generator 函数的改进点有以下几点:
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!