JavaScript基础知识

一、js简介

1.JavaScript语言

  用这个语言来操作网页页面的 css 和 浏览器功能 和 网络（显示效果和用户交互，前后端交互）

2.怎么实现？

  DOM BOM 前端框架（vue react 小程序 大数据页面 游戏）后端技术和框架（node egg）

3.js由什么组成？（校招笔试题）

  要操作网页——>DOM

  要使用浏览器的功能（计时器、历史记录、缓存、网页请求等）——>BOM

  js语言之前是私企 开源后是ECMAScript——>核心ECMAScript

4.javascript引入方式

1.任意地方添加script标签然后在标签内部写js代码——嵌入式

2.在标签内部的事件属性中写js代码——行级

3.js文件中写：外部导入——引入式

• ES5低版本：同时存在外部文件和标签内部脚本时只运行外部文件不运行脚本标签内部的代码
• ES6高版本：同时存在外部文件和标签内部脚本时都会运行

4.控制台 代码属于当前页面 因为浏览器的控制台其实就是js的运行环境

二、词法结构

1. 空格：js会忽略标识符前后的空格
2. 注释：// 单行注释    /*多行注释*/
3. 直接量：js中直接使用的数据值叫做直接量 eg. 12  "这是字符串直接量"  true null [1,2,3] ...
4. 标识符：js使用标识符对变量和函数及其参数进行命名 最好见名知意
5. 保留字：关键字 定义标识符时不能使用
6. 分号：分隔语句 

三、类型、值和变量

（一）变量

   1.变量

• 是一个值的符号名称，可以通过变量引用值
• 把一个值赋值给变量，变量保存该值，程序需要时直接引用该变量
• 获取标签元素  数字（不分类型）

   2.变量名的书写方式：

• 区分大小写
• 由 $ 、_ 、 字母和数字组合而成（不以数字开头）
• 不能写关键字 保留字
• 取名最好语义化 见名知意 不要缩写 可拼音 单词 驼峰命名法

   3.变量的数据类型：五中基本数据+引用数据

• 基本数据：数字 字符串 布尔值 null undefined
• 引用数据：数组  时间 函数 标签...

   4.变量声明：

• 使用一个变量之前需要先声明，使用没有声明的变量会报错
• 使用var来声明变量 若没有赋值则初始值为undefined

  5.变量的存、取值操作

• 如果一个变量在存在值时 变量还没有声明var 系统就会隐式帮我们声明这个变量 然后变量
• 如果一个变量存在值时 变量已经声明了 这时就会覆盖之前的值
• 如果一个变量存在值时 变量已经声明了并赋值过了 就会取出最近一次保存的数据
• 如果一个变量存在值时 变量没有声明过 这时就会报错

（二）数据类型

   1.基本数据类型：

    undefined ：

• 未定义 或者是定义了变量但是变量没有初始化
• 为了程序的安全而设定的数据
• 如果函数没有返回值则返回undefined
• typeof undefined：返回的是字符串undefined
• ==认为null与undefined是相等的，但===返回false

     number ：

• 数字类型 不分整数和浮点数（均用浮点数表示，精度缺失）
• .tofixed(n) 保留n位小数 会四舍五入
• Math.ceil  向上取整
• Math.floor  向下取整
• Math.around 四舍五入

     Boolean：  

• 布尔值 true f alse  是保留字 小写
• 通常用于控制语句中
• 可使用Boolean() 将 undefined  null  0  -0  NaN  "  转化为布尔值的false 
• 其他值转化为true，包括空数组、对象等

     null：

• 空值 是保留字
• 代表了该变量是有数据的 只是还未写入
• typeof null：返回的是字符串object，也就是说可以把null看成一个特殊的对象

     string ：

• 字符串的双引号不是字符 是为了跟变量区分的标记
• 可以是单引号 双引号 还可以是反引号（ES6）
• 字符串的索引从0开始
• 拼接 + ：一个字符串会把另一个非字符串变成字符串类型进行拼接

  2.引用数据：（比较时看是否是同一个内存空间）

    数组array：

• 元素之间用逗号隔开
• 数组通过下标取值 从0开始
• 数组中可以保存很多数据，且数据类型不限 也可以保存数组

空数组会转化为字符串： var arr=[];var b='';    ——> 此时arr=b

   对象object：

• 用来保存任意类型的数据 但每一个数据都要自己设置成员名{键:值}
• 访问对象的属性：obj["name"] <==>obj.name
• 通过.访问对象的属性和方法：对象.属性名;   对象.方法名();

   函数function：

• 定义函数：函数名=function(){函数体}
• 声明函数： function 函数名 (){函数体}
• 调用函数：函数名();  每调用一次执行一次
• 是一种特殊的对象（引用数据） typeof的结果是function 而不是 object

  3.检测数据类型typeof：

• 返回值 undefined number boolean null string function object（只能是这7个值）
• 返回值的类型是字符串

四、表达式与运算符

（一）表达式

  概念：

• 指js代码的形式
• 表达式和表达式组合就变成了语句 语句和语句组合就变成了程序

  原始表达式：

•  不可再分隔，是最小单位的表达式
•  包含：直接量、关键字和变量名

  数组初始化表达式：

• 数组直接量： []; [1,2,3,4]; [['a','b','c'],['e','f','g']]; ...
• 创建一个数组：var arr= new Array()

  对象初始化表达式:

• 对象直接量：{name:"abc"}
• 创建一个对象：var obj=new Object()

  属性访问表达式：

• 两种访问方式：点（.）、中括号（[]）
• 中括号适用所有情况 点的访问更方便
• obj["name"]      obj.name

  调用表达式：

• 如果调用的函数或方法有返回值，则表达式的值就是该返回值
• 如果调用的函数或方法没有返回值，则表达式的值就是undefined
• 取值得到了一个函数 然后加小括号就可以调用函数
• 即函数或方法名称后面加上小括号就代表调用执行
• fn();   a.sort(); 

（二）运算符

   算数运算符：

      加+  减-  乘*  除/  取余%

      +：数字相加 或 字符串连接

• 如果其中一个操作数是对象，则js会自动把它转化为基本类型的值
• 如果其中一个操作数是字符串，则另一个也会转化为字符串，即字符串连接
• 如果两个数都是数字，则进行加法运算

  一元算数运算符：

• +：可以拿来很方便的把操作数转换为数字
• -：把操作数转换成数字，改变运算结果的符号
• ++、--：自增自减运算符，常用于循环的计数器控制
• ++a：先加1  再取值
• a++：先取值 再加1

  逻辑表达符：

      && 逻辑与：

• var re=A&&B  都为true才返回true
• A是一个表达式 B也是一个表达式 re等于A或者B
• 如果A表达式为false 后面代码不执行 则re=A 否则re=B
• 如果re=A 则B不运行

      || 逻辑或 ：

• var re=A||B  有一个为true就返回true
• A表达式为true时 re=A 且 B不运行   反之B
• 该符号在开发中，往往是优化的代码

      ! 取反：

• 首先将操作数转换为布尔值，然后对布尔值取反
• 开关思想：在一个变量保存一个布尔值  在执行业务时 在函数里面修改这个变量的值 为取反 然后通过变量的值执行分支业务

  关系表达式：

• 总是返回一个布尔值true/false
• ==：相等运算符，比较两个表达式的值是否相等，不考虑类型
• ===：恒等运算符，比较两个表达式的值是否相等，要考虑类型
• 比较运算符：>   <   >=   <=
• in运算符：检查右侧对象里是否拥有左侧属性名，有则返回true
• instanceof：检查左侧对象里是否是右侧类的实例，有则返回true

  三目运算符：

• 条件运算符（?:）
• 结构： 条件?条件为true执行:条件为false执行;

  逗号运算符：

• 用于分隔语句，返回的是最后一个语句的值
• 会把逗号隔开的表达式全部执行 最后一个运行的表达式的结果就是逗号运算符的结果

  表达式计算：

• eval():解释运行由js源码组成的字符串，并产生一个值

五、语句

(一) 概念：

• 语句以分号（;）结尾，也可以换行作为新的语句开始
• js程序就是一系列语句的集合
• 空语句：只有语句的结束符分号（;），没有其他代码
• 单语句：每一个单语句以分号结尾  
• 复合语句：用大括号将多条语句括起来   语句块的结尾不需要加分号

(二) 条件语句：

 1. if语句：

• if(表达式){ } 

          表达式判定为真就执行大括号里的内容 

• if(表达式){ }else{ }  

          表达式判定为真就执行第一个大括号  假就执行else后的大括号

• if(表达式){ }else if{ }else{ } 

           不是js的标准语法 是程序员利用js引擎的纠错功能实现了其他语言的这个功能

  2. switch语句:

• switch(表达式){}

          代码块中使用多个case关键字标记的代码片段 case后跟表达式和冒号

          适用于多个分支依赖于同一个表达式

(三) 循环语句：

  1. while语句：

• while(表达式){statement}; 

          不断执行statement主体语句 直到表达式为假时结束循环

  2. do...while语句：

• do{statement}while(表达式);

          先执行再判断 至少执行一次 

  3. for语句：

• for(初始化语句;循环判断语句;计数器变量更新){statement;} 

          不断执行statement主体语句 直到判断条件不成立

  4. for...in语句： 

• for(variable in object){statement;}

          for...in循环出来object里所有属性的属性名或者元素的下标

(四)跳转语句：

  1. break语句：

• 直接跳出循环 用于结束循环

  2. continue语句：

• 结束本次循环，并继续执行下一次循环

  3. label语句：

• 给代码块取个名字 可与continue语句连用 指定要停止的循环

  4. return语句：

• 只能在函数体内出现
• return后面的代码不会执行
• 在调试函数时可以使用return指定断点位置

  5. throw语句：

• 用于抛出异常：立即停止正在执行的程序，跳转至就近的逻辑异常处理程序

  6. try-catch-finally语句：   

• 是js的异常处理机制
• try{正常业务代码}catch(e){上面的业务代码报错就执行这里的代码}finally{总是会执行的代码}

js 是脚本语言 当运行过程中遇到错误就停止运行 后面的代码也不执行

若想继续执行错误后面的 用try{} catch(){} 语句 ：

              try 捕获错误

              catch 解决错误/不管

              finally 不管有没有错都要运行的语句

(五)其他语句：

    with语句：

      *官方不建议使用 有性能问题

       解决方案：ES6解决了这个性能问题  出了新技术：解构赋值           

var {age,name}=obj;
console.log(age)