vue学习之ES6_02（对象拷贝、对象合并、map和reduce）

左手的ㄟ右手 2022-10-24 01:45 238阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    	<head>
    		<meta charset="UTF-8">
    		<meta name="viewport" content="width=device-width, initial-scale=1.0">
    		<title>Study ES6</title>
    	</head>
    	<body>
    		<div>
    			<span>Hello ES6</span>
    		</div>
    	</body>
    	<script>
    	//对象扩展运算符
    	let  p1={name:'zs',age:26};
    	//拷贝对象
    	let someone={...p1};
    	writeLine(JSON.stringify(p1));
    	writeLine(JSON.stringify(p1));
    	
    	//合并对象
    	let name1={name:'Alice'};
    	let  age1={age:24};	
    	let p2={...name1,...age1};
    	writeLine(JSON.stringify(p2));
    	
    	//map():接受一个函数，将原数组中的所有元素用这个函数处理后放入新数组中返回
    	let arr=[4,20,12,13]
        //reduce():为数组中的每一元素一次执行回调函数，不包含数组中未赋值或被删除的元素	
    	arr=arr.map(item=>item+1);
    	writeLine(arr);
    	 /* reduce函数 */
    	        /*
    	        为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
    	        arr.reduce(callback,[initialValue])
    	        callback函数可用四个参数:
    	          1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
    	          2、currentValue （数组中当前被处理的元素）
    	          3、index （当前元素在数组中的索引）
    	          4、array （调用 reduce 的数组）
    	         */
        let  result=arr.reduce((a,b,index,d)=>{
    		writeLine('上一次处理后'+a);
    		writeLine('当前被处理'+b);
    		writeLine('索引'+index);
    		writeLine('调用的数组'+d);
    		return a+b;
    	});
    	writeLine(result);
    	
    	//换行打印
    	function writeLine(s) {
    		document.write(s + "<br>")
    	}
    	</script>
    </html>