javascript笔记

ShAn DiAn

已于 2025-03-25 16:47:00 修改

阅读量105

点赞数 4

分类专栏：前端笔记文章标签： javascript 笔记前端

于 2025-03-05 19:48:32 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_74066883/article/details/146049219

版权

前端笔记专栏收录该内容

3 篇文章

订阅专栏

1.onclick

button_element.onclick=function(){
        alert('Dom属性案件触发');
    }

DOM属性绑定（方式1）：
最简单的方式
一个元素只能绑定一个事件处理函数
后面的会覆盖前面的


    button_element.addEventListener('click',function(){
        
        alert('通过addEventListener触发');
    })

addEventListener匿名函数（方式2）：
可以为同一个元素添加多个事件处理函数
不会相互覆盖
匿名函数无法被单独移除


     button_element.addEventListener('click',click_event);
     function click_event(){
         alert('通过addEventListener触发,不带括号细节');
     }
addEventListener命名函数（被注释的方式3）：
可以为同一个元素添加多个事件处理函数
不会相互覆盖
可以通过removeEventListener移除特定的事件处理函数
更容易维护和复用
函数可以在其他地方重用

2.表格增删改查

html文件
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格增删改查</title>
    <style>
        table {
            border-collapse: collapse;
            width: 80%;
            margin: 20px auto;
        }
        th, td {
            border: 1px solid black;
            padding: 8px;
            text-align: center;
        }
        button {
            margin: 2px;
            padding: 5px 10px;
        }
        .add-btn {
            margin: 20px;
        }
    </style>
</head>
<body>
    <button onclick="addRow()" >新增</button>
    <table id="tbe">  
        <thead>
            <tr>
                <th>姓名</th>
                <th>电话</th>    
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>峰哥</td>
                <td>300888</td>  
                <td>
                    <button onclick="editRow(this)">编辑</button>
                    <button onclick="deleteRow(this)">删除</button>
                </td>
            </tr>
        </tbody>
    </table>
    <script src="表格增删改查的文件名.js"></script>
</body>
</html>

增删改查的js文件
//新增
function addRow(){
    var TB=document.getElementById('tbe');
    //console.log(TB);
    var length=TB.rows.length;
    //console.log(length);
    var newRow=TB.insertRow(length);
    //console.log(newRow);
    //newRow.innerHTML='123456'
    var nameCOL=newRow.insertCell(0);
    var PhoneCOL=newRow.insertCell(1);
    var ActionCOL=newRow.insertCell(2);
    nameCOL.innerHTML='undifined';
    PhoneCOL.innerHTML='undifined';
    ActionCOL.innerHTML='<button onclick="editRow(this)">编辑</button><button onclick="deleteRow(this)">删除</button>';
}

function deleteRow(button){
    //console.log(button);
    var row=button.parentNode.parentNode;
    //console.log(row);
    row.parentNode.removeChild(row);
}

function editRow(button)
{
    var row=button.parentNode.parentNode;
    var name=row.cells[0];
    var phone=row.cells[1];
    var inputName=prompt("请输入名字");
    var inputPhone=prompt("请输入手机号");
    if(inputName)
    name.innerHTML=inputName;
    if(inputPhone)
    phone.innerHTML=inputPhone;

}

3.闭包：

闭包是 JavaScript 中最强大的特性之一。JavaScript 允许函数嵌套，并且内部函数具有定义在外部函数中的所有变量和函数（以及外部函数能访问的所有变量和函数）的完全访问权限。

但是，外部函数却不能访问定义在内部函数中的变量和函数。这给内部函数的变量提供了一种封装。

此外，由于内部函数可以访问外部函数的作用域，因此当内部函数生存周期大于外部函数时，外部函数中定义的变量和函数的生存周期将比内部函数执行的持续时间要长。当内部函数以某一种方式被任何一个外部函数之外的任何作用域访问时，就会创建闭包。

// 外部函数定义了一个名为“name”的变量
const pet = function (name) {
  const getName = function () {
    // 内部函数可以访问外部函数的“name”变量
    return name;
  };
  return getName; // 返回内部函数，从而将其暴露给外部作用域
};
const myPet = pet("Vivie");

console.log(myPet()); // "Vivie"

当同一个闭包作用域下两个参数或者变量同名时，就会产生命名冲突。更近的作用域有更高的优先权，所以最近的优先级最高，最远的优先级最低。这就是作用域链。链的第一个元素就是最里面的作用域，最后一个元素便是最外层的作用域。考虑以下示例：

function outside() {
  const x = 5;
  function inside(x) {
    return x * 2;
  }
  return inside;
}

console.log(outside()(10)); // 20（而不是 10）

命名冲突发生在语句 return x * 2 上，inside 的参数 x 和 outside 的变量 x 发生了冲突。这里的作用链域是 {inside、outside、全局对象}。因此 inside 的 x 优先于 outside 的 x，因此返回 20（inside 的 x）而不是 10（outside 的 x）。

4.arguments：

函数的实际参数会被保存在一个类似数组的 arguments 对象中。在函数内，你可以按如下方式找出传入的参数：

arguments[i];

3.Map对象

map对象就是一个简单的键/值对映射集合，可以按照数据插入时的顺序遍历所有的元素。

下面的代码演示了使用 Map 进行的一些基本操作

const sayings = new Map();
sayings.set("dog", "woof");
sayings.set("cat", "meow");
sayings.set("elephant", "toot");
sayings.size; // 3
sayings.get("dog"); // woof
sayings.get("fox"); // undefined
sayings.has("bird"); // false
sayings.delete("dog");
sayings.has("dog"); // false

for (const [key, value] of sayings) {
  console.log(`${key} goes ${value}`);
}
// "cat goes meow"
// "elephant goes toot"

sayings.clear();
sayings.size; // 0

1.Weakmap：

WeakMap 是键/值对的集合，其键必须是对象或非注册符号，其值为任意 JavaScript 类型，并且不会对其键创建强引用。也就是说，一个对象作为键出现在 WeakMap 中并不会阻止该对象被垃圾回收。一旦作为键的对象被收集，其在任何 WeakMap 中的相应值也会被垃圾收集，只要它们没有在其他地方被强引用。唯一可用作 WeakMap 键的原始类型类型是 symbol，更具体地说，是非注册 symbol，因为非注册 symbol 保证是唯一的，并且不能被重新创建。WeakMap 对象的一个用例是存储一个对象的私有数据或隐藏实现细节

const privates = new WeakMap();

function Public() {
  const me = {
    // 这里是私有数据
  };
  privates.set(this, me);
}

Public.prototype.method = function () {
  const me = privates.get(this);
  // 处理 `me` 中的私有数据
  // …
};

module.exports = Public;

5.Set对象：

set对象是一组唯一值的集合，可以按照添加顺序来遍历。Set 中的值只能出现一次；它在集合 Set 中是唯一的。

const mySet = new Set();
mySet.add(1);
mySet.add("some text");
mySet.add("foo");

mySet.has(1); // true
mySet.delete("foo");
mySet.size; // 2

for (const item of mySet) {
  console.log(item);
}
// 1
// "some text"

6.const，var，let 区别

作用域：
- var：函数作用域（变量在函数内有效）。
- let 和 const：块级作用域（变量在 {} 内有效）。
重复声明：
- var：可以重复声明。
- let 和 const：不可重复声明。
变量提升：
- var：变量会提升到作用域顶部（初始值为 undefined）。
- let 和 const：存在暂时性死区（声明前使用会报错）。
常量性：
- const：声明后必须初始化，且不能重新赋值（但对象/数组内部可修改）。

// 作用域示例
function exampleScope() {
  if (true) {
    var varVar = "var";    // 函数作用域
    let letVar = "let";    // 块级作用域
    const constVar = "const"; // 块级作用域
  }
  console.log(varVar);     // "var"（可访问）
  console.log(letVar);     // 报错（letVar未定义）
  console.log(constVar);   // 报错（constVar未定义）
}

// 重复声明示例
var a = 1;
var a = 2;       // 正常
let b = 1;
let b = 2;       // 报错（Identifier 'b' has already been declared）

// const 的不可变性
const arr = [1];
arr.push(2);     // 允许修改内部数据 → arr = [1,2]
arr = [3];       // 报错（Assignment to constant variable）

// 变量提升示例
console.log(x);  // undefined（var提升）
var x = 10;
console.log(y);  // 报错（暂时性死区）
let y = 20;


//const不可修改的理解
const num = 1;
num = 2; // 报错！不可重新赋值

const obj = { name: "Alice" };
obj.name = "Bob"; // ✅ 允许修改属性
obj = { name: "Charlie" }; // ❌ 报错！不可重新赋值



//let的灵活性：
let count = 0;
count = 1;      // ✅ 允许
let arr = [1, 2];
arr = [3, 4];   // ✅ 允许