JavaScript基础语法

大三的土狗
51 阅读4分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情

前言

  今天来分享一下最近在学习的JavaScript的基础语法，希望能帮助到正在面试的你。

1 书写语法

  • 区分大小写：与 Java 一样，变量名、函数名以及其他一切东西都是区分大小写的

  • 每行结尾的分号可有可无

    如果一行上写多个语句时，必须加分号用来区分多个语句。

  • 注释

    • 单行注释：// 注释内容

    • 多行注释：/* 注释内容 */

    注意：JavaScript 没有文档注释

  • 大括号表示代码块

    下面语句大家肯定能看懂，和 java 一样 大括号表示代码块。

    if (count == 2) { 
   alert(count); 
}

2 输出语句

js 可以通过以下方式进行内容的输出，只不过不同的语句输出到的位置不同

  • 使用 window.alert() 写入警告框

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<script>
    window.alert("hello World");//写入警告框
</script>
</body>
</html>

    上面代码通过浏览器打开，我们可以看到如下图弹框效果

image.png

  • 使用 document.write() 写入 HTML 输出

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    
<script>
    document.write("666666");//写入html页面
</script>
</body>
</html>

    上面代码通过浏览器打开，我们可以在页面上看到 document.write(内容) 输出的内容

image.png

  • 使用 console.log() 写入浏览器控制台

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
<script>
    console.log("error");//写入浏览器的控制台
</script>
</body>
</html>

    上面代码通过浏览器打开，我们可以在不能页面上看到 console.log(内容) 输出的内容，它是输出在控制台了，而怎么在控制台查看输出的内容呢？在浏览器界面按 F12 就可以看到下图的控制台

image.png

3 变量

JavaScript 中用 var 关键字（variable 的缩写）来声明变量。格式 var 变量名 = 数据值;。而在JavaScript 是一门弱类型语言，变量==可以存放不同类型的值==；如下在定义变量时赋值为数字数据，还可以将变量的值改为字符串类型的数

var test = 21;
test = "老六";

js 中的变量名命名也有如下规则，和java语言基本都相同

  • 组成字符可以是任何字母、数字、下划线（_）或美元符号（$）
  • 数字不能开头
  • 建议使用驼峰命名

JavaScript 中 var 关键字有点特殊，有以下地方和其他语言不一样

  • 作用域：全局变量

    {
    var age = 20;
}
alert(age);  // 在代码块中定义的age 变量，在代码块外边还可以使用

  • 变量可以重复定义

    {
    var age = 20;
    var age = 30;//JavaScript 会用 30 将之前 age 变量的 20 替换掉
}
alert(age); //打印的结果是 30

针对如上的问题，ECMAScript 6 新增了 let关键字来定义变量。==它的用法类似于 var，但是所声明的变量，只在 let 关键字所在的代码块内有效，且不允许重复声明。

例如：

{
    let age = 20;
}
alert(age);

ECMAScript 6 新增了 const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。 通过下面的代码看一下常用的特点就可以了

4 数据类型

JavaScript 中提供了两类数据类型：原始类型 和 引用类型。

使用 typeof 运算符可以获取数据类型

alert(typeof age); 以弹框的形式将 age 变量的数据类型输出

原始数据类型：

  • number：数字（整数、小数、NaN(Not a Number)）

    var age = 21;
var price = 69.8;
​
alert(typeof age); // 结果是 ： number
alert(typeof price);// 结果是 ： number

    注意：NaN是一个特殊的number类型的值，后面用到再说

  • string：字符、字符串，单双引皆可

    var ch = 'A';
var name = '张三'; 
var addr = "北京";
​
alert(typeof ch); //结果是  string
alert(typeof name); //结果是  string
alert(typeof addr); //结果是  string

    注意：在 js 中 双引号和单引号都表示字符串类型的数据

  • boolean：布尔。true，false

    var flag = true;
var flag2 = false;
​
alert(typeof flag); //结果是 boolean
alert(typeof flag2); //结果是 boolean

  • null：对象为空

    var obj = null;
​
alert(typeof obj);//结果是 object

  • undefined：当声明的变量未初始化时，该变量的默认值是 undefined

    var a ;
alert(typeof a); //结果是 undefined

5 运算符

JavaScript 提供了如下的运算符。大部分和 Java语言 都是一样的，不同的是 JS 关系运算符中的 == 和 ===，一会我们只演示这两个的区别，其他运算符将不做演示

  • 一元运算符：++，--
  • 算术运算符：+，-，*，/，%
  • 赋值运算符：=，+=，-=…
  • 关系运算符：>，<，>=，<=，!=，==，===…
  • 逻辑运算符：&&，||，!
  • 三元运算符：条件表达式 ? true_value : false_value

6 流程控制语句

JavaScript 中提供了和 Java 一样的流程控制语句，如下

  • if
  • switch
  • for
  • while
  • dowhile

6.1 if 语句

var count = 3;
if (count == 3) {
    alert(count);
}

6.2 switch 语句

var num = 3;
switch (num) {
    case 1:
        alert("星期一");
        break;
    case 2:
        alert("星期二");
        break;
    case 3:
        alert("星期三");
        break;
    case 4:
        alert("星期四");
        break;
    case 5:
        alert("星期五");
        break;
    case 6:
        alert("星期六");
        break;
    case 7:
        alert("星期日");
        break;
    default:
        alert("输入的星期有误");
        break;
}

6.3 for 循环语句

var sum = 0;
for (let i = 1; i <= 100; i++) { //建议for循环小括号中定义的变量使用let
    sum += i;
}
alert(sum);

6.4 while 循环语句

var sum = 0;
var i = 1;
while (i <= 100) {
    sum += i;
    i++;
}
alert(sum);

6.5 dowhile 循环语句

var sum = 0;
var i = 1;
do {
    sum += i;
    i++;
}
while (i <= 100);
alert(sum);

7 函数

函数（就是Java中的方法）是被设计为执行特定任务的代码块；JavaScript 函数通过 function 关键词进行定义。

7.1 定义格式

函数定义格式有两种：

  • 方式1

    function 函数名(参数1,参数2..){
    要执行的代码
}

  • 方式2

    var 函数名 = function (参数列表){
    要执行的代码
}

注意：

  • 形式参数不需要类型。因为JavaScript是弱类型语言

    function add(a, b){
    return a + b;
}

    上述函数的参数 a 和 b 不需要定义数据类型，因为在每个参数前加上 var 也没有任何意义。

  • 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

7.2 函数调用

函数调用函数：

函数名称(实际参数列表);

eg：

let result = add(10,20);

注意：

  • JS中，函数调用可以传递任意个数参数

  • 例如 let result = add(1,2,3);

    它是将数据 1 传递给了变量a，将数据 2 传递给了变量 b，而数据 3 没有变量接收。

总结

  以上就是JavaScript基础语法的全部内容，希望对你有帮助。

avatar
文章
阅读
粉丝