前端面试题目,判断是不是object,map和objct的区别,ref,reactive,

60 阅读4分钟

判断是不是object

标记位,数字

一元运算符+数字

进制大于了32位,有符号位

字符串批量转换成为整数

parseInt第二个参数的取值范围

2-36

if条件判断

宽松比较

隐式转换

NaN

bigInt,Symbol

null,undefined

布尔类型和其他类型相等比较

0,undefined,number

1.false2.转成为数字true

NaN

bigInt,Symbol

null,undefined

instance of 比 typeof慢一倍

getOwnropertyDescriptor

判断是不是数字NaN

Map 与 Object 的区别

ES6中Map相对于Object对象有几个区别:

  • Object的键只能是字符串或者Symbol,Map的键值可以是任意值
  • Map的键值对数量可以通过size属性获取,Object则需要通过Object.keys(obj).length类似的方式获取
  • Object有自己的原型,原型链上的键名可能与对象的键名产生冲突。除非我们使用Object.create(null)创建一个没有原型的对象;
  • Map的键值是有序的,数据的排序是根据用户push的顺序进行排序的, 而Object实例中key,value的顺序就是有些规律了, (他们会先排数字开头的key值,然后才是字符串开头的key值);

比如:

{'1': 'a','3': 'c','2': 'b'}

会自动调整

js
复制代码{
'1':'a',
'2':'b',
'3':'c'
}

可以遍历一遍打印 , 很容易看到结果,
而map不会,原来定义是什么顺序就是什么顺序

new Map([    ['1','a'],
    ['3','c'],
    ['2','b'],
])

Ref

包装基本数据类型的响应式引用,包装复杂类型,只不过底层还是由reactive的方式实现的,优点是轻松包装基本数据类型, ref是Vue 3中的一个简单响应式API,用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型,只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型,并且具有清晰的访问和更新方式。

用法示例

import { ref } from 'vue';

const count = ref(0);

// 访问数据

console.log(count.value); // 输出 0

// 更新数据

count.value = 1;

在上面的示例中,我们首先导入了ref函数,然后使用它创建了一个名为count的响应式引用。我们可以像访问普通变量一样访问它,并且当我们更新count时,相关的UI会自动更新。

优势

明确的数据访问语法(.value)

适用于包装基本数据类型,如数字、字符串等。

更容易阅读和理解,适合处理简单的响应式数据。

reactive

reactive创建包装对象的响应式引用,用于创建响应式对象,而不仅仅是基本数据类型,

Reactive

与ref不同,reactive是用于创建包装对象的响应式引用。这意味着它可以用于创建响应式对象,而不仅仅是基本数据类型。它的主要优势是在处理复杂数据结构时更加灵活,能够包装整个对象。

用法示例

reactive用于创建对象的响应式引用,创建响应式对象,

import { reactive } from 'vue';

const user = reactive({

name: 'John',

age: 30,

});

// 访问数据

console.log(user.name); // 输出 'John'

// 更新数据

user.age = 31;

在这个示例中,我们使用reactive来创建了一个名为user的响应式对象。我们可以像访问普通对象属性一样访问和更新user的属性,Vue会自动追踪并处理数据变化。

优势

适用于包装复杂的对象和数据结构,包括嵌套对象。

不需要额外的语法(.value),直接访问属性。

更适合处理多个相关属性的情况,如表单字段或组件状态。

Ref与Reactive的区别

数据类型:ref用于包装基本数据类型(如数字、字符串),而reactive用于包装对象。

访问数据:使用ref时,需要通过.value来访问数据,而reactive则允许直接访问属性。

数据的包装:ref返回一个包装对象,而reactive返回一个包装后的对象。

无法通过return false取消默认行为

WebAssembly,边缘计算,serverless,微前端

跨端:Flutter,RN,Weex,Hybrid App

zhuanlan.zhihu.com/p/71064826

weex是用客户端的native的能力去做了部分的浏览器得到工作,