ECMA6字符串和新增数组方法

最新推荐文章于 2022-04-09 20:59:51 发布

原创最新推荐文章于 2022-04-09 20:59:51 发布 · 192 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端 #typescript

javascript复习之路同时被 2 个专栏收录

87 篇文章

订阅专栏

javascript基础

77 篇文章

订阅专栏

本文介绍了ECMAScript6中字符串的改进，如模板字符串的使用，以及`Array.from()`方法的详细应用，包括将伪数组转换为真数组，处理Map和Set对象，以及转换字符串和类数组对象。此外，还探讨了`Array.find()`方法在查找符合条件元素时的用法，以及`Array.copyWithin()`方法如何在数组中复制元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ECMA6字符串

传统字符串：所有单引号，双引号括起来的都叫做字符串
 ECMA6字符串：反引号  ``
    1.ECMA6字符串，想怎么写就怎么写，换行，代码缩进，都能在字符串中体现出来
    2.${变量/表达式/函数调用}

var str = "hello 
world"; // 报错
var str = `hello 
    world`; // 正常输出，保留换行和代码缩进

function showSelf({name,age,sex = "男"}){
	// 传统写法
    alert("我叫" + name + ",今年" + age + ",性别" + sex); 
    // ECMA6字符串拼接
    alert(`我${name}叫，今年${age}岁，是一位${sex}性`);
}
showSelf({
    age: 18,
    name: "小明"
})

ECMA6新增数组方法

Array.from()

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <script>
            /* 
                    Array.from()    将伪数组转成真数组
            */
           window.onload = function(){
               var aLis = document.getElementsByTagName("li");
               alert(aLis); // [object HTMLCollection]

               aLis = Array.from(aLis);

               aLis.push("hello");

               alert(aLis); // [object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],[object HTMLLIElement],hello
               
            /* 转换map
              将Map对象的键值对转换成一个二维数组。 */
            const map = new Map();  
            map.set('k1', 1);
            map.set('k2', 2);
            map.set('k3', 3);
            var arr = Array.from(map)
            console.log(arr) // [[k1,1],[k2,2],[k3,3]]

            /* 转换set
               将Set对象的元素转换成一个数组。 */
            const set = new Set();
            set.add(1).add(2).add(3)
            console.log(set) // {1, 2, 3}
            console.log(Array.from(set)) // [1, 2, 3]

            /* 转换字符串 */
            console.log(Array.from('hello world')) // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']

            /* 类数组对象 
               一个类数组对象必须要有length，他们的元素属性名必须是数值或者可以转换成数值的字符。
               注意：属性名代表了数组的索引号，如果没有这个索引号，转出来的数组中对应的元素就为空
               如果对象不带length属性，输出空数组
               对象的属性名不能是索引号
            */
            console.log(Array.from({
                0: '0',
                1: '1',
                3: '3',
                length:4
            })) // ['0', '1', undefined, '3']

            console.log(Array.from({
                0: 0,
                1: 1
            })) // []

            console.log(Array.from({
                a: '1',
                b: '2',
                length:2
            })) // [undefined, undefined]

            /* Array.from还可以接受第二个参数，作用类似于数组的map方法，用来对每个元素进行处理，将处理后的值放入返回的数组。如下： */
            console.log(Array.from([1, 2, 3, 4, 5], (n) => n + 1)) // [2, 3, 4, 5, 6]
           }
        </script>
    </head>
    <body>
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </body>
</html>

Array.find()

/* 
     find()

     功能：在数组中查找符合条件的元素，只要找到第一个符合条件的元素，就终止遍历
     返回值：找到的元素

     findIndex()
     返回值：找到元素的下标
*/

var arr = [10,20,30,40,50];
var res = arr.find(function(item,index,arr){
    //查找条件
    return item > 20;
})
alert(res); // 30
alert(arr.find(item => item > 20)); // 30

Array.copyWithin

/* 
      arr.copyWithin 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中
      第一个参数：从哪个下标开始
      第二个参数和第三个参数：范围[start,end)
*/
var arr = [1,2,3,4,5,6,7,8,9,10];
arr.copyWithin(3,7,9);
alert(arr);//1,2,3,8,9,6,7,8,9,10