devbox
黑客灵魂
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

es6 函数的新增方法和补充for of循环_for(var key in arr)

作者：黑客灵魂 | 2024-07-18 06:24:06

赞

踩

for(var key in arr)

for of循环

es5专门用来遍历对象和数组的 for in 循环

遍历对象

// 遍历对象
		var obj = {
			name:'huasheng',
			age:28,
		}
	    for(var key in obj){//用for in循环遍历obj这个对象
	    	console.log(key,obj[key]);
	    }

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  1. key是obj的属性名,这些属性名原本是字符串类型的
  2. key[obj]获取的是key的属性值

在这里插入图片描述
遍历数组

//遍历数组
	 var arr = [1,2,3,4];
	 for(var key in arr){
	 	console.log(key,arr[key]);//for in循环也可以遍历数组
	 }

  • 1
  • 2
  • 3
  • 4
  • 5
  1. key原数组对应的索引位置是字符串类型的
  2. arr[key]获取的是数组的值

在这里插入图片描述
es6中专门用来遍历数组的 for of 循环

通过for of 获取数组成员

 let arr = [3,4,5,6]; 
	 for(var value of arr){
	 	console.log(value,typeof value);
	 }

  • 1
  • 2
  • 3
  • 4
  1. value是数组成员项(值)，对应数组成员的值
  2. arr你用来存储的变量，他变量里面对应的值是数组里面的成员(值)，数组成员是什么就是什么
  3. arr是你需要遍历到的数组(存储库)

在这里插入图片描述
通过for of循环 获取数组成员的索引位置

 let arr = [3,4,5,6]; 
	 for(var index of arr.keys()){
	 	console.log(index);//遍历每一圈都用index值存储着对应的索引位置
	 }

  • 1
  • 2
  • 3
  • 4

console.log(arr.keys());//他是一个迭代器是一个对象(keys函数执行结果是一个迭代器)

如果你用for of循环遍历数组中的索引位置,就是通过arr.keys你遍历这个数组的迭代器

在这里插入图片描述
通过for of循环 获取数组成员的索引位置和对应的值

 let arr = [3,'包',5,6];
	 for(var detail of arr.entries()){
	 	//现在通过for of循环来遍历 arr.entries这个函数执行生成的迭代器
	 	console.log(detail);//这样的遍历方式就可以得到索引项加上数组成员
	 }

  • 1
  • 2
  • 3
  • 4
  • 5

console.log(arr.entries());他是一个迭代器是一个对象(entries函数执行结果是一个迭代器)

在这里插入图片描述
通过for of循环如何同时得到对应的索引和值

let arr = [3,'包',5,6];
	 for(var [index,value] of arr.entries()){
	 	console.log(index,value);
	 }

  • 1
  • 2
  • 3
  • 4

通过for of循环来遍历到arr.entries这个迭代器的时候他会把数据存放在一个数组中,这种写法本质上是一个结构赋值，for of循环遍历到迭代器的时候把得到数据放在一个变量中,通过结构赋值来拆解变量中的数组

在这里插入图片描述
在这里插入图片描述

函数的扩展

函数的参数

在es5中传递实参和形参的时候是一一对应的：如下

       function auto(a){//形参
        	console.log(a)
        }
        auto(2);//实参

  • 1
  • 2
  • 3
  • 4

在es6传递参数的时候可以通过结构赋值的方式传递参数

es6通过结构赋值的方来给数组赋值(来拆解数组)

       function auto([a,b,c]){//形参
        	console.log(a,b,c);
        }
        auto([1,2,3])//实参

  • 1
  • 2
  • 3
  • 4

这个本质上就是结构赋值(拆解数组的结构 a=1 b=2 c=3) 在es6中可以用结构赋值的方式来传递参数

用结构赋值传递参数的好处：就是来拆解数组和对象的时候显得很方便

es5通过传递参数方式来给拆解数组

       function auto(arr){
        	var a = arr[0];
        	var b = arr[1];
        	var c = arr[2];
        	console.log(a,b,c);
        }
        auto([1,2,3]);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7

在es5中通过取下标的方式来拆解数组是很麻烦的,增加了代码的重复量和变量声明的次数(弊端)

那么如何拆解对象来给函数传参数

       function auto({name,age}){
        	console.log(name,age)
        }
        auto({name:'huasheng',age:28})

  • 1
  • 2
  • 3
  • 4

实参和形参都以匹配模式的形式来匹配这个对象的形参name和age查询实参name和age对象匹配成功声明name和age属性值是huasheng和28

那么如何拆解字符串来给函数传参数

function auto([a,b,...c]){
    //字符串的结构赋值本质和数组的结构赋值是一致的
    //...c声明了c要把后面的所有数据全部收集起来并以数组的形式展示
    console.log(a,b,c)// a=h b=u  c=["a", "s", "h", "e", "n", "g"]
 }
 auto('huasheng')

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

在函数传递参数的时候,传递的是一个字符串实参是用这种匹配模式来写的(结构赋值)

如何给实参设置默认值(匹配模式下)

       function auto([a,b,c,d=3]){//形参写匹配模式的格式
        	console.log(a,b,c,d);//a=1 b=2 c=3 d=2
        }
        auto([1,2,3]);//实参写匹配模式的格式

  • 1
  • 2
  • 3
  • 4

当d接收的是undefined的时候默认值就会生效,在结构赋值的时候可以给的不到的值数字一个默认值(前提接收的是undefined默认值才会启动)

如何不在匹配模式下设置默认值(此方式不是解构赋值)

 function auto(x,y=2){//设置形参的默认值(前提是形参是undefined的时候)
       console.log(x,y)
  }
 auto(2)

  • 1
  • 2
  • 3
  • 4

当实参没有传递的时候,形参接收的是undefined(默认值)那么形参的默认值就会生效

总结es6函数传参数新增功能

es6新增的函数特点

  • 函数在传参的时候 可以使用解构赋值的方式来传递数据(拆解实参的数据给形参)
  • 可以给接受不到数据的形参设置默认值

函数传参练习

        // 第一题
        // function log(x,y = 'world'){
           // 	console.log(x,y)
        	
        //       log()打印 'Hello' 'world'
        //       log()打印 'Hello' 'China'
        //       log()打印 'Hello' ''
        	
        // }
        // log('Hello');
        // log('Hello','China');
        // log('Hello','');

        // 第二题
        // function foo(x,y = 5){
        	// console.log(x,y)
        	/*
              foo()打印 undefined 5
              foo()打印 1 5
              foo()打印 1 2 
              foo()打印 报错
        	*/
        // }
        // foo({});//{}这是一种对象匹配模式(可以拆解空对象)
        // foo({x:1});
        // foo({x:1,y:2});
        // foo();//在不传参数的时候要匹配一种模式的话,那么他会报错(也不可以用来匹配null)

        // 第三题
        // function f(x = 1,y){
        // 	return [x,y];
        	/*
              f()打印 1 undefined
              f()打印 2 undefined
              f()打印 报错(SyntaxError表示语法错误)
              f()打印 1 1        	
            */
        // }
        // f();
        // f(2);
        // f(, 1);
        // f(undefined,1);

        // 第四题
        // function f(x,y = 5,z){
        	// return [x,y,z];
        	/*
        	 f()打印 undefined 5 undefined
        	 f()打印 1 5 undefined
        	 f()打印 1 5 2
        	*/
        // }
        // f();//f()是函数加上()执行,现在的形参没有匹配模式自然就不是结构赋值
        // f(1);
        // f(1,undefined,2);

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55

函数的作用域

当给函数的形参设置默认值的时候()已经生效了，则就会生成一个独立的块级作用域(()则是块级作用域)

function auto (x,y=2){//接收外界传递实参的形参(函数作用域)
			//当形参y接收不到数据的时候值是undefined
			//在给形参y设置默认值的时候默认值他已经生效了
	console.log(x,y)
}
auto(2)//外界传递的实参

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

验证：形参的默认值生效的时候就会生成一个块级作用域

验证一

        var x = 1;
		function f(x,y = x){//当前y的值是undefined默认值启动
		//一旦默认值启动就会生成作用域(块级作用域)
		//当前y=x自己身上没有x他就会往自身的作用域去找x变量
		//当前x已经被赋值了结果y找到这个赋值的变量那么就是y=x(2)
		console.log('我是'+y)//自己身作用域没有y这个变量就会去父级作用域里面去()
		//生成的块级作用域里面寻找变量y,y=2打印2
		}
		f(2)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

当形参设置的默认值一旦生效,就形成块就作用域,{}生成函数作用域的父级是()生成的块级作用域({}父级作用域是())

验证二

        let x = 1;
		function f(y = x){//当前形参y的值是undefined
		//一旦形参的值没有接收任何数据(undefined)的话那就会启动默认值并且生成自己的块级作用域
		//x会去父级作用域里面去找父级作用域是全局作用域GO
		//找到了x并且赋值,在打印y当前x已经有了值了就会作为默认值给y结果打印出来是1
			let x = 2;
			console.log(y);//1
		}
		f();
		//当形参的默认值生效就会生成块级作用域

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

验证三

var x = 1;
function foo(x = x){
	console.log(x);//报错 ReferenceError: x is not defined
}
foo();
//现在形参x没有接收到任何的实参值是undefined,
//一旦实参的值是undefined的话默认值启动,自动的生成了一个块级作用域,
//当前是x启动了默认值结果一看默认值也是x(默认值启动的时候形参变量都是用let声明的),
//在同一个作用域中let不可以同时声明两个变量现在就相当于变量x的默认值有是变量x,
//这就造成了变量x的占时性死区(占时性死区包含代码前面的区域和一遍的值),照成了占时先死区那么就会报错

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

es5暗示全局变量的补充

function fn1(){
	  function fn2(){
			x = 2;
	 }
	fn2();
 }
fn1();
console.log(x)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

当一个变量没有定义直接赋值的话,那么这个变量叫做暗示全局变量(全局中有x变量)

其实当变量没有声明就赋值的话这个变量并不是全局变量,而是父级变量

因为fn1中根本就没有这个变量他会默认的把你添加到全局当中的

那么当fn1函数中有x呢？？？

function fn1(){
	   var x;
	   function fn2(){
			x = 2;
	  }
	 fn2();
	 console.log(x)
}//那么x=2就是往父函数中赋值了一个2
fn1()
// console.log(x)

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

当一个函数没有声明直接赋值的话,那么我会去父级作用域去找那么父级作用域中有用x声明的变量那么这个x=2就是父级里面的x=2了,所以说全局中就没有x这个变量了,就是给父级作用域中的x赋了一个值

当一个变量没有声明就赋值这是这叫做暗示父级变量,那么在父级中都没有声明过呢那我就会从父级的父级去找一直找的全局,如果全局中都没有声明变量那么我就会给你挂在全局当中

es5 暗示全局变量的补充（暗示父级）

  • 当一个变量没有声明就赋值 就会从父函数中查找该变量
  • 如果有该变量 则这个变量就是父级函数的 --> 暗示父级变量
  • 如果没有找着了那么就会去父级的父级去找,要是还没有的话就默认挂在全局当中

练习1

/*
		GO{
			x:undefined --->x:1
			foo:function(){}
		}
		*/
		var x = 1;
		function foo(x , y = function(){ x = 2;}){
			/*
			 {
			 	x:undefined -->x:2
			 	y:function(){}
			 	AO{//暗示父级变量去找父级中有没有相对应的变量
			 		x:2
			 	}
			 }
			*/
			var x = 3;
			y();
			console.log(x);//打印3
			/*
			  AO{
			  	x:undefined -->x:3
			  }
			*/
		}
		foo();
		console.log(x);//打印1
		/*
		  全局变量GO中有一个变量x值是1,还有一个函数当函数执行函数内部没有传递实参,
		  结果形参的值是undefined默认值启动x=undefined y=function(){}是一个死函数,
		  在foo函数AO中声明了一个变量x值是3挂在AO上,
		  y()就想当于形参y的匿名函数执行里面有一个x=2表示暗示父级变量,
		  这个变量去父级去找有没有对应的变量(()的块级作用域),
		  有对应的变量x=2 y=undefined,在AO中首先找到了x=3所以就打印3,在全局中找到了1就打印1
		*/

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36

练习二

/*
		GO{
	      x:1 --> x:undefined
	      foo:function(){}
		}
		*/
		var x = 1;
		function foo(x , y = function() { x = 2}){
			/*
			 {
			 	x:undefined ---> x:3 -->x:2
			 	y:function(){ x = 2 }

			 	AO{

			 	}
			 }
			*/
			x = 3;
			y();
			console.log(x);//打印2
		}
		foo();
		console.log(x)//打印1
		/*
		 在全局中声明了一个变量x值是1,然后有一个函数这个函数加上()执行被启动了
		 生成AO对象x:undefined y:function() {x = 2} x=3表示暗示父级自己没有就会去父级中找
		 x:undefined --> x=3,然后这个匿名函数被启动了匿,名函数体里面有
		 x=2表示暗示父级自己没有就会去父级中找
		 当前这个父级是()的块级作用域 x = 3 --> x = 2
		*/

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31

函数的 length 属性

函数作用对象他是有length属性的 如下：

 function auto(a,b,c){};
 console.dir(auto)

  • 1
  • 2

函数的length属性是用来记录形参的个数

function auto(a,b,c=2){};
auto(1,2,3)
console.dir(auto)

  • 1
  • 2
  • 3

函数的length属性本来是用来存储形参的非默认值(不会记录带有默认值的形参),实参一一对应也不会记录带有默认值的形参

函数的length的属性不会记录带有默认值的形参(形参只要带有默认值这种写法就不会记录你,不管你有没有生效)

函数的length属性 存储的是形参的个数（设置默认值的形参会被剔除掉）

指定了默认值以后，函数的length属性，将返回没有指定默认值的参数个数。也就是说，指定了默认值后，length属性将失真。

rest 参数

function auto(){
	console.log(arguments);
	//arguments是函数内部的关键词他存储了所有的实参集合他返回结果是一个类数组
   }
   auto(1,2,3);

  • 1
  • 2
  • 3
  • 4
  • 5

那如何让123存放在数组当中呢？？

 function auto(...args){//通过...把实参数据收集起来放在一个变量(真数组)当中
	console.log(args);
	//通过...把实参数据收集到args这个变量中并且放置在一个数组当中他返回的是一个新的数组
}
 auto(1,2,3);

  • 1
  • 2
  • 3
  • 4
  • 5

...args

  • 可以利用...收集数据的作用
  • 把实参收集到args中

注意，rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/黑客灵魂/article/detail/843997
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号