1.push()从后面追加
2.pop()从后面删除
3.unshift()从前面添加
4.shift()从后面删除
5.reverse()反转数组
6.splice()截取并添加
7.sort()数组排序
8.join()数组连接为字符串
9.concat()拼接数组
10.slice()截取数组
11.indexOf()查询数据在数组中的索引
12.forEach()遍历数组
13.map()映射数组
14.filter()过滤数组
15.every()判断是否全部满足条件
16.some()判断是否有满足条件的项
目录
1.push( )
语法:数组.push(数据)
作用:将数据 追加 到数组的 末尾
返回值:追加数据后数组 最新的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,400]
console.log(arr);
// 执行push方法,最后添加数据
var res = arr.push('追加的');
console.log(arr)
console.log(res)
</script>
</body>
</html>
2.pop( )
语法:数组.pop( )
作用:删除数组 最后一个 数据
返回值:被删除的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100, 200, 300, 400]
//pop方法,删除最后一个数据
var res = arr.pop()
console.log(arr)
console.log(res)
</script>
</body>
</html>
3.unshift( )
语法: 数组.unshift(数据)
作用:将数据 添加 到数组的 最前
返回值:添加数据后数组 最新的长度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100, 200, 300, 400]
//unshift方法,最前面添加一个数据
var res = arr.unshift('添加的')
console.log(arr)
console.log(res)
</script>
</body>
</html>
4.shift( )
语法:数组.shift( )
作用:删除数组 最前一个 数据
返回值:被删除的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100, 200, 300, 400]
//shift方法,删除第一个数据
var res = arr.shift()
console.log(arr)
console.log(res)
</script>
</body>
</html>
5.reverse( )
语法:数组.reverse( )
作用:将数组 反转
返回值:反转后的数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100, 200, 300, 400]
//reverse方法,反转数组
var res = arr.reverse()
console.log(arr)
console.log(res)
</script>
</body>
</html>
6.splice( )
语法:数组.splice(开始索引,删除多少个,要插入的数据)
开始索引:默认是0
多少个:默认是0
要插入的数据:默认是 没有
作用:删除 数组中若干数据,并选择是否 插入 新的数据
返回值:以新数组的形式返回被删除的数据
返回值:是以新数组的形式返回被删除掉的那些数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100, 200, 300, 400]
//splice方法 arr.splice() 表示什么都不做
var res = arr.splice()
console.log(arr)
//res返回值
console.log(res)
//splice方法 arr.splice(1,1) 表示从索引1开始,删除一个数据
var res = arr.splice(1,1)
console.log(arr)
//res返回值
console.log(res)
//splice方法 arr.splice(1,1,'新来的') 表示从索引1开始,删除一个数据,并把新来的插入到删除的位置
var res = arr.splice(1,1,'新来的')
console.log(arr)
//res返回值
console.log(res)
</script>
</body>
</html>
7.sort( )
语法:
数组.sort( ) /*按照位进行排序*/
数组.sort( function(a,b){return a-b} ) /*按照从小到大进行排序 升序*/
数组.sort( function(a,b){return b-a} ) /*按照从大到小进行排序 降序*/
作用:将数组进行 排序
返回值:排序好的新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [11,1,22,13,45,32,2];
console.log(arr)
//执行sort排序方法 从小到大排序
var res = arr.sort()
console.log(arr)
console.log(res)
//执行sort(function(a,b){return a-b})排序方法 从小到大排序
var res = arr.sort(function(a,b){return a-b})
console.log(arr)
console.log(res)
//执行sort(function(a,b){return b-a})排序方法 从大到小排序
var res = arr.sort(function(a,b){return b-a})
console.log(arr)
console.log(res)
</script>
</body>
</html>
8.join( )
语法:数组.join(连接符) /*例如:arr.join('-')*/
作用:将数组用 连接符 连接成一个 字符串
返回值:连接好的 字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//准备一个原始数组
var arr = [100,200,300,400]
//输出一次
console.log(arr)
//执行join方法
var res = arr.join('-')
//输出一次数组
console.log(arr)
//输出一次返回值
console.log(res)
</script>
</body>
</html>
9.concat( )
语法:数组.concat(其他数组)
作用:将其他数组和数字 拼接 在一起
返回值:拼接好的 新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//准备一个原始数组
var arr = [100,200,300,400]
//输出一次
console.log(arr)
//执行concat方法
var res = arr.concat([500,600])
//输出一次数组
console.log(arr)
//输出一次返回值
console.log(res) //100 200 300 400 500 600
</script>
</body>
</html>
10.slice( )
语法:数组.slice(开始索引,结束索引) /*包前不包后,包括开始索引不包括结束索引*/
开始索引:默认是0
结束索引:默认是 数组长度
作用:截取 数组中的某些数据
返回值:以 新数组 的形式返回截取出来的数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
//准备一个原始数组
var arr = [100,200,300,400]
//输出一次
console.log(arr)
//执行slice方法
var res = arr.slice()
//输出一次数组
console.log(arr)
//输出一次返回值
console.log(res) //100 200 300 400
//包前不包后1,2,
var res1 = arr.slice(1,3)
console.log(arr)
//输出一次返回值
console.log(res1) //200 300
</script>
</body>
</html>
11.indexOf( )
语法:数组.indexOf(数据)
作用:查找 数据 在数组中的 索引 位置
返回值:
有该数据, 返回 第一次出现 的索引位置
没有该数据,返回 -1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,200]
var res = arr.indexOf(200)
console.log(arr)
console.log(res) //1
</script>
</body>
</html>
12.forEach( )
语法:数组.forEach( function ( item,index,arr ){ } )
item:每一项
index:索引
arr:数组名称
作用: 遍历 数组
返回值:无
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
// 准备一个原始数组
var arr = [100,200,300,400]
// 输出一次
console.log(arr)
// 执行forEach方法
arr.forEach(function(item,index,arr){
// item就是数组的每一项
console.log(item)
// index就是索引
console.log(index)
// arr就是原始数组
console.log(arr)
// 输出一个分割线
console.log('-----------------')
})
</script>
</body>
</html>
13.map( )
语法:数组.map( function (item,index,arr){
//以return的方式书写映射条件
例如:每个数据都是原始数据的十倍
return item*10
} )
作用:映射 数组
返回值:映射后的 新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,400]
console.log(arr)
var res = arr.map(function(item,index,arr){
//以return的方式书写映射条件
return item *10
})
console.log(res) //1000 2000 3000 4000
</script>
</body>
</html>
14.filter( )
语法:数组.filter(function(item,index,arr){
//以return的方式书写过滤条件
例如:return item>150
})
作用:过滤 数组
返回值:过滤后的 新数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,400]
console.log(arr)
var res = arr.filter(function(item,index,arr){
//以return的方式书写过滤条件
return item >150
})
console.log(res)//200 300 400
</script>
</body>
</html>
15.every( )
语法:数组.every( function(item,index,arr){
//以return的方式书写过滤条件
例如:return item>150
} )
作用:判断数组是不是 每一项 都满足条件
返回值:一个 布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,400]
console.log(arr)
var res = arr.every(function(item,index,arr){
//以return的方式书写条件
return item >150
})
console.log(res)//false
</script>
</body>
</html>
16.some( )
语法:数组.some( function(item,index,arr){
//以return的方式书写条件
例如:return item>150
} )
作用:判断数组是不是有 某一项 满足条件
返回值:一个 布尔值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = [100,200,300,400]
console.log(arr)
var res = arr.some(function(item,index,arr){
//以return的方式书写条件
return item >150
})
console.log(res) //trun
</script>
</body>
</html>