js一些罕见的语法以及关键词

// 假设已经有一个input元素用于选择文件，其id为'fileInput'

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function(event) {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function(event) {

// 文件读取完成后，event.target.result中包含了文件内容

console.log(event.target.result);

};

reader.onerror = function(event) {

// 读取错误时执行的操作

console.error('文件读取失败:', event);

};

// 以文本格式读取文件

reader.readAsText(file);

}

});

在这个示例中，当用户选择一个文件后，会触发'change'事件。然后，我们创建一个FileReader对象，并设置其onload和onerror事件处理函数。最后，调用readAsText方法开始读取文件。当文件读取完成后，onload事件处理函数会被调用，我们可以在其中处理读取到的文件内容。如果读取过程中出现错误，onerror事件处理函数会被调用。

总的来说，FileReader对象提供了一种方便的方式来读取用户系统中的文件内容，使得Web应用程序能够更灵活地处理文件数据。

3.router

在 Vue Router 中，name 属性可以用于给路由记录一个具体的名字，这个名字可以在编程式导航时用来跳转路由，而不需要直接使用路径字符串。使用 name 跳转路由的好处在于，即使路由的路径发生变化，只要路由的 name 保持不变，你的跳转代码就不需要修改。

你可以在以下情况下使用 name 来进行路由跳转：

1. 编程式导航：
   当你想在 JavaScript 代码中直接跳转到某个路由时，你可以使用 router.push 方法，并传入一个包含 name 属性的路由对象。例如:

this.$router.push({ name: 'Home' })

这将导航到名为 'Home' 的路由。

1. 在 <router-link> 组件中：
   虽然 <router-link> 组件通常使用 to 属性与路径字符串一起使用，但你也可以使用路由的 name 和 params 或 query 来定义目标路由。例如：

html复制代码



<router-link :to="{ name: 'User', params: { userId: 123 }}">User</router-link>

在这个例子中，<router-link> 将导航到名为 'User' 的路由，并传递一个 userId 参数。

1. 保持代码的健壮性：
   当路由路径可能会发生变化时，使用 name 而不是硬编码的路径字符串可以使你的代码更加健壮。这样，即使路径改变，只要路由的 name 保持不变，你的导航代码就不需要更新。
2. 结合路由参数：
   当使用带参数的路由时，通过 name 和 params 的组合可以更方便地构造路由。例如，如果你有一个用户详情页面，其路径可能是 /user/:id，你可以使用 name 和 params 来动态生成这个路径：

javascript复制代码



this.$router.push({ name: 'User', params: { id: 123 } });

这将导航到 /user/123 这个路径，前提是你在路由配置中给这个路由指定了 name: 'User'。

总之，使用 name 跳转路由可以提供更灵活和健壮的导航方式，特别是在路径可能变化或需要动态构造路径的情况下。