zoukankan      html  css  js  c++  java

  • 数组实例

    1.创建数组

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>创建数组</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉", "葡萄", "山竹"]
        console.log(arr.length);
        //4
    </script>
</body>

</html>

    2.通过索引访问数组元素

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过索引访问数组元素</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉", "葡萄", "山竹"]
        var first = arr[0]; //获取第一个
        console.log(first);
        // 苹果
        var last = arr[arr.length-1]; //获取最后一个
        console.log(last);
        //山竹
    </script>

</body>

</html>

    3.遍历数组

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遍历数组</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉", "葡萄", "山竹"]
        arr.forEach(function(item,index,array){  //遍历数组
            console.log(item,index);
        });
        //苹果 0
        //香蕉  1
        //葡萄 2
        //山竹 3
    </script>

</body>

</html>

    4.添加元素到数组的末尾

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加元素到数组的末尾</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉"]
        //push()添加元素到数组的末尾
        var newLength = arr.push('葡萄');
        console.log(newLength);
        //3
        console.log(arr);
        //["苹果", "香蕉", "葡萄"]
    </script>

</body>

</html>

    5.删除数组末尾的元素

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>删除数组末尾的元素</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉","葡萄"]
        //pop()删除数组末尾的元素
        var last = arr.pop();
        console.log(last);
        //葡萄
        console.log(arr);
        //["苹果", "香蕉"]
    </script>

</body>

</html>

    6删除数组最前面（头部）的元素

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>删除数组最前面（头部）的元素</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉","葡萄"];
        //shift()删除数组最前面（头部）的元素
        var first = arr.shift();
        console.log(first);
        //苹果
        console.log(arr);
        //["香蕉","葡萄"]
    </script>

</body>

</html>

    7添加元素到数组的头部

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>添加元素到数组的头部</title>
</head>

<body>
    <script>
        var arr = ["香蕉","葡萄"];
        //unshift()添加元素到数组的头部
        var first = arr.unshift('苹果');
        console.log(arr);
        //["苹果", "香蕉", "葡萄"]
    </script>

</body>

</html>

    8.找出某个元素在数组中的索引

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>找出某个元素在数组中的索引</title>
</head>

<body>
    <script>
        var arr = ["香蕉","葡萄"];
        arr.push('山竹');
        console.log(arr);
        //["香蕉", "葡萄", "山竹"]
        var index = arr.indexOf("葡萄");
        console.log(index);
        //1
    </script>
</body>

</html>

    9通过索引删除某个元素和添加元素

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>通过索引删除某个元素和添加元素</title>
</head>

<body>
    <script>
        var arr = ["苹果","香蕉","葡萄"];
        var arr2 = ["苹果","香蕉","葡萄"];
        var pos = 1;
        //splice()从数组中添加/删除项目
        var removedItem = arr.splice(pos,1);
        var removedItem2 = arr2.splice(pos,1,"搜索");
        console.log(arr);
        //["苹果", "葡萄"]
        console.log(arr2);
        // ["苹果", "搜索", "葡萄"]
        
    </script>
</body>

</html>

    10从一个索引位置删除多个元素

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>从一个索引位置删除多个元素</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉", "葡萄", "山竹"];
        var pos = 1,n = 2;
        //splice()从数组中添加/删除项目
        var removedItem = arr.splice(pos, n);
        console.log(arr);
        //["苹果", "山竹"]
        console.log(removedItem);
        //["香蕉", "葡萄"]
    </script>
</body>

</html>

    11复制一个数组

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>复制一个数组</title>
</head>

<body>
    <script>
        var arr = ["苹果", "香蕉", "葡萄", "山竹", "龙眼"];
        //slice()方法可从已有的数组中返回选定的元素。
        var shallowCopy = arr.slice();
        //返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
        var shallowCopy2  = arr.slice(2,4);
        console.log(arr);
        //["苹果", "香蕉", "葡萄", "山竹", "龙眼"]
        console.log(shallowCopy);
        //["苹果", "香蕉", "葡萄", "山竹", "龙眼"]
        console.log(shallowCopy2);
        //["葡萄", "山竹"]

    </script>
</body>

</html>

    12字符串的形式用方括号来访问

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>字符串的形式用方括号来访问</title>
</head>

<body>

    <div id="demo"></div>
    <script>
        var promise = {
            'var': 'text',
            'array': [1, 2, 3, 4]
        };

        console.log(promise['var']);
        document.getElementById('demo').innerHTML = promise['var'];
    </script>
</body>

</html>

    13遍历数组for循环

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>遍历数组</title>
</head>

<body>
    <script>
        var arr = [1,2,3,4,5];
        var arrLength = arr.length;
        for(var i = 0; i<arrLength;i++){
            arr[i] *= 2;
        }
        console.log(arr);
        // [2, 4, 6, 8, 10]
    </script>
</body>

</html>

    下面提一下jQuery的each方法的几种常用的用法

    Js代码

    var arr = [ "one", "two", "three", "four"];
$.each(arr, function(){
alert(this);
});
//上面这个each输出的结果分别为：one,two,three,four
 
var arr1 = [[1, 4, 3], [4, 6, 6], [7, 20, 9]]
$.each(arr1, function(i, item){
alert(item[0]);
});
//其实arr1为一个二维数组，item相当于取每一个一维数组，
//item[0]相对于取每一个一维数组里的第一个值
//所以上面这个each输出分别为：1 4 7
 
var obj = { one:1, two:2, three:3, four:4};
$.each(obj, function(key, val) {
alert(obj[key]);
});
//这个each就有更厉害了，能循环每一个属性
//输出结果为：1 2 3 4

    附件目录： 

    https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array#Examples

    https://blog.csdn.net/love_xiolan/article/details/52022617

    http://www.w3school.com.cn/jsref/jsref_obj_array.asp

    http://www.runoob.com/jquery/jquery-ref-misc.html
  • 相关阅读:
    JVM的即时编译器JIT之简单介绍
    JS脚本动态给标签控件添加事件
    getParameterMap的使用
    IOS开发中判断文件是否存在，不存在则拷贝
    javaweb中解决Cookie中文乱码问题
    网页中的上标和下标实现
    Java中枚举的使用
    ASP.NET 首页性能的4大做法
    httpHandlers和httpModules接口介绍 (5)
    css+div排版如何支持所有浏览器
  • 原文地址：https://www.cnblogs.com/huanghuali/p/9598040.html
Copyright © 2011-2022 走看看