# JavaScript 高级进阶

102 阅读5分钟

1.基础复习

串讲

  • 变量

    • 变量的作用,语法,命名规则
    • var:可以定义变量,但是会有变量名提升,没有作用域的概念
    • let:没有变量名提升,,要先定义后使用,有作用域的概念
    • const:定义常量(一旦定义赋值之后就不能再修改的变量:以后模块中的成员一般都是const)
  • 数据类型

    • 基本数据类型

      • 也叫值类型
      • Number String,Boolean,undefined,null
    • 复杂数据类型

      • 也叫引用类型,它的本质是一个地址空间
      • 函数,数组,对象
      • 引用类型的空,一般设置为nul
  • 类型转换

    • 转换成字符串

      • toString()
      • "" +
    • 转换成数字

      • parseInt():转换,直到碰到非数值,如果第一个就是非数值,就返回NaN
      • Number():只要有非数值字符串,就返回NaN
      • -0
    • 转换成布尔值

      • js中的false:0,'',"",null,undefined,NaN
      • Boolean(需要转换的变量)
  • 运算符:获取bool值

    • 算术运算符:+ - * / %

    • 赋值运算符:=

    • 比较运算符:

      • < >= <= == != ===

      • ==:值要相等,它会将字符串转换为数值
      • ===:值和类型也要相等
    • 逻辑运算符:!&& ||

    • 自增自减运算符: ++ --

      • 写在前面:先执行,再使用
      • 写在后面:先使用再执行
    • 运算符的优先级:()

  • 流程控制语句

    • 顺序结构
    • 分支结构:if-else
    • 循环结构:for , forEach(function(value,index){})
  • 数组

    • 创建数组的两种方式

      • let arr = [ ] --语法糖
      • let arr = new Array(...)
    • 下标和长度

      • 只有一个属性:length
    • 取值和存值

      • 通过索引
      • 如果发现操作的数据类型是数组,那么找索引
    • api

      • 增加:push unshift
      • 删除:splice(index,length)
      • 修改:arr[i] = ''
      • 查询(获取): arr[i]
  • 函数

    • 声明和调用

    • 形参和实参

      • 数量对应
      • 顺序对应
      • 类型对应
    • 返回值

      • 如果方法没有返回值,默认会返回undefined
      • 通过return返回值
      • 一个函数中只能有一个return被执行
      • return只能返回一个变量,返回对象更常用
  • 对象

    • 创建对象的方式:{}

    • 属性和方法:特征和行为

    • 存值和取值

      • 通过key进行值的存储和获取

        • obj[key]:如果key是变量,则只能使用[]方式操作
        • obj.key
      • 赋值:

        • 如果key已经存在,就是修改
        • 如果key不存在则是添加--动态特征
    • 对象的遍历

      • for..in >> for(let key in obj) {}
  • 内置对象

    • Math

      • 静态类型
      • 通过Math构造函数直接调用里面的成员
      • 常见:floor ceil random abs
    • Array

    • Date

      • new Date():获取当前日期
      • Date.now():获取当前日期离默认日期的毫秒值
    • String

typeof关键字

typeof操作符返回一个字符串,返回的是操作数的类型

  • typeof 基本类型返回的是字符串值

    • 字符串 》》 string
    • bool 》》boolean
    • 数值 》》number
  • typeof 对象 返回的是object

  • typeof 函数 返回的是function
  • typeof null 返回的object
  • typeof undefined:返回undefined
  • typeof 数组:返回object

逻辑中断

&&:从左到右的顺序进行判断,如果发现某个操作数的逻辑判断是false,那么就不用继续判断了。

||:从左到右的顺序进行判断,如果发现某个操作数的逻辑是true,那么就不用继续判断了。

function fn (n1, n2) {
  n1 = n1 || 0
  n2 = n2 || 0
  console.log(n1 + n2)
}

三元表达式

  • 1.运算符根据参与运算的值数量分为一元、二元、三元运算符

    • 一元运算符:只能操作一个值 ++ -- !
    • 二元运算符:操作两个值 1 + 1 1 > 0
    • 三元运算符:操作三个值
  • 2.三元运算符语法

    • 三元运算符: ?:

    • 三元表达式:

      bool表达式?代码1:代码2
      
      • 1.如果表达式成立则执行代码1,否则执行代码2
  • 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个

    • 三元运算符做的事和if-else类似,只是代码更简洁
    • 三元表达式中:表达式部分永远是条件,最终代表整个结果的不是代码1 就是 代码2
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body></body><script>
    /*
    一元运算符:由一个值参与的运算符  :  a++    a--  !a
     二元运算符:  由两个值参与的运算符 :  a + b   a > b
     三元(三目)运算符:由三个值参与的运算符
    */
​
    /*
     * 三元运算符:  ?:
     * 三元表达式:   表达式?代码1:代码2
     *      * 1.如果表达式成立则执行代码1,否则执行代码2
     *      * 2.如果代码1或者代码2有运算结果则三元运算式的结果就是他们其中的一个
     *
     * 三元运算符做的事和if-else类似,只是代码更简洁
     */
​
    //案例1:
    let num1 = 10;
    num1 > 0 ? console.log('哈哈') : console.log('呵呵');
​
    //上面这个三元表达式等价于下面的if - else语句
    // if(num1 > 0){
    //     console.log ( "哈哈" );
    // }else{
    //     console.log ( "呵呵" );
    // }
​
    //案例2:三元表达式一般应用是用来赋值
    let num2 = 20;
    let res2 = num2 > 0 ? num2 + 1 : num2 - 1;
    console.log ( res2 );//21
​
    //上面这个三元表达式等价于下面的if - else语句
    // if(num2 > 0){
    //     res2 = num2 + 1;
    // }else{
    //     res2 = num2 - 1;
    // }
​
    //练习:输出性别  (实际开发中,性别通常会使用一个布尔类型来存储,这样存储效率更高)
    let name = "马云";
    let age = 38;
    let gender = true;      //true男 1         false女 0
    console.log("我的名字是"+name+",我的年龄是"+age+",我是一个"+(gender == true ? "男":"女")+"生");
​
​
</script>
</html>

三种分支结构语法总结

  • 1.原则上,三种分支结构语句之间可以互转,只不过每一种分支结构语句适用场景不一样

  • 2.if分支结构:适合条件判断

    • 最常用:if-else 两种互斥条件判断
  • 3.switch-case 适合做固定值匹配

  • 4.三元表达式: 比if-else代码更简洁,但是代码量较多时易读性变差。以后它有一个最大的优点:可以在模板中添加

    • 反引号
    • 模板引擎
    • 插值表达式

while循环结构

  • 循环三要素

    • 起始值
    • 条件
    • 变量的变化
  • 1.语法:

while(条件 true/false){
    循环体/需要重复执行的代码;
}
  • 执行步骤:

    • 1.判断条件是否成立

      • 1.1 如果成立,执行循环体代码,然后重复步骤1
      • 1.2 如果不成立,结束循环,执行大括号后面的代码
  • 3.注意点

    • (1)小括号中的语句,无论结果是什么都会转换成布尔类型来判断是否成立
    • (2)避免写一个死循环 \

3.面向对象编程

基本概念

所谓面向对象就是指:你想做一件事情,你自己做不到,那么就去找到能够实现这个功能的对象,调用它的方法(传递参数,遵守方法的规则)

什么是对象?

Everything is object (万物皆对象)

什么是面向对象?

面向对象编程 —— Object Oriented Programming,简称 OOP ,是一种编程开发思想。

在面向对象程序开发思想中,每一个对象都是功能中心,具有明确分工,可以完成接受信息、处理数据、发出信息等任务。 因此,面向对象编程具有灵活、代码可复用、高度模块化等特点,容易维护和开发,比起由一系列函数或指令组成的传统的过程式编程(procedural programming),更适合多人合作的大型软件项目。

面向对象的特性:

  • 封装性

    • 将功能的具体实现,全部封装到对象的内部,外界使用对象时,只需要关注对象提供的方法如何使用,而不需要关心对象的内部具体实现,这就是封装。
  • 继承性

    • 在js中,继承的概念很简单,一个对象没有的一些属性和方法,另外一个对象有,拿过来用,就实现了继承。
    • 注意:在其他语言里面,继承是类与类之间的关系,在js中,是对象与对象之间的关系。
  • [多态性]

    • 多态是在强类型的语言中才有的。js是弱类型语言,所以JS不支持多态

    4.栈和堆

(stack)中主要存放一些基本类型的变量和对象的引用其优势是存取速度比堆要快,但缺点是存在栈中的数据大小与生存期必须是确定的,缺乏灵活性,

(heap 多)用于复杂数据类型(引用类型)分配空间,例如数组对象、object对象;它是运行时动态分配内存的,因此

\