4、. . . 擴展運算符

        var arr = ['云南','九寨溝','拉薩','西雙版納','三亞','少林寺'];
        var arr2 = ['鄭州','嵩山'];
        var arr3 = [...arr,...arr2];
        console.log(arr3);

5、追加元素，返回新的數(shù)組長度 push尾部\unshift頭部

        var arr = ['云南','九寨溝','拉薩','西雙版納','三亞','少林寺'];
        arr.push(123456)
        console.log(arr.push(123456));
        console.log(arr);
        arr.unshift('456798');
        console.log(arr.unshift('456798'));
        console.log(arr);

添加成功：返回值是添加成功之后數(shù)組的長度

6、刪除元素，返回新的數(shù)組長度 pop尾部\shift頭部

        var arr = ['云南','九寨溝','拉薩','西雙版納','三亞','少林寺'];
        arr.pop()    
        console.log(arr.pop());
        console.log(arr);
        console.log(arr.shift());
        console.log(arr);

刪除成功之后，返回的是被刪除的內(nèi)容

7、splice()刪除添加修改

splice(startindex，length,item,item)

startindex：從什么地方開始刪除

length：刪除的長度

item:添加的新內(nèi)容，可添加多個

返回值：被刪除的內(nèi)容

刪除：splice(開始刪除的位置，刪除的長度)

        var arr = ['云南','九寨溝','拉薩','西雙版納','三亞','少林寺'];
        //刪除
        arr.splice(0,1)

替換：splice(開始刪除的位置，刪除的長度，刪除之后添加的新內(nèi)容)

        //替換
        arr.splice(4,1,'南陽')
        console.log(arr);

添加：splice(開始刪除的位置，0，添加的新內(nèi)容)

        //添加
        arr.splice(1,0,'hello','world')

?八、將數(shù)組元素升序排序 sort(回調(diào)函數(shù))

arr.sort(function(a,b){
return a-b ?// 正序
return b-a ?// 倒序
})

九、顛倒數(shù)組中的元素 ? reverse()

        var arr = ['云南','九寨溝','拉薩','西雙版納','三亞','少林寺'];
        console.log(arr.reverse());

十、留言板案例

     <input type="text" name="" id="inp">
    <button id="btn">添加</button>
    <button id="del">刪除</button>
    <ul id="ul"></ul>

     <script>
        //5.獲取ul標簽
        var oUl = document.querySelector('#ul');
        var btn = document.querySelector('#btn');
        var inp = document.querySelector('#inp');
        var del = document.querySelector('#del');
        //1.頁面顯示的內(nèi)容
        var arr = ['云南', '九寨溝', '拉薩'];
        //9.將渲染數(shù)據(jù)的操作封裝成數(shù)組
        function show() {
            //2.拼接所有的li
            var str = '';
            //3.循環(huán)所有數(shù)組中的內(nèi)容
            for (var i = 0; i < arr.length; i++) {
                str += `<li>${arr[i]}</li>`;
            }
            //4.將str放在ul標簽中間，特定屬性innerHTML
            oUl.innerHTML = str;
        }
        //10.調(diào)用函數(shù)
        show();
        //6.給btn添加點擊事件
        btn.onclick = function () {
            //7.獲取input里面的值
            var val = inp.value;
            //8.把value添加到數(shù)組中
            //arr.unshift(val);
            arr.push(val);
            //11.重現(xiàn)渲染
            show()
            //12.input清空
            inp.value='';
        }
        //13.給del添加點擊事件
        del.onclick = function(){
            arr.shift();
            //14.重新渲染數(shù)據(jù)

            show()
        }
    </script>

文章來源地址http://www.zghlxwxcb.cn/news/detail-741796.html