原生js(语言基础、流程控制语句)

js基础

• 对于HTML来说，js是从上向下解释性文档，上面的代码无法调用下面的标签或者script,下面的代码可以调用上面的标签或script

1. js书写的方式及位置

   • 内部脚本

     • 引入方式

     • 放置位置

       • head标签内部
       • body标签内部

   • 外部js

     • 引入方式

     • 放置位置

       • head标签内部
       • body标签内部

2. 路径格式

   • ./当前文件所在文件夹，../上一级目录；尽量少用../，禁止使用绝对路径

3. 变量污染

   • 如果加载的js中变量或者函数相同时，就会覆盖

4. 注释

   • 行注释

     • ctrl+/ 注释一行

   • 块状注释

     • shift+shift+a 注释掉一个函数和大量代码块

   • 作用

     • 1.可以让不用的代码不执行
     • 2.可以用来解释代码的作用

• js是点语法，表示方法和属性

常用方法和变量

1. 规则

   • 1.js语言每行结束时必须用;结束，必须是半角
   • 2.js代码中大小写必须严格按照规定
   • 3.一般首字母都是小写，除了类。都是用驼峰式命名规则
   • 4.除了第一个以外，每个单词首字母大写，其他字母小写

2. 方法

   • alert(message?:anny):void

     • 提示

       • ? 参数可以不写
       • :anny 这个参数的类型可以是任意的
       • :void 不返回任何值
       • 实际是window.alert()，仅仅是将window省略了

     • 功能

       • 将字符串以弹窗弹出，并暂停到当前行

   • confirm()

     • 功能

       • 弹出确定取消框

   • prompt()

     • 功能

       • 弹出输入框

   • document.write()

     • 功能

       • 仅属于document的方法，可以给整个标签中增加内容

   • document.dir()

     • 将特殊对象以对象的形式展示
       • 如 函数

3. 属性

   • innerHTML

     • 是所有body内(含body)标签的属性，可以给这些标签内局部增加内容和标签

4. ES5和ES6

   • 为了让所有浏览器都使用js，定义了一个标准 ECMAScript
   • 各大浏览器都必须按照这个标准来渲染页面
   • ES5 IE8时代支持的js标准
   • 2015年正式使用ES6，又称ES2015

5. 变量

   • =赋值有返回值，返回=右边的值

   • ES5之前

     • 不需要定义，随手写，不需要类型(弱类型)

     • a=3;

     • a=b=3;

       • 连等，先赋值给=最左边的元素，再逐级向右
       • 等价于 a=(b=3);代码遵从从左至右的执行方式

   • ES5

     • 不允许直接使用变量的赋值，用var声明变量，用var声明的变量，不会有返回值

     • 如果不使用var声明，那这个变量就一定是Windows的属性，而在函数以外的地方使用var声明也是设置了window的属性

     • 变量的命名规则

       • 1.变量必须使用驼峰式命名

       • 2.临时变量必须使用_起头，后面接驼峰式命名，有时候也会在函数的参数中使用临时变量名

       • 3.变量不可以使用关键字和保留字

         • var if=3; 关键字，会报错
         • var public=2; 保留字，不会报错

       • 4.全局的变量名不能与window下的属性和方法同名，否则会覆盖原有的属性和方法

         • status在系统中固定类型为字符型

   • ES6

     • let

       • 变量

         • 定义后值可以改变

     • const

       • 常量

         • 定义后值不可改变
         • 名称必须全部大写，并且使用_区分单词
         • 目的：不会被别人修改或者变量污染改变
         • const EVENT_ID="changes";

数据类型和数据类型的转换

1. 数据类型：数据的分类

   • 字符型

     • 所有使用 "" '' ``的都是字符型 string

       • var a="a";
       • var a="1";
       • var a=true;
       • var a='你好';

   • 数值型

     • number

       • var a=3;
       • var a=-3;
       • var a=3.14;
       • var a=-3.14;
       • var a=0xFF; 16进制
       • var a=065; 8进制
       • var a=3.1e+5; 科学计数法
       • var a=3.1e-5;

     • 小数叫做浮点数

     • 定义的和打印的结果不一定完全相同，全部都会转换为10进制

   • 布尔型

     • boolean

       • true和false

         • 对和错 是和否 任何事情的两面

   • 未定义型

     • 1.仅定义变量未赋值

       • var a;

         • 用于全局定义，根据需要赋值，初始没有值

     • 2.定义变量并且设置值为undefined

       • var a = undefined

         • 用于初始值必须是undefined，或者将原有有值的变量修改为undefined

     • 两者值相同，但形态不同，类型不同

   • null 空值

     • 是对象类型

     • var a=null

     • 将引用地址标记清空，用于清理内存，垃圾回收

     • 字符类型、数值类型、布尔类型、未定义型都不需要null清除

   • 对象类型

     • var obj={}; 空对象

     • obj=null; 设值为空

     • obj={key:value}

       • 对象不能出现重复的key
       • key不需要加""
       • var d = "names";obj={a:1,b:"ab","c":true,[d]:"hm";}
       • 变量作为key必须在外层增加[]

     • 获取对象中key的值的方法

       • 1.点语法

         • 使用范畴仅限于key属性固定且明确

       • 2.[]语法

         • 固定key属性

           • 使用字符串方式设定

         • key属性不固定

           • 直接[变量]

2. 数据类型的转换

• 分为强制转换和隐式转换两种

  • 数值转字符串

    • var a=String(a);

      • 类强制转换，将a转换为字符串覆盖原有变量a

    • a=a+""

      • 利用隐式转换方式，没有强制转换，根据运算特征自动转换为字符串——隐式转换
      • 隐式转换所使用的的转换方法是自动执行String(a);

    • toString()实际上是Object对象的方法，任何类型都可以调用这个方法

      • a=a.toString(16);

        • 参数必须是2-36之间，否则报错，转换为指定的进制数

    • toFixed(小数点位数)

      • 转换为字符串并保留指定小数点位数，自动四舍五入

  • 数值转为布尔值

    • 除了0以外的所有数值转换为布尔值都是true，0转换为布尔值是false

      • var a=0; a=Boolean(a);

    • 隐式转换遵从Boolean()转换方法

  • 数值转换为对象

    • 转换为数值型对象，保存在堆中，但保留了数值型的特征

      • var a=0; a=Object(a);

  • 字符串转为数值

    • var a="a"; a=Number(a);

      • 强制转换为数值类型

    • a=parseInt(a);

      • 转换为整数

      • a=parseInt(a,2);

        • 将字符串转换为二进制

    • a=parseFloat(a)

      • 转换为浮点数，不能进行强制类型转换

    • parse在转换时可以自动检测是否可以转换为数值，可以自动清除字符串前后空格

      • var b="32 1"; 结果为NaN
      • var b="32 " 结果为32
      • b=Number(b);
      • b=parseInt(b);
      • b=parseFloat(b);

    • 隐式转换遵从Number()转换方法

  • 字符串转换为布尔值

    • 仅空字符转换为布尔值是为false，除此之外都是true

      • str=Boolean(str)

  • 字符串转换为对象

    • 转换为字符串对象

      • str=Object(str);

  • 补充：字符串方法

    • str.trim(); 清除字符串前后空格，中间空格不能清除

  • 布尔值转为数值

    • true转换为1，false转换为0

      • var b=true;b=Number(b);

  • 布尔值转换为字符

    • 转换后就是字符串true和false

  • 布尔值转对象

    • 转换成布尔对象

  • 任何类型转换为布尔值

    • 以下6种转换布尔值都是false，其他都是true

      • var a="";
      • var b=0;
      • var c=NaN;
      • var d=false;
      • var e=null;
      • var f=undefined;

  • undefined 和 null转换为字符串和数值

    • undefined 和 null 唯一相等，除null和它本身，和其他任何数据都不相等

    • undefied

      • var a;
      • a=String(a);
      • a=Number(a);//转换为数值是NaN
      • a=parseInt(a);//NaN

    • null

      • var b=null;
      • b=String(b);
      • b=Number(b);//转换为数值是0
      • b=parseInt(b);//NaN

3. 定义变量的方法

   • 未赋值

     • var a,b,c;

   • 有赋值

     • var a=1,b=4,c="a",d="true"; 每一个都有换行

   • 尽量不要使用连等赋值

运算符

1. 算数运算符

• • • • / %

    • var a=3;

    • var b=5;

    • var s=a+b;

    • var s=a-b;

    • var s=a*b;

    • var s=a/b;

    • var s=b%a; 取模运算

    • 运算浮点数运算有误差

    • 如果在算数运算符中前后出现字符串，并且使用+，必须使用字符串首尾相连的方式将内容连接

      • 如果参加运算的元素存在不是字符串的元素，会先进行隐式转换再计算

      • 如果运算过程中没有使用字符串，使用+，其他类型都会转换为数值，再相加

      • 所有类型遇到-*/%都会隐式转换为数值，再运算

• 赋值运算符

  -a+=7;//a=a+7; 7就是步长 step

  -a+=""; 利用隐式转换完成字符串转换

  -a-=2;

  -a*=2;

  -a/=2;

  -a%=2;

  -a+=a+1;

  -赋值运算符的优先级最低

• 一元运算符

  • a++

    • 先把a返回

  • ++a

    • 先把a运算的结果返回

  • 对于a来说，两个公式运算结果都是相同的

  • 如果将a++或者++a作为返回值参与运算或者赋值时

  • ++a 是+1以后的结果先参与运算或者赋值

  • a++ 是将a先参与运算或者赋值

  • 对于++和--通常都会直接使用算数运算来处理，即把内容先隐式转换为数值，然后再运算

• 关系运算

  • 返回布尔值的一种运算表达式

  • 运算符

    • < > <= >=

    • == != 判断值是否相等或 不等

      • 会发生隐式转换，优先转换为数值并比较

        • console.log(""==false);
        • console.log(0=="");
        • console.log(0==false);

      • console.log(undefined==null);//因为两者都不是数值，所以是独立相等

      • isNaN 将这个字符串转换为数值后判断是否是NaN非数值

        • NaN与任何数据都不相等

    • === !== 判断值和类型是否相等或不等

• 逻辑运算

  • && || !

    • &&

      • true && true = (第二个值)
      • true && false = （第二个值）
      • false && true = （第一个值）
      • false && false = （第一个值）

    • ||

      • true || true = (第一个值)
      • true || false = （第一个值）
      • false || true = （第二个值）
      • false || false = （第二个值）

    • !

      • 取反

• 位运算

  • & 与运算

    • 1&1为1，其他都为0

      • 25&34
      • 25 011001
      • 34 100010
      • 000000=0

    • 任何数与其同位数的2的n次方减1为原数值

    • 不同位只保留后3位

• | 或运算

  • 0|0为0， 其他都为1

• ^ 异或运算

  • 相同为0，不同为1

• ~ 位非运算

  • 加1取负数

• 三目运算

  • 条件？为真的值:为假的结果；

  • 判断条件是否成立，如果条件成立返回第一个值，否则返回:后面的第二个值

  • 如果表达式负结果转换为布尔值为真时，返回？后面的值，否则返回：后面的值

  • ？前面的内容会自动隐式转换为布尔值

  • 三目运算符比赋值运算符优先级高

  • 当需要返回的是布尔值是，不使用三目运算符

条件语句

1. if语句

   • if(条件){}
   • 条件不管是什么表达式，都会隐式转换为布尔值
     • 如果条件表达式运算后隐式转换为布尔值是true，进入该条件 在条件语句中大量使用！配合完成不是这种非真进入

   	if(条件){
   
   	}else{
   	//条件隐式转换为布尔值为false时进入
   	}
   

   • 条件为真执行if的条件语句，不为真执行else语句

   	if(条件1){
   
   	}else if(条件2){
   
   	}else if(条件3){
   
   	}else{
   
   	}
   

   • 仅执行其中一个条件结果

   •  if(条件1){
     
      } 
      if(条件2){
     
      }...
     

     • 每个条件都会判断，根据判断结果执行对应的内容

2. 多分支结构语句

   switch(表达式){
   	case 值1:
   	// 当表达式绝对等于值1时，执行
   	break;//跳出当前条件，如果不写break，不判断值2是否相等，直接穿越
   	case 值2:
   	// 当表达式绝对等于值2时，执行
   	break;
   	case 值3:
   	// 当表达式绝对等于值3时，执行
   	break;
   	case 值4:
   	// 当表达式绝对等于值4时，执行
   	break;
   	default:
   	// 默认以上条件都不满足时，执行
   }
   

   • 状态机

     •   var status="";
         const RUN="run";
         const WALK="walk";
         const JUMP="jump";
         const FIRE="fire";
       
         status=RUN;
         switch(status){
         	case RUN:
         		console.log("跑步动画");
         		break;
         	case WALK:
         		console.log("走路动画");
         		break;
         	case JUMP:
         		console.log("跳跃动画");
         		break;
         	case FIRE:
         		console.log("开火动画");
         		break;
         	default:
         }
       

循环语句

1. while循环

   • 条件表达式都是将结果转换为布尔值

   • 深度遍历、广度遍历

   • break

   • 跳出

   • 提高运行性能

   • break abc;

     • 循环前增加id:(abc:)
     • abc 是循环的冒点名
     • break可以跳出锚点指定的位置

   • continue

   • 继续

   • 遇到满足条件的跳到下一次循环继续向后，当前continue后面的语句不再执行

   • 当

2. do-while循环

   do{
   	//循环体
   }while(条件)
   

   • 先执行再判断条件是否继续执行
   • 特点
     • 不管条件是否满足，至少执行一次

3. for循环

   for(vari=0;i<100;i++){}
   

   • for(循环需要的初始值;循环的条件(当满足条件时执行语句块);变量不断向条件外变化)

     • 循环需要变量的初始值仅执行一次
     • var不是必要在循环内，可以先定义再循环，防止循环定义多次
     • 循环条件是一个表达式，隐式转换为布尔值，为真时进入语句块根循环次数判断多少次
     • 变量不断向条件外变化，实际是每次循环完成后执行的语句内容，在下一次判断之前执行

   • 关于for的死循环

     for(;;){}
     

   • 注意

     • 当进行反向循环时(从大到小循环)，条件注意使用=的问题
     • 在双重循环时，不要在内层循环判断外层变量或改变外层变量
     • 使用break时，不写跳出的lable，仅跳出当前层循环
     • 循环是同步的，循环同时创建
     • 循环总次数不能超过10亿次
     • 循环不能嵌套太多，一般不超过两层

   • while循环效率最高，递归循环时间复杂度最低