ES6 화살표 함수, 배열 추가 방법, ES5의 배열 고급 방법 등 기초 지식

36221 단어 프런트엔드es6/es7

ES6 화살표 함수, 배열 추가 방법 등 기초 지식


화살표 함수 1.구성: 매개변수=>문2.매개변수는 (매개변수 1, 매개변수 2)=>문이 아닙니다.문장이 한 가지가 아닙니다: 매개 변수 = > {문장 1; 문장 2;return 반환값} 4.반환된 객체 형식: 매개 변수 => ({객체}) 예:
<script>
        var times=n => alert(n*2)
        times(6)
        
      //forEach 
	    var arr=[" "," "," "," "];
		
	    arr.forEach(item=>console.log(item))
	        
script>

만약 매개 변수가 아니라면, 매개 변수는 () 패키지로 감싸십시오
<script>
       var arr=[1,2,3,4]
	   var ret=arr.reduce((a,b)=>a+b)
script>

화살표 함수this의 지향 작용역 상층
<script>
       var obj={
      
				age:18,
				say:function(){
      
					console.log(" "+this.age)
				},
				grow:function(){
      
					window.setInterval(()=>{
      
						this.age++;
						this.say();
					},3000)
					)
				}
			}
script>

ES5의 배열 상위 단계 방법 1.forEach 스트리밍
<script>
        var arr=[" "," "," "," "];
		arr.forEach(function(item,index,self){
      
				console.log(item,index,self);
			})
script>

2. 맵 매핑
<script>
        var arr1=[1,3,5,7];
		var arr2=arr1.map(function(item,index,self){
      
				console.log(item,index,self);
				return item*2
				});
		console.log(arr2);
script>

3. Filter 필터 리셋 함수true 현재 요소를 되돌려준다면false 현재 요소를 되돌려준다면 필터합니다
<script>
        var arr3=[5,7,9,23,45,67];
		// >20
		var arr4=arr3.filter(function(item){
      
				return item>20;
				if(item>20){
      return ture}
				else{
      return false}
				})
				
		console.log(arr4);
script>

4.reduce 누적
<script>
       var arr5=[2,3,4];
	   var rdd=arr5.reduce(function(a,b){
      return a+b})
	   console.log(rdd);
script>

5.every 하나하나
<script>
       var arr6=[2,4,6,7,100,20,50];
	   //   10
	   var ret =arr6.every(function (item){
      return item<120})
	  // 10  true, 10  false
	   alert(ret);
script>

6. 썸 하나
<script>
       var arr6=[2,4,6,7,100,20,50];
	   var ret = arr6.some(function(item){
      
			return item>20
			})
	   console.log(ret);
script>

7.sort 정렬
<script>
         arr.sort(function(a,b){
      return a-b})
		 console.log(arr)
		 
		 var arr3=[{
      age:15},{
      age:1},{
      age:8}]
		 arr.sort(function(a,b){
      
				return b.age-a.age
			})
		 console.log(arr)
script>

ES6 객체 특징 1.대상의 약자 방식
<script>
         var name="mm";
		 var age=18;
		 var user={
      
				name,
				age,
				say(){
      
					alert(` ${
        this.name}, ${
        this.age} `)
				}
			}
		console.log(user)
script>

2. 객체의 동적 속성
<script>
         var key = window.prompt(" ","like");
		 var value = window.prompt(" "," ");
		 var obj = {
      [key+"web"]:value};
		 console.log(obj); 
script>

3. 대상의 계승
<script>
        var man={
      
				 leg:2,
				 walk(){
      console.log(` `)}
			 }
			 
		var teacher = {
      
				 name:"mumu",
				 age:18,
				 __proto__:man
			 }
script>

그룹 추가 방법 1.채우기
<script>
         var arr=[2,3,4,5]
		 arr.fill('love')
		 console.log(arr)
script>

2. 배열에서 원소 교체copywithin(교체 시작 위치, 복사 시작 위치, 복사 끝 위치 복사
<script>
          var arr=[0,1,2,3,4,5,6,7]
		  arr.copyWithin(0,4,8)
		  console.log(arr)
script>

3. includes를 찾고 조건에 따라find 요소를 찾습니다findindex는 아래 첨자를 찾습니다.
<script>
          //  includes, find findindex ,
		    var arr=[" "," "," "," ",100];
			alert(arr.includes(" "))
			// arr 100 
			var arr=[2,7,100,50,255]
			var ret=arr.findIndex(item=>item>100)
			alert(ret)
script>

함수 1.함수 기본 매개 변수
<script>
          function add(a,b=10){
      
			 	alert(a+b)
			 }
		  add(3,5)
script>

2. 함수 부정확 매개 변수
<script>
           function add(...args){
      
		   var ret=args.reduce((a,b)=>a+b)
		   alert(ret)
			}
		   add(2,81,7,8)
script>

3. 함수 확장 실참
<script>
           function metting(a,b,c,d){
      
				console.log(" :",a,b,c,d)
			}
			var arr=[" "," "," "," "]
			metting(...arr)
script>

좋은 웹페이지 즐겨찾기