作者:陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children=hege.concat(stale,kai);
console.log(children);//这个函数是连接数组函数,把三个数组都连接起来。
//规律:hege第一个,就代表开始的就是hage里面的元素。然后是stale。最后是kai
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>点击按钮复制数组的前面两个元素到后面两个元素上。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById('demo').innerHTML=fruits;
//获取p标签(),然后是把fruits数组里面的元素都放到p标签上面。fruits多少个元素就产生多少个p标签
function myFunction()
{
document.getElementById('demo').innerHTML=fruits.copyWithin(2,0);//获取p标签。fruits.copyWithin(2,0);这段话的意思是:把开始两个元素复制到后面两个元素上面。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>点击按钮复制数组的前面两个元素到后面两个元素上。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
<script type="text/javascript">
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById('demo').innerHTML=fruits;
//获取p标签(),然后是把fruits数组里面的元素都放到p标签上面。fruits多少个元素就产生多少个p标签
function myFunction()
{
document.getElementById('demo').innerHTML=fruits.copyWithin(2,1);//获取p标签。fruits.copyWithin(2,0);这段话的意思是:把下标1的元素放到下标2上面("Orange").在点击是下标3的位置上面是之前的下标1()"Orange"
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮复制数组的前面两个元素到第三和第四个位置上。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 copyWithin() 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
document.getElementById("demo").innerHTML = fruits.copyWithin(2,0,2);//点击按钮复制数组的前面两个元素到第三和第四个位置上
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>Array entries()</h1>
<p>从数组中创建一个可迭代的对象。</p>
<p>迭代对象的每个实体来自数组对应的元素。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 entries 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.entries();
document.getElementById("demo1").innerHTML = x.next().value;
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;//意思就是:从头指针head指向下标0的位置。然后next()下标1.。。。
//entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。
//迭代对象中数组的索引值作为 key, 数组元素作为 value。
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮检测数组的所有元素是否都大于 18 :</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 19, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);
}//这个函数的意思是:是否满足checkAdult的条件。ages里面的所有元素是否都满足checkAdult函数的条件。满足返回true。不满足返回false
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>是否所有年龄都符号条件? <span id="demo"></span></p>
<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.every(checkAdult);//意思就是数组的所有元素是否都大于输入框中指定的数字,都大返回true。否则返回false
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮使用 “Runoob” 填充所有数组元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 fill() 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
//获取id为demo的标签,然后把数组中的元素填充进p标签中
function myFunction() {
document.getElementById("demo").innerHTML = fruits.fill("Runoob");
//用Runoob把fruits数组里面的所有元素替换成Runoob
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮填充 “Runoob” 到数组的最后两个元素。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 fill() 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
function myFunction() {
document.getElementById("demo").innerHTML = fruits.fill("Runoob",2,4);//意思就是从下标2开始到下标4把后面的所有元素替换成成Runoob
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [32, 33, 16, 40];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);//点击按钮获取数组中大于 18 的所有元素。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>所有大于指定数组的元素有? <span id="demo"></span></p>
<script>
var ages = [32, 33, 12, 40];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.filter(checkAdult);//点击按钮返回数组 ages 中所有元素都大于输入框指定数值的元素。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 find() 方法。</p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;//条件
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);//点击按钮获取数组中年龄大于等于 18 的第一个元素。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮返回符合大于输入框中指定数字的数组元素。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>值: <span id="demo"></span></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.find(checkAdult);//找到大于输入框指定数字的第一个数组元素
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);
//点击按钮获取数组中年龄大于等于 18 的第一个元素索引位置。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮返回符合大于输入框中指定数字的数组元素索引。</p>
<p>最小年龄: <input type="number" id="ageToCheck" value="18"></p>
<button onclick="myFunction()">点我</button>
<p>索引: <span id="demo"></span></p>
<p><strong>注意:</strong> IE 11 及更早版本不支持 findIndex() 方法。</p>
<script>
var ages = [4, 12, 16, 20];
function checkAdult(age) {
return age >= document.getElementById("ageToCheck").value;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.findIndex(checkAdult);//大于或者等于输入框元素的第一个索引
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮列出数组的每个元素。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p id="demo"></p>
<script>
demoP = document.getElementById("demo");//获取id=demo
var numbers = [4, 9, 16, 25];
function myFunction(item, index) {//item:,index:索引
demoP.innerHTML += "index[" + index + "]: " + item + "
";
//输出下标+值,是以+=方式输出的。也就是都输出出来的方式
}//
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮计算数组所有元素相加的总和。</p>
<button onclick="numbers.forEach(myFunction)">点我</button>
<p>数组元素总和:<span id="demo"></span></p>
<script>
var sum = 0;
var numbers = [65, 44, 12, 4];
function myFunction(item) {//item:值
sum += item;//把value值全部累加,然后赋值p标签上面
demo.innerHTML = sum;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p id="demo"></p>
<script type="text/javascript">
var myArr=Array.from("RUNOOB");//字符串,但是通过Array.from函数变成数组
//myArr变成:['R','U','N','O','O','B']
if(myArr instanceof Array)//如果myArr是数组类型的话
{
document.getElementById("demo").innerHTML = myArr[0];//把第一个数组元素输出出来R
}
else
{
document.getElementById("demo").innerHTML = "该对象不是数组!";
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
let site = ['runoob', 'google', 'taobao'];
document.write(site.includes('runoob')); //site这个数组里面包含runoob吗?包括返回true,否则false
// true
document.write("
");
document.write(site.includes('baidu'));
// false
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var arr = ['a', 'b', 'c'];
console.log(arr.includes('c', 3)); //false,字符c的下标是2,如果第二个参数是3的话,3大于或者等于c的下标2就返回false.
console.log(arr.includes('c', 100)); // false
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script>
var arr = ['a', 'b', 'c'];
console.log(arr.includes('a', -100)); // true,如果第二个参数是负数。就这个数组全部都会被搜素
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮显示“苹果”的位置:</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["香蕉", "橙子", "苹果", "甜瓜"];
var a = fruits.indexOf("苹果")//苹果的下标是啥?2
var x=document.getElementById("demo");//获取p标签,然后是赋值给p标签
x.innerHTML=a;
}
</script>
<p><b>注意:</b>indexOf方法是在JavaScript 1.6中引入的,在IE 8或更早的版本中不可用。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<script type="text/javascript">
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);//从下标4-1=下标3开始查找
console.log(a);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮检测 "fruits" 变量是否为一个数组。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction() {
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = document.getElementById("demo");
//获取p标签,这个
x.innerHTML = Array.isArray(fruits);
//Array.isArray()这个函数的意思是判断fruits是不是数组,是数组返回true,否则false
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
//获取p标签
x.innerHTML=fruits.join();//把数组里面的所有元素变成一个字符串.然后赋值给p标签
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.join(" and ");//把数组变成字符串,逗号用 and 代替
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>Array keys()</h1>
<p>从数组中创建一个可迭代的对象,该对象包含数组的键。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<p id="demo3"></p>
<p><strong>注意:</strong> IE11 及其更早的浏览器版本不支持 keys 方法。</p>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];//一个数组
var x = fruits.keys();//取出fruits数组的!!!键名(下标)!!!赋值给x。
document.getElementById("demo1").innerHTML = x.next().value;//.value也就是下标啦
//从head开始,next是第一个元素。也就是下标0...
document.getElementById("demo2").innerHTML = x.next().value;
document.getElementById("demo3").innerHTML = x.next().value;
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮显示“苹果”最后一次出现的位置:</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits=["香蕉","橙子","苹果","甜瓜"];
var a=fruits.lastIndexOf("苹果")//查找这个fruits数组里面最后的苹果元素的下标
var x=document.getElementById("demo");//获取p标签
x.innerHTML=a;//赋值给p标签
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮显示从位置4开始查找“苹果”的最后一次出现的位置:</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits=["香蕉","橙子","苹果","甜瓜","香蕉","橙子","苹果","甜瓜"];
var a=fruits.lastIndexOf("苹果",4)//在fruits数组中把下标4当做下标0开始对比.苹果再下标2上面
var x=document.getElementById("demo");//获取p标签
x.innerHTML=a;//把值放到p标签里面
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮获取数组元素的平方根。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var numbers = [4, 9, 16, 25];
function myFunction() {
x = document.getElementById("demo")//js获取p标签.
x.innerHTML = numbers.map(Math.sqrt);//算出numbers数组每一个元素的平方根.返回一个新数组
//注意: map() 不会对空数组进行检测。
//注意: map() 不会改变原始数组。
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮将数组中的每个元素乘于输入框指定的值,并返回新数组。</p>
<p>最小年龄: <input type="number" id="multiplyWith" value="10"></p>
<button onclick="myFunction()">点我</button>
<p>新数组: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function multiplyArrayElement(num) {
return num * document.getElementById("multiplyWith").value;// id="multiplyWith"依次乘以numbers 数组里面的元素
}
function myFunction() {
document.getElementById("demo").innerHTML = numbers.map(multiplyArrayElement);//把65, 44, 12, 4依次传进multiplyArrayElement函数中.
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.pop();//移除fruits数组中的最后一个元素
var x=document.getElementById("demo");//获取id为demo的p标签.
x.innerHTML=fruits;//移除后赋值给p标签。操作的是原数组
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.push("Kiwi")//添加新的元素到数组的末尾
var x=document.getElementById("demo");//获取id为demo的p标签
x.innerHTML=fruits;//赋值给p标签输出出来
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮给数组添加新的元素:</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.push("Kiwi","Lemon","Pineapple")//把三个元素依次添加到fruits的末尾。
var x=document.getElementById("demo");//获取id为demo的p标签
x.innerHTML=fruits;//输出出来
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮计算数组元素相加后的总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素总和: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduce(getSum);
//第一次进入getSum里面 : return 65+44;然后返回给reduce哪里,在进入getSum函数里面
//第二次进入getSum里面 :return 109+12返回给reduce。在进入getSum函数里面
//第三次进入getSum里面 : return 121+4.返回给reduce结束.
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮计算数组元素的总和。</p>
<button onclick="myFunction()">点我</button>
<p>数组元素总和: <span id="demo"></span></p>
<script>
var numbers = [65, 44, 12, 4];
function getSum(total, num) {
return total + num;
}
function myFunction(item) {
document.getElementById("demo").innerHTML = numbers.reduceRight(getSum);
//执行流程:从右边往左边计算的啦.
//getsum里面:4+12
//getSum里面:16+44
//getSum里面:60+65返回结束.
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
fruits.reverse();
var x=document.getElementById("demo");//获取p标签
x.innerHTML=fruits;//颠倒数组中元素的顺序:
}//赋值给p标签
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮删除数组的第一个元素。</p>
<p id="demo2"></p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];//一个数组
function myFunction(){
var delell = fruits.shift();//删除数组中的第一个元素
var x=document.getElementById("demo");
x.innerHTML= '删除后数组为:' + fruits;
//把删除后的元素都赋值给p标签
document.getElementById("demo2").innerHTML= '删除的元素是:' + delell;//delell为删除的是那一个元素
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<!--点击事件-->
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];//一个数组
var citrus = fruits.slice(1,3);
//slice代表获取fruits这个数组中的下标1到下标3-1=2的数组元素
var x=document.getElementById("demo");//获取id为demo的p标签
x.innerHTML=citrus;//赋值给p标签
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮截取第三个和第四个元素,使用负数。</p>
<p id="demo2">这里显示截取最后三个元素,使用负数。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var myBest = fruits.slice(-3,-1);//从后面往前面数,选出第三个("Lemon")。-1代表从后面往前数。-1-1=-2("Apple")。
var myBest2 = fruits.slice(-3); 截取最后三个元素
var x=document.getElementById("demo");
x.innerHTML=myBest;
var x2=document.getElementById("demo2");
x2.innerHTML=myBest2;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>使用 slice() 截取字符串。</p>
<script>
var str="www.runoob.com!";
document.write(str.slice(4)+"
"); // 从第 5 个字符开始截取到末尾
document.write(str.slice(4,10)); // 从第 5 个字符开始截取到第10个字符
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>点击按钮检测数组中是否有元素大于 18。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
var ages = [3, 10, 18, 20];
function checkAdult(age) {
return age >= 18;
}
function myFunction() {
document.getElementById("demo").innerHTML = ages.some(checkAdult);//some的意思是是否有元素符合checkAdult的条件。有就返回true,否则false
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//升序排序,以第一个单词的第一个字母为比较条件a>b>c>d....
var x=document.getElementById("demo");
//获取p标签为id为demo的
x.innerHTML=fruits;//赋值给p标签id=demo
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.sort();//以第一个单词的第一个字母来排序a>b>c>d
fruits.reverse();//在倒过来输出
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
//从下标2哪里,0代表不删除一个元素.添加"Lemon","Kiwi"两个元素。之前的Apple"Mango"往后移动两位。因为添加了两个元素了呀"Lemon","Kiwi"
var x=document.getElementById("demo");
//获取id=demo的p标签
x.innerHTML=fruits;//赋值给p标签
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮添加和删除元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,1,"Lemon","Kiwi");
//往原数组中从下标2开始,删除一个元素。以"Lemon","Kiwi"填充。"Mango"为最后
var x=document.getElementById("demo");
//获取id=demo的p标签
x.innerHTML=fruits;//赋值给p标签
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮删除数组中的两个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,2);//从下标2开始,删除两个元素,删除了"Apple", "Mango"
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();//把数组转化为字符串
var x=document.getElementById("demo");
x.innerHTML= str;
console.log(typeof str);
}
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮在数组中插入元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");//往数组的开头添加两个元素。
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
<p><b>注意:</b> unshift()方法不能用于 Internet Explorer 8 之前的版本,插入的值将被返回成<em> undefined </em>。</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p id="demo">单击按钮返回数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x=document.getElementById("demo");
x.innerHTML=fruits.valueOf();//和原数组一样的.注意: valueOf() 方法不会改变原数组。
}
</script>
</body>
</html>
