首页 > 其他分享 >随手记(五):js函数参数默认值+热更新失效问题+常见操作符

随手记(五):js函数参数默认值+热更新失效问题+常见操作符

时间:2022-12-29 14:25:13浏览次数:62  
标签:vue undefined js 运算符 函数参数 let 默认值

1.js函数参数

ES5写法

如果函数在调用时未提供隐式参数,参数会默认设置为: undefined

function myFunction(x, y) {
    y = y || 0;
}

ES6写法

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}

myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值

2. 热更新失效,控制台报错:sockjs-node/info?t= net::ERR_CONNECTION_TIMED_OUT

相关介绍:sockjs-node 是一个JavaScript库,提供跨浏览器JavaScript的API,创建了一个低延迟、全双工的浏览器和web服务器之间通信通道。

解决方法一:修改 vue.config.js 里的host

module.exports = {
  devServer:{
    host: 'localhost'
  }
}

解决方法二:(不推荐)

1. 找到/node_modules/sockjs-client/dist/sockjs.js

2. 在1603行,注释掉 self.xhr.send(payload); 这一行

参考:八猫儿人类编程 https://www.bilibili.com/read/cv17579958/ 

3. 递归Tip

在递归过程中,如果递归依赖上一次递归的结果,需要将结果return。
如果不需要上一次的结果,就不需要return。

4. vue项目启动

在项目的运行中,main.js作为项目的入口文件。运行中,找到其实例需要挂载的位置,即index.html中,刚开始,index.html的挂载点处的内容会被显示,但是随后就被实例中的组件的模板内容所取代,所以我们会看到有那么一瞬间会显示出index.html中正文的内容(开控制台看dom elements会更明显)。而index.html中的title部分不会被取代,所以会一直保留。

5. shims-vue.d.ts

shims-vue.d.ts是为了 typescript 做的适配定义文件,因为.vue 文件不是一个常规的文件类型,ts 是不能理解 vue 文件是干嘛的。加这个文件是是告诉 ts,vue 文件是这种类型的。

 6. 操作符

  • ?. 可能会存在,让后面那个变量就算没有也不报错
  • !. 一定会存在,断言,我们确信这个字段100%出现
  • !! 类型转换
  • ??(空值合并运算符) 当左边的值为null或undefined的时候 就取??右边的值 。

以前,如果想为一个变量赋默认值,通常的做法是使用逻辑或运算符(||),然而,由于||是一个布尔逻辑运算符,左侧的操作数会被强制转换成布尔值用于求值。任何假值(0, '', NaN, null, undefined)都不会被返回。这导致如果使用0''NaN作为有效值,就会出现不可预料的后果。

let count = 0;
let text = "";

let qty = count || 42;
let message = text || "hi!";
console.log(qty);     // 42,而不是 0
console.log(message); // "hi!",而不是 ""

let preservingFalsy =text ?? 'Hi neighborhood';
console.log(preservingFalsy); // '' (as text is neither undefined nor null)

 

空值合并运算符可以避免这种陷阱,其只在第一个操作数为null 或 undefined 时(而不是其它假值)返回第二个操作数

参考资料: MDN 表达式和运算符 

标签:vue,undefined,js,运算符,函数参数,let,默认值
From: https://www.cnblogs.com/xinxinzh/p/16931596.html

相关文章

  • 在前端js worker里使用dom并且加载jquery
    四个工具:nodejs+npmnpm安装的jsdomnpm安装的jquerynpm安装的browserify网址:browserify:https://browserify.org/jsdom:https://github.com/jsdom/jsdom/安......
  • js判断是否为空对象
    一、js判断是否为空对象https://www.cnblogs.com/sefaultment/p/9444345.html方案1:vardata={};varb=JSON.stringify(data)=="{}";alert(b);//true方案......
  • React.js 和 Spring Data REST(二)
    第2部分-超媒体控件在上一节,您了解了如何使用SpringDataREST创建后端工资单服务来存储员工数据。它缺乏的一个关键功能是使用超媒体控件和链接导航。相反,它对路径进......
  • React.js 和 Spring Data REST(三)
    第4部分-事件在上一节,您引入了条件更新以避免在编辑相同数据时与其他用户发生冲突。您还学习了如何使用乐观锁定对后端的数据进行版本控制。如果有人编辑了同一记录,您会......
  • JS 鼠标位置信息说明
    clientX鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角x轴的坐标;不随滚动条滚动而改变;clientY鼠标相对于浏览器(这里说的是浏览器的有效区域)左上角y轴的坐标;不......
  • 使用SRS和JSWebrtc实现实时播放视频
    使用SRS搭建视频服务器参见官方地址:https://ossrs.net/lts/zh-cn/docs/v5/doc/getting-started-buildhttps://github.com/ossrs/srs修改srs.conf文件将rtc节点下的rt......
  • React.js 和 Spring Data REST
    本教程展示了一系列使用SpringDataREST及其强大的后端功能的应用程序,结合React的复杂功能来构建易于理解的UI。弹簧数据休息提供了一种构建超媒体驱动的存储库的快速......
  • js.hw3
    //数组的下标表示偏移量//作业1//参数是一个只包含数字的array//求array的乘积functionproduct(array){lets=1;for(leti=array[0];i<array.......
  • VueJS使用addEventListener的事件如何触发执行函数的this
    1、使用浏览器监听切屏为例此处为考虑浏览器兼容性推荐使用:document.addEventListener1.1、正常函数使用如下:letn=0;letmax=3;//切屏最大次数document.addE......
  • Mapbox 与 Babylon.js 可视化 glsl 特效篇(四十二)
    我决定不从Babylonjs基础来讲了直接整合mapbox与babylonjs可视化来讲我整合一个类库后续不断更新中npmi@haibalai/mapbox-babylonjs 初始化mapbox-babylonjs......