特性操作详解及实例代码,总结Javascript中数组各种去重的方法

前面的话

前言

声明一维数组:var goodsArr = [];

  每个元素都有一个或者多个特性,这些特性的用途就是给出相应元素或者其内容的附加信息。操作特性的DOM方法主要有3个:getAttribute()方法、setAttribute()方法和removeAttribute()方法,而在jQuery中用一个attr()与removeAttr()就可以全部搞定了,包括兼容问题。本文将介绍jQuery中的特性操作

在做javascript开发的时候,经常会遇到数组元素重复的问题,而javascript
Array又没有直接提供方法解决此问题,还需要自己去实现。这篇文章总结了Javascript中数组各种去重的方法,下面来一起看看。

赋值:goodsArr[0] = ‘First
Value’;

获取特性

方法一 利用对象属性不重复的特性

这个毫无争议,因为平时使用PHP比较多,而php语法是可以直接使用goodsArr[0]
= ‘First Value’;
这种方法声明数组并赋值的,但js不能这样使用,必须先声明数组存在。同理,如果是二维和多维数组在使用前也必须声明二维和多维的数组,举例二维数组:

  jQuery中用attr()方法来获取和设置特性,attr是attribute(特性)的缩写,在jQuery
DOM操作中会经常用到attr()方法

Array.prototype.distinct = function (){
  var arr = this,
    i,
    obj = {},
    result = [],
    len = arr.length;
  for(i = 0; i< arr.length; i++){
    if(!obj[arr[i]]){  //如果能查找到,证明数组元素重复了
      obj[arr[i]] = 1;
      result.push(arr[i]);
    }
  }
  return result;
};
var goodsArr[0] = [];

attr(attributeName)

方法二
双层循环,外层循环元素,内层循环时比较值

必须先这样声明一下二维数组才能使用二维数组,否则会出错的。

  attr(传入特性名):获取特性的值,相当于DOM中的getAttribute()

Array.prototype.distinct = function(){
  var arr = this,
    result = [],
    i,
    j,
    len = arr.length;
  for(i = 0; i < len; i++){
    for(j = i + 1; j < len; j++){
      if(arr[i] === arr[j]){
        j = ++i;
      }
    }
    result.push(arr[i]);
  }
  return result;
}

以上就是小编为大家带来的关于js二维数组和多维数组的定义声明(详解)的全部内容了,希望对大家有所帮助,多多支持脚本之家~

<div id="test"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log(test.getAttribute('id'));//'test'  
console.log($('#test').attr('id'));//'test'
</script>

方法三 数组递归去重

您可能感兴趣的文章:

  • JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
  • JS数组的遍历方式for循环与for…in
  • Javascript的数组与字典用法与遍历对象的属性技巧
  • Javascript技巧之不要用for
    in语句对数组进行遍历
  • JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
  • js用闭包遍历树状数组的方法
  • Javascript数组循环遍历之forEach详解
  • JS遍历数组及打印数组实例分析
  • JavaScript中利用for循环遍历数组
  • js一维数组、多维数组和对象的混合使用方法
  • JS获取多维数组中相同键的值实现方法示例
  • JS实现遍历不规则多维数组的方法

  [注意]attr()方法只获取第一个匹配元素的属性值。要获取每个单独的元素的属性值,我们依靠jQuery的.each()或者.map()方法循环

Array.prototype.distinct = function (){
  var arr = this,
    len = arr.length;
  arr.sort(function(a,b){    //对数组进行排序才能方便比较
    return a - b;
  })
  function loop(index){
    if(index >= 1){
      if(arr[index] === arr[index-1]){
        arr.splice(index,1);
      }
      loop(index - 1);  //递归loop函数进行去重
    }
  }
  loop(len-1);
  return arr;
};
<div class="test" id="ele1">元素一</div>
<div class="test" id="ele2">元素二</div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
console.log($('.test').attr('id'));//'test'
$('.test').each(function(index) {
 console.log(index+":"+$(this).attr('id'));//'1:ele1 2:ele2'
});
</script>

方法四 利用indexOf以及forEach

prop()

Array.prototype.distinct = function (){
  var arr = this,
    result = [],
    len = arr.length;
  arr.forEach(function(v, i ,arr){    //这里利用map,filter方法也可以实现
    var bool = arr.indexOf(v,i+1);    //从传入参数的下一个索引值开始寻找是否存在重复
    if(bool === -1){
      result.push(v);
    }
  })
  return result;
};

  属性(property)和特性(attribute)是不同的。属性是DOM节点的属性,而特性是HTML标签的特性

方法五 利用ES6的set

  [注意]关于属性和特性的区别的详细信息移步至此

function dedupe(array){
  return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]
<div id="test" data="abc"></div>
<script src="http://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
test.data = 123;
//IE8-浏览器返回123,其他浏览器返回'abc'
console.log(test.getAttribute('data'))
console.log(test.data)//123
//IE8-浏览器返回123,其他浏览器返回'abc'
console.log($('#test').attr('data'))
console.log($('#test').prop('data'))//123
</script>

方法六
拓展运算符(…)内部使用for…of循环

  由上面代码可知,jQuery并没有解决低版本IE浏览器属性和特性混淆的问题

let arr = [3,5,2,2,5,5];
let unique = [...new Set(arr)];  //[3,5,2]

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图