以前一直搞不懂javscript裡的Array-like和Array到底差在哪裡,今天終於有機會讓我初步了解他們的差異了。寫個……
事情發生在我要對陣列使用map function的時候
[code language=”javascript”]
onDrop={function(data){
console.log(data);
var dataToItem=function(data,index){
console.log(data);
console.log(index);
return data.props.text;
}
self.props.updateItems(data.map(dataToItem));
}}
[/code]
console結果:
[Object, Object, Object] Object {$$typeof: Symbol(react.element), key: "1s", ref: null, props: Object, _owner: c} 0 Object {$$typeof: Symbol(react.element), key: "2d", ref: null, props: Object, _owner: c} 1 Object {$$typeof: Symbol(react.element), key: "3d", ref: null, props: Object, _owner: c} 2
接著,當我如法炮製,想要對以jquery .find回傳的物件做相同的時時,就發生錯誤了
[code language=”javascript”]
var data=$(this.getDOMNode()).find(‘.draggable-handle’);
var data2data2=function(data,index){
console.log(data);
console.log(index);
return $(data).html();
}
var data2=data.map(data2data2);
console.log(data2);
[/code]
問題發生在$(data).html()這行,看一下console
[div.draggable-element, context: div.draggable-element] 0 [div class="draggable-handle" data-reactid=".0.1.0:$reaorderable-node-1.$0asdasd.0"]asdasd[/div] 1 [div class="draggable-handle" data-reactid=".0.1.0:$reaorderable-node-2.$1a.0"]a[/div] Uncaught TypeError: Cannot read property 'createDocumentFragment' of undefined
ps: wordpress無法正常顯示<div>,以[div][/div]代替
可以發現兩者的data和index是反過來的,查了一下,才發現原因是find()回傳的是jquery類陣列(Array-like),所以有這樣的結果。要解決這樣的問題,只要
[code language=”javascript”]
var data2=data.toArray().map(data2data2);
[/code]
就可以了


關於我:
我是沒一村,專長和興趣是程式、主動投資、科技商業模式。可以參考我的書單和比較熱門的文章: