原生js深入理解系列（二）--- js数组(数组的相应方法es6,es5)

最新推荐文章于 2022-03-07 22:16:09 发布

埃尔斯（aiers）

最新推荐文章于 2022-03-07 22:16:09 发布

阅读量338

点赞数

分类专栏：前端博客文章标签： js es6 数组

本文链接：https://blog.csdn.net/weixin_40766882/article/details/87102424

版权

前端博客专栏收录该内容

25 篇文章 2 订阅

订阅专栏

一、源码

//源码 — start

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>IFE JavaScript Task 01</title>
</head>

<body>
    <h2>污染城市列表</h2>
    <ul id="showCity">
        <li>第一名：福州，（样例）10</li>
        <li>第二名：福州，（样例）10</li>
    </ul>
    <script type="text/javascript">
    var apiData = [
        ["北京", 90],
        ["上海", 50],
        ["福州", 10],
        ["广州", 50],
        ["成都", 90],
        ["西安", 100]
    ];
    //这里可以调map处理的
    appendNode(apiData);
    // traditionFor(apiData)
    // ESFor(apiData)
      function  traditionFor(apiData) {
         /*
        在注释下方编写代码
        遍历读取aqiData中各个城市的数据
        将空气质量指数大于60的城市显示到aqi - list的列表中 */
        //传统的for循环
        var newArr = [];
        var html = '';
        //获取ul下之前的子节点并转为字符串形式
        html=document.getElementById('showCity').outerHTML.replace('<ul id="showCity">','').replace('</ul>','');
        console.log(html)
        for (var i = 0, len = apiData.length; i < len; i++) {
            if(apiData[i][1]>60){
                newArr.push(apiData[i]);
                //性能较优这里只是字符串的拼装，并不涉及到dom的渲染
                html += '<li>'+apiData[i]+'</li>';
                //性能较差涉及到dom渲染
               /* var node=document.createElement("li");//创造一个li标签
                var textNode = document.createTextNode(apiData[i]);
                node.appendChild(textNode);
                document.getElementById('showCity').appendChild(node);*/
            }
        }
        console.log(html)
        document.getElementById('showCity').innerHTML = html;
        return newArr;//返回实现的新数组
    }
  
    //使用map的方法实现，返回一个新数组,map返回后是可以在进行遍历的
  /*  eg:var kvArray = [{key: 1, value: 10}, 
               {key: 2, value: 20}, 
               {key: 3, value: 30}];

var reformattedArray = kvArray.map(obj =>{ 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
})*/
// reformattedArray is now [{1: 10}, {2: 20}, {3: 30}], 
    function appendNode (arr) {
        var html = '';
        var newArr = [];
        var dealArr=arr.map((item,index)=>{
            if(item[1]>60){
                 html += '<li>'+item+'</li>';
                newArr.push(item);
                return item;
            }
        })
        document.getElementById('showCity').innerHTML = html;
        console.log(1,dealArr);
        console.log(2,newArr)
        return newArr
    }
    //forEach方法返回值undefined。实现 forEach()除了抛出异常外，没有办法停止或打破循环。
    //如果您需要这样的行为，该forEach()方法是错误的工具。用一个简单的循环或for ...来  代替。
    //如果您正在为谓词测试数组元素并需要布尔返回值，则可以使用every()or some()替代。
    //如果可用的话，新的方法find()或者findIndex()可以用于提前终止真正的谓词
        
    // forEach和map一样是传回调函数[2, 5, , 9].forEach(logArrayElements)，回调函数的参数为（element, index, array），当前元素，
    //   index下标，目标数组
    function ESFor(arr){
        let newArr=[];
        let html='';
        arr.forEach((value)=> {
            if(value[1]>60) {
           html += '<li>'+ value +'</li>';
                newArr.push(value);
            }
          })
          document.getElementById('showCity').innerHTML = html;
            return newArr
    }
    </script>
</body>

</html>

//源码 — end

二、总结

这部分涉及的是数组的遍历以及拼字符串，以及上一blog的innerHTML和outerHTML.
1、数组遍历传统的for。
2、es5 新增的forEach（）、map()方法，里面都是传一个回调函数，回调函数的值为function(currentValue,index,targetArr);
3、forEach()的特点。
forEach方法返回值undefined。实现 forEach()除了抛出异常外，没有办法停止或打破循环。即：你不能使用break语句中断循环，也不能使用return语句返回到外层函数。如果您需要这样的行为，该forEach()方法是错误的工具。用一个简单的循环或for …来代替。如果您正在为谓词测试数组元素并需要布尔返回值，则可以使用every()or some()替代。如果可用的话，新的方法find()或者findIndex()可以用于提前终止真正的谓词
// forEach和map一样是传回调函数[2, 5, , 9].forEach(logArrayElements)，回调函数的参数为（element, index, array），当前元素，index下标，目标数组。
4、map() 的特点。
//使用map的方法实现，返回一个新数组,map返回后是可以在进行遍历的
/* eg:var kvArray = [{key: 1, value: 10},
{key: 2, value: 20},
{key: 3, value: 30}];

var reformattedArray = kvArray.map(obj =>{
var rObj = {};
rObj[obj.key] = obj.value;
return rObj;
})*/
5、es6对于对象下标遍历可使用for。。。in ,他也可以遍历数组的下标；
6、es6属于数组的遍历可使用for。。。of，他可以遍历Set,和Map的集合数组
7、es6提供了一个将对象的key转化为数组的方法，Object.keys;
8、es66提供了一个将对象的value转化为数组的方法，Object.values;
9、es6解构
10、…扩展运算符，可以解析数组，字符串，类似数组对象，如果没有部署 Iterator 接口，就使用Array.from方法将arrayLike转为真正的数组。 Map 和 Set 结构， Generator 函数是可以直接使用…的。
let aa=‘qwrtwtwert’;[…aa]
(10) [“q”, “w”, “r”, “t”, “w”, “t”, “w”, “e”, “r”, “t”]//字符串转化为数组；==Array.from(aa)
11，Array.from一般与new Set(),创建一个去重的数组
eg:
cc= [“q”, “w”, “r”, “t”, “w”, “t”, “w”, “e”, “r”, “t”];
let dd=Array.from(new Set(cc));console.log(1,dd);
打印出：1 (5) [“q”, “w”, “r”, “t”, “e”]

三、github链接：https://github.com/Mrliu1/newife/tree/master/blogTwo

欢迎交流和斧正。更欢迎点赞额！

埃尔斯（aiers）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js深入理解系列（二）--- js数组(数组的相应方法es6,es5)

一、源码//源码 — start&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;title&amp;gt;IFE JavaScript Task 01&amp;lt;/title&
复制链接

扫一扫