xinggevip

Es2015 Array.from()、find()、findIndex()、fill()
index.html<!DOCTYPE html> <html lang="en&qu...
扫描右侧二维码阅读全文
12
2019/06

Es2015 Array.from()、find()、findIndex()、fill()

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        // 扩展运算符...
        let arr = [1,2,3];
        let arr2 = [...arr];
        arr.push(4);
        console.log(arr,arr2); // [1,2,3,4] [1,2,3]
        // Array.from() **********************************
        // 作用:把类数组(获取一组元素、arguments...)转换成数组
        // --------------------------------复制数组
        let arr3 = Array.from(arr);
        console.log(arr3);  // [1,2,3,4]
        window.onload = function (){
            let ali = document.querySelectorAll('ul li');
            console.log(ali);  // NodeList(5) [li, li, li, li, li]
            // ----------------------------把获取的元素转换成数组
            let arrli = Array.from(ali);
            // let arrli = [].slice.call(ali); //Es5之前的方法
            console.log(arrli); // (5) [li, li, li, li, li]
        };
        // ---------------------------------把arguments转换成数组
        function show(){
            // 正常的arguments是不能进行push操作的
            // console.log(arguments);  // Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
            let args = Array.from(arguments);
            args.push(6);
            console.log(args);  // (6) [1, 2, 3, 4, 5, 6]
        };
        show(1,2,3,4,5);
        // ---------------------------------把字符串转换成数组
        // 传统方法
        let str = 'Hello';
        let strarr = str.split('');
        console.log(strarr);  // (5) ["H", "e", "l", "l", "o"]
        // Es6方法
        let strarr2 = Array.from(str);
        console.log(strarr2); // (5) ["H", "e", "l", "l", "o"]

        // ---------------------------------把json转换为数组
        let json = {
            0:'apple',
            1:'banana',
            2:'orange',
            length:3
        };
        let jsonarr = Array.from(json);
        console.log(jsonarr); // (3) ["apple", "banana", "orange"]
        // Array.of()  ******************************
        // --------------------------把一组值转换为数组
        let  hiarr = Array.of('aaa','bbb','ccc');
        console.log(hiarr); // (3) ["aaa", "bbb", "ccc"]
        // find() ***************************************
        // 查找第一个符合条件的数组成员的值
        let arr4 = [5,9,1,3,7,6,];
        let res = arr4.find((val,index,arr)=>{
            return val > 3;
        });
        console.log(res);  // 5  找不到则返回undefined
        // 查找第一个符合条件的数组成员的下标
        let res1 = arr4.findIndex((val,index,arr)=>{
            return val > 3
        });
        console.log(res1); // 0 找不到则返回-1
        // fill的用法  填充
        let arr5 = new Array(5);
        arr5.fill('默认值');
        console.log(arr5); //(,55) ["默认值", "默认值", "默认值", "默认值", "默认值"]
        // fill 可设置填充范围
        let arr6 = new Array(5);
        arr6.fill('默认值',1,4);
        console.log(arr6); // (5) [empty, "默认值", "默认值", "默认值", empty]
    </script>
</body>
</html>
Last modification:June 12th, 2019 at 10:08 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment