【前端】JavaScript 基础语法

JavaScript 是一门编程语言，主要运行在浏览器上

HTML, CSS, JavaScript 这三门前端语言的关系如同

• HTML 骨架 网页结构
• CSS 皮囊 网页样式
• JavaScript 灵魂 网页行为

她们相互配合才能构建出一个成熟完整的前端网页页面

Hello World

<script>
    alert("Hello World");
</script>

• JavaScript 代码需要写在 script 标签中
• alert()  弹出窗口函数
• "Hello World" 作为 alert() 函数的参数

书写方式

行内式

直接嵌入标签中

<input type="button" value="点我一下" onclick="alert('Hello World')">

内嵌式

写到 script 标签中

<script>
    alert("Hello World");
</script>

外部式

写到单独的 .js 文件中

在 HTML 中使用 script 标签进行引用

<script src="hello.js"><script>

alert("Hello World");

console.log

打印一条日志到控制台

// 向控制台输出日志
console.log("这是一条日志");

• console 是一个对象表示控制台
• . 是访问或调用的意思
• log 是一个方法表示打印日志

基础语法 

注释

// 我是单行注释

/*
    我是多行注释
    我是多行注释
    我是多行注释
*/

变量

var

var name = 'zhangsan';
var age = 20;

let

let name = 'zhangsan';
let age = 20;

var 和 let 都可以用来申明变量，区别不大都可以使用

数据类型

• number：数字  不区分整数和小数
• boolean：true 真    false 假
• string：字符串类型
• undefined: 表示未定义的值
• null：表示空值

特殊数字表示

• Infinity：无穷大
• -Infinity：负无穷大
• NaN：表示不是数字

// 将 max 赋值为 JavaScript 的最大值
let max = Number.MAX_VALUE;

// 得到 Infinity
console.log(max + 1;

// 得到 -Infinity
console.log(-max - 1);

// 得到 NaN
console.log('hello' - 10);

字符串规则

单引号 

let string = 'hello world';

双引号

let string = "hello world";

嵌套

// 错误用法
var msg = "My name is "zhangsan""; 

// 搭配使用单双引号
var msg = "My name is 'zhangsan'"; 

// 搭配使用单双引号
var msg = 'My name is "zhangsan"'; 

// 使用转义字符
// \" 表示字符串内部的引号
var msg = "My name is \"zhangsan\"";  

转义字符

• \n  换行符
• \\   反斜杠
• \'   单引号
• \"   双引号
• \t   制表符

长度

let string = 'hello world';
let length = string.length;

拼接

let a = "my name is ";
let b = "zhangsan";
let c = a + b;

let a = "my score is ";
let b = 100;
elt c = a + b;

let a = 100 + 100; // 200
let b = '100' + 100; // 100100

boolean 布尔类型

• true == 1    真
• false == 0    假

undefined 未定义类型

let a;

只声明，不赋值，即未定义

console.log(a);

输出结果为 undefined

console.log(a + " " + "10");

输出结果为 undefined 10

console.log(a + 10);

输出结果为 NAN 不是一个数字

null 空类型

• null 和 undefined 都表示取值非法的情况
• null 表示当前的值为空  (相当于有一个空的盒子)
• undefined 表示当前的变量未定义  (相当于连盒子都没有)

运算符 

算术运算符

• +
• -
• *
• /
• %

赋值运算符

• =
• +=
• -=
• *=
• /=
• %=

自增自减运算符

• ++  自增1
• --    自减1

比较运算符

• <
• >
• <=
• >=
• == 比较相等(会进行隐式类型转换)
• !=
• === 比较相等(不会进行隐式类型转换)
• !==

逻辑运算符

• &&  与  一假则假
• ||  或  一真则真
• !  非

位运算符

• & 按位与
• | 按位或
• ~ 按位取反
• ^ 按位异或

移位运算符

• << 左移
• >> 有符号右移(算术右移)
• >>> 无符号右移(逻辑右移)

条件语句

if 语句

if (条件) {

    语句

}

if (条件) {

    语句

} else {

    语句

}

if (条件) {

    语句

} else if (条件) {

    语句

} else if (条件) {

    语句

} else {

    语句

}

三元表达式

条件 ? 表达式 : 表达式 ;

• 条件为 true  执行第一个表达式
• 条件为 false  执行第二个表达式

switch 语句

多分支情况下使用

switch (表达式) {

    case 值:

        语句
        break;

    case 值:

        语句
        break;

    default:

        语句

}

循环语句

while 循环

while (条件) {

    循环体

}

执行过程

• 先判断条件真假
• 条件为 true  执行循环
• 条件为 false  结束循环

for 循环

for (表达式; 表达式; 表达式) {

    循环体

}

• 表达式1  初始化循环变量.
• 表达式2  循环条件
• 表达式3  更新循环变量

执行过程:

• 执行表达式1  初始化循环变量
• 执行表达式2  判定循环条件
• 条件为 true    执行循环
• 条件为 false   结束循环
• 执行表达式3  更新循环变量

continue

结束本次循环

break

退出整个循环

数组

创建

let arr = new Array();

let arr = [];

let arr = [1, 2, 'hello', false];

获取

使用下标的方式访问数组元素（从 0 开始）

添加

• 通过修改 length 新增
• 通过下标新增
• 使用 push 进行追加元素

splice

使用 splice 方法可以添加删除替换元素

splice 有三个参数（前两个必填）

• 参数1  表示从哪个下标开始
• 参数2  表示要删除或替换的长度
• 参数3  表示想要添加或替换的内容

函数

function 函数名(形参列表) {

    函数体
    return 返回值;

}

作用域

• 全局作用域  在整个 script 标签中  或者单独的 js 文件中生效
• 局部作用域/函数作用域  在函数内部生效

对象

一个具体的事物

在 JS 中  字符串 数值 数组 函数 都是对象

对象可以有属性和方法

• 属性  事物的特征
• 方法  事物的行为

使用 { } 创建对象

// 创建一个空对象
let 对象名 = {}; 

let student = {

    // 属性
    name: 名字,
    height: 身高,
    weight: 体重,

    // 方法
    study: function() {

        console.log("学习");

    }

};

• 使用 { } 创建对象
• 属性和方法使用键值对的形式来组织
• 键值对之间使用 , 分割
• 键和值之间使用 : 分割
• 方法的值是一个匿名函数

使用对象的属性和方法

// 使用 . 
// 成员访问运算符来访问属性 `.` 
// 可以理解成 "的"
console.log(student.name);

// 使用 [ ] 访问属性
// 此时属性需要加上引号
console.log(student['height']);

// 调用方法
// 别忘记加上 ()
student.study();

使用 new Object 创建对象

let student = new Object();

student.name = 名字;
student.height = 身高;
student['weight'] = 体重;

student.study= function () {

    console.log("学习");

}

使用 构造函数 创建对象

function 构造函数名(形参) {

    this.属性 = 值;
    this.方法 = function...

}

let obj = new 构造函数名(实参);

• 在构造函数内部使用 this 关键字来表示当前正在构建的对象
• 构造函数的函数名首字母一般是大写的
• 构造函数的函数名可以是名词
• 构造函数不需要 return
• 创建对象的时候必须使用 new 关键字