手写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”