写一个js 递归demo
时间: 2024-02-05 11:04:28 浏览: 33
以下是一个递归函数的示例,用于计算一个数字的阶乘:
```javascript
function factorial(num) {
if (num === 0) {
return 1;
} else {
return num * factorial(num - 1);
}
}
console.log(factorial(5)); // 输出 120
```
这个函数首先检查传递的数字是否为0。如果是,它返回1,因为0的阶乘为1。否则,它递归调用自身,传递一个比原始数字小1的数字。这个过程会一直重复,直到传递的数字变成0,然后它开始返回每个递归调用的结果,通过将当前数字乘以返回值来计算阶乘。最终,函数返回计算出的阶乘值。
相关问题
js, requestAnimationFrame,实现平滑滚动demo
JavaScript(简称JS)是一种广泛应用于Web开发的脚本语言,它可以为网页添加动态功能和交互性。它是一种解释型语言,可以直接嵌入到HTML中,并由浏览器解释执行。
requestAnimationFrame是JavaScript提供的一个用于优化动画效果的方法。它通过浏览器的刷新频率来调用指定的回调函数,从而实现平滑的动画效果。相比于使用setTimeout或setInterval方法来实现动画,requestAnimationFrame能够更好地利用浏览器的资源,提供更流畅的动画效果。
下面是一个使用requestAnimationFrame实现平滑滚动的示例代码:
```javascript
function smoothScroll(targetPosition, duration) {
const startPosition = window.pageYOffset;
const distance = targetPosition - startPosition;
let startTime = null;
function animation(currentTime) {
if (startTime === null) {
startTime = currentTime;
}
const elapsedTime = currentTime - startTime;
const scrollY = ease(elapsedTime, startPosition, distance, duration);
window.scrollTo(0, scrollY);
if (elapsedTime < duration) {
requestAnimationFrame(animation);
}
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return c / 2 * t * t + b;
t--;
return -c / 2 * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
// 使用示例
const button = document.querySelector('.scroll-button');
button.addEventListener('click', () => {
smoothScroll(0, 1000); // 滚动到页面顶部,持续时间为1秒
});
```
上述代码中,smoothScroll函数接受两个参数:目标位置targetPosition和滚动持续时间duration。它通过计算起始位置startPosition、滚动距离distance和动画开始时间startTime来实现平滑滚动效果。在animation函数中,使用ease函数来计算当前滚动位置scrollY,并通过window.scrollTo方法实现滚动效果。如果动画未结束,则通过requestAnimationFrame方法递归调用animation函数,实现连续的帧动画效果。
深拷贝浅拷贝的demo
深拷贝和浅拷贝都是复制一个对象,区别在于复制后的对象与原对象是否共享同一内存地址。深拷贝会复制出一个新的对象,与原对象不共享内存地址,而浅拷贝只是复制了一个指向原对象的引用,两个对象共享同一内存地址。
以下是深拷贝和浅拷贝的示例代码:
```javascript
// 浅拷贝示例
let obj1 = {
name: 'Alice',
age: 20,
skills: ['JavaScript', 'Vue', 'React']
}
let obj2 = Object.assign({}, obj1) // 使用 Object.assign() 方法进行浅拷贝
obj2.age = 21 // 修改 obj2 的 age 属性
obj2.skills.push('Angular') // 修改 obj2 的 skills 属性
console.log(obj1) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
console.log(obj2) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到,修改了 obj2 的属性后,obj1 的 skills 属性也被修改了,这是因为浅拷贝只是复制了一个指向原对象的引用,两个对象共享同一内存地址。
// 深拷贝示例
let obj3 = {
name: 'Alice',
age: 20,
skills: ['JavaScript', 'Vue', 'React']
}
let obj4 = JSON.parse(JSON.stringify(obj3)) // 使用 JSON.parse() 和 JSON.stringify() 方法进行深拷贝
obj4.age = 21 // 修改 obj4 的 age 属性
obj4.skills.push('Angular') // 修改 obj4 的 skills 属性
console.log(obj3) // { name: 'Alice', age: 20, skills: [ 'JavaScript', 'Vue', 'React' ] }
console.log(obj4) // { name: 'Alice', age: 21, skills: [ 'JavaScript', 'Vue', 'React', 'Angular' ] }
// 可以看到,修改了 obj4 的属性后,obj3 的属性没有被修改,这是因为深拷贝会复制出一个新的对象,与原对象不共享内存地址。
```
需要注意的是,深拷贝虽然可以解决浅拷贝的问题,但是由于深拷贝会递归地复制对象的所有属性,所以可能会导致性能问题,特别是在处理大型复杂对象时。因此,需要根据具体情况选择合适的拷贝方法。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)