찾다
웹 프론트엔드JS 튜토리얼네이티브 JS는 테이블 정렬을 구현합니다.
네이티브 JS는 테이블 정렬을 구현합니다.Dec 06, 2017 pm 02:52 PM
javascript종류시트

最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。

完整的表格排序涉及了下列这些知识点:

  • call方法使用

  • sort方法深入

  • 数据绑定

  • DOM映射

下面详细的总结一下这些知识点,最后结合这些知识点实现下面这样一个表格排序案例。
네이티브 JS는 테이블 정렬을 구현합니다.

完整的案例源码:https://github.com/daweihe/JS...

一、知识点总结

1、call方法使用

call方法的作用是改变方法中的this指向。

call这个方法是定义在Function.prototype的方法。我们定义的任何一个函数都可以认为它是Function这个类的一个实例。那么就可以通过实例的__proto__属性找到所属类的原型。任何一个函数都可以调用callapply等方法。

先来看一个例子:

var obj = {
    name : 'JS'
}

function testCall () {
    console.log(this);
}

testCall.call( obj );     // {name: "JS"}

首先函数testCall通过原型链查找机制找到call方法执行,call方法在执行过程中把调用call方法这个函数实例中的this都改变成call的第一个参数,接下来调用call方法的这个实例函数执行。

看两个题目:

function fn1() {
    console.log(1);
    console.log(this);
}

function fn2() {
    console.log(2);
    console.log(this);
}

fn1.call(fn2);   //this -> fn2
fn1.call.call(fn2);   //这里的call是改变function.__proto__.call的call方法中的this,相当于执行参数

call方法在执行的时候,call方法的第一个参数是用来改变this的,而从第二个参数开始都是传给调用call的函数的参数。

在非严格模式下,给call方法不传递参数、或者传递null、undefined后,this都是指向window

sum.call(); //window
sum.call(null); //window
sum.call(undefined); //window

严格模式下call执行的时候和非严格模式不同:

sum.call(); //undefined
sum.call(null); //null
sum.call(undefined); //undefined

下面使用call方法实现一个类数组转换为数组的方法:

function listToArray (likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i <p>和call类似的方法还有apply和bind方法,这里简单总结一下。</p><p>apply方法的作用和call方法一模一样,只是传参的形式不太一样,apply将函数的参数用数组包裹起来:</p><pre class="brush:php;toolbar:false">function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

sum.apply(null,[100,200]);

bind方法同样也是用来改变this关键字的,但是它只是仅仅改变this指向,不立即执行调用this的函数。

function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

var obj = {name : 'zx'}

var temp = sum.bind(obj);   //temp已经是被改变了this的函数
temp(100,200);              //当我们需要的时候才执行


//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();

bind方法体现了js中的预处理思想。

2、 sort排序深入

我们知道数组的sort方法只能排序10以内的数组。如果需要排序的数组中存在大于10的数字,我们就需要向sort方法中传入回调函数,常见的是这样:

ary.sort(function (a,b) {
    return a - b;
});

这样就能实现数组的升序排序。那么这样排序的原理到底是什么呢?

对于传入的两个参数:a代表的是找到的数组中的当前项,b代表的是当前项的后一项。

  • return a -b : 如果a大于b,返回结果,a与b交换位置。如果a小于b,那么a和b位置不变。 这是升序排序

  • return b -a : 如果b大于a,返回结果,a与b交换位置。如果a小于b,那么a和b位置不变。 这是降序排序

了解了基本原理后,对于这样一个二维数组,如何实现按年龄排序?

var persons = [{
    name:'dawei',
    age:55
},{
    name:'ahung',
    age:3
},{
    name:'maomi',
    age:2
},{
    name:'heizi',
    age:78
},{
    name:'afu',
    age:32
}];

其实很简单:

ary.sort(function(a,b){
    return a.age - b.age;
});

如果按姓名排序,则要涉及字符串的localeCompare()方法:

ary.sort(function(a,b){
    return a.name.localeCompare(b.name);
});

name.localeCompare()这个方法会根据两个字符串的字母进行比较,如果前一个字符串的第一个字母在24个英文字母中出现的位置比后一个字符串的第一个字符出现的位置靠前,则认定第一个字符串小,返回-1。如果出现的位置靠后,则认定第一个字符串大,返回1。如果所比较的字符相等。则比较下一个字符。

这个方法很实用,常用于按姓氏排序,对于汉字,该方法会自动将汉字转换为汉语拼音进行比较。

3、数据绑定

在js中一般使用动态绑定或者拼接字符串的方式实现数据绑定。

动态绑定:

//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表

var arrLength = ary.length;
for (var i = 0;i ' + (i + 5) + '' + ary[i].title;
    myUl.appendChild(oli);//动态添加元素
}

每添加一次就会引起一次DOM回流,如果数据量过大,这样则会严重影响性能。

关于DOM的回流与重绘,推荐大家看一下这篇文章:http://www.css88.com/archives...

拼接字符串:

var str = "";
for(var i=0; i<ary.length>';
    str += '<span>';
    str += (i+5);
    str += '</span>';
    str += ary[i].title;
    str += '';
}

myUl.innerHTML += str;</ary.length>

这种方式虽然只引起一次回流,但是它会去除原来存在的元素中所有的事件和属性。如果我们为列表中的li标签添加鼠标移入,背景变色的事件,那么这种方法会使这个事件失效。

为了解决上面的两种数据绑定方法带来的问题,我们使用文档碎片来添加数据。

var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length>' + ( i + 5 ) + '' + ary[i].title;
    frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null;  //释放内存</ary.length>

这样即只引起一次DOM回流,又会保留原来存在的事件。

4、DOM映射

DOM映射机制:所谓映射,就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象(元素集合)就是这样的关系。如果页面中的HTML标签结构发送变化,那么集合中对应的内容也会跟着自动改变。


        
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 5

对于这样一个列表使用下列脚本:

var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
    for (var i = mylis.length - 1 ; i >= 0; i --) {
        myul.appendChild(mylis[i]);
    }
console.log(mylis.length);   // 5

将获取到的列表元素反序重新插入ul中,那么ul列表会变成下面这样:


        
  • 5
  •     
  • 4
  •     
  • 3
  •     
  • 2
  •     
  • 1

我们看到列表的长度依然是5,只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系,当某个标签被重新插入到页面中时,页面中对应的标签会移动到插入的位置。这就是DOM映射。

二、实现表格排序

1、使用ajax获取数据

之所以使用动态获取数据,是为了使用文档碎片绑定数据。

var res = ''; //声明一个全局变量,接收数据
var xhr = new XMLHttpRequest();
xhr.open('get', 'date.txt', false);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        res = JSON.parse(xhr.responseText);
    }
}
xhr.send(null);

此时数据就保存在了res这个全局变量之中。

2、使用文档碎片绑定数据

var frg = document.createDocumentFragment();
for (let i = 0; i <h3 id="对表格进行排序">3、对表格进行排序</h3><p>这里涉及的点较多</p><pre class="brush:php;toolbar:false">//为两列添加点击事件
for (let i = 0; i <p>表格排序应用很常见,在面试中也会有这样的题目。这个小案例做下来,受益匪浅。这是我在学习的某峰学院的JS课程中的一个案例,如果对JS掌握不扎实的同学,欢迎保存:<code>链接: https://pan.baidu.com/s/1jHVy8Uq 密码: v4jk</code>。如果链接失效,加Q群领取:<code>154658901</code>。</p><p class="article fmt article__content"><br></p><p>最近在学习js的表格排序,没想到看不起眼的表格排序实际上却暗含了众多JS知识点。在这里记录一下此次学习过程。希望对大家也有所帮助。</p><p>完整的表格排序涉及了下列这些知识点:</p>
  • call方法使用

  • sort方法深入

  • 数据绑定

  • DOM映射

下面详细的总结一下这些知识点,最后结合这些知识点实现下面这样一个表格排序案例。
네이티브 JS는 테이블 정렬을 구현합니다.

完整的案例源码:https://github.com/daweihe/JS...

一、知识点总结

1、call方法使用

call方法的作用是改变方法中的this指向。

call这个方法是定义在Function.prototype的方法。我们定义的任何一个函数都可以认为它是Function这个类的一个实例。那么就可以通过实例的__proto__属性找到所属类的原型。任何一个函数都可以调用callapply等方法。

先来看一个例子:

var obj = {
    name : 'JS'
}

function testCall () {
    console.log(this);
}

testCall.call( obj );     // {name: "JS"}

首先函数testCall通过原型链查找机制找到call方法执行,call方法在执行过程中把调用call方法这个函数实例中的this都改变成call的第一个参数,接下来调用call方法的这个实例函数执行。

看两个题目:

function fn1() {
    console.log(1);
    console.log(this);
}

function fn2() {
    console.log(2);
    console.log(this);
}

fn1.call(fn2);   //this -> fn2
fn1.call.call(fn2);   //这里的call是改变function.__proto__.call的call方法中的this,相当于执行参数

call方法在执行的时候,call方法的第一个参数是用来改变this的,而从第二个参数开始都是传给调用call的函数的参数。

在非严格模式下,给call方法不传递参数、或者传递null、undefined后,this都是指向window

sum.call(); //window
sum.call(null); //window
sum.call(undefined); //window

严格模式下call执行的时候和非严格模式不同:

sum.call(); //undefined
sum.call(null); //null
sum.call(undefined); //undefined

下面使用call方法实现一个类数组转换为数组的方法:

function listToArray (likeAry) {
    var ary = [];
    try {
        ary = Array.prototype.slice.call(likeAry);
    } catch (e) {
        for (var i = 0; i <p>和call类似的方法还有apply和bind方法,这里简单总结一下。</p><p>apply方法的作用和call方法一模一样,只是传参的形式不太一样,apply将函数的参数用数组包裹起来:</p><pre class="brush:php;toolbar:false">function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

sum.apply(null,[100,200]);

bind方法同样也是用来改变this关键字的,但是它只是仅仅改变this指向,不立即执行调用this的函数。

function sum(num1, num2) {
    console.log(num2 + num1);
    console.log(this);
}

var obj = {name : 'zx'}

var temp = sum.bind(obj);   //temp已经是被改变了this的函数
temp(100,200);              //当我们需要的时候才执行


//或者像这样处理
var temp = sum.bind(null, 100, 200);
temp();

bind方法体现了js中的预处理思想。

2、 sort排序深入

我们知道数组的sort方法只能排序10以内的数组。如果需要排序的数组中存在大于10的数字,我们就需要向sort方法中传入回调函数,常见的是这样:

ary.sort(function (a,b) {
    return a - b;
});

这样就能实现数组的升序排序。那么这样排序的原理到底是什么呢?

对于传入的两个参数:a代表的是找到的数组中的当前项,b代表的是当前项的后一项。

  • return a -b : 如果a大于b,返回结果,a与b交换位置。如果a小于b,那么a和b位置不变。 这是升序排序

  • return b -a : 如果b大于a,返回结果,a与b交换位置。如果a小于b,那么a和b位置不变。 这是降序排序

了解了基本原理后,对于这样一个二维数组,如何实现按年龄排序?

var persons = [{
    name:'dawei',
    age:55
},{
    name:'ahung',
    age:3
},{
    name:'maomi',
    age:2
},{
    name:'heizi',
    age:78
},{
    name:'afu',
    age:32
}];

其实很简单:

ary.sort(function(a,b){
    return a.age - b.age;
});

如果按姓名排序,则要涉及字符串的localeCompare()方法:

ary.sort(function(a,b){
    return a.name.localeCompare(b.name);
});

name.localeCompare()这个方法会根据两个字符串的字母进行比较,如果前一个字符串的第一个字母在24个英文字母中出现的位置比后一个字符串的第一个字符出现的位置靠前,则认定第一个字符串小,返回-1。如果出现的位置靠后,则认定第一个字符串大,返回1。如果所比较的字符相等。则比较下一个字符。

这个方法很实用,常用于按姓氏排序,对于汉字,该方法会自动将汉字转换为汉语拼音进行比较。

3、数据绑定

在js中一般使用动态绑定或者拼接字符串的方式实现数据绑定。

动态绑定:

//ary为需要添加到页面中的数据数组
var op = document.getElementById("box");//获取容器
var myUl = op.getElementsByTagName("ul")[0];//获取列表

var arrLength = ary.length;
for (var i = 0;i ' + (i + 5) + '' + ary[i].title;
    myUl.appendChild(oli);//动态添加元素
}

每添加一次就会引起一次DOM回流,如果数据量过大,这样则会严重影响性能。

关于DOM的回流与重绘,推荐大家看一下这篇文章:http://www.css88.com/archives...

拼接字符串:

var str = "";
for(var i=0; i<ary.length>';
    str += '<span>';
    str += (i+5);
    str += '</span>';
    str += ary[i].title;
    str += '';
}

myUl.innerHTML += str;</ary.length>

这种方式虽然只引起一次回流,但是它会去除原来存在的元素中所有的事件和属性。如果我们为列表中的li标签添加鼠标移入,背景变色的事件,那么这种方法会使这个事件失效。

为了解决上面的两种数据绑定方法带来的问题,我们使用文档碎片来添加数据。

var frg = document.createDocumentFragment();//创建文档碎片
for (var i =0; i <ary.length>' + ( i + 5 ) + '' + ary[i].title;
    frg.appendChild(li);//将数据动态添加至文档碎片中
}
myUl.appendChild(frg); //将数据一次性添加到页面中
frg = null;  //释放内存</ary.length>

这样即只引起一次DOM回流,又会保留原来存在的事件。

4、DOM映射

DOM映射机制:所谓映射,就是指两个元素集之间元素相互“对应”的关系。页面中的标签集合和在JS中获取到的元素对象(元素集合)就是这样的关系。如果页面中的HTML标签结构发送变化,那么集合中对应的内容也会跟着自动改变。


        
  • 1
  •     
  • 2
  •     
  • 3
  •     
  • 4
  •     
  • 5

对于这样一个列表使用下列脚本:

var myul = document.getElementById("myul");
var mylis = myul.getElementsByTagName('li');
    for (var i = mylis.length - 1 ; i >= 0; i --) {
        myul.appendChild(mylis[i]);
    }
console.log(mylis.length);   // 5

将获取到的列表元素反序重新插入ul中,那么ul列表会变成下面这样:


        
  • 5
  •     
  • 4
  •     
  • 3
  •     
  • 2
  •     
  • 1

我们看到列表的长度依然是5,只是位置颠倒了。这是因为每个li标签和JS中获取的标签对象存在一个对应关系,当某个标签被重新插入到页面中时,页面中对应的标签会移动到插入的位置。这就是DOM映射。

二、实现表格排序

1、使用ajax获取数据

之所以使用动态获取数据,是为了使用文档碎片绑定数据。

var res = ''; //声明一个全局变量,接收数据
var xhr = new XMLHttpRequest();
xhr.open('get', 'date.txt', false);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        res = JSON.parse(xhr.responseText);
    }
}
xhr.send(null);

此时数据就保存在了res这个全局变量之中。

2、使用文档碎片绑定数据

var frg = document.createDocumentFragment();
for (let i = 0; i <h3 id="对表格进行排序">3、对表格进行排序</h3><p>这里涉及的点较多</p><pre class="brush:php;toolbar:false">//为两列添加点击事件
for (let i = 0; i <p>以上内容就是原生JS实现表格排序,希望能帮助到大家。</p><p><a href="http://www.php.cn/js-tutorial-371957.html" target="_self">js学习总结经典小案例之表格排序</a></p><p><a href="http://www.php.cn/js-tutorial-375121.html" target="_self">jquery中tablesorter表格排序组件是如何使用的?</a></p><p><a href="http://www.php.cn/js-tutorial-372544.html" target="_self">js表格排序实例详解(支持int,float,date,string四种数据类型)</a></p>

위 내용은 네이티브 JS는 테이블 정렬을 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse용 SAP NetWeaver 서버 어댑터

Eclipse를 SAP NetWeaver 애플리케이션 서버와 통합합니다.

Dreamweaver Mac版

Dreamweaver Mac版

시각적 웹 개발 도구