前言：
學習一門編程語言的基本步驟
（01）了解背景知識
（02）搭建開發環境
（03）語法規范
（04）常量和變數
（05）資料型別
（06）資料型別轉換
（07）運算子
（08）邏輯結構
（09）函式
（10）物件
10.物件——object
01.物件屬于參考型別資料
物件：是一組屬性（property）和（method）方法的集合
一臺電腦：屬性有顏色，尺寸，品牌，記憶體大小...方法有看視頻，上網，敲代碼...
一輛汽車：屬性有顏色，長度，品牌，空間大小...方法有代步，運輸...
比較形象的一句比喻就是：萬物皆物件
1）JS中的物件
內置物件：JS提供的，例如日期，運算等
宿主物件：根據不同的執行環境劃分的，DOM物件的宿主是瀏覽器，http物件的宿主是node.js
自定義物件：自己創建的物件,自定義物件包含
物件字面量
內置建構式
自定義建構式
2）物件字面量創造空物件
使用大括號{ }創建空物件
多組屬性之間用逗號隔開
屬性名中的引號可加可不加，如果含有特殊字符必須加
//創建自定義物件 //使用物件字面量創建物件,物件字面量是{ }，字面量的意思就是字面上你寫的是什么值，列印的就是什么值 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）訪問物件中的屬性
物件.屬性名
物件['屬性名']
如果訪問的屬性名不存在，回傳undefined
//訪問物件中的屬性 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() 創建一個空物件
需要單獨為物件添加每一個屬性
//使用內置函式創建物件 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] //通過屬性名獲取對應屬性值
}
//遍歷物件中的屬性 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—>不存在
//判斷物件中是否含有某個屬性 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() //呼叫物件中的方法
// 物件中的方法 var person={ ename:"oksana",//成員屬性 sex:"女", say:function (){//把一個匿名函式賦值給say——成員方法 console.log("hello,我叫"+this.ename); } } //呼叫物件中的方法 person.say();
3）物件的存盤
原始型別存盤——變數中存盤的是值，每個變數的記憶體空間都是單獨的，暫時可理解為堆疊記憶體
參考型別存盤——變數中存盤的是一個參考地址，暫時可以理解為堆記憶體
參考型別資料一旦沒有被地址所參考，就會銷毀,通常使用null用于手動銷毀或是釋放參考型別
//原始型別儲存 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]);//濟南 通過兩組下標訪
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/148171.html
標籤：JavaScript
上一篇：JS圖片輪播
下一篇：Vue實戰之【企業開發常見問題】