js基础文档

标签：const log 基础 console let var 文档 js name

数据类型

数据分为基本数据类型(String, Number, Boolean, Null, Undefined，Symbol)和对象数据类型。

基本数据类型的特点：直接存储在栈(stack)中的数据
引用数据类型的特点：存储的是该对象在栈中引用，真实的数据存放在堆内存里

引用数据类型在栈中存储了指针，该指针指向堆中该实体的起始地址。当解释器寻找引用值时，会首先检索其在栈中的地址，取得地址后从堆中获得实体。

深拷贝和浅拷贝的区别

1.浅拷贝只复制对象的顶层属性（顶层属性"通常指的是对象直接拥有的那些属性，而不是通过引用指向的其他对象或数组，对于一个包含多个层级的对象，浅拷贝会复制这个对象本身的属性（第一层属性），但如果是属性值为引用类型（比如对象或数组），它只会复制这些引用类型值的引用，而不是它们的实际内容。这意味着原始对象和拷贝对象将共享这些引用类型值。）

2.深拷贝会复制对象的所有顶层属性

3.浅拷贝的速度通常比深拷贝快

=和区别

==（相等运算符） ：

进行值的比较，但在比较前会进行类型转换，也被称为“抽象相等比较”。
如果比较的两个值类型不同，JavaScript会尝试将它们转换成相同的类型再进行比较。
例如，数字5和字符串"5"用 ==比较会返回 true，因为JavaScript会尝试将字符串"5"转换成数字5再进行比较。、

===（恒等运算符） ：

同时进行值和类型的比较，也被称为“严格相等比较”。
如果比较的两个值类型不同，===会直接返回 false，不会进行类型转换。
例如，数字5和字符串"5"用 ===比较会返回 false，因为它们的类型不同。

闭包

方法里返回一个方法

存在的意义:1.延长变量的生命周期，2.创造私有环境

应用场景：

1.防抖和节流

防抖（多次触发，只执行最后一次）

高频率触发的事件,在指定的单位时间内，只响应最后一次，如果在指定的时间内再次触发，则重新计算时间
防抖类似于英雄联盟回城6秒，如果回城中被打断，再次回城需要再等6秒。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>防抖函数</title>
</head>
<body>
    <div>
        <label for="inp"></label><input type="text" id="inp">
    </div>
    <script>
        //封装防抖函数
        function debounce(fn,time){
            // 创建一个标记用来存放定时器的返回值
            let timeout=null
            return function(){
                // 每当用户触发input事件  把前一个 setTimeout 清楚掉
                clearTimeout(timeout)
                // 然后又创建一个新的 setTimeout, 这样就能保证输入字符后等待的间隔内 还有字符输入的话，就不会执行 setTimeout里面的内容
                timeout=setTimeout(()=>{
                    // 这里进行防抖的内容
                    fn()
                },time)
            }
        }
        // 获取inpt元素
        const inp=document.getElementById('inp');
        // 测试防抖临时使用的函数
        function sayHi(){
            console.log('防抖成功')
        }
        // 给inp绑定input事件  调用封装的防抖函数  传入要执行的内容与间隔事件 
        inp.addEventListener('input',debounce(sayHi,1000))
    </script>
</body>
</html>

节流（规定时间内，只触发一次）

高频率触发的事件,在指定的单位时间内，只响应第一次
节流类似于英雄联盟里的英雄平A 一定是内点击多次只进行攻击一次

原型和原型链

异步函数

setTimeout

setTimeout() 是属于 window 的方法，该方法用于在指定的毫秒数后调用函数或计算表达式。

setTimeout(要执行的代码, 等待的毫秒数)

clearTimeout

clearTimeout() 方法可取消由setTimeout方法设置的定时操作。

clearTimeout() 方法的参数必须是由 setTimeout() 返回的 ID 值。

const myVar;
 
function myFunction() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
}
 
function myStopFunction() {
    clearTimeout(myVar);
}

ES6新特性

块级作用域的变量声明：let、const

let a=10;
const b=20;

箭头函数

const add=(x,y)=>x+y;

模板字符串

使用反引号（```）创建多行字符串和内嵌表达式

const name=`Alice`
const greeting=`hello,${name}!`

解构赋值

允许从数组或对象中提取数据，并将其赋值给变量

let [x,y]=[1,2]
let { name , age } = { name: 'Alice',age: 25}

默认参数

允许为函数参数指定默认值。

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

展开运算符

用于展开数组或对象的元素

let arr=[1,2,...[3,,4,5]] //[1, 2, 3, 4, 5]
// 对象展开
let obj1 = { a: 1, b: 2 }
let obj2 = { ...obj1, c: 3 }

简写对象属性和方法

可以简洁地定义对象的属性和方法

let x = 1, y = 2
let obj = { x, y, greet() { console.log('Hello'); } }

模块化

使用 export和 import关键字支持模块化开发


// 导出模块
export const pi = 3.14;
export function add(a, b) { return a + b; }

// 导入模块
import { pi, add } from './math';

类

引入了基于类的面向对象编程语法

class Person {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hello, ${this.name}!`);
  }
}

let person = new Person('Alice');
person.greet();

Promise

用于处理异步操作的更强大和灵活的方式

then函数异步执行

let promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 成功 */) {
    resolve('Success');
  } else {
    reject('Error');
  }
});
promise.then(result => console.log(result)).catch(error => console.log(error));

交换两值变量(不借助第三变量)

let a=1
let b=1
[a,b]=[b,a]   //解构知识点

快速去重

let arr=[1,2,2,3,4,5]
let item=[...new Set(arr)]
console.log(item)

面试题

同步和异步区别

基础面试题

字符串拼接问题

当使用加号（+）操作符连接一个数字和一个字符串时，JavaScript会将数字转换为字符串，然后进行字符串拼接。

当使用减号（-）操作符时，JavaScript尝试从两个操作数中计算数值结果。如果其中一个操作数是字符串，JavaScript会尝试将该字符串转换为一个数字。

console.log(1+'2') // 12
console.log(1-'2') // -1

var、let、const区别

var、let、const三者区别可以围绕下面五点展开：

(1)变量声明提升

标签：const,log,基础,console,let,var,文档,js,name
From： https://www.cnblogs.com/yuey6670/p/18252102