【前端】javascript中的数组及操作方法

创建：

对象的实例创建：var aList = new Array(1,2,3);
直接创建：var aList = [1,2,3,'a']

数组的api：增删改查/反转排序/合成字符串

1.增：放到最后

var list = ['穿山甲','水娃','蛇精']
list.push('丽丽')
console.log(list)

2.删：从末尾开始删除

list.pop()

3.改：

splice(): 任意位置添加/删除/替换...

参数1: 从哪个索引值开始操作;

参数2: 删除几个;

参数3-n: 用什么替换;

// 3.1 从指定位（索引位1）添加，不删除
list.splice(1,0,'火娃')
// 3.2 删除指定位元素和指定个数(从索引2开始，删除2个)
list.splice(2,2,)
// 3.3 从指定位开始删除，再添加(从索引2开始，删除1个，再添加'金刚葫芦娃')
list.splice(2,1,'金刚葫芦娃')
console.log(list)

4.查：indexOf():查看元素索引值，没有则返回-1

扫描二维码关注公众号，回复： 4189591 查看本文章

var index1 = list.indexOf('穿山甲')
var index2 = list.indexOf('lili')
console.log(index1,index2)

5.反转：

list.reverse()

6.排序

var list2 = new Array(1, 3, 56, 66)
list2.sort(function(c,d){    // 可以是任何字母，前-后:升序，后-前:降序
    return c-d
    // return d-c
})
console.log(list2)

7.将数组元素拼接成字符串

var str = list2.join()  // 不传递参数，用逗号连接
var str = list2.join(' ')    //传递空格，会用空格连接，
var str = list2.join('-')
var str = list2.join('')    // 传递空字符串，无缝连接
console.log(str,list2)

拓展1.数组去重

思路：创建一个新的空数组，遍历原数组，利用indexOf()查看，新数组中是否已有原数组中的元素，没有则添加，组成新的去重后的数组。

<script>
    var list1 = ['丽丽', '莉莉', 'lili', '丽丽', '莉莉', 'lili']
    var list2 = new Array
        // 遍历1，看2中有没有，没有push进去
        for (i=0;i<list1.length;i++){
            if(list2.indexOf(list1[i]) == -1){
                list2.push(list1[i])
            }
        }
        console.log(list2)
</script>

拓展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>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none
        }
        h1 {
            width: 500px;
            margin: 50px auto;
            text-align: center
        }
        ul {
            width: 500px;
            margin: 0 auto
        }
        ul li {
            font:22px/50px 'simsun';
            border-bottom: 2px dashed yellow;
            text-align: center;
        }
    </style>
    <script>
        window.onload = function(){
            var list = ['haha', 'heihie', 'xixi', 'hehe']
            // 通过id获得ul，并给了变量ul
            var ul = document.getElementById('ul')
            // 定义一个空的str，用来接受列表内容
            var str = ''
            // 遍历列表，将内容拼接成<li>内容</li>
            for (i=0;i<list.length;i++){
                str += '<li>'+list[i]+'</li>'
            }
            // 赋值，通过innerHTML操作ul中的li
            ul.innerHTML = str
        }
    </script>
</head>
<body>
    
    <h1>我是谁</h1>
    <ul id='ul'>
        
    </ul>
        
</body>
</html>

【前端】javascript中的数组及操作方法

猜你喜欢