js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级

JavaScript注释

  • 单行注释 // ctrl+/
  • 多行注释 /* */ ctrl + shitf + /

JavaScript的历史

  • 发明的公司:网景 发明人:布兰登.艾克
  • liveScript----与sun(java)公司合作------- JavaScript(营销)

JavaScript与 Java的关系

  • JavaScript实在运行客户端(前端)的编程语言
  • Java是运行在服务端(后端)的编程语言

JavaScript是什么语言

1、一门编程语言

  • 指计算机能够接受和处理的、具有一定语法规则的语言

2、解释性语言

  • 解释执行则不需要编译过程,直接由解释器(js引擎)解析并执行代码

3、是动态类型(弱类型语言)语言

  • 静态类型语言在编译时便已确定变量的类型,而动态类型语言的变量类型要到程序运行的时候,待变量被赋予某个值之后,才会具有某种类型

4、是脚本语言

  • 直接解释执行,缩短了编写-编译-链接-运行。不用编译

5、是基于对象的语言

  • 不是面向对象,只是拥有了某些面向对象的特征而已

JavaScript的组成部分

  • ECMAScript:规范了js的语法,数据类型、流程控制、数组、函数…… 简称ES
  • DOM:document object model 文档对象模型,操作元素(标签)
  • BOM:browser object model 浏览器对象模型,操作浏览器

JavaScript的作用

  • 实现动画效果(轮播图)
  • 实现交互反馈(拖动滚动条)
  • 与App交互调用手机功能(定位)
  • 在服务端运行(node.js)
  • 开发桌面应用程序
  • 游戏开发

变量

定义

  • 计算机内存内的标识符,用来存储数据

变量名

  • 获取数据、修改数据

定义变量的方式(关键字var)

  • 变量名 = 值; (变量的声明;变量的赋值)

    image-20240118194920534

  • var 变量名 = 值; ( 变量的声明且初始化)

image-20240118195004693

  • var 变量名1 = 值1,变量名2 = 值2,变量名3 = 值3 (同时声明多个变量且初始化)

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第1张图片

  • 变量名 = 值 (不用var声明直接赋值(不建议))

变量的特点:

  • 可以跨类型改变

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第2张图片

  • 变量名重复,后面的会覆盖前面的

变量的命名规则和规范

规则:

  • 必须以字母、数字、下划线、$组成,不能以数字开头
  • 不能是关键字和保留字
  • 区分大小写

关键字

break、 else、 new、 var、  case、 
finally 、 return、  void 、  catch  、 for 、
switch 、 while 、  continue、  function  、 this 、
with 、 default 、 if 、  throw 、   delete 、 
in 、   try 、 do 、  instranceof、 typeof

保留字

abstract 、 enum 、 int 、  short 、  boolean  、
export  、 interface、  static、   byte  、 extends 、 
long 、  super 、 char 、 final  、 native  、
synchronized 、class  、 float 、  package  、 throws 、
const  、 goto  、 private 、  transient 、 debugger 、
implements 、 protected 、 volatile 、  double  、 import  、
public

规范

  • 见名知义
  • 驼峰命名

JavaScript书写代码

  • 内部script标签中书写
  • 外部js文件中书写
  • 行内标签中书写
    • ==注意:==外单里双,外双里单
<body>
<h1 style="background-color: red" onclick='alert("web31")'>
      我是弹窗
<h1>
body>
  • 在浏览器控制台中书写(一般用于调试代码)

字面量:固定值

js常用语法

对象.属性

对象.方法 window.console.log(count)

  • 凡是window对象的属性和方法都可以省略window

JavaScript的数据类型(两种)

  • 基本数据类型
  • 引用数字类型

判断一个变量的数据类型

  • typeof 变量名

基本类型(六种):

  • 数字类型:number
  • 字符串类型:string
  • 布尔类型:boolean
  • 空型:null
  • 未定义:undefined
  • 唯一值:symbol(ES6)

1、数字类型(八种)

数值
  • 十进制 0-9

  • 二进制 0-1

  • 八进制 0-7

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第3张图片

  • 十六进制 0-9 a-f

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第4张图片

  • 科学计数法

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第5张图片

  • 浮点数:

  • 最值:

    • Number.MAX_VALUE(最大值)

      image-20240118205813503

    • Number.MIN_VALUE(最小值):5e-324

      image-20240118213002848

  • 无穷

    • 正无穷- Infinty

    • 负无穷 -Infinty

      js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第6张图片

非数值(NaN) not a number

特征:与任何值都不相等包括它本身

isNaN() 判断一个值或者变量是否是非数值

typeof isNaN
null 对象 false null=000
未定义型 undenfined true undenfined

如果是非数值返回true,如果不是非数值返回false

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第7张图片

2、字符串类型:只要是用单引号或者双引号包起来的

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第8张图片

  • 字符串的长度,length

    • 空格也算
  • 空字符串:字符串长度为0

    image-20240118195802395

  • 拼接字符串: +

    • +号左右两边只要有一个是字符串,就是字符串的拼接
    • +号左右两边都是数字,就是数字的四则运算

3、布尔类型 boolean

  • 运算比较时、方法(函数)的返回值

  • 真值:true

  • 假值:false

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第9张图片

4、空类型 null

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第10张图片

5、未定义类型 undenfined

  • 变量只声明不赋值

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第11张图片

隐式转换

  • 空字符串会转换成数字 或 0
    image-20240118182215169

  • null 为 000

image-20240118181755828

  • true:是数字 1
image-20240118181828180
  • 引号里面全是数字,也是数值型
image-20240118181944223

引用类型(五种):

  • 数组:array
  • 函数:function
  • 对象:object
  • Set(ES6)
  • Map(ES6)

转换类型(三种)

1、转换成字符串

  • 数字、布尔转换成字符串 tostring()

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第12张图片

  • 空型、未定义 转换成字符串 String()

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第13张图片

2、转换成布尔

  • Boolean()

    image-20240118184644712

  • undefined null 0 " " NaN false都转换成false

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第14张图片

3、转换成数字

  • Number()
  • parseInt():遇到第一个小数点或非数值返回
  • parseFloat():遇到第二个小数点或非数值返回

Number()

  • 如果字符串中只包含数字时,将其转换为十进制数值,忽略前导0

    image-20240118184136548

  • 如果字符串中包含有效浮点格式,如“1.1”,将其转换为对应的浮点数字,忽略前导0

    image-20240118184156948

  • 如果字符串中包含有效的十六进制格式,如“0xf”,将其转换为相同大小的十进制数值

    image-20240118184216439

  • 如果字符串为空,或者是空内容,将其转换为0

    image-20240118184233470

  • 如果字符串中包含除上述格式之外的字符,则将其转换为NaN

parseInt()

  • 遇到第一个小数点或者第一个非数值就返回

    image-20240118184014067

parseFloat()

  • 遇到第二个小数点或者第一个非数值就返回

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第15张图片

未定义

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第16张图片

空型

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第17张图片

布尔

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第18张图片

特殊转换总结

Number parseInt parseFloat
未定义 NaN NaN NaN
null 0 NaN NaN
true 1 NaN NaN
false 0 NaN NaN

JavaScript运算

算数运算 + - * / %

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第19张图片

toFixed(n):保留n位小数,返回值是字符串

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第20张图片

一元运算

  • ++i --i
  • i++ i–
  • 换行 \n

逻辑运算 || && !

  • 与(and) && 两个操作数同时为true,结果为true,否则都是false

    image-20240118191831006

  • 或(or) || 两个操作数只要有一个为true,那就是true,否则是false
    image-20240118192026496

  • 非(no) !

image-20240118191937752

比较运算 > < >= <= == === !==

  • 返回结果为布尔型

  • 注意

    • == 只比较值,不比较类型

    • === 不仅比较数值,还比较数据类型

  • 如果两个字都是纯数字,直接比较大小

    image-20240118200903540

  • 一个数为数字,另一个是纯数字的字符串,将字符串转化为数字比较

    image-20240118201003310

  • 如果两个都是纯数字的字符串。值判断第一个数字的大小

    image-20240118201051317

  • true和fale转化成1和0进行比较

  • 规范中提到, 要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,并且规定null 和 undefined 是相等的。

    js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第21张图片

  • NaN与任何值都不相等,包括它本身

    image-20240118201420007

赋值运算+= -= /= *=

优先级

括号>点运算符>一元运算符> 算数运算符 >关系运算符>逻辑运算符 >赋值运算符

js基础知识、变量、命名规则、基本数据类型、转换类型、运算、优先级_第22张图片

image-20240118201624171

你可能感兴趣的:(javascript,开发语言,ecmascript)