手寫js原生代碼,手寫代碼編程

本文目錄一覽：

1、原生JS是自己手寫的JS嗎？
2、手寫 JS 中常用函數的源碼 ( 持續更新… )
3、哪位JS高手幫我寫一下代碼

原生JS是自己手寫的JS嗎？

原生js就是使用javascript來進行一系列的開發，

非原生就是使用了js框架，像jq等就不是原生的，它是js的封裝。

手寫 JS 中常用函數的源碼 ( 持續更新… )

在日常開發中，我們經常會用到一些函數，如：Arrary.map/filter/forEach 等。今天我們來一起研究下這些函數的源碼，探討探討有沒有更好的方案/方法，以便更好的理解和應用到項目中。

call/apply 執行函數，並改變函數的作用域。

bind 返回一個改變作用域後的函數，需要時執行新函數。

apply 與 call 不同的是，參數是以數組形式整體傳入， call 是單個傳入

bind 返回一個新函數

關於 instanceOf ，這裡有詳解

new 主要做了以下幾件事：

調用數組的每個元素，並將元素傳遞給回調函數，空數組不執行回調函數。

方法按照原始數組元素順序依次處理元素，並返回一個新數組。

返回數組中的元素為原始數組元素調用函數處理後的值，不會改變原始數組。

數組中的每個元素都調用一次函數執行：返回通過測試（函數內判斷）的數組的第一個元素的值。

當數組中的元素在測試條件時返回 true 時， find() 返回符合條件的元素，之後的值不會再調用執行函數。

如果沒有符合條件的元素返回 undefined 。

數組中的每個元素都調用一次函數執行：返回傳入一個測試條件（函數）符合條件的數組第一個元素位置。

當數組中的元素在測試條件時返回 true 時, findIndex() 返回符合條件的元素的索引位置，之後的值不會再調用執行函數。

如果沒有符合條件的元素返回 -1 。

方法按照原始數組元素順序依次篩選符合條件的元素，並返回一個新數組。

返回數組中的元素是通過檢查指定數組中符合條件的所有元素，不會改變原始數組。

會依次執行數組的每個元素：用於檢測數組中的元素是否滿足指定條件（函數提供）。

如果有一個元素滿足條件，則表達式返回 true ，剩餘的元素不會再執行檢測。

如果沒有滿足條件的元素，則返回 false 。

指定函數檢測數組中的所有元素：用於檢測數組所有元素是否都符合指定條件（通過函數提供）。

如果數組中檢測到有一個元素不滿足，則整個表達式返回 false ，且剩餘的元素不會再進行檢測。

如果所有元素都滿足條件，則返回 true 。

接收一個函數作為累加器，數組中的每個值（從左到右）開始縮減，最終計算為一個值。

判斷一個數組是否包含一個指定的值，如果是返回 true ，否則 false 。

將從頭到尾地檢索數組，看它是否含有對應的元素。開始檢索的位置在數組 start 處或數組的開頭（沒有指定 start 參數時）。如果找到一個 item ，則返回 item 的第一次出現的位置。

默認開始位置的索引為 0 。

如果在數組中沒找到指定元素則返回 -1 。

數組扁平化，把多維數組轉換為一維數組

哪位JS高手幫我寫一下代碼

慢了一步~不過既然寫了，就給你啦~

測試頁面在附件里。

js部分代碼如下：

function foSort(sortId,direction){

var sid=parseInt(sortId);

var ot=document.getElementById(“DHlist”);

if (sid1 || sidot.rows.length-2){return false;}

var nsid=direction.toLowerCase()==”up”? (sid=1? ot.rows.length-2:sid-1):(sid+1ot.rows.length-2? 1:sid+1);

var svs=document.getElementsByName(“sort”);

//替換sort的input的value–start–

//看你的需要了，如果是要隨着上下一起移動，可以把這一段注釋掉

var tsv=svs[sid-1].value; //這裡轉換為0開頭的索引，sort的input比表格少2行，分別是開頭和結尾

svs[sid-1].value=svs[nsid-1].value;

svs[nsid-1].value=tsv;

//—end–

//還原編號列—start—

//如果要求編號也一起山下移動，可把此段注釋掉

var tid=ot.rows[sid].cells[0].innerHTML;

ot.rows[sid].cells[0].innerHTML=ot.rows[nsid].cells[0].innerHTML;

ot.rows[nsid].cells[0].innerHTML=tid;

//–end—

//上下切換–start—-

var tr=ot.rows[sid].innerHTML;

ot.rows[sid].innerHTML=ot.rows[nsid].innerHTML;

ot.rows[nsid].innerHTML=tr;

//—end—

}

完整HTML+js代碼：

html

headmeta http-equiv=”Content-Type” content=”text/html; charset=gb2312″

/headbody

style type=”text/css”

table {border-collapse:collapse;

width:80%;

text-align:center;

}

th {

background:#eee;

}

th,td {

line-height:25px;

}

th,td {

border-bottom:1px solid #ccc;

}

/style

form method=”post”

table id=”DHlist”

trth編號/thth導航名/thth導航說明/thth操作/thth排序/th/tr

input type=”hidden” value=”1″ name=”sort” /

td1/td

td導航1/td

td導航說明1/td

tda href=”?action=updateid=1″修改/anbsp;#124;nbsp;a href=”?action=deleteid=1″刪除/a/td

tdinput type=”button” onClick=”foSort(this.parentNode.parentNode.cells[0].innerHTML,’up’)”value=”向上” /input type=”button” onClick=”foSort(this.parentNode.parentNode.cells[0].innerHTML,’down’)”value=”向下” //td

/tr

input type=”hidden” value=”2″ name=”sort” /

td2/td

td導航2/td

td導航說明2/td

tda href=”?action=updateid=1″修改/anbsp;#124;nbsp;a href=”?action=deleteid=1″刪除/a/td

/tr

input type=”hidden” value=”3″ name=”sort” /

td3/td

td導航3/td

td導航說明3/td

tda href=”?action=updateid=3″修改/anbsp;#124;nbsp;a href=”?action=deleteid=1″刪除/a/td

/tr

trtd colspan=”6″input type=”submit” value=”提交” name=”send” /td/tr

/table

/form

script type=”text/javascript”