最近在工作中遇到了getter和setter，getter 是一种获得属性值的方法，setter是一种设置属性值的方法。下面这篇文章主要给大家介绍了关于Javascript中getter和setter的相关资料，需要的朋友可以参考借鉴，下面来一起看看吧。
前言
本文主要给大家介绍的关于Javascript中getter和setter的相关内容，第一次听说这个东西的时候是vue.js里面的数据绑定，只要绑定了数据，修改对象属性可以自动反馈到dom上，很神奇，后面也看到了文档里面实现是对对象定义了getter和setter并覆盖原属性，索性就来总结这两者的用法，下面话不多说了，来一起看看详细的介绍吧。
原理
利用Object.defineProperty来重写对象属性为getter和setter，通过getter和setter顺便改变绑定DOM节点的值
例子
摘自MDN
function Archiver() {
var temperature = null;
var archive = [];
Object.defineProperty(this, 'temperature', {
get: function() {
console.log('get!');
return temperature;
},
set: function(value) {
temperature = value;
archive.push({ val: temperature });
}
});
this.getArchive = function() { return archive; };
}
var arc = new Archiver();
arc.temperature; // 'get!'
arc.temperature = 11;
arc.temperature = 13;
arc.getArchive(); // [{ val: 11 }, { val: 13 }]
利用这个MDN例子小小的写了个方法并写了个计时器的DEMO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1 id="testTime" z:bind="time">0s</h1>
<script>
// 双向绑定
function bind_data(ele, arg){
var bindAttributeName = 'z:bind';
var data = JSON.parse(JSON.stringify(arg)) || {};
Object.keys(arg).forEach(function(argKey, index, array){
Object.defineProperty(arg, argKey, {
get: function(){
return data[argKey];
},
set: function(value){
if(ele.getAttribute(bindAttributeName) !== argKey) {
return;
}
if(ele.tagName === 'INPUT'){
ele.value = value;
}else{
ele.innerHTML = value;
}
data[argKey] = value;
}
});
arg[argKey] = arg[argKey];
});
var key = ele.getAttribute(bindAttributeName);
if((ele.tagName === 'INPUT' || ele.tagName === 'TEXTAREA') && arg[key]){
ele.addEventListener('input', function(e){
data[key] = ele.value;
});
}
}
/*
例子很简单，直接改变对象属性，就直接
反馈到了DOM上，就好像是一个钩子，改变
这个对象的属性，这个属性的钩子把它绑
定的DOM的数据进行修改
*/
var start = (new Date()).getTime();
var now;
var b = {time: '0s'};
bind_data(document.getElementById('testTime'), b);
setInterval(function(){
var now = (new Date()).getTime();
b.time = ((now - start)/1000) + 's'
}, 1);
</script>
</body>
</html>
以上就是Javascript中getter和setter基本介绍的详细内容，更多请关注php中文网其它相关文章！
这篇文章主要介绍了JavaScript数组去重的十种方法,利用元素的属性和特性进行不同的去重方法，并实例演示如何测试去重超大数组，具体操作步骤大家可查看下文的详细讲解，感兴趣的小伙伴们可以参考一下。
一、前言：
我们在实际工作中，或者在面试找工作时，都会用到或者被问到一个问题，那就是“数组如何去重”。是的，这个问题有很多种解决方案，看看下面的十种方式吧！
二、数组去重方式大汇总：
Methods 1: 思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中。
function unique(arr){
var res = [arr[0]];
for(var i=1; i<arr.length; i++){
var repeat = false;
for(var j=0; j<res.length; j++){
if(arr[i] === res[j]){
repeat = true;
break;
}
}
if(!repeat){
res.push(arr[i]);
}
}
return res;
}
console.log('------------方法一---------------');
console.log(unique([1,1,2,3,5,3,1,5,6,7,4]));
Methods 2: 思路：先将原数组排序，在与相邻的进行比较，如果不同则存入新数组。
function unique2(arr){
var arr2 = arr.sort();
var res = [arr2[0]];
for(var i=1; i<arr2.length; i++){
if(arr2[i] !== res[res.length-1]){
res.push(arr2[i]);
}
}
return res;
}
console.log('------------方法二---------------');
console.log(unique2([1,1,2,3,5,3,1,5,6,7,4]));
Methods 3: 利用对象属性存在的特性，如果没有该属性则存入新数组。
function unique3(arr){
var res = [];
var obj = {};
for(var i=0; i<arr.length; i++){
if( !obj[arr[i]] ){
obj[arr[i]] = 1;
res.push(arr[i]);
}
}
return res;
}
console.log('------------方法三---------------');
console.log(unique3([1,1,2,3,5,3,1,5,6,7,4]));
Methods 4: 利用数组的indexOf下标属性来查询。
相关文章
精彩导读
热门资讯
关注我们
