1 基础

1.1 程序运行

  1. 打开某个程序时，先从硬盘中把程序的代码加载到内存中
  2. CPU执行内存中的代码

    1.2 引擎

  • JS 引擎：也称为 JS 解释器。 用来读取网页中的JavaScript代码，对其处理后运行，比如 chrome 浏览器的 V8
  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit

    1.3 JS组成

    JavaScript基础 - 图1
    文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展标记语言的标准编程接口。 通过 DOM 提供的接口可以对页面上的各种元素进行操作（大小、位置、颜色等）。

BOM (Browser Object Model，简称BOM) 是指浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行 互动的对象结构。通过BOM可以操作浏览器窗口，比如弹出框、控制浏览器跳转、获取分辨率等。

2 变量

本质：变量是程序在内存中申请的一块用来存放数据的空间。

2.1 同时声明多个变量

  1. var age = 10, name = 'zs', sex = 2;

2.2 声明变量特殊情况

情况 说明 结果
var age ; console.log (age); 只声明 不赋值 undefined
console.log(age) 不声明 不赋值 直接使用 报错
age = 10; console.log (age); 不声明 只赋值 10

3 数据类型

JavaScript基础 - 图2

3.1 Number最大值 最小值

  • 最大值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  • 最小值：Number.MIN_VALUE，这个值为：5e-32

image.png

3.2 特殊值

  • Infinity ，代表无穷大，大于任何数值
  • -Infinity ，代表无穷小，小于任何数值
  • NaN ，Not a number，代表一个非数值
    1. console.log(Infinity > Number.MAX_VALUE); // true

3.3 判断非数字 isNaN

image.png

3.4 转义字符

image.png

3.5 Boolean相加

  1. console.log(true + 1);  // 2
  2. console.log(false + 1); // 1

3.6 Undefined和 Null区别

Undefined 未定义

  1. var variable;
  2. console.log(variable);           // undefined
  3. console.log('你好' + variable);  // 你好undefined
  4. console.log(11 + variable);     // NaN
  5. console.log(true + variable);   //  NaN

null 是空对象指针

  1. var vari = null;
  2. console.log('你好' + vari);  // 你好null
  3. console.log(11 + vari);     // 11
  4. console.log(true + vari);   //  1

  • undefined与null的区别?

    • undefined代表变量没有赋值
    • null: 代表变量赋值了, 只是值为null

      3.7 理解变量类型与数据类型

      js的变量本身是没有类型的, 变量的类型实际上是变量内存中数据的类型

  • 变量类型

    • 基本类型: 保存基本类型数据的变量
    • 引用类型: 保存对象地址值的变量
  • 数据对象
    • 基本类型
      • Number: 任意数值
      • String: 任意文本
      • Boolean: true/false
      • undefined: undefined
      • null: null
    • 对象类型
      • Object: 一般对象类型
      • Array: 特别的对象类型(下标/内部数据有序)
      • Function: 特别的对象类型(可执行)

        4 获取数据类型 typeof

        1. var num = 18;
        2. console.log(typeof num) // 结果 number
        3. console.log(typeof undefined); // undefined
        4. console.log(typeof null); // object
        image.png
        1. const a = {
        2. name: 'ee',
        3. say() {
        4. console.log(this.name);
        5. }
        6. }
        7. console.log(typeof a.say); // function

        5 数据类型转换

        JavaScript基础 - 图7

5.1 向下取整

  1. parseInt(7.8) // 7
  4. Math.floor(7.8) // 7

5.2 boolean转换为false

  1. console.log(Boolean(NaN)); // false
  2. console.log(Boolean(null)); // false
  3. console.log(Boolean(undefined)); // false
  4. console.log(Boolean('')); // false
  5. console.log(Boolean(0)); // false

5.3 转换整数去除字符

  1. parseInt("23px")  // 23

6 运算符

image.png

6.1 递增递减

++num 先自加，后返回值
num++ 先返回原值，后自加

image.png

6.2 逻辑运算符

  1.  var a = 0, b = 0;
  2. console.log(true || ++a); // true
  3. console.log(true && ++b); // 1
  5. console.log(a); // 0
  6. console.log(b); // 1

|| 第一个为true不会继续向下执行
&& 第一个为true会继续向下执行

image.png
image.png

6.3 运算符优先级

image.png

7 循环

7.1 双层for循环打印星星

打印星星：

  1. var row = 3
  2. var col = 3
  4. var star = ''
  5. for(var i = 0; i < row; i++) {
  6.   for (let j = 0; j < col; j++) {
  7.     star += '🌟'          
  8.   }
  9.   star += '\n'
  10. }
  11. console.log(star);
  13. // 倒三角1
  14. var star = ''
  15. for(var i = col; i > 0; i--) {
  16.   for (let j = 0; j < i; j++) {
  17.     star += '🌟'          
  18.   }
  19.   star += '\n'
  20. }
  21. console.log(star);
  22. // 倒三角2
  23.  var star = ''
  24.  for (var i = 0; i < col; i++) {
  25.    for (let j = 0; j < col-i; j++) {
  26.      star += '🌟'
  27.    }
  28.    star += '\n'
  29.  }
  30. console.log(star);
  33. // 顺三角
  34. var star = ''
  35. for (let i = 1; i <= row; i++) {
  36.   for (let j = 1; j <= i; j++) {
  37.     star += '🌟'
  38.   }
  39.   star += '\n'
  40. }
  41. console.log(star);

image.png
九九乘法表：

  1. str = ''
  2. for (var i = 1; i <= 9; i++){
  3.   for ( var j = 1; j <= i; j++){
  4.     str += j + '*' + i + '=' + i*j + '\t';
  5.   }
  6.   str += '\n'
  7. }
  8. console.log(str);

image.png
双层循环主要是外行内列

外层循环控制输出行数
内层循环控制输出列数

实质二维数组

8 数组

8.1 原始求最大值

  1. var arr = [2, 6, 1, 77, 52, 25, 7]
  2. var max = 0
  3. for (let i = 0; i < arr.length; i++) {
  4.    max < arr[i] && (max = arr[i])
  5. }

8.2 原始过滤指定元素数组

  1. var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
  2. new_arr = []
  3. for (let i = 0; i < arr.length; i++) {
  4.    if (arr[i] != 0){
  5.         new_arr[new_arr.length] = arr[i]
  6.    }
  7. }
  8. console.log(new_arr); // [2, 6, 1, 77, 52, 25, 7]

8.3 原始反转数组

  1. var arr = ['red', 'green', 'blue', 'pink', 'purple'];
  2. var new_arr = [];
  3. for (let i = 0; i < arr.length; i++) {
  4.      new_arr[i] = arr[arr.length-i-1];
  5. }

8.4 冒泡排序

  1. var arr =  [5, 4, 3, 2, 1]
  2. for (let i = 0; i < arr.length - 1; i++) {
  3.   for (let j = 0; j < arr.length - i - 1; j++) {
  4.     if (arr[j] > arr[j+1]) {
  5.       var temp = arr[j];
  6.       arr[j] = arr[j + 1];
  7.       arr[j + 1] = temp;
  8.     }
  9.   } 
  10. }

image.png
有点累似倒三角输出

8.5 去除重复数组元素

  1. var arr = ['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']
  2. var new_arr = []
  3. for (let i = 0; i < arr.length; i++) {
  4.   if (new_arr.indexOf(arr[i]) === -1) {
  5.     new_arr.push(arr[i])
  6.   }
  7. }
  8. console.log(new_arr); // ["c", "a", "z", "x", "b"]

8.6 双层for循环去重

  1. var arr = [1, 1, 2, 34, 4, 5, 6, 3, 4344, 66, 43, 1, 1, 1]
  2. for (var i = arr.length - 1; i >= 0; i--) {
  3.   for (var j = i - 1; j >= 0; j--) {
  4.     if (arr[i] === arr[j]) {
  5.       arr.splice(j, 1)
  6.     }
  7.   }
  8. }
  9. console.log(arr); // [2, 34, 4, 5, 6, 3, 4344, 66, 43, 1]

9 函数

9.1 形参 实参

  1. function 函数名(形参1, 形参2 , 形参3...) { 
  2.  // 函数体
  3. }
  4. // 带参数的函数调用
  5. 函数名(实参1, 实参2, 实参3...);

9.2 内置对象arguments

arguments展示形式是一个伪数组，因此可以进行遍历。伪数组具有以下特点： 

  • 具有 length 属性 
  • 按索引方式储存数据 
  • 不具有数组的 push , pop 等方法

不确定有多少个参数传递的时候，可以用 arguments 来获取。
arguments 对象中存储了传递的 所有实参。

  1. function doSum() {  
  2.   var sum = 0;
  3.   for (let i = 0; i < arguments.length; i++) {
  4.     sum += arguments[i] 
  5.   }
  6.   return sum
  7. }
  8. console.log(doSum(1,2,3,4,5));

10 作用域

10.1 let和var

  1.  if(true){
  2.    let a = 1
  3.    var b = 2
  4.    }
  6. console.log(b);
  7. console.log(a)

image.png
let 受块级作用域影响
var 不受块级作用域影响

10.2 变量作用域

在函数内部 var 声明的变量是局部变量，函数的形参实际上就是局部变量

  • 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存
  • 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间

    10.3 作用域链

    就近原则
    1. var a = 1;
    2. function fn1() {
    3. var a = 2;
    4. var b = '22';
    5. fn2();
    6. function fn2() {
    7.   var a = 3;
    8.   fn3();
    9.   function fn3() {
    10.     var a = 4;
    11.     console.log(a); //a的值 4
    12.     console.log(b); //b的值 '22' 
    13.   }
    14. }
    15. }
    16. fn1();
    image.png

11 预解析

预解析：在当前作用域下, JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。

预解析也叫做变量、函数提升。

11.1 变量提升

变量提升只提升声明，不提升赋值

  1. console.log(num); // undefined
  2. var num = 10;    
  3. // 即 内存中为
  4. var num;
  5. console.log(num);
  6. num = 10

11.2 函数提升

函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

  1. fn();  // 打印
  2. function fn() {
  3.     console.log('打印');
  4. }

函数表达式创建函数，会执行变量提升，此时接收函数的变量名无法正确的调用：

  1. fn(); // fn is not a function
  2. var  fn = function() {
  3.     console.log('想不到吧');
  4. }
  6. // 预解析为
  7. var fn;
  8. fn();
  9. fn = function() {
  10.     console.log('想不到吧');
  11. }

该段代码执行之前，会做变量声明提升，fn在提升之后的值是undefined；
而fn调用是在fn被赋值为函数体之前，此时fn的值是undefined，所以无法正确调用.

11.3 案例

  1. f1();
  2. console.log(c);  // 9
  3. console.log(b);  // 9
  4. console.log(a);  // a is not defined
  5. function f1() {
  6.   var a = b = c = 9;
  7.   console.log(a);   // 9
  8.   console.log(b);   // 9
  9.   console.log(c);   // 9
  10. }
  12. 相当执行了以下代码：
  13. function f1() {
  14.   var a;
  15.   b;
  16.   c;
  17.   a = b = c = 9;
  18.   console.log(a);
  19.   console.log(b);
  20.   console.log(c);
  21. }
  22. f1();
  23. console.log(c);  
  24. console.log(b);
  25. console.log(a);

12 对象

本质：对象就是一组无序的相关属性和方法的集合
构造函数泛指某一大类，比如苹果，不管是红色苹果还是绿色苹果，都统称为苹果。

12.1 利用字面量创建对象

  1. var star = {
  2.   name : 'pink',
  3.   age : 18,
  4.   sex : '男',
  5.   sayHi : function(){
  6.       alert('大家好啊~');
  7.   }
  8. };

12.2 对象的调用

  • 对象里面的属性调用 : 对象.属性名 ，这个小点 . 就理解为“ 的 ” 
  • 对象里面属性的另一种调用方式 : 对象[‘属性名’]，注意方括号里面的属性必须加引号，我们后面会用
  • 对象里面的方法调用：对象.方法名() ，注意这个方法名字后面一定加括号

12.3 利用构造函数创建对象

构造函数 ：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

  1. function Person(name, age, sex) {
  2.   this.name = name;
  3.   this.age = age;
  4.   this.sex = sex;
  5.   this.sayHi = function() {
  6.       alert('我的名字叫：' + this.name + '，年龄：' + this.age + '，性别：' + this.sex);
  7.   }
  8. }
  9. var bigbai = new Person('大白', 100, '男');
  10. var smallbai = new Person('小白', 21, '男');

12.4 new关键字

new 在执行时会做四件事情：

  1. 在内存中创建一个新的空对象。
  2. 让 this 指向这个新的对象。
  3. 执行构造函数里面的代码，给这个新对象添加属性和方法。
  4. 返回这个新对象（所以构造函数里面不需要return）

12.5 遍历对象

  1. for (变量 in 对象名字) {
  2. // 在此执行代码
  3. }
  5. for (var k in obj) {
  6.   console.log(k); // 这里的 k 是属性名
  7.   console.log(obj[k]); // 这里的 obj[k] 是属性值
  8. }

13 关键字 in

in 操作符用来判断某个属性属于某个对象

  1. const obj = {
  2.   name: 'hehe',
  3.   age: 20,
  4.   sex: 'boy'
  5. }
  6. console.log(20 in obj);     // false
  7. console.log('sex' in obj);  // true
  8. console.log('hehe' in obj); // false