每天一个JS 小demo之原生数组splice方法书写。主要知识点:锻炼思维逻辑能力,对于数组方法的理解和各种情况的考量

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>

<body>
<script>
/*
* splice(start, deleteCount, data1, data2, data3...)
* */

var arr = [‘a‘, ‘b‘, ‘c‘, ‘d‘, ‘e‘];
//1, 3
// [8,6,4]
//[‘a‘,8,6,4]

//arr.splice(-5);
//console.log(arr);

function arrSplice(data, start, deleteCount) {
// 如果start不是数字,或不能转成数字,start默认就为0
if (isNaN(start)) {
start = 0;
}
start = Number(start);
// 如果start是负数
if (start < 0) {
start = data.length + start;
}
if (start < 0) {
start = 0;
}

// 如果deleteCount没传
if (deleteCount == undefined) {
deleteCount = data.length - start;
}

/*
* 1. 准备一个空的数组,用于存放最后的结果
* 2. 循环源数组
* 1. 得到当前循环过程中的下标
* 2. 把这个下标和start做比较
* 1. 如果当前下标小于start,则把当前数组添加到新数组中
* 2. 否则
* 1. 是否有新增数据
* 1. 如果有新在数据,则把新增数据添加到新数组中
* 2. 否则,如果deleteCount大于0,忽略这个数据,并对deleteCount--
* 否则,把当前数据添加到新数组中
* */
var newArr = [];
//新增数据
var newData = [];
if (arguments.length > 3) {
for (var i=3; i<arguments.length; i++) {
// newData.push(arguments[i]);
newData[newData.length] = arguments[i];
}
}

for (var i=0; i<data.length; i++) {
if (i < start) {
// newArr.push(data[i]);
newArr[newArr.length] = data[i];
} else {
if (newData.length) {
//有新增数据的
// newArr = newArr.concat(newData);
for (var j=0; j<newData.length; j++) {
newArr[newArr.length] = newData[j];
}
newData.length = 0;
}
if (deleteCount > 0) {
deleteCount--;
} else {
// newArr.push(data[i]);
newArr[newArr.length] = data[i];
}
}
}

data = newArr;

console.log(data);
}

</script>
</body>
</html>

时间: 2024-12-21 05:26:08

每天一个JS 小demo之原生数组splice方法书写。主要知识点:锻炼思维逻辑能力,对于数组方法的理解和各种情况的考量的相关文章

每天一个JS 小demo之韩雪冬轮播图。主要知识点:html,css布局,对于数组和对象的理解和运用

1 @charset "utf-8"; 2 /* CSS Document */ 3 4 * { padding: 0; margin: 0; } 5 li { list-style: none; } 6 img { border: none; } 7 body { background: #ececec; padding-top: 50px; } 8 9 #automatic { width: 970px; height: 344px; position: relative; mar

每天一个Js小demo之移动端全景图场景实现-全景装修图。主要知识点:css3,旋转角度检测

<!DOCTYPE html><html lang="en"><head><meta name="viewport" content="width=device-width,user-scalable=no" /><meta charset="UTF-8"><title>Document</title><style type="

每天一个JS 小demo之表单排序。主要知识点:DOM中的表单操作,节点操作

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><script type="text/javascript">window.onload = function(){ var input = document.querySelectorAll('inp

每天一个JS 小demo之个人信息添加。主要知识点:DOM操作中的表格操作,节点操作

以下是简易效果: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> table { width: 555px; text-align: center; } table a { text-decora

每天一个JS 小demo之自定义滚动条。主要知识点:事件应用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body { margin: 0;}#wrap { margin: 30px auto; position: relative; border: 1px s

每天一个JS 小demo之通过键盘方向键操作图片上下左右无缝切换。主要知识点:事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.wrap { margin: 150px auto; position: relative; width: 400px; height: 300px; o

每天一个JS 小demo之通过事件委托实现菜单展开及选中特效。主要知识点:事件

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">body { margin: 0; background: #f1f1f1;}p { margin: 0;} #dorpDown { position: r

每天一个JS 小demo之日历制作。主要知识点:日期函数和对于函数封装的灵活运用

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> td { text-align: center; } </style></head> <body> <p> <select id="yearS

每天一个JS 小demo之邮件删除。主要知识点:事件应用

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title></title><style type="text/css">.wrap { width: 400px; margin: 30px auto;}ul { margin: 0; padding: 0; list-style: none;