JavaScript基础语法-ECMAScript总结

人间小瓜瓜
288 阅读4分钟

一、数据类型

  • 简单数据类型（Number，String，Boolean，Undefined，Null）
  • 复杂数据类型（Object）

1.变量声明

  • var a = b = c = 10;
    相当于 var a = 10; b = 10; c = 10; b和c没有var声明
  • 集体声明：var a = 10, b = 10, c = 10;
  • var a, b, c = 10 错误的声明方式

 2.简单数据类型

2.1 数字型Number

  1. 八进制：数字前面加0
    十六进制：数字前面加0x
  2. NaN：非数字
    isNaN()：验证是否非数字，是数字返回false，否则返回true

2.2 字符串型String

  1. 字符串转义符 \
    image-20210502194927856.png
  2. 获取字符串长度：字符串.length
    image-20210502201336323.png
  3. 字符串拼接：  +
    字符串 + 任何类型 = 字符串\
  4. 字符串型数字互相比较大小是从第一位开始比较 ： ’121'<'25'，所以要先转换为数字型\
  5. 字符串本身是不可变的，每次改变字符串的值其实是新开辟了一个内存空间来存放新的值，原来的字符串并没有变

2.3 undefined 和 null

  1. undefined
    • 如果一个变量没有赋值，那它就是undefined
    • undefined + '我是字符串' = undefined我是字符串'
    • undefined + 数字 = NaN
  2. null   空值
    • null + 'aaa' = null我是字符串'
    • null + 数字 = 数字

3.获取变量的数据类型typeof 变量

typeof  变量
image-20210502203458578.png

4.数据类型转换

4.1 转换为字符串类型

加号拼接转换方式为隐式转换
image-20210502204243157.png

4.2 转换为数字型

  1. parseInt(变量)  得到的是整数，会去掉数字后边的单位
  2. parseFloat(变量)  得到的是浮点数，会去掉数字后边的单位
  3. Number(变量)
  4. 利用算数运算 - * /

4.3 转换为布尔型

Boolean(变量)： 代表空，否定的值会被转换成false，其余值转换为true

5.数据类型内存分配

5.1 内存可以看作分为了两块：栈和堆

  1. 简单数据类型存放在栈里，存放的是值本身（值类型）
  2. 复杂数据类型先在栈里存放地址，这个地址指向堆里面的数据（引用类型）

5.2 简单/复杂类型传参

  1. 简单类型传参：当把一个值变量作为一个参数传给函数的形参时，其实是把变量存放在栈空间的值复制了一份给形参，所以在函数内对形参修改都不会影响到外部变量
  2. 复杂类型传参：其实是把变量在栈空间保存的堆地址复制给了形参，形参实参保存的是同一个堆地址，所以操作的是同一个对象

二、运算符

  • 算数运算符
  • 递增 ++，递减 -- 运算符
  • 比较运算符
  • 逻辑运算符
  • 赋值运算符

1.递增 ++，递减 -- 运算符

  • 前置递增，递减  ++a
    先自加，再返回值
    image-20210503160851344.png
  •  后置递增，递减  a++
    先表达式返回原值，后变量自加
    image-20210503160948277.png

2.比较运算符

  • ==  只要求值相等，默认转换数据类型
    image-20210503201149927.png
  • === 要求两侧的值以及数据类型完全一致
    image-20210503201433690.png

3.逻辑运算符

逻辑中断(短路操作)

  • 逻辑与  表达式&&表达式
    前一个表达式为真，则结果为第二个表达式的值；前一个为假，则为第一个值
  • 逻辑或  表达式||表达式
    前一个表达式为真，则结果为第一个表达式的值；前一个为假，则为第二个值
    image-20210504155801735.png

4.运算符优先级

  1. 小括号
  2. 一元运算符  ++  --  ！
  3. 算术运算符  先 * / %后 + -
  4. 比较运算符
    • 先 > >= < <=
    • 后 ==    ===      !=     !==
  5. 逻辑运算符    先&&后||
  6. 赋值运算符

三、流程控制

1.顺序结构

  • if...else if...else
  • switch
    switch循环中的case语句如果没有break，会继续执行下一个case语句，直到出现break
    image-20210505180954862.png

2.循环结构

2.1 双重for循环

  • 打印⭐案例利用字符串追加
    image-20210512102426373.png
  • 打印倒三角形案例
    image-20210512103806488.png
  • 九九乘法表
    image-20210512105715620.png

2.2 while循环

  • 输入我爱你结束，否则一直问
    image-20210512112036052.png

2.3 do while循环

  • 先执行do内的语句，再判断

  • do while 循环至少执行一次
    image-20210518091646151.png

     简易的ATM机案例

image-20210526204616641.png

  1. while循环
    image-20210526204906620.png    
  2. do...while循环 image-20210526204810510.png

2.4continue

  • 退出本次循环，执行下一个循环
    image-20210518093656900.png

2.5 break    退出整个循环

四、数组

 1.数组长度，遍历数组

数组长度是数组中元素的个数，计算数组长度用length
遍历数组用for循环
image-20210523193453884.png

2.数组中新增元素

筛选数组：将旧数组中需要的元素筛选出来追加给新数组

  1. 利用一个初始值为0的变量，每次追加元素给新数组后，变量加1
    image-20210524140632925.png
  2. newArray.length 是0
    image-20210524141819572.png

3.冒泡排序

利用两个for循环，外层for循环表示趟数，内层表示每趟比较次数
image-20210525091746749.png

五、函数

 1.函数的声明

  • function声明

    function 函数名(){

  函数体...

}

  • 函数表达式

    var 变量名() = function(){

      函数体...

}

2.函数的参数

函数有形参和实参

  • 形参可以看作一个不用声明的变量，实参传递给形参看作给形参赋值，默认值是undefined
  • 形参实参个数不匹配情况：
    1. 个数相同：返回正确结果
    2. 实参比形参个数多：取到形参的个数（即：多出来的参数不管
    3. 实参比形参个数少：没有接收实参数据的形参默认为undefined
      结果为：传递的实参数据+undefined

3.函数的返回值：return

  • 相当于赋值：函数名() = return 后面的结果
  • return会中断函数，后边的代码不会执行
  • return只返回一个值，如果return后边有多个值，只返回最后一个值
  • 如果有多个值需要返回，return[x1,x2,x3]
  • 如果没有return，返回undefined

4.arguments

  • 不知道实参个数的时候使用
  • arguments是当前函数的一个内置对象，arguments对象中存储了传递的所有实参
  • arguments展示形式是一个伪数组
    1. 具有length属性
    2. 按索引方式存储数据
    3. 不是真正意义上的数组，不具有数组的push,pop等方法
  • 求任意个数的最大值
    image-20210525094759499.png

5.作用域

函数内部的变量为局部变量
如果变量没有用 var 声明则为全局变量

6.预解析

  • js引擎运行js分为两步：预解析  代码执行
    预解析：js引擎会把js里面所有的 var 还有 function 提升到当前作用域的前面

  • 预解析分为 变量预解析（变量提升）和 函数预解析（函数提升）

    1. 变量预解析：把所有的变量声明提升到当前作用域的最前面，不提升赋值操作image-20210525181201263.png
    2. 函数预解析：把所有的函数声明提升到当前作用域的最前面，不调用函数image-20210525181326452.png

六、对象

 1.自定义对象

1.1 调用对象的属性，方法

  1. 调用对象的属性
    • 对象名.属性名
    • 对象名['属性名']
  2. 调用对象的方法：对象名.方法名()

1.2 创建对象

  1. 利用对象字面量创建对象
    image-20210525211342618.png

  2. 用new Object 创建对象
    image-20210525205907416.png

  3.  构造函数创建对象(对象的实例化)：可以批量生成
    image-20210525211145730.png

    • this 不能丢
    • 只要 new Hero()调用函数 就创造了一个对象

1.3 for... in... 遍历对象

k--key
image-20210525213251335.png

2.内置对象

2.1 查阅文档  developer.mozilla.org/zh-CN/

2.2 Math随机数 image-20210527132818180.png

2.3 Date日期对象 image-20210527132929711.png

2.3.1 返回今天是星期几 image-20210527133121661.png

2.3.2 时间戳

image-20210527145854072.png

倒计时案例 image-20210527150020866.png

2.4 数组内置对象

2.4.1 添加删除数组元素 image-20210527163236485.png

筛选数组元素

image-20210527163332971.png

2.4.2 数组排序 sort

image-20210527163515044.png

2.4.3 数组索引

  • indexOf()  查找给定元素的第一个索引  不存在返回-1

  • lastIndexOf() 查找给定元素的最后一个索引 不存在返回-1
    ![image-20210527164310449.png](p1-juejin.byteimg.com/tos-cn-i-k3…

    1.数组去重 image-20210527165334822.png
    2.查找字符串中某个字符所在位置以及出现的次数 image-20210527174013193.png

2.4.4根据位置返回字符image-20210527175118121.png

统计出现最多的字符和次数image-20210527181647456.pngimage-20210527204153642.png
avatar
文章
阅读
粉丝
相关推荐
✈️ ECMAScript 6 基础
337阅读
 · 
10点赞
ECMAScript 装饰器的 10 年
1.3k阅读
 · 
7点赞
【ECMAScript】ECMAScript 6新特性深度解析
313阅读
 · 
1点赞
ECMAScript 2023 正式发布，有哪些新特性？
6.4k阅读
 · 
39点赞
2023款ECMAScript
2.6k阅读
 · 
20点赞
ECMAScript新特性
1.2k阅读
 · 
3点赞
ECMAScript 2023 将有哪些更新？
2.2k阅读
 · 
51点赞
技术周报·The ECMAScript 2023 Language Specification
3.0k阅读
 · 
21点赞
理解 ECMAScript 规范（二）
1.5k阅读
 · 
36点赞
理解 ECMAScript 规范（一）
1.5k阅读
 · 
8点赞

友情链接：