js总结体会

1、表单元素提交之后（不刷新）数据还是会存在的，想要提交之后清除数据可以在ajax提交数据后，用reset()方法清除数据。

2、js中怎么判断哪个单选控件被选中了呢，即表单控件被选中哪些属性发生了变化。

表单提交到后台的时候，选中的input就会把自己的value属性中的值传到后台去。至于前端js怎么判断还需要研究下。value 属性对于不同 input 类型，用法也不同（具体看菜鸟网）

7、JavaScript对象、JSON对象、JSON字符串的区别 ： https://www.cnblogs.com/cstao110/p/3762056.html

　　json对象（json对象的属性名任何时候都必须加上双引号，json对象也是 js对象的一种）和

　　js对象（js对象的属性名是字符串，在表达式上可以加双引号，也可以不加。所以JSON格式的JavaScript对象和json对象很像，也开始说就是彼此吧。因为这种对象都可以转化为json字符串，前提是属性值都是基础类型的数据）

　　注意区别，还有json字符串（整个就是字符串，前后需要加上单引号）

　　json数据格式有三种：简单、json对象、json数组

　　json对象和json字符串相互转化：https://www.cnblogs.com/longailong/p/7344567.html （如果对象的属性值不是基础类型 或者 是undefined ，比如函数。则 JSON.stringify() 转化为json字符串的时候会自动过滤掉这个字段的）

 　　　　　　　　　　　　　　　 或 https://www.cnblogs.com/ChrisMurphy/p/4925696.html

var obj = {
    "age":18,
    "name":function(){
        alert("df")
    }
}  
var tt = JSON.stringify(obj);
console.log(tt); // '{"age":18}'   

var dd = JSON.parse(tt)
console.log(dd); // {age: 18}

　　注：json对象，经过序列号和反序列化后。恢复到对象形式时，对应属性值的数据类型不会改变（即json字符串 可以 保存不同数据类型数据）。

　　　　把处理后的对象，赋值给一个变量，相当于做了升拷贝对象的功能（当然，属性必须是基础类型的，如果是函数就不行）。

 

10、自执行函数就是闭包函数，闭包函数内部声明的变量，在函数外面取不到。利用闭包的特点，在闭包函数内部再有一个返回函数，则可以做到一个函数内的变量声明只执行一次，但是回调函数可以执行多次。

如：var add = (function () {

    var counter = 0;

    return function () {return counter += 1;}

})();

dad()函数可以执行很多次，但是 var counter = 0;只是执行一次。

11、懒加载是一种性能优化的处理方式：并不是特效技术，不过也可以做出特效效果来（这种特效效果一旦加载出来之后就没有特效了）。原理：就是当元素（如图片）距离视口多少距离的时候将data里面的图片路径，放到src属性里面  加载元素（图片）。懒加载主要还是用在图片上，因为图片数据比较大。至于视频和音乐应该也可以吧。有三种实现方法，延时器方法，事件触发加载，可视区加载

12、关联数组是对象，是属于数组这个对象的属性，打印数组的长度时是不包括关联数组的，级关联数组是数组对象的属性但不是数组的元素。

14、js中获取的url都是经过url编码的（比如空格就会编码成 20%），所以js中获得url上的参数信息需要先进行解码，回复正常的url格式，在进行截取。

16、在js中 {} 除了表示对象直接量外，还表示语句块。如果一个语句以“{”开头时，js引擎将{}解析为语句块

　　    参考  ： https://www.cnblogs.com/binarytree-fe/p/4950798.html  或  https://www.cnblogs.com/52cik/p/js-label-block.html

　　eg：下面语句在js中可以正常执行。

   {   alert("hello");  }

 17、js中  标签语句  的作用 ： https://www.jb51.net/article/38745.htm

 　　　使用标签语句的作用就在于多重循环的时候可以一步完全跳出来，或跳到指定的一层循环中。

document.write("Entering the loop!<br /> ");
outerloop:   // This is the label name
for (var i = 0; i < 3; i++)
{
   document.write("Outerloop: " + i + "<br />");
   for (var j = 0; j < 5; j++)
   {
      if (j == 3){
         continue outerloop;
      }
      document.write("Innerloop: " + j + "<br />");
   }
}
document.write("Exiting the loop!<br /> ");

document.write("Entering the loop!<br /> ");
outerloop:   // This is the label name
for (var i = 0; i < 3; i++)
{
   document.write("Outerloop: " + i + "<br />");
   for (var j = 0; j < 5; j++)
   {
      if (j == 3){
         break outerloop;
      }
      document.write("Innerloop: " + j + "<br />");
   }
}
document.write("Exiting the loop!<br /> ");

18、javascript中 声明 和 定义 是不同的 ： https://zhidao.baidu.com/question/1674116758239305707.html  或  https://blog.csdn.net/JimmySmith/article/details/56291818

　　js 是弱类型语言，变量声明了，没有赋值，就不会分配内存空间（即未定义）。这个时候变量的值的undefined的。即 变量声明的时候，系统会默认给变量一个undefined值

    var a;  // 这里 程序默认给 a变量一个 undefined 值；
    console.log(a); // undefined
    console.log(typeof a); // undefined

19、javascript中的未声明未赋值 和 已声明未赋值 ： https://www.cnblogs.com/zhuhuoxingguang/p/7850743.html  （直接赋值的变量会自动隐式地创建一个全局变量，所以是没有问题的，这里的使用变量是指使用b变量的值）

　　注：未声明未赋值的变量 js程序员是不会主动去用的，一般也不会出现这种问题；后台请求的数据中根据入参的不同，某个字段可能是会没有的(如果这个字段的值是undefined，在JSON序列化的时候会把这个字段忽略)，

　　　　因为返回的数据都挂在返回值res这个对象下的，所以某个字段名（属性名）没有的话，也就是  属于 已声明未赋值  的问题。

　　　　如果某个字段名（属性名）没有，在js中使用他就会报错（这种就是未声明未赋值，但是js中使用了这个变量）。

    var a;
    console.log(a); // undefined              个人经验：undefined 是 值为 undefined ; 而 b is not defined 是说这个变量 没有声明，使用没有声明的变量是 会报错的
    console.log(typeof a); // undefined
    
    console.log(b); // 报错, b is not defined  
    console.log(typeof b); // undefined

　　　　使用非 undefined数据类型的方法，是会报错的。处理后台返回的接口会经常碰到这个问题（入参不同，返回的数据会出现某个字段没有），所以需要做一个判断。

20、javascript 变量的重复声明 ： https://blog.csdn.net/m0_37977481/article/details/81571150

　　js变量 重复声明，程序会忽略重复的声明；声明中有赋值，赋值是有效的。

var a = 2;
console.log(a);  //2
var a;           // 浏览器忽略这条声明，声明和赋值一起的话。赋值是有效的。 
console.log(a);  //2

21、前端也要做好 错误处理   参考

一般前端的错误分为：

• 脚本运行错误： js 脚本错误

• 接口错误：服务器报错、数据返回不对、没有响应数据、超时等

22、eval()的替代写法 ： https://blog.csdn.net/xundh/article/details/48153121

23、js通过 Blob对象 可以实现，js创建文件内容，并下载该文件的功能。 https://blog.csdn.net/qq_35652217/article/details/79913912

24、JavaScript对象之属性访问错误篇 ：https://blog.csdn.net/weixin_43927609/article/details/85092455 

　　js中  试图查询一个不存在的对象的属性就会报错。可以一级一级查询，这样前面的对象不存在（即false），就不会处理后面的判断了。 https://zhidao.baidu.com/question/872779220101251452.html 或 https://segmentfault.com/q/1010000004265186（推荐）

 if(window.yluareplace && window.yluareplace.systemId === "hzbs"){ // 先判断yluareplace 对象是否存在，yluareplace存在再判断它的属性是否存在，这样一级一级判断，程序就不会报错 

 }

       注意：程序 报错就不能正常 的执行了，这个时候需要使用 try...catch 进行处理。所以程序中最好避免报错的出现。

25、JS常见的报错类型：https://www.cnblogs.com/surui/p/9005184.html

　　a、读取一个未定义的对象的属性或调用其方法时。Uncaught TypeError: Cannot read property '' of undefined （这是谷歌的提示，其它浏览器可能会有差异）

 　  b、调用未定义的函数时。               TypeError: ... is not a function

　   c 、尝试访问一个未定义的变量时，它总是返回 undefined。    Uncaught TypeError: Cannot set property ... of undefine

 　  d、缺少括号或分号时。Unexpected token   （该错误提示的行号有时并不能指向正确的位置）

 26、为什么 window.location.search 为空 ：https://www.cnblogs.com/codebook/p/5918079.html

　　 查询字符串search只能在取到  “？” 后面 和 “#” 之前  的内容，如果“#”之前没有“？”search取值为空。

27、ajax请求必须把  网络问题  和  接口返回异常  的情况写上去，不然接口出问题都得前端先背锅。

      ajax().then(res => {
        if(res.errorCode === 0){
          // 正常执行的逻辑 （查询类的接口，要考虑数组为空的情况）
        } else {
          alert(res.value || '数据加载失败')
        }
      }).catch(res => {
        alert('服务异常,请稍后再试')
      })

28、前端页面自动执行【非事件触发】跳转到B页面（如权限校验，没有权限，跳到error页面），要使用replace跳转。不然跳转后，按返回时，又会马上跳转B页面。点击返回按钮，会不断循环跳到B页面。移动端返回按钮使用的就很明显。 

29、document.write 的用法：     https://www.runoob.com/jsref/met-doc-write.html

　　Javascript 中只能在 HTML 输出流中使用 document.write，在文档已加载后使用它（比如在函数中），会覆盖整个文档。（所以，使用document.write插入内容，这段js代码最好是在body前前面。）

　　a、经过测试，猜测 HTML 输出流 应该就是  window.onload触发之前的状态。

        window.onload = function(){
            document.write('000');  // 这里把整个文档覆盖了
        }
        document.write('风景房管局'); // 这里是正常插入的

　　b、html输出流在什么时候运行了 document.write ，就把内容写到这个script标签后面。

<body>
    <div>
        <div>
        dkfdjfjdf
        <script>
            document.write('kkkkk');   // 这里执行js
        </script>
        </div>
    </div>
</body>

30、js中函数的重载：函数名称一样，根据参数的不同，执行不同的程序。             https://www.cnblogs.com/pianruijie/p/7997914.html   或  https://blog.csdn.net/ycq521131/article/details/80600298（推荐，里面介绍了jquery中重载的实现）

 　   说明：js的重载和java的重载不一样，相同的函数名，只能声明一次，否则会被后面的声明覆盖掉。js只能在函数内部修改逻辑，根据参数的差异（个数或类型），模拟重载的功能。

 　　　　   jQuery就用到很多的重载功能，比如：

//  同样的css()方法，根据参数个数的不同，实现不同功能
$("p").css("background-color");                // css()方法 获取css属性值
$("p").css("background-color","yellow");   // css()方法 设置css属性值

31、H5的data属性 和 jquery的data方法，两者不是一回事。jquery的data方法，无法读取DOM标签中的data属性。这个很容易弄错，有坑，所以最好不要使用jquery的data方法。

　　　　https://www.cnblogs.com/errorx/p/3737001.html  或  https://blog.csdn.net/sqfbeijing/article/details/50294299 

32、H5页面预览 office 文档：

　　首先，实现H5（或js）预览pdf文件：https://segmentfault.com/a/1190000019263467（亲测有效，纯代码实现，可以自适应宽度大小，放大缩小等功能）

　　a、允许跳转不同的域名的链接：

　　b、只能跳转 安全域名（微信、小程序都会限制跳转的）：

　　vue 单页面中 预览 pdf文件：使用 vue-pdf 包    https://www.jianshu.com/p/271cf5de4257

33、undefined 和 null 的区别：https://zhidao.baidu.com/question/396353385180145285.html  或  http://www.ruanyifeng.com/blog/2014/03/undefined-vs-null.html

　　个人的理解：undefined 表明 变量的 状态（未定义）；而 null 表示的是一个值，需要主动赋值，js内有的东西，默认给他赋值为null了。如：

document.documentElement.onclick //返回null，   内部默认声明了这个变量，赋值为null。
document.documentElement.onSmile //返回undefined

　　自己声明的变量，没有主动设置null，他的属性是不可能出现null值的。这个在判断变量有没有值时，就可以不用判断null了

　　js中对两者的处理也是不同的（JSON序列化就比较明显）：https://blog.csdn.net/weixin_34006965/article/details/88018011

34、js中使用setAttribute给属性赋值和直接赋值对比：https://blog.csdn.net/czh500/article/details/88384118  或 https://zhidao.baidu.com/question/751498166110911164.html

　　统一使用setAttribute来设置，直接赋值 会 出现 各种问题的。（取值一般是没有问题的，就像jquery里面的data()方法设置data属性，会出不可预期的问题）

　　个人理解：原生js都是可以直接通过对象属性的方式读写属性（DOM.src）和样式（DOM.style.color）的。通过这种方式读写的操作都是在 js内存 里面操作的；但是DOM本身 没有的属性，赋值上这个属性，DOM树不会同步内存上的这个值。

　　　　　　　所以DOM属性 直接赋值，有的属性会有问题的。但是style对应的所有有效的属性都存在（有默认值），所以这样操作style样式是没有问题，都是这样操作的。

35、js调试方法补充：（断点调试，console等常用的调试方法就不写了）

　　a、console.trace() ：当前执行的代码在堆栈中的调用路径。     （演示：https://www.runoob.com/try/try.php?filename=tryjsref_console_trace）

　　　　这也就是为什么 回调函数，一般写上函数名比较好，不然显示的是 anonymous（匿名函数）。这个方法会把 使用调用路径上的函数名打印出来。

36、后端接口数据未给到，前端如何开发（前后端数据映射） ：https://blog.csdn.net/weixin_30252155/article/details/96816421  或 https://www.runoob.com/jsref/jsref-map.html（后面 接口数据映射）

// res 后端返回的数据
let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

37、js数据类型的判断：https://www.cnblogs.com/sunmarvell/p/9386075.html  或 https://www.cnblogs.com/Liang-Haishan216/p/6010912.html（说明更清晰）

　　a、typeof：typeof只能判断区分基本类型，number、string、boolean、undefined和object,function；

　　b、instanceof：

　　c、constructor：

　　d、Object.prototype.toString.call()：

　　总结：一般用 typeof 和 constructor。

38、首页 业务逻辑的 规范：

　　问题场景：H5 页面的首页 进入，往往对于  不同情况  进入该页面会执行  不同的程序。如，

　　　　　　    首次 进入页面 调用接口，获取地址显示到页面；

　　　　　　　 跳转到其它页面，用户手动设置地址。跳转（或回退）到首页显示用户选择地址【这时就不能用接口的地址了】；

　　　　　　　 另外，如果首页是用户分享出去后的地址，进入页面还要执行另外的逻辑。

　　逻辑规范：

 init () {
      function initCommon () { // 下面几种业务，公共执行的逻辑。
        console.log('公共逻辑')
      }
      if (!sessionStorage.getItem('isFirst')) { // 是不是首次进入 通过 sessionStorage 来确定，这个判断只能 执行一次。
        sessionStorage.setItem('isFirst', '1')
        // do some sthing
        initCommon()
        return
      }
      if (sessionStorage.getItem('flag') === 'list') { // 其它页面进入这个当前页面的，通过 sessionStorage 设置一个 页面 flag就是
        sessionStorage.removeItem('flag')
        // do some sthing
        initCommon()
        return
      }
      if (getQueryString('areaCode')) { // 微信分享出去的链接，进入的页面。如果要做不同的业务处理，肯定会在url上携带参数的。
        // do some sthing
        initCommon()
        return
      }
      // 这3种逻辑是有重叠的，这时就要根据实际业务中，哪种优先了。   谁优先，就把谁先放在前面执行。
      // 页面还有可能是 通过 回退进入 页面的。这个时候上面的逻辑可能就不是我们需要的，下面就要做一个补充。回退的前面，就决不是首次进入
      console.log('通过 返回进入页面，执行代码')
      if (sessionStorage.getItem('isFirst')) { // 通过回退进入这个页面
        if (sessionStorage.getItem('flag') === 'list') { // 其它页面进入这个当前页面的，通过 sessionStorage 设置一个 页面 flag就是
          sessionStorage.removeItem('flag')
          // do some sthing
          initCommon()
          return
        }
        if (getQueryString('areaCode')) { // 微信分享出去的链接，进入的页面。如果要做不同的业务处理，肯定会在url上携带参数的。
        // do some sthing
          initCommon()
          return
        }
      }
      initCommon()
    },

39、js 三目运算符（也叫条件运算符）：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

　　三目运算符  就是 if 条件语句的简写。可以实现   if … else if … else  的功能。

function example(…) {
    return condition1 ? value1
         : condition2 ? value2
         : condition3 ? value3
         : value4;
}

// Equivalent to:

function example(…) {
    if (condition1) { return value1; }
    else if (condition2) { return value2; }
    else if (condition3) { return value3; }
    else { return value4; }
}

40、多元运算符：https://www.cnblogs.com/Escapeli/p/Escape.html    或  https://c.runoob.com/codedemo/3057【在线编辑器】

　　注意：多元运算符 和 三目运算符很像。但他们是不一样的，不要混淆。

function test(p){
    var a=5,b=12;
    return p>1?p<b?p>b:p=6:p=3; // 这一行中出现了多个问号和冒号，看起来很乱怎么办呢
}

document.write(test(9));

41、js引擎 处理 函数声明 和 函数表达式 是不一样的。https://blog.csdn.net/fakerac/article/details/52819009  或  https://www.cnblogs.com/c4633/p/7637139.html【推荐】

　　1、函数声明 会将标识符提升，而 函数表达式是没有的；

　　2、.函数声明必须以function开头，而函数表达式一定不能以function开头。【function 前面有运算符 就变成 表达式了】

　　3、函数声明 必须有标识符（函数名），函数表达式可有可无；【注意点：具名的函数表达式中的函数名，是没有声明的。不能使用这个函数名去执行，只是调试方便定位】

　　 var ex=function example(){
                 var a=1;
                 a++;
                 console.log(a);
                 example();　　//内部调用有效，正确；
             }

     example();   //错误，这里调用函数是无效的；example在这里未声明；
     ex();　　　　　//这里调用ex是有效的；

　　4、函数声明是一个语句，不能直接执行；而 表达式可以 直接执行。

　　5、函数 可以 赋值 的 就是 函数表达式，可能看起来像 函数声明：

// 函数声明
function a(){ };

// 函数表达式，下面 等号 右边 的函数 和上面的 函数声明是一样的，但是js引擎会 把它处理成 函数表达式，因为 function 前面有 运算符。
var res = function a(){}

　　6、（）、！、+、-、=等运算符，都将函数声明转换成函数表达式，消除了javascript引擎识别函数表达式和函数声明的歧义，告诉javascript引擎这是一个函数表达式，不是函数声明。

// 函数 声明是不能直接 执行的，前面加了个! 运算符，函数变成表达式了，就可以 立即执行了。
!function a(){ }()

42、在 非 严格模式下，每个函数 内都是可以获取到函数 本身对象的：通过 arguments.callee 实现。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/arguments/callee

　　警告：在严格模式下，第5版 ECMAScript (ES5) 禁止使用 arguments.callee()。当一个函数必须调用自身的时候, 避免使用 arguments.callee(), 通过要么给函数表达式一个名字,要么使用一个函数声明。

　　　　　即 严格模式下 匿名函数 不能 调用自己了，如果需要 调用自己。就必须改成 具名函数。