转为string然后比较
- _.difference()没看懂到底是什么操作
2 .先检查传入的数值是否是数组
3 .然后计算他们的长度是否相等
4 .no-转为字符串比较的话,如果之前数组里面的一个数是字符串的话,那么转化之前和之后先当于没变,那就意味着,本来他们连数据类型都不一致,最后给出的结果是相同的。
5 .严格比较,那就是比较的时候要按照数组的特点来比价,甚至要比较数据在数组中的顺序。
6 .非严格比较,那就是单纯的比较里面的数据是否一致。
7 .includes()方法是否可以支持一些特殊字符的比较,仅仅是可以检测NaN,会检查两个数据的类型是否一致
9 .如果两个数组内部有对象的话,这个怎么比较。
10 .先检查数据的类型如果是对象的话,或者函数的话,就先不比较。
11 .map是不能跳出循环的,所以遍历的时候还是用for
特殊类型
1 .typeof NaN:number
判断传入数据的数据类型
function return_object_type(){
let re={}
"Boolean Number String Function Array Date RegExp Object Error".split(" ").forEach(function(e,i){
re[ "[object " + e + "]" ] = e.toLowerCase();
})
return re;
}
function _typeof(obj){
let object_type=return_object_type();
if(obj==null){
return String(obj)
}
if(typeof(obj)=='object'||typeof(obj)=='function'){
return object_type[Object.prototype.toString.call(obj)] ||'Object'
}else{
console.log('2')
if(isNaN(obj)){
return 'NaN'
}
return typeof(obj)
}
}
function diffArray(x,y,isTrue=false){
if(_typeof(x)=='array'&&_typeof(y)=="array"){
console.log('ok')
let la=x.length
let lb=y.length
if(la!==lb){
// 先检查数组数量是否一致
return false
}else{
// a->b
let diff=['string','number','Boolean','Data']
// 目前支持的比较对象->array,object需要扩展
if(isTrue){
// 进行严格比较
let num=0
for(let i=0;i<la;i++){
console.log(!!(_typeof(x[i])==_typeof(y[i]) && x[i]===y[i]))
if(_typeof(x[i])==_typeof(y[i]) && x[i]===y[i]){
num+=1
//做个标志位,最后比较相同的数标志和数组的长度是否一致。
}else{
return false;
}
}
if(num=la){
console.log(num)
return true;
}
}else{
// 非严格比较
for(let i=0;i<la;i++){
if(diff.includes(_typeof(x[i]))){
if(!y.includes(x[i])){
console.log('错误')
return `经过比较,y数据里面不包含x里面的${x[i]}`
// 直接返回不合格的数据
}else{
return true;
}
}else{
console.log('不在比较的范畴')
}
}
return false;
}
}
}else{
console.log(_typeof(x))
console.log('传入错误的数据类型')
}
}
整理下思路
1 .新的数据有添加
2 .新的数据有减少
3 .新的数据没有变化,只是调整了下顺序
4 .最后的比较结果是xx增加
1 .之前是观察数据,发现数据变化,进行渲染。有一些确认肯定是修改的操作,可不可以跳过前俩个阶段,直接让他去渲染。比如一些明显的合并操作,或者是切割操作,又或者是打乱顺序操作,又或者是排序操作。其实我每一次想要获得前后比较结果就是这些对应操作的操作参数。所以我就可以根据这些数据的变动操作来最大化的减少页面dom的更新操作
2 .关键就是怎么在这个数据上打个标记,来知道这个数组进行了那些操作。好像需要一些ast语法树的知识(但是这个需要静态分析代码,有一个更加简单的方法,就是自定义一些可能需要的函数),然后直接判断数据的操作情况,当发现这个数组使用了这个操作,那么就肯定是使用了这个方法,并且数组一定是发生了变化,然后在这个里面加一个钩子,直接触发页面变化。而且这些函数是需要框架本身自带的,这样才能保证是正确的,可能唯一变化的就是框架代码量可能变大。而节省的就是省去监察者模式,省去diff虚拟dom的时间
3 .所以可能根本就不需要监察者模式,就是下面这个东西
const observable = obj => new Proxy(obj, {set});
function set(target, key, value, receiver) {
Reflect.set(target, key, value, receiver)
print()
//触发函数,需要改变数据了。。。
}
const person = observable({
name: '张三',
age: 20
});
function print() {
console.log(`${person.name}, ${person.age}`)
}
person.name='asdf'