• JavaScript参考手册 Array函数(更新完成)字数:22787字(搞定!)


    作者:陈业贵 华为云享专家 51cto(专家博主 明日之星 TOP红人) 阿里云专家博主


    JavaScript concat() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18

    在这里插入图片描述

    JavaScript copyWithin() 方法

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    JavaScript entries() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    在这里插入图片描述

    JavaScript Array every() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    JavaScript fill() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    JavaScript Array filter() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    JavaScript find() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    JavaScript findIndex() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    JavaScript forEach() 方法

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    JavaScript from() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    JavaScript Array includes() 方法

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    JavaScript Array indexOf() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    在这里插入图片描述

    JavaScript isArray() 方法

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

    在这里插入图片描述

    JavaScript join() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

    JavaScript keys() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28

    在这里插入图片描述

    JavaScript Array lastIndexOf() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    JavaScript Array map() 方法

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    JavaScript pop() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    JavaScript push() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    JavaScript reduce() 方法(计算执行流程啦)

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    在这里插入图片描述

    JavaScript reduceRight() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30

    在这里插入图片描述

    JavaScript reverse() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    JavaScript shift() 方法

    <!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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    在这里插入图片描述

    JavaScript Array slice() 方法

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>菜鸟教程(runoob.com)</title>
    </head>
    <body>
    
    <p id="demo">点击按钮截取数组下标 12 的元素。</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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25

    在这里插入图片描述

    <!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>
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17

    在这里插入图片描述

    JavaScript Array some() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    JavaScript sort() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    JavaScript splice() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23

    在这里插入图片描述

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21

    在这里插入图片描述

    JavaScript toString() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    JavaScript unshift() 方法

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

    在这里插入图片描述

    JavaScript valueOf() Method

    <!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>
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20

    在这里插入图片描述

  • 相关阅读:
    无代码开发平台选型指南
    go版本升级
    Flink部署 完整使用 (第三章)
    【Flutter从入门到入坑】Dart语言基础
    2022“杭电杯”中国大学生算法设计超级联赛(3)杭电多校第三场
    使用阿里PAI DSW部署Stable Diffusion WebUI
    Excel VSTO开发2 -建立Excel VSTO项目
    在域控的Users目录下批量创建用户组,名称来自Excel
    STC 32位8051单片机开发实例教程 一 开发环境搭建
    YOLO算法改进Backbone系列之:EfficientViT
  • 原文地址:https://blog.csdn.net/qq_37805832/article/details/126162528