Array数组的属性和方法

Array数组常用方法

1、slice()方法

在JavaScript中，我们可以使用Array对象的slice()方法来获取数组中的某段数组元素。slice，就是“切片”的意思

语法：
数组对象.slice(start,end)

说明：参数start和end都是整数。其中，参数start是必选项，表示开始元素的位置，是从0开始计算的。参数end是可选项，表示结束元素的位置，也是从0开始计算的
使用slice方法获取数组中的某段数组元素，其实是获取

举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr=new Array("html","css","javascript","jQuery","Ajax");
        document.write(arr.slice(1,3));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

2、unshift()方法

在JavaScript中，我们可以使用Array对象的unshift()方法在数组开头添加元素，并返回该数组

语法：
数组对象.unshift(新元素1,新元素2,…,新元素n);

说明：“新元素1,新元素2,…,新元素n”是可选项，表示在数组开头添加的新元素

举例：
<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr = new Array("html", "css", "javascript");
        document.write("原数组元素：" + arr);
        document.write("<br/>");
        arr.unshift("jQuery", "Ajax");
        document.write("添加新元素后的数组元素：" +arr);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

3、push()方法

在JavaScript中，我们可以使用Array对象的push()方法向数组的末尾追加一个或多个元素，并且返回新的长度。记住，push()方法是在数组的末尾添加元素，而不是在中间插入元素

语法：
数组对象.push(新元素1,新元素2,…,新元素n);

说明：“新元素1,新元素2,…,新元素n”是可选项，表示要添加到数组末尾的元素。push()方法可以把新的元素按照顺序添加到数组对象中去，它直接修改数组对象，而不是创建一个新的数组。push()方法和pop()方法使用数组提供的先进后出的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr = new Array("html", "css", "javascript");
        document.write("原有数组元素：" + arr);
        document.write("<br/>");
        arr.push("jQuery", "Ajax");
        document.write("现有数组元素："+arr);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

4、shift()方法

在JavaScript中，我们可以使用Array对象的shift()方法来删除数组中第一个元素，并且返回第一个元素的值

语法：
数组对象.shift();

说明：shift()方法跟pop()方法类似。其中unshift()方法用于在数组开头添加元素，shift()方法用于删除数组开头第一个元素
注意，shift()方法不创建新的数组，而是直接修改原来的数组对象。如果数组为空，那么shift()方法将不会进行任何操作，并且返回undefined值

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr = new Array("html", "css", "javascript", "jQuery", "Ajax");
        document.write("原数组元素为：" + arr);
        document.write("<br/>");
        document.write("删除的第一个数组元素为：" + arr.shift());
        document.write("<br/>");
        document.write("删除后的数组元素为："+arr);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

5、pop()方法

在JavaScript中，我们可以使用Array对象的pop()方法删除并返回数组中的最后一个元素

语法：
数组对象.pop();

说明：pop()方法将删除数组对象的最后一个元素，并且把数组长度减1，返回它删除的该元素的值。如果数组已经为空，则pop()方法不改变数组，并返回undefined值

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr=new Array("中国","广东","广州","天河","暨大");
        document.write("数组中原有元素："+arr);
        document.write("<br/>");
        document.write("删除的数组最后一个元素是："+arr.pop());
        document.write("<br/>");
        document.write("数组中现有元素："+arr);
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

6、toString()方法

在JavaScript中，我们可以使用Array对象的toString()方法将数组转换为字符串，并返回结果

语法：
数组对象.toString()

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr=new Array("html","css","javascript","jQuery","Ajax");
        document.write(arr.toString());
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

从预览效果我们可以看出，使用toString()方法将数组转换为字符串时，数组中的元素之间是用英文逗号分隔的

7、join()方法

在JavaScript中，我们可以使用Array对象的join()方法把数组中的所有元素连接成为一个字符串

语法：
数组对象.join("分隔符")

说明：其中分隔符是可选项，用于指定要使用的分隔符。如果省略该参数，则JavaScript默认采用英文逗号作为分隔符

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr=new Array("html","css","javascript");
        //没有使用分隔符的join()方法
        document.write(arr.join()+"<br/>");
        //使用分隔符的join()方法
        document.write(arr.join("*"));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

8、concat()方法

在JavaScript中，我们可以使用Array对象的concat()方法连接两个或多个数组。该方法不会改变现有的数值，而仅仅会返回被连接数组的一个副本
concat，就是“合并”的意思

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr1 = new Array("html","css","javascript");
        var arr2 = new Array("北京","广州","上海");
        var arr3 = new Array("中国","美国","俄罗斯");
        document.write(arr1.concat(arr2,arr3));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

9、sort()方法

在JavaScript中，我们可以使用Array对象的sort()方法对数组元素进行大小比较排序

语法：
数组对象.sort(函数名)

说明：其中“函数名”用来确定元素顺序的函数的名称，如果这个参数被省略，那么元素将按照ASCII字符顺序进行升序排序

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //升序比较函数
        function asc(a,b)
        {
            return a-b;
        }
        //降序比较函数
        function des(a,b)
        {
            return b-a;
        }
        //创建数组的同时对元素赋值
        var arr=new Array(3,9,1,12,50,21);
        document.write("排序前的数组元素"+arr.join(","));
        document.write("<br/>");
        arr.sort(asc);
        document.write("升序后的数组元素"+arr.join(","));
        document.write("<br/>");
        arr.sort(des);
        document.write("降序后的数组元素"+arr.join(","));
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果

分析：很多人JavaScript初学者对上面的排序很疑惑，大家可以看看这篇文章“深入探讨JS中的数组排序函数sort()”。如果新人还是不懂其原理的话，以后用的时候回来参考一下就知道了。在JavaScript进阶教程会有详细介绍原理。其实sort()方法涉及到了JavaScript高阶函数，这个东西算是很高级的一个东西了

10、reverse()方法

在JavaScript中，我们可以使用Array对象的reverse()方法将数组中的元素反向排列。注意，reverse()是一种“排列”方法，而不是“排序”方法
reverse，就是“反向”的意思

语法：
数组对象.reverse();

说明：reverse()方法会改变原来的数组，而不是创建新的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <title></title>
    <script type="text/javascript">
        //创建数组的同时对元素赋值
        var arr = new Array(3,1,2,5,4);
        document.write("原数组元素：" + arr);
        document.write("<br/>");
        document.write("反向排列后的数组元素：" + arr.reverse());
    </script>
</head>
<body>
</body>
</html>

在浏览器预览效果