JavaScript 基础知识

JavaScript 介绍

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript 用法

  • HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
  • 脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

书写位置

  • 内嵌式：理论上js可以书写在页面的任意位置。
<script>alert("内嵌式");</script>
  • 外链式：首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
  • 行内式：直接书写在标签身上，是一个简写的事件，所以又称之为事件属性。
<button onclick="alert('啦啦啦~');">点我</button>

JavaScript 输出

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

abstract else instanceof super
boolean enum int switch
break export interface synchronized
byte extends let this
case false long throw
catch final native throws
char finally new transient
class float null true
const for package try
continue function private typeof
debugger goto protected var
default if public void
delete implements return volatile
do import short while
double in static with

JavaScript 注释

JavaScript 注释可用于提高代码的可读性。

  • 单行注释以 // 开头。
  • 多行注释以 /* 开始，以 */ 结尾。

JavaScript 变量

变量是用于存储信息的"容器"。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头（不推荐这么做）
  • 变量名称对大小写敏感（y 和 Y 是不同的变量）

声明变量

在 JavaScript 中创建变量通常称为"声明"变量。

// 使用var关键词来声明变量
var name；
// 赋值
name = "zhangsan";
// 声明且赋值
var age = 25;

// 一条语句，多个变量
var name = "zhangsan", age = 25;
// 也可以这样
var name = "zhangsan",
age = 18;

// 一条语句中声明的多个变量不可以同时赋同一个值
var x,y,z = 1;
// x,y为 undefined，z为1

// 重新声明变量，该变量的值不会丢失
var name = "zhangsan";
var name;
console.log(name); // zhangsan

JavaScript let 和 const

  • let 声明的变量只在 let 命令所在的代码块内有效。
  • const 声明一个只读的常量，一旦声明，常量的值就不能改变。

JavaScript 数据类型

基本类型：

  • 字符串（String）
  • 数字(Number)
  • 布尔(Boolean)
  • 空（Null）
  • 未定义（Undefined）
  • Symbol

引用数据类型：

  • 对象(Object)
  • 数组(Array)
  • 函数(Function)

JavaScript 动态类型

意味着相同的变量可用作不同的类型

var x; // Undefined
var x = 5; // Number
var x = "Hello"; // String

声明变量类型

使用关键词 "new" 来声明其类型：

var name = new String;
var age = new Number;
var status = new Boolean;
var cars = new Array;
var person = new Object;

JavaScript 字符串

JavaScript 字符串用于存储和处理文本。

  • 单引号或双引号都可以
var name = "zhangsan";
var name = 'zhangsan';
  • 可以在字符串中使用引号，只要不匹配包围字符串的引号即可
var remarks = "My name is 'zhangsan'";
  • 也可以在字符串添加转义字符来使用引号
var remarks = "My name is \"zhangsan\"";
  • 可以使用索引位置来访问字符串中的每个字符：
var name = "zhangsan";
console.log(name[3]); // n
  • 可以使用内置属性 length 来计算字符串的长度
var name = "zhangsan";
console.log(name.length); // 8
  • 反斜杠是一个转义字符。 转义字符将特殊字符转换为字符串字符
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符
  • 可以使用 new 关键字将字符串定义为一个对象
var name1 = "ZhangSan";
var name2 = new String("ZhangSan");
console.log(typeof name1); // string
console.log(typeof name2); // object

字符串属性

  • constructor 返回创建字符串属性的函数
  • length 返回字符串的长度
  • prototype 允许您向对象添加属性和方法

字符串方法

  • charAt() 返回指定索引位置的字符
  • charCodeAt() 返回指定索引位置字符的 Unicode 值
  • concat() 连接两个或多个字符串，返回连接后的字符串
  • fromCharCode() 将 Unicode 转换为字符串
  • indexOf() 返回字符串中检索指定字符第一次出现的位置
  • lastIndexOf() 返回字符串中检索指定字符最后一次出现的位置
  • localeCompare() 用本地特定的顺序来比较两个字符串
  • match() 找到一个或多个正则表达式的匹配
  • replace() 替换与正则表达式匹配的子串
  • search() 检索与正则表达式相匹配的值
  • slice() 提取字符串的片断，并在新的字符串中返回被提取的部分
  • split() 把字符串分割为子字符串数组
  • substr() 从起始索引号提取字符串中指定数目的字符
  • substring() 提取字符串中两个指定的索引号之间的字符
  • toLocaleLowerCase() 根据主机的语言环境把字符串转换为小写，只有几种语言（如土耳其语）具有地方特有的大小写映射
  • toLocaleUpperCase() 根据主机的语言环境把字符串转换为大写，只有几种语言（如土耳其语）具有地方特有的大小写映射
  • toLowerCase() 把字符串转换为小写
  • toString() 返回字符串对象值
  • toUpperCase() 把字符串转换为大写
  • trim() 移除字符串首尾空白
  • valueOf() 返回某个字符串对象的原始值

JavaScript 数字

  • JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
var x = 3.14;
var y = 34;
  • 极大或极小的数字可以通过科学（指数）计数法来书写
var x = 123e5;
var y = 123e-5;

JavaScript 布尔

布尔（逻辑）只能有两个值：true 或 false。

Null

表示一个空对象引用。

Undefined

表示变量不含有值。

Symbol

Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值

JavaScript 对象

JavaScript 对象是属性和方法的容器。

对象定义

  • 使用字符来定义和创建JavaScript对象
var person = {name:"zhangsan",sex:"男",age:25};
  • 定义JavaScript对象可以跨越多行，空格跟换行不是必须的
var person = {
	name:"zhangsan",
	sex:"男",
	age:25
};

对象属性

  • JavaScript 对象是键值对的容器
  • 键值对通常写法为 name : value (键与值以冒号分割)
  • 键值对在 JavaScript 对象通常称为 对象属性。

访问对象属性

var person = {name:"zhangsan",sex:"男",age:25};
// 1. 对象.属性
console.log(person.name);
// 2. 对象[属性]
console.log(person["name"]);

对象方法

  • 对象的方法定义了一个函数，并作为对象的属性存储。
  • 对象方法通过添加 () 调用 (作为一个函数)。

访问对象方法

var person = {
name:"zhangsan",
sex:"男",
age:25,
getAge:function(){
	return this.age;
}
};
// 加括号，作为对象的一个方法，返回25
console.log(person.getAge()); 
// 不加括号，作为对象的一个属性，返回函数的定义
console.log(person.getAge);

JavaScript 数组

以下3种方式都可以创建数组

var cars = new Array();
cars[0] = 20;
cars[1] = 14;
cars[2] = 31;

var cars = new Array( 20, 14, 31);

var cars = [ 20, 14, 31];

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

function functionname(){
	// 执行代码
}

调用带参数的函数

  • 在调用函数时，可以向其传递值，这些值被称为参数。
  • 参数可以在函数中使用，可以发送任意多的参数，由逗号（,）分隔
  • 变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值，以此类推。
function myFunction(var1,var2){
	// 代码
}

带有返回值的函数

function myFunction(){
    var x=5;
    return x;
}

JavaScript 作用域

作用域为可访问变量，对象，函数的集合。

局部变量

  • 变量在函数内声明，变量为局部变量。
  • 局部变量：只能在函数内部访问。
  • 因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
  • 局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
  • 函数参数只在函数内起作用，是局部变量。

全局变量

  • 变量在函数外定义，即为全局变量。
  • 全局变量有 全局作用域: 网页中所有脚本和函数均可使用。
  • 如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
  • 全局变量是 window 对象: 所有数据变量都属于 window 对象。

变量生命周期

  • JavaScript 变量生命周期在它声明时初始化。
  • 局部变量在函数执行完毕后销毁。
  • 全局变量在页面关闭后销毁。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

常见HTML事件

  • onchange：HTML 元素改变
  • onclick：用户点击 HTML 元素
  • onmouseover：用户在一个HTML元素上移动鼠标
  • onmouseout：用户从一个HTML元素上移开鼠标
  • onkeydown：用户按下键盘按键
  • onload：浏览器已完成页面的加载

JavaScript 运算符

算术运算符

  • + 加法
  • - 减法
  • * 乘法
  • / 除法
  • % 取模
  • ++ 自增
  • -- 自减

赋值运算符

  • = x=y
  • += x+=y x=x+y
  • -= x-=y x=x-y
  • *= x=y x=xy
  • /= x/=y x=x/y
  • %= x%=y x=x%y

比较运算符

  • == 等于
  • === 绝对等于
  • != 不等于
  • !== 不绝等于
  • > 大于
  • < 小于
  • >= 大于或等于
  • <= 小于或等于

逻辑运算符

  • && and
  • || or
  • ! not

条件运算符

  • age > 18 ? true : false

JavaScript 条件语句

条件语句用于基于不同的条件来执行不同的动作。

if 语句

只有当指定条件为 true 时，使用该语句来执行代码

  • 语法
if (condition)
{
    当条件为 true 时执行的代码
}

if...else 语句

当条件为 true 时执行代码，当条件为 false 时执行其他代码

  • 语法
if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

if...else if....else 语句

使用该语句来选择多个代码块之一来执行

  • 语法
if (condition1)
{
    当条件 1 为 true 时执行的代码
}
else if (condition2)
{
    当条件 2 为 true 时执行的代码
}
else
{
  当条件 1 和 条件 2 都不为 true 时执行的代码
}

switch 语句

使用该语句来选择多个代码块之一来执行

  • 语法
switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}
  • 工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
  • default 关键词：使用 default 关键词来规定匹配不存在时做的事情：

JavaScript 循环

循环可以将代码块执行指定的次数。

for

循环代码块一定的次数

  • 语法
for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

语句 1 （代码块）开始前执行
语句 2 定义运行循环（代码块）的条件
语句 3 在循环（代码块）已被执行之后执行

for (var i = 0; i < 10; i++){
	console.log(i);
}
// 省略语句1，在循环开始前设置值
var i = 2;
for (; i < 10; i++){
	console.log(i);
}
// 在语句1中初始化多个值
for (var i = 0,len=arr.length; i < len; i++){ 
    console.log(i);
}
// 省略语句3
for (var i = 0; i < 10;){
	console.log(i);
	i++;
}

for/in

循环遍历对象的属性

var person = {fname:"Yang",lname:"TwoShuai",age:25}; 

for (x in person){
    console.log(person[x]);
}

while

当指定的条件为true时循环指定的代码块

  • 语法
while (条件){
    需要执行的代码
}

var i = 0;
while(i < 10) {
	console.log(i);
	i++;
}

do/while

该循环是 while 循环的变体。会在检查条件是否为真之前执行一次代码块，然后如果条件为真的话，就会重复这个循环

  • 语法
do {
    需要执行的代码
} while (条件);

var i = 0;
do {
	console.log(i);
	i++;
} while(i < 10);

JavaScript break和continue语句

  • break 语句用于跳出循环。
// 仅会打印：0 1 2，当i=3的时候循环停止执行
for (var i = 0; i < 10; i++){
	if (i == 3){
		break;
	}
	console.log(i);
}
  • continue 用于跳过循环中的一个迭代。
// 不会打印：3，当i=3的时候会直接执行下次循环
for (var i = 0; i < 10; i++){
	if (i == 3){
		continue;
	}
	console.log(i);
}
  • JavaScript标签 可以使用break和continue在多层循环的时候控制外层循环
outerloop:
for (var i = 0; i < 10; i++) {
    innerloop:
    for (var j = 0; j < 10; j++) {
        if (j > 3) {
            break;
        }
        if (i == 2) {
            break innerloop;
        }
        if (i == 4) {
            break outerloop;
        }
        console.log("i = " + i + " j = " + j);
    }
}

JavaScript typeof

使用 typeof 操作符来检测变量的数据类型。

JavaScript 类型转换

  • Number() 转换为数字
  • String() 转换为字符串
  • Boolean() 转换为布尔值

JavaScript 正则表达式

正则表达式（英语：Regular Expression，在代码中常简写为regex、regexp或RE）使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。

语法

/正则表达式主体/修饰符(可选)

使用字符串方法

  • search() 方法 用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。
var name = "zhangsan";
console.log(name.search("san"));
console.log(name.search(/San/i));
  • replace() 方法 用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
var str = "zhangsan";
var txt = str.replace(/san/i,"shan");
txt.replace("shan","san");

正则表达式修饰符

i：执行对大小写不敏感的匹配
g：执行全局匹配，查找所有匹配而非在找到第一个匹配后停止
m：执行多行匹配

正则表达式模式

  • 方括号用于查找某个范围内的字符

    • [ABC] 查找方括号之间的任何字符。
    • [0-9] 查找任何从 0 至 9 的数字。
    • (X|Y) 查找任何以 | 分隔的选项。

  • 元字符是拥有特殊含义的字符

    • \d 查找数字。
    • \s 查找空白字符。
    • \b 匹配单词边界。
    • \uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。

  • 量词

    • n+ 匹配任何包含至少一个 n 的字符串。
    • n* 匹配任何包含零个或多个 n 的字符串。
    • n? 匹配任何包含零个或一个 n 的字符串。

使用RegExp对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

  • 使用 test()
    test() 方法用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。
var patt = /e/;
patt.test("The best things in life are free!");

/e/.test("The best things in life are free!");
  • 使用 exec()
    exec() 方法用于检索字符串中的正则表达式的匹配。该函数返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。
/e/.exec("The best things in life are free!");

JavaScript 错误

  • try 语句测试代码块的错误。
  • catch 语句处理错误。
  • throw 语句创建自定义错误。
  • finally 语句在 try 和 catch 语句之后，无论是否有触发异常，该语句都会执行。
try {
    ...    // 异常的抛出
} catch(e) {
    ...    // 异常的捕获与处理
} finally {
    ...    // 结束处理
}

JavaScript 变量提升

  • JavaScript 中，函数及变量的声明都将被提升到函数的最顶部。
  • JavaScript 中，变量可以在使用后声明，也就是变量可以先使用再声明。
x = 5;
console.log(x); // 5
var x;

初始化不会提升

JavaScript 只有声明的变量会提升，初始化的不会。

console.log(x); // undefined
var x = 5;

JavaScript 严格模式

JavaScript 严格模式（strict mode）即在严格的条件下运行。

严格模式声明

严格模式通过在脚本或函数的头部添加 "use strict";表达式来声明。

严格模式的意义

  • 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
  • 消除代码运行的一些不安全之处，保证代码运行的安全；
  • 提高编译器效率，增加运行速度；
  • 为未来新版本的Javascript做好铺垫。

严格模式的限制

  • 不允许使用未声明的变量
  • 不允许删除变量或对象
  • 不允许删除函数
  • 不允许变量充满
  • 不允许使用八进制
  • 不允许使用转义字符
  • 不允许对只读属性赋值
  • 不允许对一个使用getter方法读取的属性进行赋值
  • 不允许删除一个不允许删除的属性
  • 变量名不能使用"eval"字符串
  • 变量名不能使用"arguments"字符串
  • 不允许使用以下这种语句:
"use strict";
with (Math){x = cos(2)}; // 报错
  • 由于一些安全原因，在作用域 eval() 创建的变量不能被调用：
"use strict";
eval ("var x = 2");
alert (x);               // 报错
  • 禁止this关键字指向全局对象

保留关键字

为了向将来Javascript的新版本过渡，严格模式新增了一些保留关键字

  • implements
  • interface
  • let
  • package
  • private
  • protected
  • public
  • static
  • yield

JavaScript this

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

  • 在方法中，this 表示该方法所属的对象。
  • 如果单独使用，this 表示全局对象。
  • 在函数中，this 表示全局对象。
  • 在函数中，在严格模式下，this 是未定义的(undefined)。
  • 在事件中，this 表示接收事件的元素。
  • 类似 call() 和 apply() 方法可以将 this 引用到任何对象。
var person = {
    id : 1,
    name : "zhangsan",
    age : 25,
    fullName : function() {
        return this.name;
    }
};

JavaScript JSON

JSON 是用于存储和传输数据的格式。通常用于服务端向网页传递数据 。

  • JSON 英文全称 JavaScript Object Notation(JavaScript 对象表示法)
  • JSON 是一种轻量级的数据交换格式。
  • JSON 是独立的语言 *
  • JSON 易于理解。
{"person" : [
	{ "name":"zhangsan" ,"age":25},
	{ "name":"lisi" , "age":30 },
	{ "name":"wangwu" , "age":41 }
]}

JSON 语法规则

  • 数据为 键/值 对。
  • 数据由逗号分隔。
  • 大括号保存对象
  • 方括号保存数组

JSON 对象

JSON 对象保存在大括号内。

{"name":"zhangsan" ,"age":25}

JSON 数组

JSON 数组保存在中括号内。

{ "person" : [
	{ "name":"zhangsan" ,"age":25},
	{ "name":"lisi" , "age":30 },
	{ "name":"wangwu" , "age":41 }
]}

JSON.parse()

JSON.parse() 方法用于将字符串转换为 JavaScript 对象

var text = '{ "person" : [
{ "name":"zhangsan" ,"age":25},
{ "name":"lisi" , "age":30 },
{ "name":"wangwu" , "age":41 }
]}';

var obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.person[1].name + " " + obj.person[1].age;

JSON.stringify()

JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串

var str = {
	"name":"zhangsan",
	"age":25
}
jsonStr = JSON.stringify(str)
console.log(jsonStr);

JavaScript void

void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

  • 语法
void func()
javascript:void func()

或者

void(func())
javascript:void(func())

<a href="javascript:void(0)">单击此处什么也不会发生</a>

href="#"与href="javascript:void(0)"的区别

  • #包含了一个位置信息，默认的锚是#top 也就是网页的上端。
  • 而javascript:void(0), 仅仅表示一个死链接。
<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>
  • 在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id。
  • 如果要定义一个死链接请使用 javascript:void(0) 。

JavaScript 代码规范

所有的 JavaScript 项目适用同一种规范。

变量名

变量名推荐使用驼峰法来命名(camelCase)

var labelPosition = "top";

空格与运算符

通常运算符 ( = + - * / ) 前后需要添加空格

var x = 1 + 1;

代码缩进

通常使用 4 个空格符号来缩进代码块

function add(x,y){
    return x + y;
}

语句规则

  • 简单语句的通用规则：
    • 一条语句通常以分号作为结束符。
var values = [ 21, 24, 31];
  • 复杂语句的通用规则:
    • 将左花括号放在第一行的结尾。
    • 左花括号前添加一空格。
    • 将右花括号独立放在一行。
    • 不要以分号结束一个复杂的声明。
function add(x,y) {
    return x + y;
}

对象规则

  • 将左花括号与类名放在同一行。
  • 冒号与属性值间有个空格。
  • 字符串使用双引号，数字不需要。
  • 最后一个属性-值对后面不要添加逗号。
  • 将右花括号独立放在一行，并以分号作为结束符号。
var person = {
    name: "zhangsan",
    age: 25,
    eyeColor: "blue"
};

每行代码字符小于 80

  • 为了便于阅读每行字符建议小于数 80 个。
  • 如果一个 JavaScript 语句超过了 80 个字符，建议在运算符或者逗号后换行。
document.getElementById("demo").innerHTML =
    "Hello JavaScript.";

命名规则

  • 变量和函数为小驼峰法标识, 即除第一个单词之外，其他单词首字母大写（lowerCamelCase）
  • 全局变量为大写（UPPERCASE）
  • 常量（如 PI）为大写（UPPERCASE）

HTML 载入外部 JavaScript 文件

使用简洁的格式载入JavaScript文件（type属性不是必须的）

<script src="myscript.js">

文件扩展名

  • HTML 文件后缀可以是 .html (或 .htm)。
  • CSS 文件后缀是 .css 。
  • JavaScript 文件后缀是 .js 。

使用小写文件名

  • 大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.jpg 不能通过 London.jpg 访问。
  • 其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.jpg 可以通过 London.jpg 或 london.jpg 访问。
  • 必须保持统一的风格，建议统一使用小写的文件名。
posted @ 2021-08-02 14:49  杨凯凡  阅读(119)  评论(0)    收藏  举报