1、給對象添加屬性:使用 object.prop 或object['prop'] 給對象添加屬性
let obj={};
obj.name="zhangsan";
obj["age"]=23;
obj["class"]="國文";
console.log(obj); //輸出:{name: "zhangsan", age: 23, class: "國文"}
2、删除對象屬性:使用 delete 删除對象屬性
let obj={name:"xiaohua",age:22};
delete obj.name;
delete obj["age"];
console.log(obj); //輸出:{}
注意::在循環中删除對象屬性時候會報錯!!!待補充
3、對象合并:使用jquery的 $.extend(obj01,obj02)合并多個對象
let obj01={'a':1,'b':2};
let obj02={'c':3,'d':4,'e':5};
$.extend(obj01,obj02);
console.log(obj01); //輸出:{a: 1, b: 2, c: 3, d: 4, e: 5} ,被合并到第一個參數obj01對象中
console.log(obj02); //輸出:{c: 3, d: 4, e: 5} ,未改變obj02
let obj03=$.extend({},obj01,obj02); //不會改變obj1,obj2
console.log(obj03); //輸出:{a: 1, b: 2, c: 3, d: 4, e: 5}
4、對象合并:使用 Object.assign(o1,o2) 方法
let o1={a:'a',b:'b'};
let o2={c:'c',d:'d'};
let o3=Object.assign(o1,o2);
console.log(o3); //輸出:{a: "a", b: "b", c: "c", d: "d"}
console.log(o1); //輸出:{a: "a", b: "b", c: "c", d: "d"} ,合并後第一個對象也會改變
console.log(o2); //輸出:{c: "c", d: "d"},合并後未改變
5、周遊對象鍵、屬性值:使用 for(變量 in 對象) 的形式周遊對象屬性名
let obj001={name:'tom',age:26};
for(let key in obj001){
console.log(key+":"+obj001[key]); //輸出:name:tom和age:26 ,key就是屬性名(鍵)
}
console.log(Object.keys(obj001)); //Object.keys(o1)方法數組形式傳回o1對象的所有屬性名(鍵)
//Object.keys(obj001)方法擷取的是對象執行個體屬性組成的數組,不包括原型方法和屬性!!!!
注意:for...in...周遊的是數組或對象的索引值index,而for...of...周遊的是數組的元素值;
6、周遊數組:使用 for(變量 in 數組) 的形式周遊數組
let arr01=[12,22,32,42];
let arr02=new Array(12,22,32,42); //使用Array構造函數建立數組
let arr03=new Array(5); //建立一個包含5項的數組
for(let index in arr01){ //index是數組下标,for..in..周遊所有索引項
console.log(index+":"+arr01[index]); //輸出:0:12 1:22 2:32 3:42
}
注意:for...in...更适合周遊對象,for...of...更适合周遊數組值
for in 周遊數組會存在一些問題,如下:
Array.prototype.method=function(){ //原型方法
console.log(this.length);
}
var myArray=[1,2,4,5,6,7]
myArray.name="數組"
for (var index in myArray) {
console.log(myArray[index]);
}
//使用for in會周遊數組所有的可枚舉屬性,包括原型。例如上栗的原型方法method和name屬性
//問題二:周遊順序有可能不是按照實際數組的内部順序
for in 周遊對象時候可以通過hasOwnPropery方法可以判斷某屬性是否是該對象的執行個體屬性,如下:
for (var key in myObject) {
if(myObject.hasOwnProperty(key)){
console.log(key);
}
}
或者ES5的Object.keys(myObject)擷取對象的執行個體屬性組成的數組,不包括原型方法和屬性。
Object.prototype.method=function(){
console.log(this);
}
var myObject={
a:1,
b:2,
c:3
}
Object.keys(myObject).forEach(function(key,index){<br> console.log(key,myObject[key])<br>})
6、周遊數組:使用 for(元素 of 數組) 的形式周遊數組
let arr01=[12,22,32,42];
for(let ele of arr01){ //for周遊所有的ele元素項
console.log(ele); //輸出:12 22 32 42
}
7、forEach周遊數組:使用 forEach(元素 of 數組) 的形式周遊數組,使用如下:
//forEach(fn)方法将對數組中的每一個元素執行一次該fn匿名函數,其中ele是目前元素,index是目前元素的索引值,arr是原數組;
//匿名函數中的this指向window;
//forEach()方法無傳回,是undefined;
let arr01=['hello','world'];
arr01.forEach(function(ele,index,arr){
console.log(index);
console.log(ele);
console.log(this);
console.log(arr);
//arr[1]="tom"; //可以通過索引對數組元素值進行修改
}); //兩次分别輸出:0 hello window ['hello','world','tom']; 1 world window ['hello','world','tom'];
console.log(arr01); //輸出:['hello','world','tom'],是以forEach()并不會改變原數組
8、 map周遊數組:使用 map(function(ele,index,arr){ return XXX;}) 的形式周遊數組,使用如下:
//arr.map()中的匿名函數中的參數ele、index、arr分别表示周遊數組時目前對象元素、目前索引值、原有數組;
//arr.map()會傳回一個新的數組,但不改變原有數組;方法中的this指向window;
//arr.map() 和arr.forEach()方法都不會對空數組進行執行;
//map()方法浏覽器支援:ie9+ Safari1.5+
let oldArr=[1,2,3];
let newArr=oldArr.map(function(ele,index,arr){
console.log("原有數組元素"+index+":"+ele+"/"+arr[index]);
console.log(this);
return ele*2;
});
console.log(newArr); //輸出:[2, 4, 6]
let arr1=[];
let newArr1=arr1.map(function(){
return ele;
})
console.log("空數組使用map方法:"+newArr1); //輸出為:空數組使用map方法:
注意:forEach() 和 map() 以及 filter() 方法隻能周遊數組;
9、 filter周遊數組:使用 filter(fn) 方法過濾 數組中的每一項,傳回滿足條件的項組成新的數組
//filter()不改變原有數組,傳回符合過濾條件的項并組成新的數組;方法中的this指向window;
let arr1=[1,2,3,4,5,6,7,8,9,10];
let newArr=arr1.filter(function(ele,index,arr){
//console.log(this);
return ele%3==0 &&ele>5;
});
console.log(arr1); //輸出:[1,2,3,4,5,6,7,8,9,10]
console.log(newArr); //輸出:[6,9]
10、js數組 push() 方法:使用 arr.push(ele) 方法在數組尾部添加一個或多個元素,并傳回新的長度
let arr1=[1,2,3];
let b=arr1.push(55,66);
console.log(arr1); //輸出:[1,2,3,55,66] 元素被添加到數組尾部
console.log(b); //輸出:5 ,傳回的是新的長度
11、js數組 pop() 方法:使用 arr.pop() 方法删除數組尾部元素,并傳回被删除的元素
let arr1=[0,2,4,6];
let b=arr1.pop();
console.log(arr1); //輸出:[0,2,4]
console.log(b); //輸出:6
12、js數組 unshift() 方法:使用 arr.unshift() 方法在數組開頭添加一個或多個元素,并傳回新的長度
let arr1=[0,2,4,6];
let b=arr1.unshift(77,88);
console.log(arr1); //輸出:[77,880,0,2,4,6]
console.log(b); //輸出:6
13、js數組 shift() 方法:使用 arr.shift() 方法删除并傳回數組的第一個元素
let arr1=[0,2,4,6];
let b=arr1.shift();
console.log(arr1); //輸出:[2,4,6]
console.log(b); //輸出:0
14、js數組 slice() 方法:使用 arr.slice(index1,index2) 方法擷取數組開始下标到結束下标之間的元素組成一個新的數組
let arr1=[0,2,4,6,8];
let b=arr1.slice(2,4);
let c=arr1.slice(2);
console.log(arr1); //輸出:[0,2,4,6,8]
console.log(b); //輸出:[4,6] //包括起始下标對應的元素,不包括結束下标對應的元素
console.log(c); //輸出:[4,6,8] //擷取數組指定下表後的資料并傳回新的結果數組
15、js數組 splice() 方法:使用 splice(start,deleteCount,val1,val2)方法從start位置開始删除deleteCount項,再插入值val1、val2 ,并傳回删除的數組
let arr1=[66,22,33,4,55,11];
let b=arr1.splice(1,2,111,222); //是以這裡删除了22和33,接着添加了111和2222
console.log(arr1); //輸出:[66,111,222,4,55,11]
console.log(b); //輸出:[22,33] //傳回了删除的數組
16、js數組 concat()合并 方法:使用 arr.concat(arr1,arr2) 方法合并兩個或更多的數組,并傳回合并後的結果數組。
let arr1=[1,22,33,44,55];
let arr2=[100,200]
let d=arr1.concat(88,arr2);
console.log(d); //輸出:[1,22,33,44,55,88,100,200]
console.log(arr1); //輸出:[1,22,33,44,55] 不改變原來的數組
console.log(arr2); //輸出:[100,200] 不改變原來的數組
17、js數組 join()合并 方法:使用 arr.join(separator) 方法将數組的所有項通過separator拼接成一個字元串
let arr1=['hello','every','body'];
let m=arr1.join('--');
console.log(m); //輸出:hello--every--body
console.log(arr1); //原數組不變
18、js數組 sort()排序方法:使用 arr.sort() 方法會将數組的所有項toString()轉型成字元串,是以sort方法比較的是字元串,是以會出現3>13的錯誤如下,是以這裡使用函數作為參數來調用解決問題
let arr1=[1,22,13,52,3];
let m=arr1.sort();
console.log(m); //輸出:[1, 13, 22, 3, 52],比較的是字元串大小
let n=arr1.sort(function(a,b){return a-b;});
console.log(n); //升序輸出:[1, 3, 13, 22, 52],是以這裡使用函數作為參數來調用
let arr2=[1,22,13,52,3];
let k=arr2.sort(function(a,b){return b-a;});
console.log(k); //降序輸出:[52, 22, 13, 3, 1]
let arr1=["hello","world","tom"];
let m=arr1.sort();
console.log(m); //輸出:["hello", "tom", "world"],可以字元串排序
console.log(arr1); //輸出:["hello", "tom", "world"],原數組改變
19、js數組 reverse()反轉方法:使用 arr.reverse() 方法反轉數組所有元素項的順序
let arr1=["hello","world","tom"];
let m=arr1.reverse();
console.log(m); //輸出:["tom", "world", "hello"]
console.log(arr1); //輸出:["tom", "world", "hello"], 原數組改變
20、js數組 indexOf() 搜尋位置方法:使用 arr.indexOf() 方法傳回數組中指定元素所在位置,從數組開頭往結尾查找
let arr1=["hello","world","tom","world"];
let m=arr1.indexOf("world");
let n=arr1.indexOf("world",1); //第二個參數是可選參數,表示開始查找第一個參數的起點位置,傳回從1的位置後第一次出現‘world’所在的位置
let k=arr1.lastIndexOf("hello",1); //從前往後查找,表示從數組的第二個元素開始查找‘hello’的位置
let j=arr1.lastIndexOf("Jane"); //沒有找到将傳回-1
console.log(m); //輸出:1
console.log(n); //輸出:1
console.log(k); //輸出:0
console.log(j); //輸出:-1
console.log(arr1); //輸出:["hello","world","tom","world"],原數組沒有改變
21、js數組 lastIndexOf() 搜尋位置方法:使用 arr.lastIndexOf() 方法傳回數組中指定元素最後出現的位置,也就是最後一個該元素的位置
let arr1=["hello","world","tom","world"];
let m=arr1.lastIndexOf("tom");
let n=arr1.lastIndexOf("world");
let k=arr1.lastIndexOf("Jane");
console.log(m); //輸出:2
console.log(n); //輸出:3
console.log(k); //輸出:-1 ,沒找到傳回-1
console.log(arr1); //輸出:["hello","world","tom","world"],原數組沒有改變
22、js數組 every() 方法:使用 arr.every() 方法檢測數組元素的每個元素是否都符合條件。所有元素都符合條件則傳回true
let arr1=[1,3,5,6,8];
let m=arr1.every(function(ele){
return ele<10;
});
console.log(m); //輸出:true
console.log(arr1); //原數組沒有改變
23、js數組 some() 方法:使用 arr.some() 方法檢測數組元素中是否有任意元素符合指定條件。任意元素符合條件則傳回true
let arr1=[1,3,25,6,8];
let m=arr1.some(function(ele){
return ele>10;
});
console.log(m); //輸出:true
console.log(arr1); //原數組沒有改變
24、js檢查對象是不是數組:使用 Array.isArray(arr1) 方法 。arr1 instanceof Array==true 和 arr1..constructor === Array來判定,在多個frame中來回穿梭時存在漏洞,因為每個iframe都有一套自己的執行環境,跨frame執行個體化的對象彼此是不共享原型鍊的
let arr01 = [2,4,6,8];
console.log(Array.isArray(arr01)); //輸出:true ,該方法支援ie9+
//toString() 方法可把數組轉換為字元串,并傳回結果。元素之間用逗号連接配接
//最佳寫法如下:
let arr = [1,2,3,1];
let arr2 = [{ abac : 1, abc : 2 }];
function isArrayFn(value){
if (typeof Array.isArray === "function") {
return Array.isArray(value);
}else{
return Object.prototype.toString.call(value) === "[object Array]";
}
}
alert(isArrayFn(arr));// true
alert(isArrayFn(arr2));// true
25、js數組 fill() 方法:使用 arr.fill() 方法是使用固定值來填充數組指定位置元素。類似于全體替換,浏覽器ie12+支援
let arr1=['hello','every','body','Tom','Jane'];
arr1.fill('fun',1,3); //arry.fill(value,start,end)的三個參數分别表示填充的值、填充起始的位置、填充結束的位置
console.log(arr1); //輸出:["hello", "fun", "fun", "Tom", "Jane"]
25、js數組 includes() 方法判斷一個數組是否包含指定的元素;js數組 find(function(){}) 方法傳回符合傳入測試(函數)條件的數組元素中的第一個元素。但是浏覽器支援都要求較高,這裡不細說