Page 1
文本框输入，p标签的内容自动变成文本框的内容
/**
* 使用addEventListener
* 首先获取标签和文本框的元素，然后为文本框添加一个监听器，在发生改变时，更改p标签的文本
*
**/
<input type="text" id="onchange" value="input">
<p id="on_change">input</p>
<script>
const input = document.getElementById('onchange');
const p = document.getElementById('on_change');
input.addEventListener('input', function () {
p.textContent = input.value;
});
</script>
/**
* 使用onchange和oninput
* onchange：在修改失去焦点时触发
* oninput： 会在元素发生变化时立即触发
*
**/
<div id="div1"><!--非vue-->
JS的onchage事件：
<input type="text" id="t1" onchange="p1()">
<p id="pp">原始值</p>
</div>
<script>
function p1(){
var lb_p=document.getElementById("pp");
var txt_t1=document.getElementById("t1").value;
lb_p.innerHTML=txt_t1;}
</script>
<div id="div2"><!--非vue-一些ie低版本不支持-->
JS的oninput事件：
<input type="text" id="t2" oninput="p2()">
<p id="pp2">原始值</p>
</div>
<script>
function p2() {
var lb_p=document.getElementById("pp2");
var txt_t2=document.getElementById("t2").value;
lb_p.innerHTML=txt_t2;
}
</script>
oninput 和 onchange 是事件属性，addEventListener 是方法，可以添加多个事件监听器
个人理解：
oninput 和 onchange是直接的事件，触发这个事件时调用他指定的方法，
而 addEventListener 添加的监听器中，第一个参数指定事件，后面的参数是调用的方法。
/**
* 在 react 中实现
*
**/
function App() {
const [text, setText] = useState('');
const handleChange = (event) => {
setText(event.target.value);
};
return (
<div>
<input type="text" value={text} onChange={handleChange} />
<p>{text}</p>
</div>
);
}数组与树的相互转换
/** 数组结构数据 */
const arrayData = [
{ id: 2, title: '中国', parent_id: 0 },
{ id: 3, title: '广东省', parent_id: 2 },
{ id: 4, title: '广州市', parent_id: 3 },
{ id: 5, title: '天河区', parent_id: 4 },
{ id: 6, title: '湖南省', parent_id: 2 },
{ id: 1, title: '俄罗斯', parent_id: 0 }
]
function getChildren(data, result, pid) {
for (const item of data) {
if (item.parent_id === pid) {
const newItem = { children: [], ...item }
result.push(newItem)
getChildren(data, newItem.children, item.id)
}
}
}
function arrayToTree(data, pid) {
let result = []
getChildren(data, result, pid)
return result
}
console.log(arrayToTree(arrayData, 0));/** 树状形结构数据treeData */
const treeData = [
{
id: 2, title: '中国', parent_id: 0,
children: [
{
id: 3, title: '广东省', parent_id: 2,
children: [
{
id: 4, title: '广州市', parent_id: 3,
children: [
{ id: 5, title: '天河区', parent_id: 4 }
]
}
]
},
{ id: 6, title: '湖南省', parent_id: 2 }
]
},
{ id: 1, title: '俄罗斯', parent_id: 0, },
]
function treeToList(data) {
let res = [];
const dfs = (tree) => {
tree.forEach((item) => {
if (item.children) {
dfs(item.children);
delete item.children;
}
res.push(item);
});
};
dfs(data);
return res;
}手写promise.all
/**
* @param {Array<Function>} functions
* @return {Promise<any>}
*/
var promiseAll = function(functions) {
return new Promise((resolve,reject)=>{
if(functions.length===[]){
resolve([]);
return
}
const res=new Array(functions.length).fill(null)
let resolvedCount=0
functions.forEach(async(el,idx)=>{
try{
const subResult=await el()
res[idx]=subResult
resolvedCount++
if(resolvedCount===functions.length){
resolve(res)
}
}catch(err){
reject(err)
}
})
})
};
/**
* const promise = promiseAll([() => new Promise(res => res(42))])
* promise.then(console.log); // [42]
*/大数相加
let a = "9007199254740991";
let b = "1234567899999999999";
function add(a ,b){
//取两个数字的最大长度
let maxLength = Math.max(a.length, b.length);
//用0去补齐长度
a = a.padStart(maxLength , 0);//"0009007199254740991"
b = b.padStart(maxLength , 0);//"1234567899999999999"
//定义加法过程中需要用到的变量
let t = 0;
let f = 0; //"进位"
let sum = "";
for(let i=maxLength-1 ; i>=0 ; i--){
t = parseInt(a[i]) + parseInt(b[i]) + f;
f = Math.floor(t/10);
sum = t%10 + sum;
}
if(f == 1){
sum = "1" + sum;
}
return sum;
}Last updated