JS进阶

211 阅读10分钟

day01

> - 变/常量、数据类型、内存、函数

变量和常量:

1、变量中存的数据的值不可以修改,(100这个值是不会变的,我们改的不是100这个值)

2、常量:const a 常量a不可变

变量和常量

      1. 变量:用来存放数据,保存的数据可以修改

      2. 常量:用来存放数据,保存的数据不可修改

      3. 变量和常量的本质,无论是变量还是常量,其本身都是数据,也需要在内存中占用内存空间,保存在内存的栈结构分区中

数据类型:

数据类型

      1.ECMAScript标准定义了8种数据类型

        - 7种原始数据类型:String,Numbr,Boolean,Undefined,null,Symbol,BigInt

        - 1种复杂数据类型:Object

基本数据类型(简单数据类型)

      1. 基本数据类型

        - string,number,boolean,undefined,null

引用数据类型(复杂(复合)数据类型)

      1. 引用数据类型

        - Object,Function,Array

typeof 运算符(判断数据的类型)

      1. 作用:用来获取当前变量中存储的数据的类型

      2. typeof的返回值有多少个

        - String,Number,Boolean,Undefined,Object,Function

        - 特殊的有两个:null和array的结果都是Object

instanceOf 运算符(原生JS判断实例化对象的类型)

      1. 作用:用来判断当前实例化对象是不是某种数据类型

基本数据类型和引用数据类型在内存中,内存空间是如何存储数据的

      1. 除 Object 以外的所有类型都是不可变的(值本身无法被改变),JavaScript 中字符串是不可变的(译注:如,JavaScript 中对字符串的操作一定返回了一个新字符串,原始字符串并没有被改变)。我们称这些类型的值为“原始值”。

      2. 基本数据类型的值在栈空间中存储,如果修改了数据,则是把原来的值直接干掉,重新存放新的值

      3. 引用数据类型的对象在堆空间中存储,该空间的地址在栈空间中存储,如果修改栈空间存储的地址,则指向发生变化,也叫引用发生了变化,此时是在堆空间中重新指向了一个新的内存空间(存储了一个新的对象)

      4. 基本类型之间的值如何传递? 传递的是数值

      5. 引用类型之间的值如何传递? 传递的是引用(地址)

内存结构: 内存:用于暂时存放CPU中的运算数据以及与硬盘等外部存储器交换的数据

      1. 计算机在运行中,CPU就会把需要运算的数据调到内存中进行运算,当运算完成后CPU再将结果传送出来,内存的运行也决定了计算机的稳定运行。

      2. 内存通电后产生的存储空间(临时的)

      3. 产生和死亡:内存条(集成电路板)--->通电--->产生一定的容量存储空间--->存储各种数据--->断电--->内存空间全部消失

      4. 内存的空间是临时的,而硬盘的空间是持久的

      5. 内存包含2个数据:内存存储的数据(一般数据/地址数据)和内存地址值数据

      6. 内存分类:

        - 栈结构(列表结构): 全局变量,局部变量(空间较小)

        - 堆结构: 对象 (空间较大)

函数——是一段重复代码的封装。

定义、功能、分类、调用方法、局部作用域……、调用函数时的this…… image.png

函数: 代码的重用;分为:函数声明及函数表达式,一个函数最好只代表的是一个功能 。函数可以隔离变量,减少命名冲突(命名污染)

      1. 函数声明

        - function () {}

      2. 函数表达式:

        - var fn =function (){}

      3. 函数调用的方式:

        - 直接调用 fn()

        - 对象调用 obj.sayHi()

        - new 构造函数 new Object()

        - apply/call 调用 f1.call(this,num1,num2), 改变this的指向

方法 :对象的一种行为

image.png   回调函数:定义了,没有直接调用,但是最后执行了

      1. 常见的回调

        - DOM事件的回调

        - 定时器中的回调

        - ajax回调函数(后面讲)

        - 生命周期的回调(后面讲)

      2. IIFE立即执行函数(Immediately-Invokey Function Expression) 匿名函数自调用

        - 作用:隐藏内部实现,减少命名空间的污染

      3.图例:

image.png

总结函数:

      1. 函数也是对象(原型可以体现出来)

      2. 函数具备行为,可以被调用

      3. 函数:普通函数,构造函数,匿名函数(自调用:IIFE)

      4. 回调函数(事件的回调,定时器的回调)

      5.函数创建完之后会产生一个scope对象,用于保存当前作用域的上级作用域。

> call、apply和bind

image.png

> this

this: 首先是一个关键字 , 其实也是一个特殊的变量

      1. 提前定义好的,内置变量,特殊的一个关键字

      2. 全局的this:window

      3. 函数中的this:

        - 默认函数中的this是window

        - 方法中的this是当前的实例对象

        - 原型对象中的this是当前的实例对象

      4. 本质上任何函数在执行时都是通过某个对象调用的

      5. this怎么确定?函数调用的时候才能确定this是谁

> 预解析

image.png

> null

image.png

> 执行上下文与作用域链

image.png

image.png


day02

- 对象

对象 : 具有一定的属性或者方法 , 特指的某个事物

    1. 看得见或者是摸得到,特指的某个东西

    2. 识别对象,抽象出对象有什么特征和行为

    3. 抽象出当前的对象属于什么类别

    4. 以上都是抽象出对象和类别的过程,抽象性

    5. 抽象的过程要转变成代码的方式,写代码:先有类别(构造函数),创建对象并设置对象的属性及方法的初始值,对象的初始化过程,最终对象调用相关方法,操作相关属性及某些行为

    6. 特征就是属性,行为就是方法,类别就是构造函数,创建对象就是实例化的过程(初始化属性及方法的中)

- 创建对象的不同方式

image.png

- 原型

image.png

image.png

- 如下程序运行结果为?

var obj = {};
var o1 = { m: 2 };
var o2 = { n: 3 };
obj[o1] = 4;
obj[o2] = 5;
console.log(obj[o1]);

day03

- 原型的作用

image.png

- 原型链

image.png

- 闭包

image.png

- 内存溢出&泄漏

  1. 内存泄露 :是指程序在申请内存后,无法释放已申请的内存空间就造成了内存泄漏,一次内存泄漏似乎不会有大的影响,但内存泄漏堆积后的后果就是内存溢出。

  2. 内存溢出: 指程序申请内存时,没有足够的内存供申请者使用,或者说,一个杯子里你非要装一桶的水,那么结果就是内存不够用,即所谓的内存溢出,简单来说就是自己所需要使用的空间比我们拥有的内存大内存不够使用所造成的内存溢出。


day04

- js单线程

image.png

- 事件轮询机制

image.png

- 高阶函数

image.png

- 递归

image.png

- ES简介

ECMA组织介绍 -“European Computer Manufacturers Association” 

      1.ECMA组织:欧洲计算机制造协商会,制定和发布的脚本语言规范

      2.ECMAscript是基于Netscape javaScript的一种标准脚本语言。

      3.JavaScript包含3个部分:

        1)ECMAScript核心(JS标准语法)

        2)浏览器端的扩展

          BOM(浏览器对象模型)

          DOM(文档对象模型)

        3)服务器端的扩展

          Node.js

      4.ES的几个重要版本

        ES5:09年发布

        ES6:15年发布,也叫ECMA2015

        ES7:16年发布,也叫ECMA2016

- 严格模式

image.png


day05

- JSON、localStorage对象

image.png

- Object扩展-ES5给Object扩展了一些静态方法,常用的2个:

    1Object.create(prototype,[descriptors]) 创建对象并实现继承,创建干净的对象
    2Object.defineProperties() 克隆数据,增加和修改属性

image.png

- ES6

image.png

image.png

- Promise对象 - 看官网

- iterator接口(指针) - 看官网

- generator懒函数 - 看官网

- async函数

image.png

- 交换两数的值(4种方法)


day06 - 结合官网学习

- 类

- 深浅拷贝

image.png


day07

- JQuery

- 练习:

1.图片随鼠标移动

image.png

2.当前图片高亮其余暗淡

image.png

3.广告位招租

image.png

4.下拉列表案例

image.png

5.相机列表

image.png

6.手风琴

image.png

7.ToDoList

image.png


day08

- 继承 - js实现继承

- 正则

/**
 * 
 * 正则表达式: 是一个有规则的式子,规则表达式,有一定的规则,最开始出现在医学
 * 主要的作用:匹配字符串的,
 * 用处:
 * 1.表单验证----前端用的最多
 * 2.下载数据---后台
 * 3.网络爬虫---后台
 * 。。。。。。。
 * 
 * 正则表达式是用元字符组合成的
 * 元字符: 就是一些具有特殊意义的符号
 * 正则表达式:一些具有特殊意义的符号组合成的一个表达式
 * 
 * 正则表达式的元字符: 元字符和限定符
 * 
 */
 /*
 
   元字符:
   .    除了\n以外任意的单个字符   'hello a '
   []   范围和干掉原有的意义  [0-9]   '今天好开心啊,hello 98362?'   [.]  就是普通的点,
        [a-z] 所有的小写字母    [A-Z]  所有的大写字母    [a-zA-Z] [a-zA-Z0-9]
        '98362'   [0-9]
    ()  提升优先级及分组
      [3-8]([.][a-z])  3到8之间任意的一个数字后面是一个.后面是一个小写字母
      分组:   (([a-zA-Z0-9_.-])([@]))  有三组, 每一对括号都是一组,将来是用来替换操作的,从最左边的(计算
        ()(())((()))   RegExp.$3 ='哈哈'
    |  或者     ^(([0-9])|([A-Z]))$    '3D'  
    ^  以什么开始     ^[0-9] '23fsfsdfds'    [^0-9] 取反   [^a-z]
    $  以什么结束     


    限定符:一般都是限定次数的
    {0}  表示的是:当前这个式子前面的表达式出现了0次    [1-5][a-d]{0}
    {0,5} 表示的是: 当前这个式子前面的表达式出现了0次到5次   ^([1-6]{1,5})$  '345678'
    {1,6} 
    {0,} 表示的是:当前这个式子前面的表达式出现了0次到多次
    {0,1}
    {,10} 错误写法-----注意


    通配符-----限定符----元字符
    *  表示的是:当前这个式子前面的表达式出现了0次到多次 {0,}    [*] 就是*
    ?  表示的是:当前这个式子前面的表达式出现了0次到1次  {0,1}   [?]  就是?
    +  表示的是:当前这个式子前面的表达式出现了1次到多次    {1,}  [+] 就是+     [.] 就是点 [^] [@]
    // shuaiyang@126.com [.]
    
    \d   数字中的任意一个     [0-9]
    \D    非数字中的任意一个   [^0-9]
    \s    空白符中的任意一个                          
    \S    非空白符中的任意一个 
    \w    非特殊符号   sfdsf 12313212   _
    \W    特殊符号    $$##@
    \b    边界  'hello world'  'dadasdas dasdasdasd'


    1. 先找规律,不要追求完美
    2. 不要钻牛角尖
    身份证号码的正则表达式
  (\d{17}[xX])|(\d{18})
   ([1-9][0-9]{16}([0-9]|[xX]))|([1-9][0-9]{17})  身份证号码
   ([1-9][0-9]{16})(([0-9])|([xX])) 身份证号码
   手机号码 :  
   130,131,132,133,134,135,136,137,138,139
  
   150,151,152,153,154,155,156,157,158,159
   
   180,181,182,183,184,185,186,187,188,189
   147,
   165,166

  
   170,171,176,177,178,
   198,199
   ([1][358][0-9][0-9]{8})|([1][4][7][0-9]{8})|([1][6][56][0-9]{8})|([1][7][01678][0-9]{8})|([1][9][89][0-9]{8})

   [1][0-9]{10}    [1]\d{10}

    邮箱的正则:  
    younghongbo_1-2.3@fd12-_.6.com.cn  邮箱
    [a-zA-Z0-9_.-]+[@][a-zA-Z0-9_.-]+([.][a-zA-Z]+){1,2}


    注意:不要用正则实现字符串的方法
    var str=' 哈哈 '
    str=str.trim()  此时str中前后空格已经就被去掉了
    使用正则去掉字符串前后的空格--------可以自己实现的
    如果字符串本身有这个方法可以完成相关功能,那么就不用使用正则,如果字符换中没有这个方法,可以使用正则来实现该功能
    
 */