手写js原生代码,手写代码编程

发布时间:2023-01-04

本文目录一览:

原生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

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

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

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

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

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

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

/table

/form

script type="text/javascript"

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---

}

/script

/body

/html