javascript数组操作方法

1.join('+')

功能: 1.数组转字符串，可以修改连接符

原素组：不改变

返回值：增加连接符的字符串

let list = ['a', 12, 'c', 'd', 'e'];
let result = list.join(' - ');
console.log('old result', list) //["a", 12, "c", "d", "e"]
console.log('new result', result) //"a - 12 - c - d - e"

 

2.reverce()

功能:反转数组

原数组：反转

返回值: 反转

let list = ['a', 12, 'c', 'd', 'e'];
let result = list.reverse();
console.log('old result', list) //["e", "d", "c", 12, "a"]
console.log('new result', result) //["e", "d", "c", 12, "a"]

3.push()

功能：在数组末尾增加1个或多个元素

原数组：增加

返回值：数组增加后的长度

let list = ['a'];
let result = list.push('b','c');
console.log('old result', list) // ["a", "b", "c"]
console.log('new result', result) //3

4.pop()

功能：在数组末尾删除一个元素

原数组：减少

返回值：删除的元素

let list = ['a','b'];
let result = list.pop();
console.log('old result', list)    // ["a"]
console.log('new result', result)  //  b

5.unshift()

功能：在数组前端增加一个元素

原数组：改变原数组

返回值：增加后数组长度

let list = ['a','b'];
let result = list.unshift('0','1');
console.log('old result', list) // ["0", "1", "a", "b"]
console.log('new result', result) //4

6.shift

功能：在数组前端删除一个元素

原数组：改变原数组

返回值：删除的元素

let list = ['a','b'];
let result = list.shift();
console.log('old result', list) // ["b"]
console.log('new result', result) // a

7.slice(begin，end)

功能：截取字符串,begin开始下标,到end下标且不包含end元素,浅拷贝

原数组：不改变原数组

返回值：截取到的数组

let list = ['a','b','c','d','e'];
let result = list.slice(1,2);
console.log('old result', list)  // ["a", "b", "c", "d", "e"]
console.log('new result', result) // ["b"]

8.splice(start,count,value)

功能：可以截取可以增加功能强大,start下标开始截取count个元素,并使用value填充进去

原数组：在原数组上进行操作

返回值：截取到值的数组

let list = ['Jan','March', 'April', 'June'];
const result = list.splice(1, 1, 'Feb');
console.log('old result', list) // ["Jan", "Feb", "April", "June"]
console.log('new result', result) // ["March"]

9.sort((a,b) => {return a - b})

功能：数组排序

原数组：改变原数组为排序后的数组

返回值：排序后的数组

let list = [{
            id: 2,
            msg: '老二'
            },
        {
            id: 1,
            msg: '老大'
        },
        {
            id: 4,
            msg: '老四'
        },
               {
            id: 3,
           msg: '老三'
        }];
let result = list.sort((a, b) => {
    return a.id - b.id;
});
console.log('old result', list) //[{id: 1, msg: "老大"},{id: 2, msg: "老二"},{id: 3, msg: "老三"},{id: 4, msg: "老四"}]
console.log('new result', result)   //同上                       

10.toString

功能：数组转换为字符串

原数组：不受影响

返回值：转换字符串

let list = ['Jan', 'March', 'April', 'June'];
const result = list.toString();
console.log('old result', list)  // ["Jan", "March", "April", "June"]
console.log('new result', result) // Jan,March,April,June

11.concat

功能：合并数组

原数组：不受影响

返回值：合并后的新数组

let list = ['Jan', 'March', 'April', 'June'];
let list2 = [1,2,3]
const result = list.concat(list2);
console.log('old result', list) // ["Jan", "March", "April", "June"]
console.log('new result', result) //["Jan", "March", "April", "June", 1, 2, 3]

 

12.flat(depth)

功能:数据扁平化处理,depth为扁平化的层数，默认为1层,infinity为无限多层

原数组：不受影响

返回值：扁平化后的新数组

缺点：ECMAScript 2019 兼容性

let list = [['飞机'],[1,2,3,[8,10]]];
const result = list.flat(Infinity);
console.log('old result', list) // 不变
console.log('new result', result) //["飞机", 1, 2, 3, 8, 10]

13.from()

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
        <script type="text/javascript">
            let lis = document.querySelectorAll('li');
            const result = Array.from(lis);
            console.log('old result', lis)
            console.log('new result', result)
        </script>