js遍歷陣列和物件的方法以及如何區分

2021-09-26 22:26:03 字數 3786 閱讀 4343

普通的for迴圈

let arr = [1,2,3,4];


for(let i = 1; i < arr.length; i++)
for … in遍歷陣列的鍵名或者陣列的下標

存在的問題：

1）在某些情況下，這段**可能按照隨機順序遍歷陣列元素，

2）陣列原型鏈上的屬性都能被訪問到

let arr = [1,2,3,4];


for (let i in arr)


// 1,2,3,4


arr.prototype.a='abc';


for (let i in arr)


// 1,2,3,4,abc
for … of 遍歷陣列的鍵值，不能遍歷物件

let arr = [1,2,3,4]


for(let value of arr)


// 1,2,3,4
foreach 只能遍歷陣列，不能遍歷物件

存在的問題：

1）不能使用break語句中斷迴圈

2）不能使用return語句返回到外層函式。

let arr = [1,2,3,4];


arr.foreach((item, index)=>)


// 1,2,3,4
map 只能遍歷陣列，不能遍歷物件

可以遍歷陣列中的每項並且進行某一種運算，產生乙個新陣列

let arr = [1,2,3,4]


let newarr = arr.map((item, index)=>)


console.log(arr); // [1,2,3,4]


console.log(newarr); // [2,4,6,8]
filter 篩選出陣列中符合條件的項，組成新陣列,不能遍歷物件

let arr = [1,2,3,4]


let newarr = arr.filter((item,index)=>);


console.log(arr); // [1,2,3,4]


console.log(newarr); // [3,4]
every檢測陣列中的每一項是否符合條件返回true/false

全部滿足返回true，否則false

let arr = [1,2,3,4]


let res = arr.every((item,index)=>)


console.log(res); // false
some檢測陣列中是否有某些項符合條件返回true/false

有乙個滿足就返回true，全部不滿足返回false

let arr = [1,2,3,4]


let res = arr.some((item,index)=>)


console.log(res); // true
reduce讓陣列中的前項和後項做某種計算，並累計最終值

let arr = [1,2,3,4]


let sum = arr.reduce((prev,next)=>)


console.log(sum); // 10
object.keys(arr)和object.values(arr) arr為處理的陣列

返回： 下標的字串陣列或者值的陣列

let arr=[1,2,3]


console.log(object.keys(arr)); // ['0','1','2']


console.log(object.values(arr)); // [1,2,3]
順序排序

let arr = [3,5,7,1];


console.log(arr.sort()); // [1,3,5,7]
逆序排序

let arr = [3,5,7,1];


console.log(arr.sort().reverse()); // [7,5,3,1]


console.log(arr.sort(function(a,b))); // [7,5,3,1]
for … in 遍歷物件

let obj= 


for(key in obj)


// num:2


// str:abc
object.keys(obj)和object.values(obj) obj為處理的物件

返回值：key的字串陣列或者value的陣列

let obj= 


console.log(object.keys(obj)); // ['num','str]


console.log(object.values(obj)); // [2,'abc']
使用object.getownpropertynames(obj)

返回乙個陣列，key值的陣列

let obj= 


console.log(object.getownpropertynames(obj)); // ['num','str]


object.getownpropertynames(obj).foreach(key=>)


// num:2


// str:abc
使用array.isarray() 區分

let arr=;


let obj = {};


console.log(array.isarray(arr)); // true


console.log(array.isarray(obj)); // false
使用constructor屬性區分

let arr=;


let obj = {};


console.log(arr.constructor == array); // true


console.log(obj.constructor == object); // true
使用instanceof運算子區別。（左邊是待測物件，右邊是父建構函式）

let arr=;


let obj = {};


console.log(arr instanceof array); // true


console.log(obj instanceof object); // true
使用typeof都返回object，但是陣列的length屬性是》=0的，物件是undefined

let arr=;


let obj = {};


console.log(arr.length); // 0


console.log(obj.length); // undefined
利用object.prototype.tostring.call()方法將該變數轉化為代表其型別的string

let arr=;


let obj = {};


console.log(object.prototype.tostring.call(arr)); //[object array]


console.log(object.prototype.tostring.call(obj)); //[object object]

js遍歷陣列和物件的方法

第二條鏈結裡有分析不同遍歷方式的效率 var arr name age var obj for in遍歷陣列和和物件 for key in obj foreach遍歷陣列，三個引數依次是陣列元素 索引 陣列本身 arr.foreach function value,index,array 返回乙個陣...

js遍歷陣列（物件）

例 let arr 1,2,3 for let i 0 iconsole.log arr i 輸出結果 1 2 3 例 let arr 1,2,3 for let i in arr 輸出結果 1 2 3 說明 同普通for迴圈，以key遍歷查詢陣列或物件 例 let arr 1,2,3 for le...

js 常見的遍歷陣列 物件 方法

原生js const obj for let key in obj 獲得所有的key console.log object.keys obj 獲得所有的value console.log object.values obj jquery each arr,function index,value c...