JavaScript Array对象（属性、方法） 留言板案例

合集 - web前端(29)

1.1-web前端 基础标签 、图片、超链接2023-09-192.2-web前端 音频、视频、表格、表单2023-09-193.3-web前端 css 网页样式语言，基础语言、盒子模型、浮动2023-09-194.5-web前端 定位position2023-09-195.6-web前端的特效 平面转换transfrom2023-09-196.7-web前端 空间转换，3D效果2023-09-197.8-web前端 动画 案例2023-09-198.9-web前端 flex弹性布局2023-09-199.10-JavaScript 点击事件 随机点名器2023-09-2010.11-JavaScript 逻辑条件 ，if判断 ，while循环，算数运算相关的案例演示2023-09-2311.12-web前端轮播图案例 （小米商城）2023-09-2712.css字体样式2023-10-0813.css样式对单行和多行文本的隐藏2023-10-1014.css伪类和伪元素2023-10-1215.web前端html+css页面内容的六种隐藏方式2023-10-1616.JavaScript的基础语法和数据类型2023-10-2617.JavaScript 数组Array存储方式及对象Object2023-10-2718.JavaScript数据类型的转换2023-10-3019.JavaScript运算符及优先级2023-10-3120.JavaScript条件判断if 语句2023-11-0121.JavaScript for循环控制语句2023-11-0222.JavaScript 其他循环语句和跳转语句2023-11-0323.JavaScript 函数、函数构造、函数调用、参数、函数返回值、变量的作用域、预解析2023-11-0424.JavaScript函数变量的生命周期，自执行函数、闭包、反转数组案例及冒泡排序案例2023-11-04

25.JavaScript Array对象（属性、方法） 留言板案例2023-11-04

26.JavaScript string对象（属性，方法）获取图片后缀案例 输入和输出结果转换形式案例2023-11-0727.JavaScript Date对象 、日期求差案例 、 购物秒杀倒计时、日历2023-11-1328.JavaScript事件 2023-11-1829.JavaScript BOM对象2023-11-18

收起

一、创建数组对象的方式

var arrOb=new Array(值,........)

var arrOb=Array(值,.......)

var arrOb=[值,.........]

var arrOb=new Array(n);

arrOb[0]=值1;

arrOb[1]=值2;

二、数组的属性

length      //数组中元素的数目

var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr.length);

三、数组的方法

1、转为字符串

var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
console.log(arr);
console.log(arr.toString());

2、join('连接符')       将数组元素连接成字符串   默认值为   ， 分隔开

 var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
 console.log(arr.join('*'));

join原理解析

function join (a=','){
            var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
            var str = '';
            for(var i=0;i<arr.length;i++){
                if(i==arr.length-1){
                    str +=arr[i];
                }else{
                    str +=arr[i]+a;
                }
            }
            return str;
        }
        console.log(join('+'));

3、连接多个数组，返回新数组   concat(字符串/数组/数字)

        var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
        console.log(arr.concat(['郑州','嵩山'],'重渡沟'));

 

4、. . . 扩展运算符

        var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
        var arr2 = ['郑州','嵩山'];
        var arr3 = [...arr,...arr2];
        console.log(arr3);

5、追加元素，返回新的数组长度 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);

添加成功：返回值是添加成功之后数组的长度

6、删除元素，返回新的数组长度 pop尾部\shift头部

        var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
        arr.pop()    
        console.log(arr.pop());
        console.log(arr);
        console.log(arr.shift());
        console.log(arr);

删除成功之后，返回的是被删除的内容

7、splice()删除添加修改

splice(startindex，length,item,item)

startindex：从什么地方开始删除

length：删除的长度

item:添加的新内容，可添加多个

返回值：被删除的内容

删除：splice(开始删除的位置，删除的长度)

        var arr = ['云南','九寨沟','拉萨','西双版纳','三亚','少林寺'];
        //删除
        arr.splice(0,1)

替换：splice(开始删除的位置，删除的长度，删除之后添加的新内容)

        //替换
        arr.splice(4,1,'南阳')
        console.log(arr);

添加：splice(开始删除的位置，0，添加的新内容)

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

 八、将数组元素升序排序 sort(回调函数)

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

九、颠倒数组中的元素   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.页面显示的内容
        var arr = ['云南', '九寨沟', '拉萨'];
        //9.将渲染数据的操作封装成数组
        function show() {
            //2.拼接所有的li
            var str = '';
            //3.循环所有数组中的内容
            for (var i = 0; i < arr.length; i++) {
                str += `<li>${arr[i]}</li>`;
            }
            //4.将str放在ul标签中间，特定属性innerHTML
            oUl.innerHTML = str;
        }
        //10.调用函数
        show();
        //6.给btn添加点击事件
        btn.onclick = function () {
            //7.获取input里面的值
            var val = inp.value;
            //8.把value添加到数组中
            //arr.unshift(val);
            arr.push(val);
            //11.重现渲染
            show()
            //12.input清空
            inp.value='';
        }
        //13.给del添加点击事件
        del.onclick = function(){
            arr.shift();
            //14.重新渲染数据

            show()
        }
    </script>