合纵连横:ECMAScript5——JSON 拓展总结

简单的介绍下ES5:

一:ES5

javascript最早是由网景公司推出的,极其简单,被很多开发者接受,逐渐流行起来,后来IE为了抢占市场微软,将IE浏览器内置在windows系统中,所以IE的市场占有率相当的高。IE脚本语言是Jscript(vbscript)

二:JSON拓展

判断数组:
1:判断对象是类型还是数组
object.prototype.tostring.call(obj)
2: 判断构造函数是否是array
obj.constructor=array
3:判断 是否是实例化对象
obj instanceof array
4:判断数组的静态方法
Array.issArray(obj)

2.1:parse

 	  该方法是将JSON字符解析为JS对象
 	  使用方式:
 	  		  JSON.parse(str,fn)
 	  		  str:要处理的字符串
 	  		  fn:要处理的函数
 	  		  		返回值就是本次处理的结果,有二个参数:
 	  		  		第一个参数:属性名
 	  		  		第二个参数:属性值
 	  	从外部想内部遍历
举例:
<script type="text/javascript">
	// 定义json字符串
	var str = '{"a": 1, "b": "2", "c": {"d": 3}}';
	// 将str转为js对象
	 var newstr=JSON.parse(str,function(k,v){
        //  查看每个参数
         console.log(arguments);
        //  进行判断
        if(typeof v==="string"){
            // 隐式转换为number
            return +v;
        }
        return v;
     });
	// 我们希望将字符串转为数字
	console.log(newstr);
	</script>
2.1 : stringify
	   该方法用于将JS对象转换为JSON字符串
	   使用方式:   JSON.stringify(obj,fn)
	   内部向外部遍历
	   返回值:本次遍历的结果

举例
<script type="text/javascript">
	// 定义对象
	var obj = {
		a: 1,
		b: "2",
		c: {
			d: 3
		}
	}
        // 将obj转为json字符串
    var newstr=JSON.stringify(obj,function(k,v){
        //    console.log(arguments);
        if(typeof v==="string"){
            return +v;
        }
        return v;
    })
	console.log(newstr);
	</script>

获取成员的索引值
ES5为数组拓展了二个方法:indexof lastindexof,分别用于获取数组中的成员的索引值
参数:要查找的成员
返回值:成员的索引值,如果没有返回-1

举例:

<script type="text/javascript">
	// 定义一个数组
	var arr = ["老大",0 ,"老二", "老三", 0, "老王"];
	/**
	 * indexOf 获取数组中成员的索引值
	 * @arr 查找的数组
	 * @item 要查找的成员
	 * return 索引值
	 */
    //  indexOf
     function indexOf(arr,item){
         for(var i=0;i<arr.length;i++){
             if(arr[i]===item){
                 return i;
             }
         }
         return -1;
     }

    //  test
    var test= indexOf(arr,"老王");
    console.log(test);

//  lastindexof
    function lastIndexof(arr,item){
        for(var i=0;i<arr.length;i++){
             if(arr[i]===item){
                 return i;
             }
         }
         return -1;
    }
    var test=arr.lastIndexOf(0);
    console.log(test);

	// 兼容IE8
	// 实现lastIndexOf方法
	if (!Array.prototype.lastIndexOf) {
		// 拓展方法
		Array.prototype.lastIndexOf = function(item) {
			// 遍历数组,就是遍历this
			for (var i = this.length - 1; i >= 0; i--) {
				// i 表示 索引值 arr[i] 表示成员值
				// 判断arr[i]与item是否是全等
				if (this[i] === item) {
					// 如果找到了 返回i
					return i;
				}
			}
			// 遍历完没有找到,返回-1
			return -1;
		}
	}
    var test=arr.lastIndexOf(0);
    console.log(test);
	</script>

2.3: forEach
该方法用于代替for循环, 是数组的迭代器方法,并没有将for循环移除,
只是将循环封装在数组迭代器方法forEach中
foreach适用于只是进行集合或数组遍历,for则在较复杂的循环中效率更高。
foreach不能对数组或集合进行修改(添加删除操作),如果想要修改就要用for循环。

  数组: Array.forEach(fn)
  	   fn:要执行的函数,有三个参数:
  	   第一个:成员值
  	   第二个:索引值
  	   第三个:原数组
  	   作用域:window
   函数的返回值对forEach的执行结果没有影响,值为undefined!
   JQ中的each类似于foreach,第一个参数为:索引值,第二个:成员值

举例:

<script type="text/javascript">
	/// 定义一个数组
	var arr = ["老大", "老二", "老三", "老四"];
	/**
	 * forEach方法 数组迭代器方法
	 * @arr 要遍历的数组
	 * @fn 执行的函数
	 **/
        function forEach(arr,fn){
            for(var i=0;i<arr.length;i++){
                // 执行函数并传递参数
			// 函数中有三个参数: 成员值、 索引值、 原数组
			// 成员值: arr[i], 索引值: i,  原数组: arr
                fn(arr[i],i,arr);
            }
        }
    var newfor=forEach(arr,function(value,index,arr){
		console.log(this, arguments);
    })
    
	</script> 

2.4 map
该方法用于遍历数组,并映射结果,与forEach方法类似,只是它的返回值是有意义的。

参数:要执行的函数
 	函数中有三个参数:成员值,索引值,原数组,作用域:window
 	返回值是执行结果的数组成员

举例

<script type="text/javascript">
	/// 定义一个数组
	var arr = ["老大", "老二", "老三", "老四"];

    function map(arr,fn){
        var result=[];
        for(var i=0;i<arr.length;i++){
            result.push(fn(arr[i],i,arr));
        }
        return result;
    }
    var result=map(arr,function(value, index, arr){
        console.log(this,arguments);
    });
    </script>

2.5 fill
该方法用于填充数组
我们在使用new Array(),或者Array()来创建数组的时候,得到的只有长度,没有成员,所以我们不能使用数组迭代器方法,就要填充数组
参数就是要填充的成员,即使函数不会执行

举例:

<script type="text/javascript">
	// 创建数组
	var arr = new Array(5);
        
    function fill(arr,item){
        // 遍历数组
        for(var i=0;i<arr.length;i++){
            // 填充数组
            arr[i]=item
        }
        return arr;
    }
    // 填入参数
    var result=fill(arr,1);
        // 遍历每一个数组,查看
    result.forEach(function(){
        console.log(arguments);
    })
    // 得到数组
    console.log(result);
	</script>

断言方法:

	2.6 some:在数组中是否有成员满足条件
		 使用方式和forEach类似,参数就是要执行的函数,有三个参数:
		 成员值   索引值   原数组
		 返回值就是判断的依据
	some方法的返回值:
		true:至少有一个满足条件
		false:都不满足条件
		some对true敏感,一旦满足条件停止遍历

举例:

	<script type="text/javascript">
	/// 定义一个数组
	var arr = ["老大", "老二", "老三", "老四"];

    function some(arr,fn){
        for(var i=0;i<arr.length;i++){
            if(fn(arr[i],i,arr)){
                return true;
            }
        }
    return false;
    }
    var result=some(arr,function(value, index, arr){
		// console.log(this, arguments);
        return value[0]=="老";  //true
        // return value[0]=="王";  //false

    })
    console.log(result);         
	</script> 

2.7 every
类似于some,判断数组中是否都满足条件
使用方式与forEach类似
参数要执行的函数:有三个: 成员值,索引值 , 原数组
返回值就是判断的依据:
every方法的返回值:
true:全部都满足条件
false有成员不满足条件
every对false敏感,一旦遇到一个不满足条件就停止遍历
举例:

	<script type="text/javascript">
	/// 定义一个数组
	var arr = ["老大", "老二", 3,"老三", "老四"];
        
    function every(arr,fn){
        for(var i=0;i<arr.length;i++){
            if (!fn(arr[i], i, arr)) {
	 			// 停止遍历 并返回false
	 			return false;
	 		}
        }
        return true;
    }

 var result = every(arr, function(value, index, arr) {
		console.log(this, arguments);
        // 有个3不满足 为false
		return value.length == 2;
	})
	console.log(result);
	</script> 

2.8 filter
实现对数组的过滤
使用方式和forEach方法类似
参数就是要执行的函数
函数中有三个参数:成员值,索引值,原数组
返回值就是过滤的条件

举例:

             var result = [];
            for (var i = 0; i < arr.length; i++) {
              // 执行函数并判断结果
	 	// 参数有三个: 成员值 arr[i], 索引值 i, 原数组 arr
                if (fn(arr[i], i, arr)) {
                    result.push(arr[i]);
                }
            }
            return result;
        }

        var result = filter(arr, function (value, index, arr) {
            // console.log(this, arguments);
                // 判断字符串的第一位不等于字符串的第二位
            return value[1] != value[2];
        })
        console.log(result);
    </script>

reduce reduce right
这二个是累加的方法,reduce是从前往后累加,而reduce right是从后往前累加,对所有的成员逐一处理,并将结果返回
有四个参数:上一次的累积结果,当前的成员值,当前的索引值,原数组
返回值就是当次的累积的结果,将会下次遍历的时候作为第一个参数传递!
reduce 是从第二个成员开始遍历,第一个成员会在第一次遍历的时候作为第一个参数进行传递

reduce right 是从倒数第二个开始遍历,倒数第一个成员在第一次遍历的时候作为第一个参数

举例:

	 <script type="text/javascript">
	// 定义数组
	var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
	// 实现reduce
        function reduce(arr,fn){
            // 定义累加和
        var result=0;
            for(var i=0;i<arr.length;i++){
                result=fn(result,arr[i],i,arr);
            }
            return result;
        }
    var result=reduce(arr,function(pre, value, index, arr){
        return pre+value;
    })
    console.log(result);
    </script> 
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

        function reduce(arr, fn) {
            // 定义累积
            var result = arr[0];
            for (var i = 1; i < arr.length; i++) {
                result = fn(result, arr[i], i, arr);
            }
            return result;

        }
        var result = reduce(arr, function (pre, value, index, arr) {
            return pre * value;
        })
        console.log(result);

    </script>

猜你喜欢

转载自blog.csdn.net/Tom__cy/article/details/83037776