数组的方法以及一些功能函数

最新推荐文章于 2023-12-18 17:26:41 发布
shuaishuaizhang8
最新推荐文章于 2023-12-18 17:26:41 发布
阅读量122
点赞数
分类专栏：数组操作文章标签： js
本文链接：https://blog.csdn.net/shuaishuaizhang8/article/details/109670468
版权
数组操作专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="btn">点我</button>
    <script>
        // let arr = [];
        // 1.字符串的操作方法
        // 1.1.判断字符以XX开头的  startsWith
        let url = 'http: //www.baidu.com'
        console.log(url.startsWith('http')); //true
        // 1.2 以XX结尾的
        // endsWith
        console.log(url.endsWith('com')); //true

        // 判断字符串是否包含的includes()
        console.log(url.includes('baidu'));
        // 判断字符串里面有的字符串的索引
        console.log(url.indexOf('p'));

        // 模板字符串 ····
        let name = 'zhangshan'
        let age = 18
            // let girl = `我的名字叫 ${name},我今年${18}了，快来追我吧 `
            // console.log(girl);

        //  2.数组的扩展
        // 数组有多种方法，可以将其分为对象继承方法、数组转换方法、栈和队列方法、数组排序方法、数组拼接方法、创建子数组方法、数组删改方法、数组位置方法、数组归并方法和数组迭代方法
        // 2.1 对象继承方法 
        // toString() //将数组转化为，分割的字符串
        // alert()  //输出数组的时候，会把数组给转化成字符串进行展示
        // toLocaleString()
        // valueOf()  //返回数组本身
        // var a = [1,2,3]
        // console.log(a.valueOf() instanceof Array);  //true

        // 2.2. 数组的转换方法
        // join()  //与String.split()方法的逆向操作，后者是将字符串分割成若干块来创建一个数组；如果数组中的某一项的值是null或者undefined，则该值在join()方法返回的结果中以空字符串表示

        //2.3.栈和队列方法
        // push()和pop()方法允许将数组当作栈来使用。unshift()和shift()方法的行为非常类似于push()和pop()，不一样的是前者是在数组的头部而非尾部进行元素的插入和删除操作
        // var b = []
        // console.log(b,b.push(1));
        // console.log(b,b.push({name:'zhangsan'}));
        // console.log(b,b.push([4,5]));
        // 合并数组
        // let a = [1, 2, 3, 4, {
        //     name: 'zhangsna'
        // }]
        // let b = [4, 5, 7, {
        //         name: 'zhangsna'
        //     }]
        // console.log(a, Array.prototype.push.apply(a, b));
        // 数组去重？
        // 1.利用双重for循环-----最基本的-splice（）
        // function removedup(arr) {
        //   for (let i = 0; i < arr.length; i++) {
        //     for (let j = i+1; j < arr.length; j++) {
        //       if (arr[i] == arr[j]) {
        //          arr.splice(j,1)
        //         j--;
        //       }
        //     }
        //   }
        //   return arr
        // }
        // console.log(removedup(a));  //不能去重掉数组里面含有对象的
        // 2.利用ES6 Set去重
        // function removedup (arr) {
        //   return Array.from(new Set(arr))  //set 是es6 新提供的数据结构，类似于数组但是已经去过重 ；Array.from方法用于将两类对象转为真正的数组 ，类似数组的对象，可遍历的对象（包括 ES6 新增的数据结构 Set 和 Map）
        // }
        // console.log(removedup(a)); 
        // 3.includes，利用新数组 indexOf（） == -1
        // 4. 利用Map对象和数组的filter方法
        // function removedup(arr) {
        //   const newarr = new Map();  //ES6中创建一个新的空的map数据结构
        //   return arr.filter((item) => !newarr.has(item) && newarr.set(item,1))
        // }
        // console.log(removedup(a)); 
        // pop（）pop()方法从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。所以，该数组会改变原数组

        // 数组的排序 两个可以直接用来重排序的方法: reverse()和sort() 
        // reverse() 反转数组
        // 数组的删改
        // splice()方法用于删除原数组的一部分成员，并可以在被删除的位置添加入新的数组成员，该方法会改变原数组 ；如果只提供一个元素，相当于将原数组在指定位置拆分成两个数组

        // 数组归并方法包括
        // reduce()方法需要两个参数。第一个是执行化简操作的函数。化简函数的任务就是用某种方法把两个值组合或化简为一个值，并返回化简后的值
        // values.reduce(function(prev, cur, index, array){
        // });
        //     var a = [1,2,3,4,5];
        // var sum = a.reduce(function(x,y){return x+y},0);//数组求和
        // var product = a.reduce(function(x,y){return x*y},1);//数组求积
        // var max = a.reduce(function(x,y){return (x>y)?x:y;});//求最大值

        // filter()方法对数组中的每一项运行给定函数，该函数会返回true的项组成的数组。该方法常用于查询符合条件的所有数组项

        // [1, 2, 3, 4, 5].filter(function (elem) {
        //   return (elem > 3);
        // });// [4, 5] 

        // some()方法对数组中的每一项运行给定函数，如果该函数对任一项返回true，则返回true。并且当且仅当数值中的所有元素调用判定函数都返回false，它才返回false
        // a = [1,2,3,4,5];
        // a.some(function(elem, index, arr){return elem%2===0;})//true

        // every()方法对数组中的每一项运行给定函数，如果该函数对每一项都返回true，则返回true；只要有一项返回false，则返回false
        // a = [1,2,3,4,5];
        // a.every(function(elem, index, arr){elem < 10;})//true
        // a.every(function(elem, index, arr){return elem%2 ===0;});//false

        // JavaScript ES12新特性抢先体验
        // replaceAll()
        // 看到replaceAll这个词，相比很容易联想到replace。在JavaScript中，replace方法只能是替换字符串中匹配到的第一个实例字符，而不能进行全局多项匹配替换，唯一的办法是通过正则表达式进行相关规则匹配替换
        // 而replaceAll则是返回一个全新的字符串，所有符合匹配规则的字符都将被替换掉，替换规则可以是字符串或者正则表达式。
        // let string = 'I Like 前端,I like 前端公虾米'
        //     //使用replace
        // let replaceStr = string.replace('like', 'love')
        //     // console.log(replaceStr) // 'I love 前端,I like 前端公虾米'

        // //replace使用正则匹配所有
        // console.log(string.replace(/like/i, 'love')) // 'I love 前端,I love 前端公虾米'

        // //使用replaceAll
        // let replaceAllStr = string.replaceAll('like', 'love')
        //     // console.log(replaceAllStr) // 'I love 前端,I love 前端公虾米'
        //     // 需要注意的是，replaceAll在使用正则表达式的时候，如果非全局匹配（/g），则replaceAll()会抛出一个异常
        //     // let string = 'I like 前端,I like 前端公虾米'
        // console.log(string.replaceAll(/like/ig, 'love')) //TypeErro
        // 把数据对象转化为键值对应的数据
        // var data = {
        //     id: '11',
        // }
        // var keyMap = {
        //     id: '序列',
        // }
        // var objs = Object.keys(data).reduce((newData, key) => {
        //         let newKey = keyMap[key] || key
        //         newData[newKey] = data[key]
        //         return newData
        //     }, {})
        //     // alert(JSON.stringify(objs))
        // console.log(objs);

        // 数据去重并且保留id相等且age最大的值
        // const arr = [{
        //             id: 1,
        //             age: 8
        //         }, {
        //             id: 1,
        //             age: 9
        //         }, {
        //             id: 2,
        //             age: 10
        //         }, {
        //             id: 3,
        //             age: 13
        //         }, {
        //             id: 1,
        //             age: 15
        //         }, {
        //             id: 3,
        //             age: 13
        //         }, {
        //             id: 3,
        //             age: 18
        //         },

        //     ]
        //     // console.log(arr, '原数组')

        // for (let i = 0; i < arr.length; i++) {
        //     for (let j = i + 1; j < arr.length; j++) {
        //         if (arr[i].id === arr[j].id) {
        //             arr.splice(arr[i].age > arr[j].age ? j : i, 1)
        //         }
        //     }
        // }


        // console.log(arr, '新数组');
        // (3) [{…}, {…}, {…}]0: {id: 2, age: 10}1: {id: 1, age: 15}2: {id: 3, age: 18}length: 3__proto__: Array(0) " 
        // window.onload = function() {
        //     const arr = [{
        //         id: 2,
        //         age: 10
        //     }, {
        //         id: 3,
        //         age: 13
        //     }, {
        //         id: 1,
        //         age: 15
        //     }, ]

        //     console.log('原数组: ', arr);

        // 向数组中推进去一个对象，规则（如果数组中有这个对象，就找到它，比较它的第二个属性值的大小进行更新，取最大值，更新数据）
        window.onload = function() {
                const arr = [{
                    id: 2,
                    age: 10
                }, {
                    id: 3,
                    age: 13
                }, {
                    id: 1,
                    age: 15
                }, ]
                var a = {
                    id: 2,
                    age: 18
                }

                const flag2 = arr.some(item => item.id === a.id)
                console.log(flag2);
                var flag = arr.filter(item => item['id'] === a.id).length !== 0
                console.log(flag);
                var flag1 = arr.filter(item => item.id === a.id).length !== 0
                console.log(flag1);
                // var flag3 = username.filter(item => item['id'] === `${message.targetId}`).length !== 0
            }
            //     document.querySelector("#btn").onclick = function() {
            //         // 找到 存在项
            //         const flag = arr.some(item => item.id === a.id)
            //         if (flag) {
            //             // 找到存在数据下标
            //             let i = arr.findIndex(item => item.id === a.id)
            //             arr[i].age = arr[i].age > a.age ? arr[i].age : a.age
            //         } else { // 不存在
            //             arr.push(a)
            //         }
            //         console.log('系数组: ', arr);
            //     }
            // }

        // 返回数组中含有属性的索引值，没有找到就返回-1
        // function findElem(arrayToSearch, attr, val) {
        //     for (var i = 0; i < arrayToSearch.length; i++) {
        //         if (arrayToSearch[i][attr] == val) {
        //             return i;
        //         }
        //     }
        //     return -1;
        // }
        // 找到 存在项
        // const flag = arr.some(item => item.id === a.id)
    </script>
</body>

</html>