JavaScript進階學習之初識類、函數進階、如何改變this指向

本篇文章給大家帶來了關於的相關知識，其中主要介紹了類、函數進階以及如何改變this指向的相關內容，希望對大家有幫助。

前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API偵錯工具：

【相關推薦：、】

1.class類

1.1class本質還是function

1.2類的所有方法都定義在類的prototype屬性上

1.3類建立的範例，裡面也有_ proto_ 指向類的prototype原型物件

1.4語法糖

ES6的類它的絕大部分功能, ES5都可以做到,而class寫法只是讓物件原型的寫法更加清晰、更像物件導向程式設計的語法而已，語法糖就是一種便捷寫法. 簡單理解, 有兩種方法可以實現同樣的功能，但是一種寫法更加清晰、方便那麼這個方法就是語法糖，對於es5來說es6就是語法糖

這倆看起來，那個比較簡單呢？對就是第二個（別槓），這就是語法糖

2.陣列方法

2.1forEach

語法：陣列.forEach（回撥函數（value：陣列當前項值，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（校驗元素）

用來查詢陣列中是否有滿足條件的元素（返回值是一個Boolean的值，有該查詢的元素就返回true，沒有的話就返回false，當查詢到第一個滿足的元素時，則會停止查詢）

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

依次判斷，先從第一個元素開始，檢視是否滿足條件如果不滿足條件則接著查詢，如果滿足條件則返回true，如果沒有任何一個元素滿足條件則返回false

2.4map資料渲染

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指回去除兩側的空格而在字元春中間的空格不會被去除掉

4.物件方法

Object.keys() 用於獲取物件自身所有的屬性 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()第三個引數descriptor說明:以物件形式{}書寫

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進階學習之初識類、函數進階、如何改變this指向的詳細內容，更多請關注TW511.COM其它相關文章！