前言
我是歌谣 放弃很容易 但是坚持一定很酷 微信公众号关注前端小歌谣带你进入前端巅峰交流群 今天继续对前端知识的小结
数组去重的方式
<!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>数组去重的第二种方式</title>
</head>
<body>
<div id="geyao"></div>
</body>
<script>
var geyao = [1, 2, 3, 4, 6, 7, 1, 2, 3, 8, 9]
function ArrayCommon(arr) {
//判断是不是数组 不是数组就返回一个false
if (!Array.isArray(arr)) {
console.log('这不是一个数组哦')
return
}
//元素在数组中第一次出现的位置是否和元素现在的位置相等
return Array.prototype.filter.call(arr,function(item,index){
console.log(arr.indexOf(item),item,index)
return arr.indexOf(item)===index
})
}
console.log(ArrayCommon(geyao, 'geyao'))
// document.getElementById("geyao").innerText=ArrayCommon(geyao)
</script>
</html>数组扁平化
<!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>数组扁平化第一种方式 循环</title>
</head>
<body>
<script>
let arr = [0, [1, [2, 3, [4, [5, 6]], 7]], [8, 9]]
function geyao(arr) {
var show = []
for (var i = 0; i < arr.length; i++) {
//如果arr[i]是一个数组
if (Array.isArray(arr[i])) {
//递归遍历arr[i]
show.push.apply(show, geyao(arr[i]))
} else {
show.push(arr[i])
}
}
return show
}
console.log(geyao(arr)) //[0,1,2,3,4,5,6,7,8,9]
</script>
</body>
</html>数组扁平化reduce方法
<!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>reduce方法</title>
</head>
<body>
<!-- reduce() 方法对数组中的每个元素按序执行一个由您提供的 reducer 函数，
每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。 -->
<!-- 合并到单个数组 -->
<script>
var total = [1, 2, 3].reduce(function (sum, current) {
return sum + current
}, 0)
console.log(total, 'total') //6
var geyao = [
{
name: 'xiao hua',
age: '18',
},
{
name: 'xiao hong',
age: '20',
},
{
name: 'xiao gang',
age: '16',
},
{
name: 'xiao li',
age: '15',
},
]
var points = {
"xiaohuan": 500,
"xiaohong": '男',
}
var fangfang = geyao.reduce(function (arr, item) {
// 移除名字中的空格，用来获取对应的 points
var key = item.name.replace(' ', '')
// 如果geyao有points，则加上它，否则设置为0
if (points[key]) {
item.points = points[key]
} else {
item.points = 0
}
// 把wizard对象加入到新数组里
arr.push(item)
// 返回这个数组
return arr
}, [])
console.log(fangfang,"fangfang")
// [{ name: 'xiao hua',age: '18',points: 0},{age: "20",name: "xiao hong",points: "男"},
// {age: "16",name: "xiao gang",points: 0},{age: "15",,name: "xiao li",points: 0}]
</script>
</body>
</html>数组扁平化第三种方式
<!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>数组扁平化第三种方式</title>
</head>
<body>
<script>
let arr = [0, [1, [2, 3, [4, [5, 6]], 7]], [8, 9]]
function flattenArray(arr) {
// arr.some 方法返回是否有满足条件（函数标识）的元素 只要是数组就进行拼接
while (arr.some((item) => Array.isArray(item))) {
arr = [].concat.apply([], arr)
}
return arr
}
console.log(flattenArray(arr)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
</script>
</body>
</html>数组扁平化第二种方式
<!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>数组扁平化第二种方式</title>
</head>
<body>
<script>
let arr = [0, [1, [2, 3, [4, [5, 6]], 7]], [8, 9]]
function flattenArray(arr) {
return arr.reduce((ans, item) => {
//判断是不是数组 如果不是数组就.concat 不然继续循环递归
return ans.concat(
Array.isArray(item) ? flattenArray(item) : item
)
}, [])
}
console.log(flattenArray(arr),"arr")
</script>
</body>
</html>数组扁平化第四种方式
<!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>数组扁平化第四种方式</title>
</head>
<body>
<script>
let arr = [0, [1, [2, 3, [4, [5, 6]], 7]], [8, 9]]
function flattenArray(arr) {
// join 方法可返回一个数组元素组成的字符串（默认以 ',' 隔开），无论数组多少维
// split 方法返回的数组的成员都是字符串
// map 方法可以对数组的每个元素转换成 Number 类型（方法有多种），返回修改后的新数组
return arr
.join()
.split(',')
.map((item) => item - 0)
}
console.log(flattenArray(arr)) // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
</script>
</body>
</html>数组方法slice
<!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>数组方法slice</title>
</head>
<body>
<script>
var geyao=["1","2","3","4"]
var geyaotest=["1","2","3","4"]
var geyaofangfang=["1","2","3","4"]
var fangfang=["1","2","3","4"]
var fangfangTest=["1","2","3","4"]
//arr.slice([begin[, end]]) slice() 方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝
//从第一个位置开始截取到最后一个位置
console.log( geyao.slice(1),"geyao") // [ "2", "3", "4" ]
//从第一个位置截止到第二个位置
console.log( geyaotest.slice(1,2),"geyaotest") // [ "2" ]
//从第一个位置截取到最后一个位置
console.log( geyaofangfang.slice(1,5),"geyaofangfang") // [ "2", "3", "4" ]
//从最后一个位置开始截取
console.log( fangfang.slice(-1),"fangfang") // [ "4" ]
//从最后一个位置开始截取 截取当前倒数第二个
console.log( fangfangTest.slice(-2,-1),"fangfangTest") // [ "3" ]
</script>
</body>
</html>数组方法splice
<!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>数组方法splice</title>
</head>
<body>
<script>
//splice(start,end,index1,index2) 从什么位置开始，删几个？删了后插入什么新元素？
var geyao=["1","2","3","4"]
var geyaotest=["1","2","3","4"]
var geyaofangfang=["1","2","3","4"]
var fangfang=["1","2","3","4"]
var fangfangTest=["1","2","3","4"]
var fangfangBang=["1","2","3","4"]
var kangkang=["1","2","3","4"]
var kangkangni=["1","2","3","4"]
var kangkanghao=["1","2","3","4"]
//1个参数会截取当前 大于2之后的数都会被删除
geyao.splice(2)
console.log(geyao,"geyao")//["1","2"]
//2个参数 表示从什么位置截取到什么位置 把下标为2的截取掉
geyaotest.splice(2,1)
console.log(geyaotest,"geyaotest") //[ "1", "2", "4" ]
//3个参数 在什么位置到什么位置添加
geyaofangfang.splice(2,1,"5")
console.log(geyaofangfang,"geyaofangfang") //[ "1", "2", "5", "4" ]
//超出数组长度 默认获得前面的全部
fangfang.splice(5)
console.log(fangfang,"fangfang") // [ "1", "2", "3", "4" ]
//从5之后开始截取
fangfangTest.splice(5,1)
console.log(fangfangTest,"fangfangTest") // [ "1", "2", "3", "4" ]
//对后置的位置进行添加
fangfangBang.splice(5,1,"6")
console.log(fangfangBang,"fangfangBang") // [ "1", "2", "3", "4","6"]
//倒着开始截取剩余部分
kangkang.splice(-1)
console.log(kangkang,"kangkang") // [ "1", "2", "3" ]
//倒着进行处理
kangkangni.splice(-2,1)
console.log(kangkangni,"kangkangni")//[ "1", "2", "4" ]
//倒着插入对应值
kangkanghao.splice(-2,1,"8")
console.log(kangkanghao,"kangkanghao")//[ "1", "2", "8", "4" ]
//该方法向或者从数组中添加或者删除项目，返回被删除的项目。（该方法会改变原数组）
</script>
</body>
</html>数组特性
<!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>数组特性</title>
</head>
<body>
<script>
// 数组空位
// 数组可以使用一串逗号来创建空位，逗号前面为一项，值为undefined
// 改变length会直接作用于原数组：
// 减小length会从数组尾部 删除元素
// 增大length会向数组尾部添加值为undefined的元素
</script>
</body>
</html>总结
我是歌谣 最好的种树是十年前 其次是现在 加油 歌谣
