JavaScript 고급 학습: 클래스에 대한 첫 번째 이해, 고급 기능, 이 포인터를 변경하는 방법

이 글은 주로 클래스를 소개하는 JavaScript에 대한 관련 지식과 기능 발전, 그리고 이 점을 바꾸는 방법을 모두에게 도움이 되기를 바랍니다.

【관련 권장 사항: JavaScript 비디오 튜토리얼, web front-end】

1.class class

1.1class는 본질적으로 기능입니다

카테고리 1.2 모든 메소드는 클래스의 프로토타입 속성에 정의됩니다

1.3 클래스에 의해 생성된 인스턴스에는 클래스의 프로토타입 프로토타입 객체를 가리키는 _ proto_도 있습니다

1.4 Syntactic sugar

ES6 클래스의 대부분의 기능은 ES5에서 구현할 수 있습니다. 클래스 작성 방법은 객체 프로토타입 작성을 더 명확하게 하고 객체 지향 프로그래밍의 구문과 더 유사하게 만듭니다. 이해하기 간단합니다. 동일한 기능을 수행하는 방법은 두 가지가 있지만 한 가지 방법이 더 명확하고 편리합니다. es5의 경우 es6은 구문 설탕입니다. 어느 것이 더 간단합니까? 예, 두 번째입니다(사용하지 마세요). 이것은 구문 설탕입니다

2. Array method

2.1 forEach

구문: array.forEach(콜백 함수(값: 현재 항목 값) of the array, index: 배열의 현재 인덱스, array: 배열 자체))

 <script>
        var arr = [5, 6, 7];
        var sum = 0;
        arr.forEach(function (value, index, array) {
            console.log(value);
            sum += value;
        })
        console.log(sum);
    </script>

2.1filter(필터 요소)

은 주로 배열을 필터링하는 데 사용됩니다. 반복 순회는 배열이므로 허용해야 함)

  // filter
        var arr1 = [12, 34, 5, 66, 78, 0];
        // 由于filter返回的是一个新数组所以需要接收一下newArray
        var newArray = arr1.filter(function (value, index) {
            // 找到小于10 的数
            return value < 10;
        })
        console.log(newArray);

2.3some

(요소 확인)

은 배열에 조건을 충족하는 요소가 있는지 찾는 데 사용됩니다(반환 값은 부울입니다. value, 찾을 요소가 있으면 true를 반환하고 그렇지 않으면 false를 반환합니다. 만족스러운 첫 번째 요소가 발견되면 검색이 중지됩니다.)

 var arr = [2, 3, 4, 5, 6];
        var newArr= arr.some(function (value, index) {
            return value % 3 === 0;
        })
        console.log(newArr);

차례로 첫 번째 요소부터 시작하여 판단합니다. 조건이 충족되지 않으면 계속 검색합니다. 조건을 충족하는 요소가 없으면 false를 반환합니다

2.4지도 데이터 렌더링

var fileBlog= [
        {
            title: '【JavaScript——初始JS】',
            url: 'https://blog.csdn.net/zhaochen1127/article/details/125956545?spm=1001.2014.3001.5501',
            intr: '本文是一篇对js萌新极其友好的一篇文章....'
    
        }, {
            title: '【JavaScript——初始JS】',
            url: 'https://blog.csdn.net/zhaochen1127/article/details/125956545?spm=1001.2014.3001.5501',
            intr: '本文是一篇对js萌新极其友好的一篇文章....'
        }, {
            title: '【JavaScript——初始JS】',
            url: 'https://blog.csdn.net/zhaochen1127/article/details/125956545?spm=1001.2014.3001.5501',
            intr: '本文是一篇对js萌新极其友好的一篇文章....'
        }
    ]
    var fblog = fileBlog.map(function (item) {
        return `
            <li>
                <h5>${item.title}</h5>
                <p>${item.intr}</p>
                <a href="${item.url}" target="_blank">阅读博客</a>
            </li>
            `
    })
    var ul = document.querySelector('.blogs').querySelector('.bcon').querySelector('.blist');
    console.log( fblog.join(''));
     ul.innerHTML = fblog.join('');

3. 문자열 메서드

trim() 메서드(trim은 문자열 자체에 영향을 주지 않으며 반환은 새 문자열입니다)

trim은 양쪽 공백을 제거하는 것을 의미하며 문자 중간의 공백은 not be Removal

4. 객체 메서드

Object.keys() 사용 객체 자체의 키(obj) 속성을 모두 얻으려면 for..in과 유사하며 배열을 반환합니다. 속성 이름으로 구성

    var obj = {
        idcard:10086,
        uname:'山鱼',
        age:20,
        sex:'男'
    }
    var obj1 = Object.keys(obj);
    console.log(obj1);

4.1Object.defineProperty()

새 속성을 정의하거나 원래 속성을 수정합니다.

Object.defineProperty()의 속성 세 번째 매개변수 설명자 설명: 개체 형식으로 작성됨 {}

4.2value设置属性的值默认为undefined

var obj = {
        idcard:10086,
        uname:'山鱼',
        age:20,
        sex:'男'
    }
    // 给obj添加一个birthday属性，属性值为‘11.27’
    Object.defineProperty(obj,'birthday',{
        value:'11.27'
    }
)
    // 修改obj里面的age属性，修改后的属性值为25
    Object.defineProperty(obj,'age',{
        value:25
    }
)
console.log(obj);

4.3writable 值是否可以重写true | false默认为false

 (idcard的值并没有修改 ) 

4.4enumerable 目标属性是否可以被枚举true | false默认也为false

Object.defineProperty(obj,'location',{
        value:'JingXian',
        writable:false,
        enumerable:false
    }
)
console.log(obj);

4.5configurabletrue| false 默认为false

目标属性是否可以被删除或是否可以再次修改特性

 Object.defineProperty(obj,'location',{
        value:'JingXian',
        writable:false,
        enumerable:false,
        configurable:false
    }
)
        delete obj.location;
        	console.log(obj);
        delete obj.uname;
        	console.log(obj);

也不可以再次修改里面的特性  

【相关推荐：JavaScript视频教程、web前端】

위 내용은 JavaScript 고급 학습: 클래스에 대한 첫 번째 이해, 고급 기능, 이 포인터를 변경하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!