本文目录一览:
原生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