本篇将介绍js中两个常用的数组函数
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> js数组的常用函数slice和splice</title>
</head>
<body>
<h1>数组演示</h1>
<ul id="show">
</ul>
<label for="bian">分割数组前两个成为一个数组：</label>
<button id="bian" onclick="bian()">slice(0,2)</button><br />
<label for="bian2">把数组前两个元素删除：</label>
<button id="bian2" onclick="bian2()">splice(0,2)</button><br/>
<label for="bian3">在数组第二个位置加两个元素：</label>
<button id="bian3" onclick="bian3()">splice(1,0,'玮柏','大宽面')</button>
</body>
<script>
var arr = ['jony j', 'gai', '黄旭', 'hotdog'];
var show = document.getElementById('show');
arr.forEach(function (v, k) { //此处的k v和php的反过来
var li = document.createElement("li");
li.innerHTML = v;
show.appendChild(li);
})
function bian() {
while (show.hasChildNodes()) { //删除所有子节点
show.removeChild(show.firstChild);
}
// 1、slice函数 用于从数组中截取新的数组 传入两个参数 start和end 其中start参数是必须的，end参数可以不给 不给的时候默认从start位置到最后一个元素 传入end参数则从start到end 如果end是负数 则是截取start位置到倒数第几个 此函数包含起点不包含终点
var arr2 = arr.slice(0, 2);
arr2.forEach(function (v, k) { //此处的k v和php的反过来
var li = document.createElement("li");
li.innerHTML = v;
show.appendChild(li);
});
}
function bian2() {
while (show.hasChildNodes()) { //删除所有子节点
show.removeChild(show.firstChild);
}
// 2、splice函数 是用于在原来的数组上增删的函数（会改变数组本身而不是传入一个新的数组） 传入三个参数 第一个参数index必须传入 代表从何处进行增删 第二个参数代表删除多少元素，如果是0就不删除 第三个参数可选且可以传多个 是需要插入的元素
arr.splice(0, 2);
arr.forEach(function (v, k) { //此处的k v和php的反过来
var li = document.createElement("li");
li.innerHTML = v;
show.appendChild(li);
});
}
function bian3() {
while (show.hasChildNodes()) { //删除所有子节点
show.removeChild(show.firstChild);
}
arr.splice(1,0,'玮柏','大宽面');
arr.forEach(function (v, k) { //此处的k v和php的反过来
var li = document.createElement("li");
li.innerHTML = v;
show.appendChild(li);
});
}
</script>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例