JavaScript advanced learning: first understanding of classes, advanced functions, how to change this pointer

This article brings you relevant knowledge about JavaScript, which mainly introduces the related content of classes, function advancement and how to change this point. I hope it will be helpful to everyone.

[Related recommendations: JavaScript video tutorial, web front-end】

1.class class

1.1class is essentially function

# # All methods of the 1.2 class are defined on the prototype attribute of the class

1.3 The instance created by the class also contains_ proto_ points to the prototype prototype object of the class

##1.4 Syntactic sugar

Most of the functions of ES6 classes can be achieved by ES5, and the class writing method only makes the writing of object prototypes clearer and more like the syntax of object-oriented programming. Syntax sugar is a convenient writing method. Simple to understand, There are two ways to achieve the same function, but one way of writing is clearer and more convenient. Then this method is syntax sugar. For es5, es6 is syntax sugar.

It seems, which one is easier? Yes, it’s the second one (don’t use the bar), this is syntax sugar

2. Array method

2.1forEach Syntax: array.forEach (callback function (value: current item value of array, index: current index of array, array: array itself))

 <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 element) is mainly used to filter arrays (what you get after iterative traversal is an array, so you need to accept it)

  // 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 (check element) is used to find whether there are elements in the array that meet the conditions (the return value is a Boolean value, if there is the The element being searched will return true, if not, it will return false. When the first satisfying element is found, the search will stop)

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

Judge in turn, starting from the first element to see if it is satisfied. If the condition does not meet the condition, then search will continue. If the condition is met, it will return true. If no element meets the condition, it will return false

2.4map data rendering

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. String method

trim() method

(trim does not affect the string itself, and returns a new string )

trim refers to removing the spaces on both sides and the spaces in the middle of the characters will not be removed

4.Object method

Object.keys()

Used to obtain all the properties of the object itself object . keys (obj), the effect is similar to for..in, and returns an array composed of property names

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

4.1Object.defineProperty()

Define new properties or modify original propertiesObject.defineProperty()The third Parameter descriptor description: written in object form {}

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前端】

The above is the detailed content of JavaScript advanced learning: first understanding of classes, advanced functions, how to change this pointer. For more information, please follow other related articles on the PHP Chinese website!