欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關(guān)于JavaScript對象類型之Array及Object

 更新時間:2023年05月15日 09:28:48   作者:夏志121  
這篇文章主要介紹了關(guān)于JavaScript對象類型之Array及Object,Array 類型是 ECMAScript 中最常用的類型了。而且,ECMAScript 中的數(shù)組與其他多數(shù)語言中的數(shù)組有著相當(dāng)大的區(qū)別,需要的朋友可以參考下

一、Array

(1)語法

// 創(chuàng)建數(shù)組
let arr = [1,2,3]; 
// 獲取數(shù)組元素
console.log(arr[0]); // 輸出 1
// 修改數(shù)組元素
array[0] = 5;		 // 數(shù)組元素變成了 [5,2,3]
// 遍歷數(shù)組元素,其中 length 是數(shù)組屬性,代表數(shù)組長度
for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

(2)API

  • push、shift、splice
let arr = [1,2,3]; 
arr.push(4);    	// 向數(shù)組尾部(右側(cè))添加元素, 結(jié)果 [1,2,3,4]
arr.shift();		// 從數(shù)組頭部(左側(cè))移除元素, 結(jié)果 [2,3,4]
arr.splice(1,1);	// 刪除【參數(shù)1】索引位置的【參數(shù)2】個元素,結(jié)果 [2,4]
  • join
let arr = ['a','b','c'];
arr.join(); 		// 默認(rèn)使用【,】作為連接符,結(jié)果 'a,b,c'
arr.join('');		// 結(jié)果 'abc'
arr.join('-');		// 結(jié)果 'a-b-c'
  • map、filter、forEach
let arr = [1,2,3,6];
function a(i) {   // 代表的新舊元素之間的變換規(guī)則
    return i * 10
}
// arr.map(a) // 具名函數(shù),結(jié)果 [10,20,30,60]
// arr.map( (i) => {return i * 10} ); // 箭頭函數(shù)
arr.map( i => i * 10 ); // 箭頭函數(shù)
  • 傳給msp的函數(shù),參數(shù)代表舊元素,返回值代表新元素

map的內(nèi)部實現(xiàn)(偽代碼)

function map(a) { // 參數(shù)是一個函數(shù)
    let narr = [];
    for(let i = 0; i < arr.length; i++) {
        let o = arr[i]; // 舊元素
        let n = a(o);   // 新元素
        narr.push(n);
    }
    return narr;
} 

filter例子:

let arr = [1,2,3,6];
arr.filter( (i)=> i % 2 == 1 ); // 結(jié)果 [1,3]
  • 傳給filter的函數(shù),參數(shù)代表舊元素,返回true表示要留下的元素

forEach例子:

let arr = [1,2,3,6];
/*for(let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}*/
arr.forEach( (i) => console.log(i) );

兩個稱呼:

高階函數(shù),map,filter,forEach

回調(diào)函數(shù),例如作為參數(shù)傳入的函數(shù)

二、Object

(1)語法

let obj = {
    屬性名: 值,
    方法名: 函數(shù),
    get 屬性名() {},
    set 屬性名(新值) {}
}

例子1:

let stu1 = {
    name: "小明",
    age: 18,
    study: function(){
        console.log(this.name + "愛學(xué)習(xí)");
    }    
}

例子2:

let name = "小黑";
let age = 20;
let study = function(){
    console.log(this.name + "愛學(xué)習(xí)");
}
let stu2 = { name, age, study }

例子3(重點):

let stu3 = {
    name: "小白",
    age: 18,
    study(){
        console.log(this.name + "愛學(xué)習(xí)");
    }    
}

注意:對象方法這么寫,僅限于對象內(nèi)部

例子4:

let stu4 = {
    _name: null, /*類似于java中私有成員變量*/
    get name() {
        console.log("進(jìn)入了get");
        return this._name;
    },
    set name(name) {
        console.log("進(jìn)入了set");
        this._name = name;
    }
}

調(diào)用get,set

stu4.name = "小白"
console.log(stu4.name)

(2)特色:屬性增刪

對比一下 Java 中的 Object

Java 的 Object 是以類作為模板來創(chuàng)建,對象不能脫離類模板的范圍,一個對象的屬性、能用的方法都是確定好的

js 的對象,不需要什么模板,它的屬性和方法可以隨時加減

let stu = {name:'張三'};
stu.age = 18;					// 添加屬性
delete stu.age;					// 刪除屬性
stu.study = function() {		// 添加方法
    console.log(this.name + "在學(xué)習(xí)");
}

添加get,set,需要借助Object.definePropery

let stu = {_name:null};
Object.defineProperty(stu, "name", {
    get(){
        return this._name;
    },
    set(name){
        this._name = name;
    }
});

參數(shù)1:目標(biāo)對象

參數(shù)2:屬性名

參數(shù)3:get,set 的定義

(3)特色:this

java中的this理解:

public class TestMethod {
    static class Student {
        private String name;
        public Student(String name) {
            this.name = name;
        }
        public void study(Student this, String subject) {
            System.out.println(this.name + "在學(xué)習(xí) " + subject);
        }
    }
    public static void main(String[] args) {
        Student stu = new Student("小明");
        // 下面的代碼,本質(zhì)上是執(zhí)行 study(stu, "java"),因此 this 就是 stu
        stu.study("java"); 
    }
}

Java 中的 this 是個隱式參數(shù)

Java 中,我們說 this 代表的就是調(diào)用方法的那個對象

js中也是隱式參數(shù),但它與函數(shù)運行時上下文相關(guān)

例如,一個“落單”的函數(shù)

function study(subject) {
    console.log(this.name + "在學(xué)習(xí) " + subject)
}

測試一下:

study("js");  // 輸出 在學(xué)習(xí) js

這是因為此時函數(shù)執(zhí)行,全局對象 window 被當(dāng)作了 this,window 對象的 name 屬性是空串

同樣的函數(shù),如果作為對象的方法

let stu = {
    name:"小白",
    study
}

這種情況下,會被當(dāng)前對象作為this

stu.study('js'); 	// 輸出 小白在學(xué)習(xí) js

還可以動態(tài)改變this

let stu = {name:"小黑"};
study.call(stu, "js");	// 輸出 小黑在學(xué)習(xí) js

這回 study 執(zhí)行時,就把 call 的第一個參數(shù) stu 作為 this

一個例外是,在箭頭函數(shù)內(nèi)出現(xiàn)的this,以外層this理解

用匿名函數(shù)

let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(function(e){
            console.log(this.name + "與" + e + "在玩耍");
        });
    }
}
stu.play()

this.name 所在的函數(shù)是【落單】的函數(shù),因此 this 代表 window

輸出結(jié)果為

與小白在玩耍
與小黑在玩耍
與小明在玩耍

用箭頭函數(shù)

let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        this.friends.forEach(e => {
            console.log(this.name + "與" + e + "在玩耍");
        })
    }    
}

this.name 所在的函數(shù)是箭頭函數(shù),因此 this 要看它外層的 play 函數(shù),play 又是屬于 stu 的方法,因此 this 代表 stu 對象

輸出結(jié)果是:

小花與小白在玩耍
小花與小黑在玩耍
小花與小明在玩耍

不用箭頭函數(shù)的做法:

let stu = {
    name: "小花",
    friends: ["小白","小黑","小明"],
    play() {
        let me = this;
        this.friends.forEach(function(e){
            console.log(me.name + "與" + e + "在玩耍");
        });
    }
}

(4)特色:原型繼承

let father = {
    f1: '父屬性',
    m1: function() {
        console.log("父方法");
    }
}
let son = Object.create(father);
console.log(son.f1);  // 打印 父屬性
son.m1();			  // 打印 父方法

father 是父對象,son 去調(diào)用 .m1 或 .f1 時,自身對象沒有,就到父對象找

son 自己可以添加自己的屬性和方法

son 里有特殊屬性 __proto__ 代表它的父對象,js 術(shù)語: son 的原型對象

不同瀏覽器對打印 son 的 __proto__ 屬性時顯示不同

Edge 打印 console.dir(son) 顯示 [[Prototype]]

Firefox 打印 console.dir(son) 顯示 <prototype>

(5)特色:基于函數(shù)的原型繼承

出于方便的原因,js又提供了一種基于函數(shù)的原型繼承

函數(shù)的職責(zé)

負(fù)責(zé)創(chuàng)建子對象,給子對象提供屬性、方法,功能上相當(dāng)于構(gòu)造方法

函數(shù)有個特殊的屬性 prototype,它就是函數(shù)創(chuàng)建的子對象的父對象

注意!名字有差異,這個屬性的作用就是為新對象提供原型

function cons(f2) {
    // 創(chuàng)建子對象(this), 給子對象提供屬性和方法
    this.f2 = f2;
    this.m2 = function () {
        console.log("子方法");
    }
}
// cons.prototype 就是父對象
cons.prototype.f1 = "父屬性";
cons.prototype.m1 = function() {
    console.log("父方法");
}

配合new關(guān)鍵字,創(chuàng)建子對象

let son = new cons("子屬性")

子對象的 __proto__ 就是函數(shù)的 prototype 屬性

(6)JSON

json的數(shù)據(jù)格式看起來與js對象非常相似,例如:

json對象:

{
    "name":"張三",
    "age":18
}

js對象:

{
    name:"張三",
    age:18
}

它們的區(qū)別是:

  • 本質(zhì)不同
    • json 對象本質(zhì)上是個字符串,它的職責(zé)是作為客戶端和服務(wù)器之間傳遞數(shù)據(jù)的一種格式,它的屬性只是樣子貨
    • js 對象是切切實實的對象,可以有屬性方法
  • 語法細(xì)節(jié)不同
    • json 中只能有 null、true|false、數(shù)字、字符串(只有雙引號)、對象、數(shù)組
    • json 中不能有除以上的其它 js 對象的特性,如方法等
    • json 中的屬性必須用雙引號引起來

 json字符串與js對象的轉(zhuǎn)換:

JSON.parse(json字符串);  // 返回js對象
JSON.stringify(js對象);  // 返回json字符串

到此這篇關(guān)于關(guān)于JavaScript對象類型之Array及Object的文章就介紹到這了,更多相關(guān)JavaScript的Array及Object內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論