0基础JavaScript入门教程(一)认识代码

1. 环境:

JavaScript简称js,后续我们将使用js来代替JavaScript

认识代码前,需要安装js代码运行环境。

  • 安装nodejs:在https://nodejs.org/zh-cn/ 下载LTS版本,然后安装
  • 安装visual studio codehttps://code.visualstudio.com/ 下载安装
  • 注:本教程基于ES6标准

安装完成后,打开visual studio code后,软件右下角会建议你安装中文插件,直接点安装。

建立一个新js文件:hello.js,保存到你想保存的目录。

在文件中输入:

console.log('hello world')

点击 visual studio code 上方菜单”调试-启动调试“,你将会在下方的调试窗口看到输出的'hello world'

后续我们会将 visual studio code 简称为 vscode

2. 输出:

现在你应该知道console.log的作用是在调试窗口输出一行文字。

3. 注释

注释的意思是,将代码中不需要运行的部分标记出来。注释一般用于代码说明,来告诉代码阅读者,代码的运行逻辑。

注释的写法有2种。

//单行注释

/*
多
行
注
释
*/

console.log('hello world');

上述代码运行结果,同之前的一样。

4. 变量和常量:

变量是代码运行的基本单位,代码中所有的最重要的元素都是由变量组成。

常量是一种特殊的变量,一旦声明,无法更改,无法被赋值。

let v = 12;//这是变量
const v1 = 'hello world';//这是常量

变量有2种属性:类型和值。

4.1 变量的命名

变量名字规则如下:

  • 字母:A-Z
  • 数字:0-9
  • 下划线:_
  • $
  • 不能以数字开头

下面都是合法的变量:

let aaa;
let a123;
let a__;
let a_123;
let a$12_$;
let $23;
let $_a;

下面是不合法的变量:

let 123;
let 1aa;
let +00;
let '';
let #$;

4.1 变量的类型

不同的类型和值,代表变量的不同使用方法。

console.log('hello world');
//上面这行语句中:
//console是变量,类型是object
//log是变量,类型是function
//'hello world'是常量,类型是string

js基本数据类型有5种,分别是:object, function, string, number, boolean

下面分别列出:

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型

//可以使用typeof函数来输出变量的类型
console.log(typeof(obj))//输出:object
console.log(typeof(func))//输出:function
console.log(typeof(str))//输出:string
console.log(typeof(num))//输出:number
console.log(typeof(b))//输出:boolean

除上述类型外,js中还包含一个特殊变量:undefined。这个变量表示变量没有初始化。下面来对比一下:

let a = 123;//声明了一个变量a,并且初始化为123
let b;//声明了一个变量b,没有初始化
console.log(a);//输出123
console.log(b);//输出undefined

注意:undefined在同其他变量进行计算的时候,有时候虽然不会报错,但是不建议依赖默认值。所以声明变量一定要初始化。

4.1.1 数组

其实除了上面的类型外,还有一个特殊类型,就是数组。

数组是多个变量的合在一起组成了一种新的数据类型。一般用来表示一堆相似的数据。比如:一班级的学生,一群小动物,一家人等等。

let students = [1,2,3,4];//4个学生,编号分别为1,2,3,4
let animals = [1,2,3,4];//4个动物,编号分别为1,2,3,4
let familys = [1,2,3,4];//4个家庭成员,编号分别为1,2,3,4

console.log(students[0]);//输出:1
console.log(students[1]);//输出:2
console.log(students[2]);//输出:3
console.log(students[3]);//输出:4

数组的值是要用 [] 来包含的,数组内部的值可以用变量或常量或表达式表示,并使用 , 分割。

如果想获取数组的元素,可以使用:数组名[下标值]的形式获取。

下标值从0开始计,比如:数组第一个元素为 数组名[0],第二个元素为 数组名[1]

4.2 变量的值

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型
let arr = []; //object类型

//在上一节这个例子中,每个变量都是有值的。
//obj这个变量的值是:{}
//func这个变量的值是: function(){}
//str这个变量的值是:'hi'
//num这个变量的值是:123
//b这个变量的值是:true
//arr这个变量的值是: []

可以看出,要给一个变量赋值,需要使用 =

我们可以用 = 改变一个变量的值。

let num = 123;//变量的值是123
num = 234;//变量的值是234。
//注意只有声明的时候才需要在变量前加let关键字。
//而且变量不能重复声明。
let num = 344;//报错,num这个变量已经在上面声明过了。

4.3 关键字

上文中提到了关键字,什么是关键字呢?

关键字是js语言中,为了规范代码编写规则,添加的一系列固定的单词。这些单词必须以固定的形式出现,每个关键字都表示不同的含义。

在代码中,除去变量,常量和注释,操作符以及括号,剩余的部分就是关键字。

常用关键字如下:

let
const
function
new
for
if
else
switch
break
continue
class
extends
constructor
this
super
...

现在不需要知道每个关键字是什么意思,只知道有关键字这个概念就行。

最重要的一点是,不要给你的变量命名同关键字一样。

let let;//错误
let function;//错误
let switch;//错误

4.4 函数

函数是为了更方便地控制程序结构,同时让程序更加容易编写,容易阅读而添加的概念。

函数能够将多条语句封装成一个整体来执行。

let obj = {}; //object类型
let func = function (){}; //function类型
let str = 'hi'; //string类型
let num = 123; //number类型
let b = true; //boolean类型

console.log(typeof(obj))//输出:object
console.log(typeof(func))//输出:function
console.log(typeof(str))//输出:string
console.log(typeof(num))//输出:number
console.log(typeof(b))//输出:boolean

//上面的代码,封装成函数可以这样编写

function printType(val) {
    console.log(typeof(val));
}

printType(obj);
printType(func);
printType(str);
printType(num);
printType(b);

运行一下,上下2部分的运行结果是相同的。

可以看出,封装成函数后,执行结果是相同的。

而好处显而易见。

  • 消除了很多重复代码:console.log和typeof,使代码更容易编写。
  • 通过printType的名字,我们可以判断出,这个函数的用途,它应该是打印类型的一个函数,这样使代码更容易阅读。

函数声明的写法是固定的:

function 函数名(参数名1, 参数名2 …) {

//你的函数内部语句

return …;

}

调用方式也是固定的:

函数名(参数1,参数2);

函数可以有返回值,用return表示。return 后面是一个变量或者一个表达式。

一旦一个函数添加了return,那么当调用它的时候,这个函数调用就能够像变量一样使用。

function returnInt(){
    return 123;
}

let a = returnInt();

console.log(a);//输出 123

5. 运算符

只有变量是不够的,为了能够计算赋值,形成逻辑,js定义了一系列运算符,这些运算符将变量和常量连接在一起,形成了不同的计算过程,和逻辑代码。

上文已经介绍了 = 这个运算符,它的作用是给一个变量赋值。

现在我们介绍一些其他一些简单的运算符。

let a = 1 + 2;
let b = 3 * 4;
let c = 5 - 2;
let d = 6 / 3;

console.log(a);//输出3
console.log(b);//输出12
console.log(c);//输出3
console.log(d);//输出2

没错就是你熟悉的 +(加法) -(减法) *(乘法) /(除法)。

上述代码,会计算等号右侧的四则运算,然后将结果赋给左侧的变量。

一些常用的运算符如下:

+
-
*
/
%
>
<
=
==
&&
||
!
()
++
+=
*=
/=
-=
%=
...

现在你不需要了解所有运算符的含义,你只需要了解运算符是用来连接变量的,并且会一些简单的四则运算就好了。

6. 表达式

如上文所述,表达式就是:将变量使用运算符连接起来之后形成的复杂语句。

表达式出现的位置和变量相同。也就是说,能够出现变量的地方,就能出现表达式。

有一点例外,就是表达式不能出现在 = 的左侧,也就是说不能给表达式赋值。你可以认为表达式出现的位置和常量相同。

let a = 1 + 2 * 3;
let b = (1 + 2) * 3;
let c = a + b;
let d = c * a;
let e = c == d;
//上述语句 ‘=’ 右侧的都是表达式

上面介绍的数组取值也可以认为是一个表达式:students[0]。

7. 总结

经过上面的介绍,现在给你一个程序,你应该能知道程序的每个单词分别是什么元素了。

那我们练习一下,为下列程序的每一行添加注释,说明一下这行包含什么元素。

也可以将代码copy到vscode中,运行一下看看是什么结果。


function max(a, b){
    if(a > b) {
        return a;
    }else{
        return b;
    }
}

function sort(arr) {
    for(let i = arr.length - 1; i >= 0; i--) {
        for(let j = i - 1; j >= 0; j--) {
            if(i > 0 && arr[i] != max(arr[i], arr[j])) {
                let tmp = arr[i];
                arr[i] = arr[j];
                arr[j] = tmp;
            }
        }
    }
}

let arr = [9,4,1,3,6,5,7,8,2];

sort(arr);

console.log(...arr);

    原文作者:hard_man
    原文地址: https://www.jianshu.com/p/18d8be35e1c6
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞