一、概述

1.1 js语言

  • js是在浏览器中运行的一种语言，即客户端语言，用于验证表单信息（邮箱、手机格局等），页面的部分更新（dom操作），浏览器的操作（bom0操作）。
  • js是解释型语言，无需编译，间接运行在js解释器上，java/c为编译型语言：java->.class 再运行到jvm上、c->.out 再运行到linux上。

1.2 js解释器

最后IE、网景都推出了蕴含js解释器的浏览器，因其解释器并不对立，所以相应的js规范就也不一样，产生了很多兼容性问题。

1.3 js组成

  • ECMAScript5（Javascript规范）

    语法：变量、关键字、保留字、表达式、流程管制语句、对象、函数、数组...

  • DOM: Document Object Model （文档对象模型，浏览器厂商通过es5编写的管制html/css的代码）

     document.getElementById();dom.addEventListener()dom.attachEvent()

  • BOM: Browser Object Model （浏览器对象模型，浏览器厂商通过es5编写的管制浏览器的代码）

    alert();setTimeout(function(){ },1000)XMLHttpRequest (ajax)

（Dom和Bom都会有不兼容的状况，因为是由各自的浏览器编写的。）

1.4 nodejs

google将各类浏览器中的js解释器从新归并整合为nodejs，使其能够装置在任意的服务器端，nodejs中提供了大量的根底库,file、http,这个时候js就具备了服务器端能力。

在nodejs中不存在兼容性问题，因为nodejs中压根就没有dom/bom，因而不能在nodejs中执行任何dom和bom代码，因为不存在兼容性问题，nodejs能够大量施展js高级规范，所以ES6语法个别在nodejs中能够齐全运行。(在浏览器中能够局部运行）

1.5 js执行

  • 在nodejs中

    1. 在vi中编辑（es5）
    2. 在nodejs中执行

  • 在浏览器中

    1. 在vscode中编辑（es5、dom、bom）

      html --> <script></script>(个别该标签位于<body>标签前)

    2. 在浏览器中执行

二、正文

html: <!-- 正文 -->
css: /**/
Js: //单行正文
/*多行正文*/

三、关键字和保留字

保留字 --> 未来可能成为关键字

四、变量

4.1 弱类型语言

Js 是弱类型语言

1) 变量的数据类型在初始化的时候确定

2) 变量的数据类型能够随时产生扭转

3) 类型细分不显著

var a; a = 2; a = "二"

Java 是强类型语言

1)变量的数据类型在申明的时候确定

2)变量的数据类型肯定确定不能更改

int a; a = 2;

String b ; b = "hello world"

double c = 2.5;

4.2 var

（let 变量、const 常量，es6呈现）

  • var变量能够反复申明

    var a = 3;var a = "hello world"

  • var变量申明会被晋升 (函数的申明也会)

    var a;console.log(a)a=3;
    console.log(a);var a = 3;

    （高低等价）

  • var申明的变量没有部分作用域

    function foo(){    if(true){        var a = 3;            console.log("inner",a);    }    console.log("outer",a);}foo();

五、数据类型

5.1 分类

5.1.1 根本数据类型

变量的值（简略值）是保留在栈区

  • Number
    var a = 2;
    var a = 2.1;
    var a = 0X10;
    var a = 010;

  • String
    var a = "hello world"
    var a = 'hello world'
    var a = `

      hello world

    `;
    json字符串-对象（属性名必须用双引号）
    var json = '{"name":"terry","age":12}'

  • Boolean
    var a = true;
    var a = false;
  • Null(空指针对象)
    var a = null;
  • Undefined
    var a;
    var a = undefined;

5.1.2 援用数据类型（指针）

变量的援用地址保留在栈区，真正的值（简单值）保留在堆区

除了根本数据类型之外的所有其余数据类型被称为援用数据类型

var a = {name:"terry",age:12}var a = [18812344321,15912344321];var a = function(){}var a = /[abc]def/i                //正则表达式

5.2 类型检测

var a = 3;typeof a;                                //输入'number'typeof null/[]/{};                        //输入'object'typeof undefined                        //输入'undefined'

5.3 深拷贝浅拷贝

  • 浅拷贝【地址拷贝】

    //对象浅拷贝var a = {name:"terry",age:12}var b = a;b.age++;console.log(a.age);                //a.age=13
    //数组浅拷贝var arr = [[1,2,3],[1,3,4]];b[0] = arr[0][0];b[0]++;console.log(arr[0][0]);            //arr[0][0]=2
    • Object.assign({},a)

  • 深拷贝【克隆】(根本数据类型都是深拷贝)

    1. 对象 ->json格局的字符串 -> 对象

      var a = {name:"terry",age:12}var c = JSON.parse(JSON.stringify(a));
    2. lodash

5.4 其余

  • NaN--not a number

    var result = 10/'a'                        //NaN    console.log(isNaN(result));                //true

  • Infinity、-Infinity--无穷大

    var result = 10/0;                //Infinityvar result = -10/a;                   //-Infinityconsole.log(isFinite(result));    //false

六、操作符

表达式由操作符和操作数组成

6.1 算术操作符

容许非number类型的操作数进行运算，在运算之前，个别须要先将其余数据类型转换为数字类型再进行运算

  • +、 +=

    var a = 3;var b += a;    var result = 1 + 2var result = 1 + true;

    当操作数中呈现了字符串，+ 运算就变成了字符串拼接运算。

    var result = true + '1';        //    true1

  • -、-=

    var result = 3 - 2;var result = 3 - true;     //2var result = 3 - 'a'         //NaN

  • *、*=

    var result = 2 * 3;

  • /、/=

    var result = 5/2;

  • %、%=

    var result = 5%2;

6.2 比拟操作符

运算后果个别为boolean

  • <
  • <=
  • =

  • == 等于

    将操作数转换为同一数据类型再进行比拟

    1) 比拟根本数据类型的值

    2) 比拟援用数据类型的援用地址。

    var a = {name:"terry"}var b = {name:"terry"}var result = a == b;                        //falsevar result = '{"name":"terry"}' == '{"name":"terry"}'        //true,因为两个对象是字符串而不是对象var result = NaN == NaN                     //falsevar result = null == undefined                //true

  • === 全等

    先比拟两个操作数的数据类型，如果数据类型不统一，间接返回false,当数据类型统一的时候才对比值

    var result = 1 == "1"            // truevar resule = 1 === "1"             // falsevar result = null === undefined                //false

如何比拟两个对象的属性是否统一

        1. 先将对象序列化为json字符串        2. 对json字符串进行比照

6.3 逻辑操作符【短路运算符】

  • &&
    返回值不肯定是boolean类型

    true && false // false

    true && true // true

    var a ;var result = a && 3;                            //undefinedvar result = 3 && a;                            //undefinedvar result = "hello world" && 3;                //3

  • ||

    true || false; //true
    false || false; //false

    var result = 1>2 || 'hello';    // hello,1>2为false，然而无奈确定整个表达式的后果，整个表达式的后果取决于第二个表达式，将其返回即可。var result = 1<2 || 'hello'     // true,1<2为true,能确定整个表达式的后果，无需进行接下来的运算。

  • !

    !true //false
    !false //true
    !!true //true
    将其余数据类型转换为boolean类型

    var result = !"hello"     //falsevar result = !!"hello"    //true

6.4 三目操作符

表达式1 ? 表达式2 : 表达式3

如果表达式1为真，返回表达式2；如果表达式1为假，返回表达式3

6.5 一元运算符

  • +

    +3 //3
    一元加运算符后的操作数如果是其余数据类型，则转换为数字类型
    +true //1

    +'23' //23,前提是加号前无变量

  • -

    一元减，负
    -3 //-3
    -true //-1
    -(-true) //1

    -(-'123') //123

  • ++
  • 自增
  var a = 3;  var result = a++ + ++a  console.log(result);        //8，++a先执行，即4+4，表达式执行完结后，执行a++，a的值变为5  console.log(a);                //5
  • --

    自减

6.6 位运算 *

原、反、补

针对于数字类型的值进行运算，在运算之前先转换为二进制

  • &
  • |
  • ^

七、类型转换

  • * -> 数字类型
    通常在dom中或者是从后端拿到的数据不是纯数字类型，然而须要进行数学运算，在运算之前要先转换为数字类型

    • Number(a)
    • +a
    • -(-a)
    • parseInt(a)
    var a = parseInt(10,16)                    //16,第二个参数为进制设置
    • parseFloat(a)

  • * -> 布尔类型

    • Boolean(a)

      false : null 0 undefined NaN "" Infinity...

      true: {} [] 1 "hello"

    • !!a
    • if(exp1){ }

      exp1 能够是任意数据类型，因为js在执行过程中会主动将其转换为boolean

  • * -> 字符串类型

    • String(a)
    • a+""

八、流程管制语句

8.1 分支语句

8.1.1 if 分支

if(exp){    xxx}

当exp为true或者能够被转换为true的时候，大括号外部的代码会执行

if(exp){} else {}

当exp为true,执行if代码块的内容，否则执行else代码块的内容

if(exp1){} else if(exp2) {else {}

8.1.2 switch分支

解决if-else if -...-else繁琐，switch更加简洁一些

switch(v){    case c1:        ...        break;    case c2:        ...        break;    ...    default:        ...}

v 示意变量
c1、c2、c3、... 常量
当 v === c1的时候，执行c1代码块中的内容，break示意跳槽switch代码块，如果不加break，后续代码都会执行直到遇到break或者switch完结
default代码块能够位于switch中的任意地位，然而要留神，如果不是位于最下方，肯定在代码块中增加break

8.2 循环语句

因素：初始条件，完结断定条件，累加

8.2.1 for

for(初始化条件; 完结断定条件; 累加){循环体}

8.2.2 while 前置判断循环

初始化条件while(完结断定条件){    迭代}

8.2.3 do-while

初始化条件do {        迭代} while(完结断定条件);

8.2.4 for-in

用于遍历数组或者对象

for(var key in obj){}