JavaScript 基础语法（一）

53 阅读 0 评论 35 点赞

我是靠谱客的博主健忘老师，最近开发中收集的这篇文章主要介绍JavaScript 基础语法（一），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

1 谈谈 JavaScript

JavaScript，通常会简称为'JS', 是一种浏览器脚本语言

1.1 JavaScript 编程语言特点

JavaScript是一种脚本编程语言
JavaScript是一种解释性语言
Javas的语法结构与C++、java十分类似
JavaScript是弱类型语言
JavaScript是事件驱动的语言
JavaScript是一种基于对象的语言
JavaScript具有跨平台性。
JavaScript具有安全性与简单性

1.2 JavaScript的发展历史

1990年底，欧洲核能研究组织（CERN）科学家Tim Berners-Lee，发明了万维网（World Wide Web）.
1992年底，美国国家超级电脑应用中心（NCSA）开始开发一个独立的浏览器，叫做Mosaic。
1994年10月，NCSA的一个主要程序员Marc Andreessen联合风险投资家Jim Clark，成立了Mosaic通信公司，不久后改名为Netscape(网景)。
1994年12月，Netscape发布浏览器Navigator1.0，市场份额一举超过90%。
1995年 Netscape 程序员 Brendan Eich 设计出了LiveScript1.0 后来改名 JavaScript
1996年3月，Navigator 2.0浏览器正式内置了JavaScript脚本语言。
1996年8月，微软模仿JavaScript开发了一种相近的语言，取名为JScript, 内置于IE3.0
1996年11月，网景公司决定将JavaScript提交给欧洲计算机制造联合会ECMA，希望JavaScript能够成为国际标准，以此抵抗微软。
1997年7月，ECMA组织发布262号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript。这个版本就是ECMAScript 1.0版。
1998年6月，ECMAScript 2.0版发布。
1999年12月，ECMAScript 3.0版发布
2008年7月，由于对于下一个版本应该包括哪些功能，各方分歧太大，争论过于激进，ECMA开会决定，中止ECMAScript 4.0的开发，将其中涉及现有功能改善的一小部分，发布为ECMAScript 3.1
2009年12月，ECMAScript 5.0版正式发布。
2011年6月，ECMAscript 5.1版发布，并且成为ISO国际标准
2015年6月17日，ECMAScript 6发布正式版本，即ECMAScript 2015
此后，每年6月ECMAScript 都会发布新的版本 (ES2016、ES2017、ES2018)

1.3 JavaScript 应用领域

WEB前端 (页面特效，页面渲染)
WEB后端 (Node.js)
Hybrid App(混合App)
桌面应用如网易有道的产品、豌豆荚
游戏 (Cocos2d.js、Unity3D)

1.4 JavaScript 组成部分

ECMAScript 核心语法 (ActionScript有使用ECMAScript语法)
BOM 浏览器对象模型
DOM 文档对象模型

2 JavaScript基本语法

2.1 在HTML中使用

在<script>标签内写代码

<script>
    alert('hello world')
</script>

引入外部脚本文件
```
<script src="./script.js"></script> 
```

通过事件属性定义在元素内部

<button onclick="alert('啊，好疼啊')">点我啊</button>

2.2 JavaScript 注释

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

2.3 指令(语句)结束符

换行和；号

alert('大家好');
alert('大家好');

alert('大家好')
alert('大家好')
alert('大家好')

2.4 输出内容

document.write('你是不是喜欢我?');  //直接输出到页面
console.log('hello world'); //控制台输出
alert 弹出输出框

2.5 变量

//javascript 使用var 关键字定义变量
var username = 'xiaolili'

声明多个变量用，号隔开
var a=1,b=2,c=3;
//ES6 中新增 let关键字
let userage = 100

变量名命名规范

标识符必须 由 "数字","字母", "_"  或者 "$" 组成,并且不能以数字 开头
标识符不能与保留字冲突
区分大小写

保留字


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

3 第一个JavaScript 程序

三个基本弹框

alert()  警告框，没有返回值
confirm()  确认框， 返回 布尔值 true/false
prompt()   输入框，返回用户输入的内容，点确定。   点取消，null

获取HTML中的DOM元素
```
document.getElementById()
```
元素的应用得到元素的属性
事件的应用触发了事件在执行某段代码
函数的应用
运算符的应用
添加改变元素的内容

4 JavaScript 数据类型

4.1 数据类型

JavaScript的数据类型分为原始类型和对象类型，这里我们先来了解原始类型

原始类型

数字 Number
字符串 String
布尔值 Boolean
空 null
未定义 undefind

对象类型

数组 Array、函数 Function、日期 Date 、正则 RegExp、错误 Error、对象 Object等

函数监测

typeof(100)
typeof(username)

4.2 数字 Number

定义

十进制表示
十六进制表示
科学计数法表示

浮点精度问题

console.log(.1 + .2)

数值范围

可表示的数字范围： -5e324 ~ 1.7976931348623157e+308

超过范围，会显示为 Infinity(正无穷) 或 -Infinity(负无穷)

isFinite()    //函数判断是否在范围内

特殊的Number值 NaN

表示Not A Number，类型是Number 但又不是常规的数字

和任何值都不相等

与任何值运算,结果还是NaN

isNaN()    //函数 判读是否是 NaN

4.3 字符串 String

声明方式

双引号
单引号

模板字符串(ES6新增)

content = `
打扎好，我寺${username}.
是兄弟，就来砍我
今晚八点，不见不散
`
//多行，${}方式 嵌入变量。 传统方式变量字符串连接必须用字符串连接符

字符串连接符

转义字符

b 退格         
f 走纸换页     
n 换行         
r 回车         
t 水平制表符    
' 单引号     
" 双引号     
\ 反斜杠     
xXX 十六进制XX指定的Latin-1 字符        
xXXXX 十六进制XXXX指定的Unicode 字符

4.4 布尔值 Boolean

let a = true
let b = false
while (true) { }

4.5 null和undefind

null 表示未定义的对象
undefined 表示"缺少值"

4.6 数据类型转换

显示类型转换

Number()
parseInt()
parseFloat()
String()
Boolean()

自动类型转换

当JavaScript想使用A类型的值得时候,而你提供的是B类型的值,JavaScript会自动把B类型转换为A类型

转换规则

原始值	转换为数字	转换为字符串	转换为布尔值
false	0	"false"	false
true	1	"true"	true
0	0	"0"	false
1	1	"1"	true
"0"	0	"0"	true
"000"	0	"000"	true
"1"	1	"1"	true
NaN	NaN	"NaN"	false
Infinity	Infinity	"Infinity"	true
-Infinity	-Infinity	"-Infinity"	true
""	0	""	false
"20"	20	"20"	true
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob","Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

5 JavaScript 运算符

5.1 算术运算符

加法运算符 +
减法运算符 -
乘法运算符 *
除法运算符 /
模运算符 %
负号运算符 -
正号运算符 +
递增运算符 ++
递减运算符 --

5.2 关系运算符

相等运算符 ==
全等运算符 ===
不等运算符 !=
不全等运算符 !==
小于运算符 <
大于运算符 >
小于或等于运算符 <=
大于或等于运算符 >=
in运算符判断一个值是否属于某个数组或者一个属性是否属于一个对象
instanceof 判断一个对象的实例是否属于某个对象

5.3 逻辑运算符

逻辑与 &&
逻辑或 ||
逻辑非 !

5.4 位运算符

按位与 &
按位或 |
按位异或 ^
按位非 ~
左移 <<
右移 >>

5.5 赋值运算符

=
+=
-=
/=
*=
%/
<<=
>>=
&=
|=
^=

5.6 其他运算符

条件运算符 ?:
typeof运算符判断操作数类型
delete运算符删除对象属性或者数组元素
void运算符忽略操作数的值
逗号运算符 ,
字符串连接 +

//条件运算符

//判断条件?结果1：结果2

var score = 20;

var res = score > 60 ? '及格' : '不及格';

console.log(res); 不及格

5.7 运算符分类

按照功能

算数运算符
关系运算符
逻辑运算符
位运算符
赋值运算符
其他运算符

按照操作数

一元运算符
二元运算符
三元运算符

5.8 运算符优先级

运算符	描述
. [] ()	字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void	一元运算符、返回数据类型、对象创建、未定义值
* / %	乘法、除法、取模
+ - +	加法、减法、字符串连接
<< >> >>>	移位
< <= > >= instanceof	小于、小于等于、大于、大于等于、instanceof
== != === !==	等于、不等于、严格相等、非严格相等
&	按位与
^	按位异或
	按位或
&&	逻辑与
	逻辑或
?:	条件
= oP=	赋值、运算赋值
,	多重求值

6 流程控制语句

6.1 条件语句(分支结构)

单向分支 if

if (表达式) {
    code...
}

双向分支 if...else

if (表达式) {
    code...
} else {
    code...
}

多向分支 if... else if

if (表达式) {
    code...
} else if (表达式) {
    code...
} else if (表达式) { code... } else { code... }

多向分支 switch...case

switch (表达式) {
    case 表达式可能的值: code....; break;
    case 表达式可能的值: code....; break; case 表达式可能的值: code....; break; case 表达式可能的值: code....; break; default: code....; }

分支结构嵌套

if (表达式) {
    if (表达式) {
        code....
    }
    code ...
} else {
    code...
}

6.2 循环

while和 do...while 的区别循环超过一次没有区别

do...while 一上来就循环一下次不管条件是否成立

while 循环

while (循环条件) {
    code...
}

do...while循环先

do {
    code...
} while (循环条件)

for 循环

for (循环变量; 循环条件; 循环变量变化) {
    code ...
}

//循环输出 0-10
for (var i = 0; i <= 10; i ++) { console.log(i) }

for...in循环

var obj = {name:'JIM', age:20}
for (k in obj) { console.log(k, obj[k]) } //for...in 可以遍历 javaScript 的对象类型,一切皆对象

for...of 循环 (ES6新增)

var list = [10,20,304,405,3] for (v of list) { console.log(v) } //用于遍历JavaScript中的可迭代类型(Iterable) 主要包括 数组、类数组对象、字符串、Map、Set、Anguments、NodeList等

6.3 其他语句

跳转语句

break语句结束整个循环
continue语句结束当前循环
return语句返回函数值

异常处理语句

throw 抛出异常
try/catch/finally

try {
    tryCode - 尝试执行代码块
}
catch(err) {
    catchCode - 捕获错误的代码块
} 
finally {
    finallyCode - 无论 try / catch 结果如何都会执行的代码块 }

严格模式

"use strict"
code...

//js存在严格格式
//开启严格模式
'use strict'

var username = '小丽丽';
//userage = 100; //严格模式下声明变量必须加 var

转载于:https://www.cnblogs.com/wanglecn/p/9470627.html

最后

以上就是健忘老师为你收集整理的JavaScript 基础语法（一）的全部内容，希望文章能够帮你解决JavaScript 基础语法（一）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Other
浏览次数：53 次浏览
发布日期：2024-06-02 08:15:01
本文链接：https://www.kaopuke.com/article/k-p-k_13_u_7_o_26_f5_13_jkw.html

ES6笔记ES6async函数promise setTimout 的区别

类数组与严格模式

ES6详解（持续更）前言let和const命令变量的解构赋值字符串的拓展字符串的新增方法正则的扩展数值的拓展函数的拓展数组的扩展对象的拓展对象的新增方法SymbolSet 和 Map 数据结构Proxy（建议先看Reflect）ReflectPromiseIterator 和 for…of 循环Generator 函数的语法Generator 函数的异步应用async 函数Class 的基本语法Class 的继承Module 的语法Module 的加载实现编程风格读懂 ECMAScript 规格