Array数组常用方法总结js中

1. js中array数组常用方法总结：

参考文档：MDN

<script>
        /*数组方法总结*/

        //1.Array.length：属性，返回或设置一个数组中的元素个数
        var arr = ['hello', 'world'];
        console.log(arr.length) //2

        //2.Array.prototype.at(index)：获取属性对应的item
        //方法接收一个整数值并返回该索引的项目，允许正数和负数。负整数从数组中的最后一个项目开始倒数。
        var arr = ['china', 'world', 'america'];
        console.log(arr.at(-1)) //america

        //3.var new_array = old_array.concat(value1[, value2[, ...[, valueN]]])：合并数组
        //方法用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。
        var arr1 = ['china', 'world'];
        var arr2 = ['america', 'japan'];
        var arr3 = ['england'];
        var arr = arr1.concat(arr2, arr3);
        console.log(arr); // ['china', 'world', 'america', 'japan', 'england']
        console.log(arr1); // ['china', 'world']

        //4.arr.entries():将索引和值组成键值对
        //方法返回一个新的Array Iterator对象，该对象包含数组中每个索引的键/值对。
        var arr = ['china', 'world', 'america', 'england'];
        var arr2 = arr.entries();
        console.log(arr2); //Array Iterator {}
        console.log(arr2.next().value); // [0, 'china']

        //5.arr.every(callback(element[, index[, array]])[, thisArg]):检查所有元素是否符合某条件
        //方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。
        const array1 = [1, 30, 39, 29, 10, 13];
        console.log(array1.every(item => {
            return item < 40;
        })); //true

        //6.arr.fill(value[, start[, end]]):替换，改变原数组
        //方法用一个固定值填充一个数组中从起始索引到终止索引内的全部元素。不包括终止索引。
        var arr = ['china', 'england', 'japan', 'america'];
        console.log(arr.fill('hello', 2, 3)); // ['china', 'england', 'hello', 'america']
        console.log(arr); // ['china', 'england', 'hello', 'america']

        //7.var newArray = arr.filter(callback(element[, index[, array]])[, thisArg]):根据条件筛选数组
        // 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。 
        var users = [{
            id: 1,
            uname: 'jack'
        }, {
            id: 2,
            uname: 'shaochen'
        }, {
            id: 3,
            uname: 'rose'
        }];
        var filterUsers = users.filter(item => {
            return item.id >= 2;
        })
        console.log(filterUsers); // [{id: 2, uname: 'shaochen'},  {id: 3, uname: 'rose'}]

        //8.arr.find(callback[, thisArg])：根据条件查找元素
        // 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
        var users = [{
            id: 1,
            uname: 'jack'
        }, {
            id: 2,
            uname: 'shaochen'
        }, {
            id: 3,
            uname: 'rose'
        }];
        var item = users.find(item => {
            return item.uname == 'shaochen'
        })
        console.log(item); //{id: 2, uname: 'shaochen'}
        //同时也可以用于根据条件修改数组中某个元素的值
        users.find(item => {
            if (item.id == 2) {
                item.uname = 'shaoshuai'
                return true;
            }
        })
        console.log(users[1]); //{id: 2, uname: 'shaoshuai'}

        //9.arr.findIndex(callback[, thisArg])：查找索引
        //方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回-1。
        var users = [{
            id: 1,
            uname: 'jack'
        }, {
            id: 2,
            uname: 'shaochen'
        }, {
            id: 3,
            uname: 'rose'
        }];
        var index = users.findIndex(function(item) {
            return item.uname == 'rose';
        });
        console.log(index); //2

        //10.arr.forEach(callback(currentValue [, index [, array]])[, thisArg]):遍历数组
        //方法对数组的每个元素执行一次给定的函数。
        var users = [{
            id: 1,
            uname: 'jack'
        }, {
            id: 2,
            uname: 'shaochen'
        }, {
            id: 3,
            uname: 'rose'
        }];
        //将所有的uname改为chinese
        var newUsers = users.forEach(item => {
            item.uname = 'chinese';
        })
        console.log(newUsers) //undefined
        console.log(users) //[ {id: 1, uname: 'chinese'}, {id: 2, uname: 'chinese'}, {…}]

        //11.arr.includes(valueToFind[, fromIndex])：查找数组中是否包含某元素
        //方法用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。
        var arr = ['china', 'japan', 'america', 'france', 'germany'];
        var flag = arr.includes('germany');
        console.log(flag); //true

        //12.arr.indexOf(searchElement[, fromIndex]):查找元素对应的索引
        //方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。
        var arr = ['china', 'japan', 'america', 'france', 'germany'];
        var index = arr.indexOf('america');
        console.log(index); //2

        //13.Array.isArray(obj)：判断是否为数组
        //用于确定传递的值是否是一个 Array。
        var arr = [];
        console.log(Array.isArray(arr)); //true

        //14.arr.join([separator])：将数组转为字符串
        //方法将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.join()); //china,france,germany,japan
        console.log(arr.join('-')); //china-france-germany-japan

        //15.arr.lastIndexOf(searchElement[, fromIndex])
        //方法返回指定元素（也即有效的 JavaScript 值或变量）在数组中的最后一个的索引，如果不存在则返回 -1。从数组的后面向前查找，从 fromIndex 处开始。
        var arr = ['china', 'france', 'germany', 'japan', 'china'];
        var index = arr.lastIndexOf('china');
        console.log(index); //4

        //16.var new_array = arr.map(function callback(currentValue[, index[, array]]) {
        // Return element for new_array 
        //}[, thisArg])
        //方法创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。
        var arr = ['china', 'france', 'germany', 'japan', 'china'];
        var newArr = arr.map(item => {
            return 'hello ' + item
        });
        console.log(newArr); //['hello china', 'hello france', 'hello germany', 'hello japan', 'hello china']

        //17.Array.of(element0[, element1[, ...[, elementN]]])：转化成数组
        //方法创建一个具有可变数量参数的新数组实例，而不考虑参数的数量或类型。
        console.log(Array.of(1, 2, 55, 66)); // [1, 2, 55, 66]

        //18.arr.pop()：删除最后一个元素
        //方法从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.pop()); //japan

        //19.arr.push(element1, ..., elementN):
        //方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.push('hello', 'world')); //6
        console.log(arr) //['china', 'france', 'germany', 'japan', 'hello', 'world']

        //20. arr.reverse():倒序排序
        //方法将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.reverse()) //['japan', 'germany', 'france', 'china']

        //21.arr.shift()：删除第一个元素
        //方法从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.shift()); //china
        console.log(arr) //['france', 'germany', 'japan']

        //22.arr.slice([begin[, end]])：
        //方法返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。
        //（包含 begin，但不包含 end）
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.slice(0, 2)) // ['china', 'france']

        //23.arr.some(callback(element[, index[, array]])[, thisArg]):查找某个元素，可以进行修改，只修改符合条件的第一个
        //方法测试数组中是不是至少有1个元素通过了被提供的函数测试。它返回的是一个Boolean类型的
        var users = [{
            id: 1,
            uname: 'jack'
        }, {
            id: 2,
            uname: 'shaochen'
        }, {
            id: 3,
            uname: 'rose'
        }, {
            id: 4,
            uname: 'rose'
        }];
        var value = users.some(item => {
            if (item.uname == 'rose') {
                item.uname = 'jack&rose';
                //return true 结束some方法
                return true;
            }
        })
        console.log(value); //true
        console.log(users); // [{…}, {…}, {id: 3, uname: 'jack&rose'}, {id: 4, uname: 'rose'}]

        //24.arr.sort([compareFunction])
        //方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的UTF-16代码单元值序列时构建的
        var arr = ['cat', 'banana', 'america', 'dog'];
        console.log(arr.sort()); //['america', 'banana', 'cat', 'dog']
        //升级用法
        var arr = [22, 44, 66, 2, 77, 8];
        var newArr = arr.sort((firstE, secondE) => {
            if (firstE > secondE) {
                return 1;
            } else if (firstE < secondE) {
                return -1;
            } else {
                return 0;
            }
        })
        console.log(newArr); //[2, 8, 22, 44, 66, 77]

        //25.array.splice(start[, deleteCount[, item1[, item2[, ...]]]])：切割或添加元素
        //方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
        var arr = ['china', 'france', 'germany', 'japan'];
        //删除：参数一：从哪切的索引；参数二：切几位
        console.log(arr.splice(1, 2)); // ['france', 'germany']
        var arr = ['china', 'france', 'germany', 'japan'];
        //插入，参数一：插入位置的索引；参数二：0表示不进行删除，进行添加，参数三...:要添加的内容
        arr.splice(1, 0, 'jack', 'rose', 'hello');
        console.log(arr); //['china', 'jack', 'rose', 'hello', 'france', 'germany', 'japan']


        //26.arr.toString()
        //返回一个字符串，表示指定的数组及其元素。
        var arr = ['china', 'france', 'germany', 'japan'];
        console.log(arr.toString()) //china,france,germany,japan

        //27.arr.unshift(element1, ..., elementN)
        // 方法将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。
        var arr = ['china', 'france'];
        console.log(arr.unshift('japan', 'america')); //4
        console.log(arr); //['japan', 'america', 'china', 'france']
    </script>