• for in与for of的区别,以及forEach,map,some,every,filter的区别


    一、for in与for of的区别

    1 Array.prototype.method=function(){
    2   console.log(this.length);
    3 }
    4 var myArray=[1,2,4,5,6,7]
    5 myArray.name="数组"
    6 for (var index in myArray) {
    7   console.log(myArray[index]);
    8 }

    使用for in 也可以遍历数组,但是会存在以下问题:

    1.index索引为字符串型数字,不能直接进行几何运算

    2.遍历顺序有可能不是按照实际数组的内部顺序

    3.使用for in会遍历数组所有的可枚举属性,包括原型。例如上栗的原型方法method和name属性

    所以for in更适合遍历对象,不要使用for in遍历数组。

    那么除了使用for循环,如何更简单的正确的遍历数组达到我们的期望呢(即不遍历method和name),ES6中的for of更胜一筹.

    1 Array.prototype.method=function(){
    2   console.log(this.length);
    3 }
    4 var myArray=[1,2,4,5,6,7]
    5 myArray.name="数组";
    6 for (var value of myArray) {
    7   console.log(value);
    8 }

    记住,for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

    for of遍历的只是数组内的元素,而不包括数组的原型属性method和索引name

    遍历对象 通常用for in来遍历对象的键名

     1 Object.prototype.method=function(){
     2   console.log(this);
     3 }
     4 var myObject={
     5   a:1,
     6   b:2,
     7   c:3
     8 }
     9 for (var key in myObject) {
    10   console.log(key);
    11 }

    for in 可以遍历到myObject的原型方法method,如果不想遍历原型方法和属性的话,可以在循环内部判断一下,hasOwnPropery方法可以判断某属性是否是该对象的实例属性

    1 for (var key in myObject) {
    2   if(myObject.hasOwnProperty(key)){
    3     console.log(key);
    4   }
    5 }

     同样可以通过ES5的Object.keys(myObject)获取对象的实例属性组成的数组,不包括原型方法和属性。

    1 Object.prototype.method=function(){
    2   console.log(this);
    3 }
    4 var myObject={
    5   a:1,
    6   b:2,
    7   c:3
    8 }
    9 Object.keys(myObject).forEach(function(key,index){<br>  console.log(key,myObject[key])<br>})

    二、forEach,map,some,every,filter的区别

    forEach() 方法对数组的每一个元素执行一次提供的函数。

    map() 方法创建一个新数组,其结果是该数组都执行一次函数,原函数保持不变。

    filter() 方法使指定函数测试数组的每一个元素,并放回一个通过元素的新数组。

    some() 方法测试该数组有元素通过了指定函数的测试,如果有返回true,否则,返回false。

    every() 方法测试该数组是否全部通过指定函数测试,全部通过返回true,否则,返回false。

    forEach 遍历数组

    1 var arr = ["a", "b", "c"];
    2  
    3 arr.forEach(function(element,index) {
    4     console.log(element,index);      
    5 });

    map 返回新数组,为当前元素加字符串m

     1 var arr = ["a", "b", "c"];
     2  
     3 arr.map(function(element,index) {
     4     return element += "m";
     5 });
     6  
     7 // 将给定数组的元素转成整数
     8  
     9 ["1", "2", "3"].map(parseInt);         // [1, NaN, NaN]
    10 // 等价于
    11 ["1", "2", "3"].map(function(value,index,array){
    12     return parseInt(value,index);
    13 });
    14 parseInt(3,1);                         // NaN   parseInt(string, radix) 函数将给定的字符串以指定基数解析成为整数。

    filter 返回大于10的元素

    1 // 12, 130, 44
    2 var arr = [12, 5, 8, 130, 44];
    3 arr.filter(function(value){
    4     return value>10
    5 });
    6 // 等价于
    7 arr.filter((value)=>value>10);

    some 判断当前数组有元素大于10的元素

    1 var arr = [12, 5, 8, 130, 44];
    2 arr.some(function(value){                  // true
    3     return value>10
    4 });

    every 判断当前数组所有元素是否都大于10

    1 var arr = [12, 5, 8, 130, 44];
    2 arr.every(function(value){                 // false
    3     return value>10
    4 });
  • 相关阅读:
    【WEB前端开发最佳实践系列】高可读的HTML
    【Web前端开发最佳实践系列】标准的HTML代码
    Web服务器配置Gzip压缩提升网站性能
    【Web前端开发最佳实践系列】前端代码推荐和建议
    【前端系列】移动前端开发之viewport的深入理解
    【Spring Boot && Spring Cloud系列】那些Spring Boot中踩过的坑
    【Spring Boot && Spring Cloud系列】Spring Boot的启动器Starter
    【Spring Boot&&Spring Cloud系列】提高数据库访问性能
    【Spring Boot&& Spring Cloud系列】单点登录SSO之OAuth2官方开发文档翻译
    【Spring Boot&& Spring Cloud系列】单点登录SSO概述
  • 原文地址:https://www.cnblogs.com/dongdongseven/p/7722548.html
Copyright © 2020-2023  润新知