const App = () => {
const [data, setData] = useState(0)
console.log(`start${data}`);
console.log(1);
const aa = () => {
setData(pre => pre + 1)
console.log(99900);
}
console.log(2);
useEffect(() => {
console.log(111);
}, [data])
console.log(`awe${data}`);
return (
<div>
<span>{data}</span>
<button onClick={aa}>ddd</button>
</div>
)
}
解析：
首次执行组件，会从上到下按照事件循环来执行。先打印第三行，再第四行，再第十行。同步代码执行完成了，就开始渲染页面。页面渲染完了，就开始执行useEffect里的回调函数。打印第13行。又因为依赖项是data, 那么每当data值相较于之前发生改变了，回调函数都要重新执行。 此时，所有都已经完成了。
而当我们点击按钮时，会去调用aa函数，开始执行第6，7行。本来所有事情都已经完成了。但是setData的这个异步函数的出现会在下一轮改变data的值。既然数据要发生改变，react又是基于数据驱动视图，那么组件就要重新执行一次，并且data的值相较于上一轮++， 此时data = 1。开始按顺序打印第3，4，10，15。然后渲染视图。当视图渲染完，useEffect发现data不是1了 ，就会打印第13行。至此，才算完成。
const App = () => { const [data, setData] = useState(0) return (
解释下pre是什么，为什么setData(pre => pre++)}就不能实现点击按钮实现当前页面的值加1
pre 是一个在匿名函数内部定义的参数，该函数作为 setData 方法的参数。当你点击按钮触发 onClick 事件时，setData 的回调函数会被调用，并且它接收一个参数，这个参数就是当前 data 的值。
setData(pre => pre++) 不能实现点击按钮后state加1的原因在于，pre++ 是一个后自增运算符，它首先返回 pre 的当前值，然后才增加 pre 的值。但是，由于函数体内部的 pre 是一个参数，对它的自增操作不会影响到外部的 data state。
setData(pre => pre + 1)， setData接受的是一个箭头函数，箭头函数也得要调用才能执行吧？
实际上，在React中，当你调用 setData 方法并将这个箭头函数作为参数传递时，React的内部机制会负责调用这个函数，并使用当前状态的值作为参数。
回调函数
回调函数的执行是由外部函数来驱动和控制的，而非通过直接调用其自身名字的方式来执行。在JavaScript异步编程中，回调函数常常在异步操作完成时被自动调用，这也给人一种感觉像是它“不用调用就能执行”，但实际上，它的执行是由底层的异步机制安排和触发的。
回调函数是一种在其他函数内部定义或传递的函数，它会在特定的事件或条件满足时被调用。在编程中，回调函数是一种设计模式，使得一个函数能够接收并执行另一个函数作为参数。这样做的好处是可以将一段代码作为参数传递，以便在未来的某个时刻执行，并且允许在执行时根据实际情况传递必要的上下文信息。
jsonp通过script里的src属性，将回调函数作为src的值进行跨域，这种说法对吗？具体解释下
在JSONP实现跨域时，不是将回调函数作为src属性的值，而是将回调函数的名字作为查询参数传递给src属性所指向的远程服务器API。例如，假设有一个跨域服务器接口example.com/api/data，它支…
在客户端，我们会创建一个
<script>
function handleResponse(data) {
// 处理返回的数据
console.log(data);
}
</script>
<script src="https://example.com/api/data?callback=handleResponse"></script>
当浏览器加载这个
handleResponse({ "key": "value", ... });
浏览器执行返回的脚本，实际上是调用了我们在页面上定义好的handleResponse函数，并将数据作为参数传入。这样就实现了跨域数据的获取。
在react中，初始化一个值为0的useState。我希望每个5秒钟，useState + 1。
const App = () => {
const [a, setA] = useState(0)
console.log(a);
useEffect(() => {
const aa = setInterval(() => {
setA(pre => pre + 1)
}, 5000)
return () => {
clearInterval(aa)
}
}, [])
return (
<div>
<span>{a}</span>
</div>
)
}
const App = () => {
const [a, setA] = useState(0)
console.log(a);
useEffect(() => {
const aa = setTimeout(() => {
setA(pre => pre + 1)
}, 5000)
return () => {
clearTimeout(aa)
}
}, [])
return (
<div>
<span>{a}</span>
</div>
)
}
w3c标准，
是万维网联盟的缩写，它是一个国际性的组织，旨在制定和推广Web技术标准，确保网络技术的互操作性和可访问性。W3C的标准对于开发者、浏览器厂商以及其他相关组织来说都非常重要，因为它们提供了共同遵守的规则和指南，以确保Web内容和应用程序能够在不同的设备和平台上保持一致性和可用性。
主要W3C标准
- HTML (HyperText Markup Language) : 用于创建网页和网页应用的标准标记语言。HTML5是当前的推荐版本，它包括了更多的语义元素和API。
- CSS (Cascading Style Sheets) : 用于描述HTML文档的样式和布局的样式表语言。CSS3引入了响应式设计、动画、过渡等新特性。
- JavaScript: 一种脚本语言，用于增强网页的交互性。虽然JavaScript不是由W3C直接管理，但ECMAScript语言规范（由Ecma International管理）是W3C通过ECMA国际组织参与制定的。
- XML (eXtensible Markup Language) : 一种标记语言，允许用户自定义标签，用于数据的存储和传输。
- Web Accessibility Initiative (WAI) : 旨在提高网络内容的可访问性，使得残疾人也能够访问和使用网络资源。
- DOM (Document Object Model) : 一种跨平台和语言独立的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
- Web Performance and Scalability: 包括性能测试和优化的最佳实践，以及如何构建可扩展的Web应用。
- Web Security: 包括HTTPS、内容安全策略（CSP）、跨站脚本（XSS）防护等，旨在保护用户和数据安全。
- Semantic Web: 旨在通过给数据添加丰富的含义，使得数据可以被更好地理解，从而实现更智能的搜索和数据分析。
如何遵循W3C标准
- 使用有效的HTML和CSS: 确保你的代码遵循W3C的HTML和CSS规范，并通过W3C的验证服务来检查代码的有效性。
- 确保可访问性: 遵循WCAG（Web Content Accessibility Guidelines）来确保你的网站对所有用户都是可访问的。
- 响应式设计: 使用CSS媒体查询和其他响应式设计技术来确保你的网站在不同设备上都能良好显示。
- 性能优化: 遵循W3C的性能最佳实践，比如减少HTTP请求、优化图片和脚本加载等。
- 安全性: 使用HTTPS、CSP等安全措施来保护你的网站和用户数据。
遵循W3C标准不仅有助于提高网站的质量和用户体验，还能够确保网站在未来的网络环境中保持兼容性和可维护性。
h5语义化，好处
HTML5 语义化是指在编写HTML5代码时，使用具有明确语义的标签来组织和展示网页内容。这种方法不仅有助于提高代码的可读性和可维护性，还能改善网页的访问性和搜索引擎优化（SEO）。以下是HTML5语义化的一些好处：
1. 提高代码的可读性和可维护性23451
使用语义化的标签可以让开发者更容易理解网页的结构，因为每个标签都有其特定的意义。例如，
标签表示页面中的一篇文章， 标签表示导航链接部分。这种清晰的结构使得代码更容易编写和维护。2. 改善网页的访问性12345
语义化标签有助于屏幕阅读器等辅助技术更好地理解网页内容，从而为视障用户提供更好的网页体验。例如，
、、 等标签可以帮助屏幕阅读器确定内容的开始和结束，以及不同部分之间的关系。3. 增强搜索引擎优化（SEO）4523
搜索引擎爬虫依赖于HTML标签来确定网页内容的结构和重要性。使用语义化标签可以帮助搜索引擎更好地索引网页，提高网页在搜索结果中的排名。例如，
到
标签的层次结构可以帮助搜索引擎确定内容的标题和子标题，而 标签可以提供关于网页的额外信息。
4. 有利于跨设备兼容性2345
语义化标签可以帮助网页在不同设备上更好地展示，因为它们提供了一种清晰的内容结构，使得网页可以更容易地被移动设备、桌面浏览器以及其他用户代理所解析和渲染。
5. 促进结构化数据的标记43
通过使用语义化标签，开发者可以更容易地标记网页上的结构化数据，这有助于搜索引擎和其他应用程序更好地理解网页内容，并可能用于富结果（rich results）或其他数据驱动的应用。
6. 减少对CSS的依赖12345
在没有CSS的情况下，使用语义化标签的网页仍然可以呈现出清晰的结构。这意味着即使在样式丢失的情况下，用户仍然可以获取网页的主要内容和结构信息。
总的来说，HTML5语义化是一种最佳实践，它有助于创建更加清晰、可访问和可维护的网页。通过使用正确的标签来组织内容，开发者可以提高网页的质量和用户体验，同时也有助于提高网页在搜索引擎中的可见性。
proxy
1, "proxy" 通常指的是使用HTTP代理来绕过跨域请求的限制。由于浏览器的同源策略，直接从浏览器向不同源（协议、域名或端口不同）的服务器发送请求会受到限制。设置一个代理服务器可以帮助我们绕过这个限制，使得开发过程中的API调用更加顺畅。
2, 通过引入Proxy对象来实现对原对象行为的拦截和定制。Proxy可以让你创建一个代理对象，这个代理对象可以监听并拦截对原始对象的操作，包括属性的读取、赋值、删除、查询等。
给一个对象的属性做一些拦截，属性只读，或者是给某个属性设置为不可枚举，或者是不能被for in遍历出来，有什么方法
1，Object.defineProperty
let obj = {};
Object.defineProperty(obj, 'readOnlyProp', {
configurable: false,
enumerable: true, // 是否可枚举，默认为true
writable: false, // 设置为false表示只读
value: 'some value' // 属性值
});
obj.readOnlyProp = 'trying to change'; // 试图修改只读属性不会生效
2，使用 Proxy 对象（ES6及以上版本） ： Proxy可以提供更全面的拦截功能，包括但不限于get、set、deleteProperty、ownKeys等。
let target = { readOnlyProp: 'read only' };
let handler = {
get: function(target, prop, receiver) {
if (prop === 'readOnlyProp') {
return Reflect.get(target, prop, receiver);
}
},
set: function(target, prop, value, receiver) {
if (prop === 'readOnlyProp') {
throw new TypeError('Cannot assign to read only property 'readOnlyProp'');
}
return Reflect.set(target, prop, value, receiver);
},
ownKeys: function(target) {
return Reflect.ownKeys(target).filter(key => key !== 'nonEnumProp');
}
};
let proxy = new Proxy(target, handler);
proxy.readOnlyProp; // 可以读取
proxy.readOnlyProp = 'new value'; // 抛出错误
for (let key in proxy) {
console.log(key); // 如果nonEnumProp被过滤，则不会在循环中出现
}
every buffer
在前端开发中，特别是在与数据流和性能优化相关的工作中，我们可能会遇到需要处理大量数据的情况
在前端开发中，处理二进制数据的情况相对较少，但是当你需要处理大量数据或者与硬件设备交互时，了解如何在浏览器中操作二进制数据是非常有用的。通过使用ArrayBuffer和Typed Arrays，你可以在客户端实现类似于Node.js中Buffer的功能。
und和null在内存中表现是一致的吗？
undefined
undefined是一个原始值，它表示变量已经被声明，但没有被赋值。在JavaScript中，所有的变量和属性在声明时都会被初始化为undefined，直到它们被赋予一个具体的值。undefined也是全局对象（在浏览器中是window对象，在Node.js中是global对象）的一个属性，指向一个特殊的值。
在内存中，undefined实际上并不占用任何空间，因为它是一个表示“无”的值。当你声明一个变量但不初始化它时，JavaScript引擎会自动将其设置为undefined。
let x;
console.log(x); // 输出: undefined
null
null也是一个原始值，但它表示的是有意为之的“空”或“无”。null通常用于表示一个变量或属性是你故意设置为不存在的，而不是因为还没有被赋值。
在内存中，null同样不占用任何实际的空间。它只是一个表示空引用的值，用来表示一个变量指向的是一个空对象引用。
let y = null;
console.log(y); // 输出: null
总结
虽然undefined和null在JavaScript中都表示“没有值”，但它们在内存中的表现是一致的，因为它们都是原始值，不占用实际的空间。
1+'1' = 数字1转为字符串1，中间是怎么转的？调用了什么方法
- 调用数字的 toString 方法，将数字转换为字符串。对于基本数值，toString 方法会返回一个表示该数值的字符串。
- 一旦数字被转换成字符串，JavaScript引擎就会将两个字符串拼接起来。字符串拼接是通过调用字符串的 concat 方法或者使用 + 运算符隐式完成的。
let a = '45'
let b = '5'
let c = '45' - '5'
console.log(a > b); // false
console.log(c); // 40
console.log(typeof c); // number
变量提升，严格模式下会提升吗？
变量提升（hoisting）是一个机制，其中变量声明会被移动到当前作用域的顶部。
非严格模式下
var , let, const都会发生变量提升。但是由于let和const存在暂时性死区，即在变量声明之前，该变量是不可访问的，形成了一个“死区”。
console.log(a) // und
var a = 10
console.log(b) // error
let b = 10
严格模式
在严格模式下，变量声明仍然会被提升，但是如果你尝试在变量声明之前访问该变量，将会抛出一个ReferenceError。这避免了非严格模式下可能出现的不确定性，因为你不能访问尚未声明的变量。之所以出现这种问题，是因为var声明的变量以及function生命的函数形成了暂时性死区。
例如：
"use strict";
console.log(x); // 抛出: ReferenceError: x is not defined
var x = 5;
"use strict";
console.log(foo()); // 抛出 ReferenceError: foo is not defined
function foo() {
return 'bar';
}
函数表达式和函数声明，提升的效果是一样的么？
函数声明的提升
当JavaScript引擎解析代码时，它会将函数声明提升到当前作用域的顶部。这意味着你可以在函数声明之前调用该函数，因为无论函数在代码中的位置如何，它都像是被放置在作用域的顶部一样。
myFunction(); // 调用没有问题，输出 "Hello!"
function myFunction() {
console.log("Hello!");
}
在上面的例子中，即使myFunction在调用之后才被声明，它仍然可以正常工作，因为函数声明被提升到了作用域的顶部。
函数表达式的提升
函数表达式，特别是那些赋值给变量的表达式，只有变量声明部分会被提升，而不是整个表达式（包括函数体）。这意味着你可以在声明之前访问变量，但它将是一个未赋值的引用（在严格模式下会抛出错误）。
myFunction(); // 抛出 TypeError: myFunction is not a function
var myFunction = function() {
console.log("Hello!");
};
new关键字返回的对象的原型和创建的空对象的原型一样吗？
在JavaScript中，使用new关键字创建对象时，实际上会经历以下几个步骤：
- 创建一个空的JavaScript对象（即{}）。
- 将这个新对象的内部[[Prototype]]（也就是__proto__）链接到构造函数的prototype属性。
- 将构造函数的this绑定到新对象上，并执行构造函数的代码。
- 如果构造函数返回一个对象，则返回该对象；否则，返回步骤1创建的新对象。
因此，使用new关键字创建的对象的原型（proto）会指向构造函数的prototype属性。这意味着，这个对象继承了构造函数原型上定义的所有方法和属性。
另一方面，如果你手动创建一个空对象，比如{}或者Object.create(null)，这个对象的原型也是Object.prototype。这是因为在JavaScript中，所有对象的原型链最终都会指向Object.prototype。
所以，使用new关键字创建的对象和手动创建的空对象在原型上是相同的，它们都继承自Object.prototype。但是，使用new创建的对象还会额外拥有构造函数原型上定义的属性和方法
如何让一个类数组直接使用数组的方法，通过原型链或者改变this指向。
在JavaScript中，类数组对象（拥有一个数字索引的集合，但不是数组实例的对象）不能直接使用数组的方法，因为它们不是Array的实例。不过，你可以通过几种方法让类数组对象使用数组的方法：
方法1：使用Array.prototype上的方法
你可以将Array.prototype上的方法通过call、apply或者bind方法应用到类数组对象上。例如：
let arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
// 使用Array.prototype.join方法
let result = Array.prototype.join.call(arrayLike, ', ');
console.log(result); // 输出: "a, b, c"
方法2：使用Array.from方法
Array.from方法可以创建一个新数组，其元素是从类数组对象中取出的。这个方法还可以用来执行自定义映射操作。
let arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
// 将类数组对象转换为新数组
let array = Array.from(arrayLike);
console.log(array); // 输出: ["a", "b", "c"]
在什么场景下，能拿到类数组结构
类数组结构（Array-like structure）是指那些具有以下特征的对象：
- 拥有一个length属性，且该属性是一个非负整数。
- 拥有以数字为键名的属性，且这些键名是连续的整数，从0开始。
在JavaScript中，你可以在多种场景下遇到类数组结构：
1. DOM NodeLists
当你在浏览器中使用诸如document.getElementsByTagName、document.querySelectorAll或者document.getElementsByClassName等DOM API方法时，你会得到一个NodeList对象。这些对象具有索引属性，可以通过数字索引访问其中的DOM元素，但它们不是数组。
let elements = document.getElementsByTagName('div');
console.log(elements.length); // 返回页面中`<div>`元素的数量
console.log(elements[0]); // 获取第一个`<div>`元素
2. 函数的参数对象（arguments）
在JavaScript函数内部，arguments对象包含了传递给该函数的所有参数。它是一个类数组对象，可以通过索引访问参数，但没有数组的方法。
function sum(a, b, c) {
console.log(Array.prototype.slice.call(arguments)); // 转换为数组并求和
return a + b + c;
}
3. 字符串对象
尽管字符串不是数组，但它们具有可索引的字符和length属性。因此，字符串可以被视为类数组结构。
let str = 'Hello';
console.log(str.length); // 输出: 5
console.log(str[1]); // 输出: "e"
编码值
const a = 'a'
const b = 'b'
console.log(a < b); // true
const c = 'ab'
const d = 'b'
console.log(c < d); // true
const e = 'ab'
const f = 'a1'
console.log(e < f); // false
const g = 'A'
const h = 'a'
const i = '1'
console.log(g.charCodeAt(0)); // 65
console.log(h.charCodeAt(0)); // 97
console.log(i.charCodeAt(0)); // 49
isNaN
如果想判断一个字符串是一个纯数字的字符串，可以使用
console.log(isNaN('1')) // true
console.log(isNaN('tang')) // false
引用类型始终不相等
if (strs == ["",""]) {
return [["",""]]
}
上面那段代码，为什么过不了下面这个测试用例？
输入
：strs =
["",""]
输出
：[[""]]
预期结果
：[["",""]]
因为
console.log([""] == [""]); //false
console.log([""] === [""]); // false
Line 12 in solution.js const newValue = map.get(keys).push(str) ^
TypeError: map.get(...).push is not a function
if (!map.has(keys)) {
map.set(keys, [str])
} else {
const newValue = map.get(keys).push(str)
map.set(keys, newValue)
}
不能对一个相同的keys重复创建
else {
map.get(keys).push(str)
}
这样既可，可以延续。
深拷贝
在JavaScript中，深拷贝意味着创建一个新的对象，它与原始对象具有相同的属性和值，但是所有的引用类型属性也被递归地复制。以下是一些常用的深拷贝方法：
1. 使用 JSON.parse(JSON.stringify(object))
这是最简单的深拷贝方法之一，它通过将对象转换为JSON字符串，然后再解析回对象来实现。这种方法适用于简单的对象，不能处理循环引用、函数、undefined、Date 对象等特殊情况。
const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));
2. 使用 Object.assign()
Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它可以用来进行深拷贝（要求对象里的值时基本数据类型），
const original = {
a: 1,
b: {
c: 2
}
};
const copy = {};
Object.assign(copy, original);
copy.a = 90
copy.b.c = 10
console.log(original, copy);
// {a: 1, b: {c: 10}}
// {a: 90, b: {c: 10}}
3.[...arr] or {...obj}
深拷贝（要求对象里的值时基本数据类型），
const original = {
a: 1,
b: {
c: 2
}
};
const copy = {
...original
}
copy.a = 90
copy.b.c = 10
console.log(original, copy);
// {a: 1, b: {c: 10}}
// {a: 90, b: {c: 10}}
4. 使用递归复制
你可以编写一个递归函数来遍历对象的所有属性，并递归地复制每个属性值。这种方法可以处理各种类型的数据，包括循环引用和特殊对象。
我在写一道算法，给定一个不含重复数字的数组 nums ，返回其 所有可能的全排列 。你可以 按任意顺序 返回答案。 为什么要 res.push([...arr]) 可以成功 直接res.push(arr) 会失败？
在JavaScript中，数组是引用类型。这意味着当你将一个数组赋值给另一个变量时，你实际上是在复制数组的引用，而不是创建数组的一个副本。因此，如果你直接使用 res.push(arr)，你将把对同一个数组的引用添加到 res 数组中。因为数组里的值时基本数据类型，所以使用[...arr]可以看成是深拷贝
在你的 dfs 函数中，arr 是一个局部变量，它在每次递归调用时都会被修改。如果你直接 push 这个 arr，那么在后续的递归调用中对 arr 的修改会影响到之前已经添加到 res 中的所有 arr 引用。这是因为它们都指向同一个数组对象。最终，所有的排列都会变成最后一次递归调用时 arr 的状态，导致结果不正确。
为了解决这个问题，你需要在 push 之前创建 arr 的一个副本。这样，每次 push 的都是一个新的数组对象，它们之间相互独立，不会相互影响。使用扩展运算符 ... 是创建数组副本的一种简便方法：
res.push([...arr]);
这行代码会创建 arr 的一个浅拷贝，并将其作为一个新的数组对象添加到 res 中。现在，每次递归调用都会创建一个新的副本，并且不会影响其他排列。这样，你就可以得到正确的全排列结果。
总结来说，res.push([...arr]) 可以成功是因为你创建了 arr 的一个新副本并将其添加到 res 中，从而避免了由于引用类型带来的副作用。直接 res.push(arr) 会失败，因为它会导致所有的排列引用同一个数组对象，从而在后续的递归调用中相互影响。
const a = [1, 2, 3]
const b = [...a]
b.push(2)
console.log(a, b); // [1,2,3], [1,2,3,2]
