06.JS對象-1

時間 2020-03-02

原文原文鏈接

前言：
學習一門編程語言的基本步驟
（01）瞭解背景知識
（02）搭建開發環境
（03）語法規範
（04）常量和變量
（05）數據類型
（06）數據類型轉換
（07）運算符
（08）邏輯結構
（09）函數
（10）對象
10.對象——object
01.對象屬於引用類型數據
對象：是一組屬性（property）和（method）方法的集合
一臺電腦：屬性有顏色，尺寸，品牌，內存大小...方法有看視頻，上網，敲代碼...
一輛汽車：屬性有顏色，長度，品牌，空間大小...方法有代步，運輸...
比較形象的一句比喻就是：萬物皆對象
1）JS中的對象
內置對象：JS提供的，例如日期，運算等
  宿主對象：根據不一樣的執行環境劃分的，DOM對象的宿主是瀏覽器，http對象的宿主是node.js
  自定義對象：本身建立的對象,自定義對象包含
對象字面量
  內置構造函數
  自定義構造函數
  2）對象字面量創造空對象
使用大括號{ }建立空對象
多組屬性之間用逗號隔開
屬性名中的引號可加可不加，若是含有特殊字符必須加css

    //建立自定義對象
    //使用對象字面量建立對象,對象字面量是{ }，字面量的意思就是字面上你寫的是什麼值，打印的就是什麼值
    var person={
        ename:"小小",
        sex:"男",
        age:"78",
    }
    console.log(person);//{ename: "小小", sex: "男", age: "78"}
    //建立一個手機對象，包含顏色，尺寸，品牌
    var phone={
        color:"黑色",
        size:5.9,
        brand:"華爲",
        "made-in":"china",
    };
    console.log(phone);//{color: "黑色", size: 5.9, brand: "華爲", made-in: "china"}

3）訪問對象中的屬性
對象.屬性名
對象['屬性名']
若是訪問的屬性名不存在，返回undefinedhtml

    //訪問對象中的屬性
    var phone={
    color:"黑色",
    size:5.9,
    brand:"華爲",
    "made-in":"china",
    };
    console.log(phone.size);//5.9
    console.log(phone['made-in']);//china
    console.log(phone['size']);//5.9
    //修改屬性值
    phone.color="白色";
    console.log(phone.color);//白色
    //添加不存在的屬性
    console.log(phone.num);//不存在的  默認是undefinde
    phone.num='P30';
    console.log(phone.num);//P30

4）內置構造函數由new建立一個對象
new Object() 建立一個空對象
須要單獨爲對象添加每個屬性vue

    //使用內置函數建立對象
    var car=new Object();
    //添加屬性
    car.brand='五菱宏光';
    car.color='白色';
    car['price']=60000;
    console.log(car);//{brand: "五菱宏光", color: "白色", price: 60000}

5）遍歷對象中的屬性
for （var key in 對象）{//key表明對象中的每一個屬性名
對象[key] //經過屬性名獲取對應屬性值
}html5

    //遍歷對象中的屬性
    var phone={
        color:'黑色',
        brand:'華爲',
        num:'p30',
        size:5.9,
    }
    for (var key in phone ){
        //key 每一個屬性名
        console.log(key,phone[key])//color 黑色 brand 華爲 num p30 size 5.9
    }
    
    //練習：建立對象，包含若干個成績，遍歷對象屬性，計算總成績
    var score={
        math:89,
        chinese:80,
        english:92,
    };
    var sum=0;
    for (var key in score ){
        //console.log(key,score[key]);
        //把每一個成績加到一塊兒
        sum+=score[key]; 
    }
    console.log(sum);//261

02.函數對象
1）判斷對象中是否含有某個屬性，屬性後面對應的是值
對象.屬性名===undefined true—>不存在 false—>存在
對象.hasOwnProperty("屬性名") true—>存在 false—>不存在
"屬性名" in 對象 true—>存在 false—>不存在node

    //判斷對象中是否含有某個屬性
    var person={
        ename:"曉麗",
        sex:'女',
        age:28
    }
    console.log(person.eid);//undefined
    console.log(person.eid===undefined);//true 屬性值和undefined比較結果爲true，說明不存在
    console.log( person.hasOwnProperty("age"));//true
    console.log("sex" in person);//true

    //練習：判斷是否含有salary，若是沒有，添加該屬性，並設置值爲8000.
    var person={
        ename:"曉麗",
        sex:'女',
        age:28
    }
    //判斷方法一
    if (!person.hasOwnProperty("salary")){
        person.salary=8000;
    }
    console.log(person);
    //判斷方法二
    if (!("salary" in person)){
        person.salary=8000;
    }
    console.log(person);

2）對象中的方法——method，方法後面對應的是function(){}
var person={
  ename:"oksana";
  say:function(){
this.name//訪問當前對象的屬性名，this指代當前所在的對象
}
  }
  person.say() //調用對象中的方法react

    // 對象中的方法
    var person={
      ename:"oksana",//成員屬性
      sex:"女",
      say:function (){//把一個匿名函數賦值給say——成員方法
      console.log("hello,我叫"+this.ename);
      } 
    }
    //調用對象中的方法
    person.say();

3）對象的存儲
原始類型存儲——變量中存儲的是值，每一個變量的內存空間都是單獨的，暫時可理解爲棧內存
引用類型存儲——變量中存儲的是一個引用地址，暫時能夠理解爲堆內存
引用類型數據一旦沒有被地址所引用，就會銷燬,一般使用null用於手動銷燬或是釋放引用類型ajax

    //原始類型儲存
    var a=1;
    var b=a;//拷貝a的值,賦值給b,佔單獨的內存空間
    //改變a的值
    a=2;
    console.log(a,b);//b=1,b佔單獨的內存空間,因此a值改變並不影響b值

    //引用類型的存儲
    var person1={
      ename:"oksana",
      age:18,
    }
    //把person1對象賦值給了person2
    var person2=person1;//此時person2引用的是person1的地址
    //person2改變屬性值
    person2.ename="小小";//實際是用過引用的地址，修改了person1的值
    console.log(person1);//{ename: "小小", age: 18}
    console.log(person2);//{ename: "小小", age: 18}
    //person1也要改變屬性值
    person1.age=48;//一樣是經過引用的地址，修改了裏面的內容，可是地址不變
    console.log(person2);//{ename: "小小", age: 48}
    console.log(person1);//{ename: "小小", age: 48}
    //引用類型數據一旦沒有被地址所引用，就會銷燬
    //null用於手動銷燬或是釋放引用類型，
    person1=null;//person1不在引用對象
    person2=null;//person2不在引用對象

03.數組對象——array
數組是有多個元素組成的集合，每一個元素就是一個數據
1）數組字面量
[元素1,元素2,...]編程

    //數組字面量,寫什麼值輸出就是什麼值
    var citys=['北京','上海','杭州','廣州','深圳']
    console.log(citys);//["北京", "上海", "杭州", "廣州", "深圳"]

2）訪問數組中的元素
數組[下標] 下標從0開始，不存在的元素返回undefined數組

    //訪問數組中的元素
    var markets=['pork','beef','pear','apple','water']
    //訪問某個元素,第一個下標是從0開始
    console.log(markets[1]);//打印下標爲1的位置的值
    console.log(markets[5]);//打印下標爲5的位置的值，下標5是沒有值的，因此返回undefined
    //修改元素
    markets[0]='dog';//給0下標從新賦值
    //添加元素
    markets[7]='cat';//給下標7賦值
    console.log(markets);//["dog", "beef", "pear", "apple", "water", empty × 2, "cat"]

3）內置構造函數——new Array
new Array（元素1，元素2...）
new Array（3）初始化元素個數爲3，能夠添加更多個元素瀏覽器

    //內置構造函數
    var laptop=new Array('ThinkPad','小米','戴爾');
    var course=new Array(3);
    course[1]='數學';
    course[2]='語文';
    course[3]='英語';
    console.log(laptop);//["ThinkPad", "小米", "戴爾"]
    console.log(course);//[empty, "數學", "語文", "英語"],第一位是空，由於沒有在0下標的位置添加值

4）數組長度——length
數組.length——獲取數組中元素的個數
在數組的末尾添加元素
數組[數組.length]=值；

    //數組的長度
    var num=new Array(5);
    num[0]='小前鋒';
    num[1]='中鋒';
    num[2]='得分後衛';
    num[3]='控球后衛';
    num[4]='前鋒';
    //使用長度在數組的末尾添加元素
    num[num.length]='教練';
    num[num.length]='啦啦隊';
    console.log(num);// ["小前鋒", "中鋒", "得分後衛", "控球后衛", "前鋒", "教練", "啦啦隊"]
    //數組的長度
    console.log(num.length);//7

5）數組分類
分爲關聯數組和索引數組
索引數組是以0以上的整數做爲下標
關聯數組以字符串做爲下標，只能單獨的添加元素

    //數組分類
    //索引數組
    var score=[23,58,100,98];
    console.log(score);//[23, 58, 100, 98]
    var countrys=new Array();
    countrys[countrys.length]='China';
    countrys[countrys.length]='RS.';
    countrys[countrys.length]='USA';
    console.log(countrys);// ["China", "RS.", "USA"],索引數組的下標是整數，因此也可看做輸出爲[0:"China",1:"RS.",2:"USA"]
    
    //關聯數組，以字符串做爲下標
    var emp=[];
    emp['ename']='小然';
    emp['sex']='男';
    console.log(emp);//[ename: "小然", sex: "男"],ename,sex就是下標名稱

6）遍歷數組——for-in
for-in遍歷
for（var key in數組）{
//key表明下標
//數組[key],下標對應的元素
}//既能夠遍歷關聯數組，也能夠遍歷索引數組

    //for-in 遍歷數組
    var emp=[];
    emp['ename']='小然';
    emp['sex']='男';
    console.log(emp);//[ename: "小然", sex: "男"]
    //遍歷關聯數組
    for (var key in emp ){
      console.log(key,emp[key]);//ename 小然,sex 男
    }

    //遍歷索引數據
    var score=[78,42,59,67];
    var sum=0;
      for (var key in score ){
        console.log(key,score[key]);//這裏會打印每一個下標的名稱和值
        sum+=score[key];
    }
    console.log(sum/score.length);

for循環遍歷
for（var i=0;i<數組.length;i++）{
//i表明下標
//數組[i],下標對應的元素
}//只能遍歷索引數組，後續有其餘的遍歷關聯數組的方式

    //循環遍歷
    //使用循環獲取數組中的元素
    var score=[23,58,100,98];
    var sum=0;
      for (var i=0 ;i<score.length ;i++ ){
      console.log(i,score[i]); 
      sum+=score[i];
      }
    console.log(sum/i);

    //練習：建立數組，包含多個國家，把全部的中國改成CHINA
    var country=['中國','法國','德國','愛爾蘭','芬蘭','中國','中國'];
      for (var i=0;i<=country.length ;i++ ){
        if (country[i]==='中國'){
          country[i]='china';
        }
      }
    console.log(country);

7）數組API——Array-API（方法）
API 應用程序編程接口，預約義好的一些方法或者函數
pop() 刪除數組末尾的元素，返回刪除的元素

    //刪除數組中的最後一個元素——pop()
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.pop());//返回的是刪除的數據

push() 在數組的末尾添加元素，返回數組的長度

    //在數組的末尾添加元素——push() 
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.push('angular'));//返回的是數組的長度

shift() 刪除數組開頭的元素，返回刪除的元素

    //刪除開頭的元素——shift()
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.shift());//返回刪除的元素

unshift() 在數組的開頭添加元素，返回數組的長度

    //在開頭添加元素——unshift()
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.unshift('js'));//返回的是數組長度

join('-') 將數組中的元素按照指定的字符組合成字符串，默認是逗號，

    //把數組轉爲字符串帶有特殊的分隔符號——join('/')
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.join());//html,css,js,nodejs,ajax,vue,react，默認符號是「，」
    console.log(arr.join('/'));//html/css/js/nodejs/ajax/vue/react
    console.log(arr.join(''));//htmlcssjsnodejsajaxvuereact

sort() 對數組元素排序，默認是按照unicode碼從小到大排序
sort(function(a,b){//對數字數組排序
return a-b;//按照數字從小到大排序
// return b-a;//按照數字從大到小排序
});

    //對數組元素排序——sort()
    var arr=[23,9,78,6,45];
    console.log(arr.sort());//默認按照unicode碼從小到大；
    //按照數字大小排序，從大到小；
    console.log(arr.sort(function(a,b){
      // return a-b;//從小到大
      return b-a;//從大到小
    }));
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.sort());//默認是按照unicode碼從小到大排序

reverse() 翻轉數據

    //翻轉數組元素——reverse()
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.reverse());//把數組按照從後到前從新排序

toString() 將數組中的元素按照逗號組合成字符串

    //把數組轉爲字符串——toString()
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.toString());//html,css,js,nodejs,ajax,vue,react

concat(arr1,arr2) 拼接多個數組

    //拼接多個數組——concat(arr1,arr2)
    var arr=['html'];
    var arr1=['css','js','nodejs'];
    var arr2=['ajax','vue','react'];
    console.log(arr.concat(arr1,arr2));// ["html", "css", "js", "nodejs", "ajax", "vue", "react"]

slice(start,end)
截取數組中的元素，start是開始的下標，end是結束的下標，不包含end自己，若是是負數，表示倒數，end爲空截取到最後。返回爲截取的數組。

    //截取元素——slice(start,end)
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.slice(0,2));//包括開始的下標，可是不包括結束的下標
    console.log(arr);
    console.log(arr.slice(0));//開始結束的下標，到最後
    console.log(arr.slice(-2));//開始結束的下標，到最後
    console.log(arr.slice());//所有截取
    console.log(arr.slice(3,-1));//從開始下標截取到倒數第一位，但不包括倒數第一個
    console.log(arr.slice(-2,-1));//從倒數第二個開始截取，但不包括結束下標

splice(start,count,value1,value2...)
刪除數組中的元素，start是開始下標，count刪除長度，value刪除後補充的元素；count爲空刪除到最後，start爲負數表示倒數；返回刪除的元素，原數組會發生變化。

    //刪除數組中的元素——splice(start,count,value1,value2...)
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.splice(1));//開始的下標到最後，返回的是刪除的數組
    console.log(arr);
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.splice(1,2));//開始的下標到最後，刪除的長度，返回的是刪除的數組
    console.log(arr);
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.splice(-2,1));//刪除的是開始下標，和長度，返回的是刪除的數組
    console.log(arr);
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.splice(2,1,'oksana','html5'));//刪除開始，長度，補充的的元素，返回的是刪除的數組
    console.log(arr);
    var arr=['html','css','js','nodejs','ajax','vue','react'];
    console.log(arr.splice(2,0,'oksana','html5'))//0表明一個元素都不刪除，直接插入後面的數據，返回的是刪除的數組
    console.log(arr);

8）二維數組
數組中的每一個元素也是數組
var arr=[ [],[],[]…]
訪問二維數組中的數據
arr[下標][下標] 經過兩組下標訪

   // 二維數組
   var city=[
      ['海淀區','西城區','東城區','豐臺區'],
      ['廣州','深圳','惠州'],
      ['濟南','青島']
   ];
   console.log(city[1][1]);//深圳  經過兩組下標訪
   console.log(city[2][0]);//濟南  經過兩組下標訪

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。