荐 JavaScript基础——基本语法

程序员文章站 2022-06-15 18:19:36

JS基础、简介、基本语法、数据类型、运算符、循环语句...

大纲

荐
JavaScript基础——基本语法

简介

JS的实现

荐
JavaScript基础——基本语法

JS 三个部分作用
- BOM（浏览器对象模型）
  通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
- DOM（文档对象模型）
  通过DOM提供的API可以对页面上的各种元素进行操作（大小、位置、颜色等）
- ECMAScript（ES）：逻辑编程语法，可以用来实现业务逻辑

基本语法

标识符

所谓标识符，就是指变量、函数、属性的名字，或函数的参数。
标识符可以是按照下列格式规则组合起来的一或多个字符：
- 第一个字符必须是一个字母、下划线（ _ ）或一个美元符号（ $ ）。
- 其他字符可以是字母、下划线、美元符号或数字。
按照惯例，ECMAScript 标识符采用驼峰命名法。
但是要注意的是JavaScript中的标识符不能是关键字和保留字
符。

关键字和保留字

关键字
保留字
其他不建议使用的标识符

输入输出函数

函数
也称方法，可以看做一个盒子，里面装有提前准备好的代码（别人或者自己写的代码），可以直接使用，而不用关心内部的细节

函数	说明
alert(msg)	用浏览器弹出框显示msg
console.log(msg)	用浏览器控制台显示msg
prompt(info)	用户输入框，接收用户输入，info是提示信息
confirm(info)	确认选择框，接收用户选择(是/否)，info是提示信息
document.write(msg)	向浏览器body标签中输出msg

变量

概念：变量是用于存放数据的容器，内容可以修改，而且可以装任意类型的数据
本质：变量是程序在内存中申请的一块用来存放数据的空间
语法：let 变量名 = 值;
说人话：创建一个带名字的盒子，把东西放进去
注意：let 和变量名之间的空格不能省
用法一：先声明，后赋值

   let age; // 变量声明 - 声明了一个 名字叫做 age 的变量
    age = 10; // 变量赋值 - 向变量 age 赋值
    console.log(age); // 打印 age里保存的值：10

用法二：声明和赋值一起完成

    let age = 10; // 声明和赋值一次完成
    console.log(age); // 打印 age 里保存的值：10

用法三： 批量声明多个变量

多个变量名用逗号隔开
        let name,age,gender;
        name='彭于晏';
        age=38;
        gender='男孩子';
        console.log(name +age +gender);

用法四： 批量声明多个变量的同时初始化变量

let stu3='财务' , age = '18' ,gender='小姐姐啊';
console.log(stu3 + age + gender);

变量的几个情况

只声明，不赋值，默认为 undefined

let usrName; // 声明变量
console.log(usrName); // undefined - 未定义

不使用 let 关键字来创建变量（不建议使用）

usrAge = 27; // 不使用 let 关键字来声明变量 并赋值

案例:
法一原理：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        let num = 10,
            num2 = 20;
        // 1.利用第三方变量
        // let tmp;
        // tmp = num;
        // num = num2;
        // num2 = tmp;
        // 2.利用相加相减
        num = num + num2
    //   30     10   20
        num2 = num - num2
    //   10    30    20
        num = num - num2;
    //   20    30    10
        console.log(num,num2);
    </script>
</head>

<body>

</body>

</html>

数据类型

字符串类型：String

String用于表示一个字符序列，即字符串。
字符串需要使用 '或" 括起来。
转义字符：
将其他数值转换为字符串有三种方式：toString()、String()、拼串。
案例：

<script>
        // 自增运算：在自己的基础上加1
        // 前自增：++1
        // 后自增：i++
        // 区分前后自增的区别
        /* 
        let num1 = 10,
            num2 = 20;
        let res = num1 + num2++;//30
        console.log(res);//先参与到式子运算，然后再自增（先人后己） */

        let num1=10,num2=20;
        let res=num1 +  ++num2;
        console.log(res);// 31 先自增自己，再参与到式子中运算(先己后人)
        console.log(num2);//21在自己的基础上加一

        // 自减运算：在自己的基础上减一
        // 前自减：
        // 后自减：
        let num1=10;num2=20;
        let res=num1+num2--;
        console.log(res);//30 先参与式子的计算，再自己减一
        console.log(num2);//19


        let num1=10;num2=20;
        let res=num1+ --num2;
        console.log(res);//29 先自减自己，再参与到式子运算
        console.log(num2);//19

    </script>

数值型:Number

Number 类型用来表示整数和浮点数，最常用的功能就是用来
表示10进制的整数和浮点数。
Number表示的数字大小是有限的，范围是：
– ± 1.7976931348623157e+308
– 如果超过了这个范围，则会返回±Infinity。
NaN，即非数值（Not a Number）是一个特殊的数值，JS中当对数值进行计算时没有结果返回，则返回NaN。
数值的转换

有三个函数可以把非数值转换为数值Number()、parseInt()和parseFloat()。
- Number()可以用来转换任意类型的数据，而后两者只能用于
  转换字符串。
- parseInt()只会将字符串转换为整数，而parseFloat()可以转换为浮点数。

布尔型：Boolean

布尔型也被称为逻辑值类型或者真假值类型。

布尔型只能够取真（true）和假（false）两种数值。除此以外，
其他的值都不被支持。
其他的数据类型也可以通过Boolean()函数转换为布尔类型。
转换规则：
案例：

<script>
        // 其他数据转成布尔值
        // 最终只会是true false

        // Boolean(转换数据);
        // 哪些数据可以转成true
        console.log(Boolean(123));
        console.log(Boolean(123.13));
        console.log(Boolean('guoguo'));
        console.log(Boolean(' '));//空格
        console.log('---------------');

        // 哪些数据可以转成false
        console.log(Boolean(0));
        console.log(Boolean(''));//空值
        console.log(Boolean(""));
        console.log(Boolean(undefined));
        console.log(Boolean(null));
        console.log(Boolean(NaN));


    </script>

null型：Null

Null 类型是第二个只有一个值的数据类型，这个特殊的值是null 。

从语义上看null表示的是一个空的对象。所以使用typeof检查
null会返回一个Object。
undefined值实际上是由null值衍生出来的，所以如果比较undefined和null是否相等，会返回true；

unfefined型：Undefined

Undefined 类型只有一个值，即特殊的 undefined 。

PS:
变量的数据类型是根据 = 右边的值来确定的，但如果只声明了变量，没有赋值，那么变量中类型就是未定义

在使用 var 声明变量但未对其加以初始化时，这个变量的值就
是 undefined。例如：

let message;
message 的值就是 undefined。

需要注意的是typeof对没有初始化和没有声明的变量都会返回
undefined。

运算符

typeof运算符

使用typeof操作符可以用来检查一个变量的数据类型。

使用方式：typeof 数据，例如 typeof 123。
返回结果：
typeof 数值 number
– typeof 字符串 string
– typeof 布尔型 boolean
– typeof undefined undefined
– typeof null object

算术运算符

算数运算符顾名思义就是进行算数操作的运算符

算数运算符：

自增和自减

自增 ++ 自减 - -

自增和自减分为前置运算和后置元素。
所谓的前置元素就是将元素符放到变量的前边，而后置将元素符放到变
量的后边。
例子：
• 前置自增：++a
• 后置自减：a- -
– 运算符在前置时，表达式值等于变量原值。
– 运算符在后置是，表达式值等于变量变更以后的值。
案例：

<script>
        // 自增运算：在自减的基础上加1
        // 前自增：++1
        // 后自增：i++
        // 区分前后自增的区别
/* 
        let num1 = 10,
            num2 = 20;
        let res = num1 + num2++;//30
        console.log(res);//先参与到式子运算，然后再自增（先人后己） */

        let num1=10,num2=20;
        let res=num1 +  ++num2;
        console.log(res);// 31 先自增自己，再参与到式子中运算(先己后人)
        console.log(num2);//21在自己的基础上加一
    </script>

逻辑操作符

一般情况下使用逻辑运算符会返回一个布尔值。

逻辑运算符主要有三个：非、与、或。
在进行逻辑操作时如果操作数不是布尔类型则会将其转换
布尔类型在进行计算。
非使用符号 ! 表示，与使用 && 表示，或使用 || 表示。

赋值运算符

简单的赋值操作符由等于号（ = ）表示，
其作用就是`把右侧的值赋给左侧的变量。

• 如果在等于号左边添加加减乘除等运算符，就可以完成复合赋值操作。

运算符	描述	实例
x += y	加等于	let x = 1; x += 4; // x = x + 4
x -= y	减等于	let x = 2; x -= 3; // x = x - 3
x *= y	乘等于	let x = 3; x = 2; // x = x 2
x /= y	除等于	let x = 4; x /= 1; // x = x /1
x %= y	取模等于	let x = 10; x%=3 ; // x = x %

关系运算符

小于（<）、大于（>）、小于等于（<=）和大于等于（>=）
这几个关系运算符用于对两个值进行比较，比较的规则与我们
在数学课上所学的一样。
这几个运算符都返回一个布尔值。用来表示两个值之间的关系
是否成立。
JS中使用"=="来判断两个值是否相等，如果相等则返回
true。
• 使用!=来表示两个值是否不相等，如果不等则返回true。
• 注意：null和undefined使用==判断时是相等的。
===表示全等，他和==基本一致，不过==在判断两个值
时会进行自动的类型转换，而===不会。
!==表示不全等，同样比较时不会自动转型。

逗号

使用逗号可以在一条语句中执行多次操作。
使用逗号运算符分隔的语句会从左到右顺
序依次执行。

条件运算符

条件运算符也称为三元运算符。通常运算符写为?:。

这个运算符需要三个操作数，第一个操作数在?之前，
第二个操作数在?和:之间，第三个操作数在:之后。
例如：x > 0 ? x : -x // 求x的绝对值
• 上边的例子，首先会执行x>0，如果返回true则执行冒
号左边的代码，并将结果返回，这里就是返回x本身，
如果返回false则执行冒号右边的代码，并将结果返回。
案例：

<script>
        let a ,b ,c;
        a=+prompt('请输入第1个数：');
        b=+prompt('请输入第2个数：');
        c=+prompt('请输入第3个数：');
        // a>b?alert('a>b'):alert('b>a');
        /* max=a>b?a:b;
        max=max>c?max:c; */
       let max=a>b?(a>c?a:c):(b>c?b:c);
        alert('max='+max);

        let min=a>b?(b<c?b:c):(a<c?a:c);
        alert('min='+min);
</script>

运算符的优先级

荐
JavaScript基础——基本语法

语句

语句是一个程序的基本单位，JS的程序就是由一条一条语句构成的，每一条语句使用;结尾。

JS中的语句默认是由上至下顺序执行的，但是我们也可
以通过一些流程控制语句来控制语句的执行顺序。

代码块

代码块是在大括号 {} 中所写的语句，以此将
多条语句的集合视为一条语句来使用。
eg：

{
var a = 123;
a++;
alert(a);
}

条件语句

条件语句是通过判断指定表达式的值来决
定执行还是跳过某些语句。

最基本的条件语句：

if...else
switch...case

循环语句

和条件语句一样，循环语句也是基本的控
制语句。

循环中的语句只要满足一定的条件将会一
直执行。

本文地址：https://blog.csdn.net/weixin_44757417/article/details/107370619

荐 JavaScript基础——基本语法

大纲

简介

JS的实现

基本语法

标识符

关键字和保留字

输入输出函数

变量

变量的几个情况

数据类型

字符串类型：String

数值型:Number

布尔型：Boolean

null型：Null

unfefined型：Undefined

运算符

typeof运算符

算术运算符

自增和自减

逻辑操作符

赋值运算符

关系运算符

逗号

条件运算符

运算符的优先级

语句

代码块

条件语句

循环语句

javaScript的基础语法学习

javascript基础修炼(6)——前端路由的基本原理

详解JavaScript语言的基本语法要求

javascript基本语法规则（js基础语法大全）

javascript基本语法

javascript基础语法——全面理解变量和标识符

javascript基本语法规则（js基础语法大全）

JSON基本语法及与JavaScript的异同实例分析

javascript学习笔记_浅谈基础语法,类型,变量

JavaScript基本语法_动力节点Java学院整理