JS操作数组的api

最新推荐文章于 2023-06-02 14:56:20 发布

神仙刘

最新推荐文章于 2023-06-02 14:56:20 发布

阅读量122

点赞数

分类专栏： JS Vue 文章标签： js javascript 数据结构

本文链接：https://blog.csdn.net/qq_41936090/article/details/119046197

版权

Vue 同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

7 篇文章 1 订阅

订阅专栏

JS操作数组的api

学习Vue3时遇到的练习，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组变更方法</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
<!--
push()在数组末尾追加新元素，并返回数组的新长度。
pop()*从数组中删除最后一个元素并返回它。
*如果数组为空，则返回undefined，并且不修改数组。
shift()从数组中删除第一个元素并返回它。如果数组为空，则返回undefined，并且不修改数组。
unshift()在数组开头插入元素，并返回数组长度
splice(a,b,c)数组拼接 a:开始拼接或者移除的位置，b：要移除或者替换的个数，c：要替换的内容，得是数组[]，返回数组拼接后，被移除的内容
sort()数组排序 ：参数：排序规则，可以用lambda表达式，也可以指定排序的内容
reverse()数组反转
filter()过滤：可以将函数指定条件进行过滤 参数：正则表达式、match方法
-->
    <div id="app">
        <ul>

            <li v-for="(value,index) in jsonArray">
                <span v-text="index+'. '"></span><span v-text="value"></span>
            </li>
        </ul>
    </div>
    <script>
        var app = {
            data(){
              return{
                  jsonArray: [
                      {name:'张三',age:'51',sex:'男',address:'北京'},
                      {name:'李四',age:'22',sex:'女',address:'湖南'},
                      {name:'王五',age:'31',sex:'女',address:'上海'},
                      {name:'赵六',age:'25',sex:'男',address:'广州'}
                  ],
              }
            },
            methods:{
                test(){

                }
            }
        }
        let mount = Vue.createApp(app).mount("#app");
        let array = mount.jsonArray;
        //过滤
        let ts = array.filter(array=>array.name.match(/张三/));
        console.info('过滤后的数组');
        console.log(ts);
        //排序
        //[11,2,22,1].sort((a, b) => a - b)
        //let sort = array.sort((a,b) => 1-2);
        let sort = array.sort( (a,b)=>b['age']-a['age']);//指定某个属性进行排序
        console.log('排序后的数组');
        console.log(sort);
        //拼接
        let splice = array.splice(0,1,[{"name": "李四", "age": "22", "sex": "女", "address": "湖南"}]);
        console.log('数组拼接后，被移除的内容');
        console.log(splice);
        //在数组开头插入元素
        let number = array.unshift(['lalaa']);
        console.log('返回数组长度：'+number);
        //从数组中删除第一个元素并返回它
        let t = array.shift();
        console.log('数组中被删除的元素:'+t);

        //移除数组第一个元素
        let t1 = array.pop();
        console.log('移除数组第一个元素,返回被删除的元素');
        console.log(t1);
        //数组末尾添加元素
        let number1 = array.push([{"name": "er", "age": "22", "sex": "女", "address": "湖南"}]);
        console.log('数组末尾添加元素后，数组的长度'+number1);
    </script>
</body>
</html>

神仙刘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS操作数组的api

JS操作数组的api学习Vue3时遇到的练习，<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>数组变更方法</title> <script src="../../js/vue.js"></script></head><body><!--push()在数组末尾
复制链接

扫一扫