JS从基础到入门

素颜马尾好姑娘i 2022-03-09 17:50 225阅读 0赞

### 客户端脚本语言JavaScript ###

**JavaScript知一究二：**

*  编译：一次性把代码转换成CPU可以读懂的语言，一行一行执行；更快。  
    解析：一行一行解析，解析一行执行一行，★在此之前有全局作用域的预解析－找var和function和参数，找到之后把var和function的声明提前，var num;=赋值随后解析，解析到函数就进入局部作用域的预解析，与上相同。★
 *  C/S是需要下载客户端的，B/S是网站。
 *  JavaScript只是借用Java前缀名，与之无关。
 *  JS包括ECMAScript（语言规范）、DOM（操作网页元素的API接口）、BOM（操作游览器部分功能的API）。
 *  JS需要发送请求在服务器上进行数据判断，是因为游览器用户可以禁用JS。但用户提交空用户名或空密码则在客户端进行判断，减少服务器请求。
 *  async异步，不阻塞可以执行下一步。sync同步阻塞，需要执行完当前才能下一步，下载完src里的js后执行；defer也是异步，但他需要文档完全被解析才执行。
 *  浮点数比较需要乘以十，不然会出现一些麻烦问题。
 *  var str=“hello”;str=str+“itcast”;会使前一个str的栈内存地址无用，需要垃圾回收。这是因为字符串不可变，重新赋值则重新开辟内存空间，而number和boolean重新赋值内存地址不变。但如果两个字符串内容相同则沿用之前的内存地址。
 *  toString();和String();强制转换的区别在于toString();不能用于null和undefined。
 *  a++是先返回a原有的值再自增，++a是先自增再返回自增后的值。
 *  除了表单提交以外任何网页请求都默认是get。

**JS条件判断：**

*  if…else。
 *  switch，适用于判断单个数，默认用全等比较。如果需要判断范围则用变量除以10再取整，就能确定范围。如98/10=9。
 *  break是结束以下代码，立即跳出循环。continue是结束本次循环，再从循环顶部继续下一次循环。
 *  始终要认为用户传入的实参不是规范的，是不安全的，必须设置判断条件，也可以用 r = r || 0;

**JS循环 ：**

*  for，循环次数已知。  
    单层循环一般就是两个值赋值互换，双层循环用于输出正方形三角形乘法表等等。
 *  while，先判断条件再执行代码。do…while先执行代码再判断条件。
 *  循环里可以嵌套判断语句，同理判断语句可以嵌套循环。
 *  如果需要整除则使用取余%，如果需要拆分整数然后进行操作，先用10取余求出个位，然后除以10再取余求出十位。
 *  循环结果sum，要考虑是累加还是累乘，如果是乘则定义sum=1;累加定义0。

**JS数组：**

*  var array = new Array();使用构造函数  
    var array = \[\];数组的字面量；  
    数组赋值array\[0\]=“abc”;
 *  颠倒输出数组则var i = array.length-1;  
    i >= 0;i–。数组最后的下标为数组长度-1。
 *  数组的值未赋值类型是undefined。
 *  如果是利用循环判断存入数组的，数组下标可以额外定义一个变量j；或者将循环里的array\[i\]=i;变成array\[array.length\]=i;
 *  数组长度可动态改变，即便设定了长度依旧可以添加下一个数据。push。
 *  比较数组中数据大小时必须设定一个基准点，假设数组第一个值为max，循环 var i=1;判断大小max<array\[i\];
 *  从0开始循环则循环arr.length次，从1开始则循环arr.length-1次，但都是i<arr.length;
 *  输出数组对象的属性和方法：  
    var arr = new Array();  
    for(var key in arr)\{console.log(key);\}  
    key是对象的属性名、键，有些不可遍历。
 *  instanceof判断对象的类型，返回布尔值。typeof判断任意变量的数据类型，返回字符串；任意类型的对象使用typeof获取到都是object。
 *  冒泡排序三种方式：  
    ⑴i，j都小于arr.length-1，if(arr\[j\]>arr\[j+1\])  
    var tmp=arr\[j\];arr\[j\]=arr\[j+1\];arr\[j+1\]=tmp;  
    ⑵i小于arr.length-1，j小于arr.length-1-i，if(arr\[j\]>arr\[j+1\])  
    var tmp=arr\[j\];arr\[j\]=arr\[j+1\];arr\[j+1\]=tmp;  
    ⑶i小于arr.length-1，isSort=true;  
    j小于arr.length-1-i，if(arr\[j\]>arr\[j+1\])  
    var tmp=arr\[j\];arr\[j\]=arr\[j+1\];arr\[j+1\]=tmp;  
    isSort=false;进入if设置为false。

**JS函数Ⅰ：**

*  封装就是把一段代码隐藏在函数中，调用函数才会执行代码。
 *  只定义一次，可以被执行调用任意多次
 *  定义函数时的m,n为形参，调用函数时的具体数据100,"ddd"为实参，会把实参复制一份传递给函数，即重新开辟空间。
 *  函数设置返回值后可以定义一个变量接收返回值，也可以直接getSum(1,10);
 *  函数中return后的代码不会执行。
 *  函数三要素：函数的功能，函数的参数，函数的返回值。★
 *  一个函数内部调用另一个函数叫做闭包，当fun1里调用fun2，执行完fun2后会回到fun1继续向下执行。
 *  如果函数内部没写return则返回undefined，如果函数写了return但没有内容也返回undefined，如果return后面有可行的内容就返回这个内容。
 *  实参和形参个数可以不一致，但要注意return值调用的形参是否都有涉及，保险起见设置a = a || 0;判断a是否合法。
 *  JS中没有重载概念，函数名相同下面的覆盖上面的函数，不允许出现同名函数。其他语言有重载，函数名相同形参个数不同。

**JS函数Ⅱ：**

*  函数可以通过函数声明、函数表达式、构造函数来声明。  
    function fname(a,b)\{return a+b;\}  
    var fname=function(a,b)\{return a+b;\};  
    var fn=new Function(“a”,“cons”);来定义。  
    区别在于函数声明在任何地方都可以调用，函数表达式只能先声明再调用，这是因为预解析。★
 *  变量作用域：全局作用域（任何地方都可以使用，函数内部都可以访问），局部作用域（在函数内部声明一个变量，只能在该函数内部使用）；当局部变量超出作用域之后，变量会被垃圾回收机制销毁，全局变量持续占用内存直到关闭游览器才释放，不使用var声明的变量是全局变量。
 *  JS中没有块级作用域，可以被外部访问，if，for可以，但function的局部变量不能被外部访问，只有在函数内部用var定义的变量才叫局部变量。
 *  局部变量和全局变量，如果变量名相同内存地址也不相同。
 *  作用域链：先在当前作用域找变量，找不到就去上一级作用域找变量，一级一级向上找。
 *  局部预解析中如果var a=b=c，则只预解析var a;而b，c因为未用var声明就直接赋值所以是全局变量。
 *  变量提升和函数提升，函数先提升，它们就是在预解析时先把相应的声明提前，但赋值不会移动解析位置。
 *  每次调用函数时内部变量都重新开辟空间，两次调用互不影响，适用于递归。
 *  fun1函数内部调用自己称为递归，递归必须设置结束条件。
 *  函数表达式是匿名函数，用于事件；  
    自调用函数只调用一次：  
    (function()\{  
    console.log(“test”);  
    \})();

**JS函数Ⅲ：**

*  函数是一种数据类型 function。
 *  var myfun = function()\{  
    console.log(“hello”);\};  
    使用typeof myfun()会调用一次函数，返回undefined（无返回值）；而使用typeof myfun则返回数据类型function。
 *  函数可以作为另一个函数的参数，也可以作为另一个函数的返回值。
 *  函数当成变量接收时不使用()
 *  null是空对象，不能调用空对象的属性或方法。
 *  学习函数步骤：⑴了解函数作用  
    ⑵参数意义和类型⑶返回值的意义和类型⑷动手试试
 *  先实现功能再封装函数。

**JS对象：基于对象。**

*  var hero=new Object();使用构造函数  
    var hero=\{name:“xjj”,age:18,★  
    sayHi:function()\{\}\};对象的字面量；(逗号)  
    在内存中开辟空间，创建一个对象，返回刚刚创建的对象。
 *  对象是具体到某一个事物，他们具有特征(静态)和行为(动态)。万物皆对象。
 *  JS对象是无序属性的集合，包括对象的属性和对象的方法。
 *  用于封装一些数据，如stu包括name,  
    age…。stu.name=“xm”;stu.age=“18”;  
    方法：stu.sayHi=function()\{\};
 *  只有在当前hero对象的方法中，this才是当前hero对象。
 *  直接调用的是函数alert();通过对象调用的是方法hero.attack();this就是hero。
 *  如果需要创建多个对象，则创建一个构造函数把他们封装起来，这个自定义构造函数属于一类事物而非一个对象。
 *  构造函数–构造一个对象，并且返回这个对象的函数。  
    构造函数第一个字母大写。可以用键值对hero\[“name”\]代替hero.name;
 *  构造函数特点：（new的作用）  
    ⑴内存开辟空间，存储新创建的对象new Object();  
    ⑵把this设置为当前对象★  
    ⑶执行函数内部的代码，设置对象的属性和方法★  
    ⑷返回新创建的对象。
 *  自定义构造函数：  
    function Student(name,age,sex,score)\{  
    this.name=name;  
    this.age=age;  
    this.sex=sex;  
    this.score=score;  
    this.sayHi=function()\{  
    console.log(“sss”);  
    \}\}  
    var stu=new Student(“xx”,21,“男”,88);  
    stu.sayHi();

**JS JSON：**

*  JSON是JS的子集，是JS对象表示形式，是描述数据的一种标准规范。
 *  JSON与对象字面量只有一个区别-即JSON的键（属性）需要双引号：  
    var o =\{“name”:“xjj”,“age”:18\};

**JS基本类型与引用类型：**

*  基本类型：String、Boolean、Number、null、undefined。
 *  引用类型：Object、function、Array、Date。
 *  引用数据类型存储在堆内存，基本数据类型存储在栈内存。★
 *  引用数据类型先在堆开辟一块空间存储对象，然后根据给予变量名的栈里面存储的堆地址找到堆里面的引用数据类型。
 *  每次var b=a;都是在栈里copy重新开辟一份。
 *  如果是引用数据类型var s1 = new Student(…);var s2=s1;  
    s1.name=“mh”;则s2.name也等于mh。  
    这是因为s2只是得到了s1栈里存放的对象的地址，当使用s1.name对堆里面对象进行修改时s2也会改变。
 *  当基本类型作为函数的参数时，函数内部对参数的修改，不会影响外部变量，因为基本类型是copy一份给形参；  
    复杂数据类型作为函数的参数时，函数内部对对象属性的修改会影响外部变量，copy地址，而地址始终指向这个对象。
 *  引用类型使用和=比较的是地址。

**JS DOM：文档对象模型**

*  可以将DOM视为文档树，每一个html标签、文本、属性、注释都是文档树的一个分支节点，可以删除，新增，修改节点。
 *  html文档中的标签可称为元素；文档中第一个元素就是文档元素（根元素）即html；文本节点和属性节点。
 *  DOM用于找元素、设置找到的元素属性、设置元素的样式、动态创建和删除元素、事件–触发响应。
 *  在标签下写入DOM—οnclick="alert();  
    return false;"可以取消标签应有的行为；在JS写var link=document.getElement  
    ById(“link”);可以获取id为link的标签/DOM对象，然后link.οnclick=function()\{\};
 *  JS要等标签生成之后再来获取对应的DOM对象。
 *  事件三要素：  
    ⑴事件源–事件的触发者link  
    ⑵事件名称–click  
    ⑶事件处理程序–onclick