导图社区 JavaScript基础语法

JavaScript基础语法

总结了JavaScript的基础语法，对大部分知识点都举了例子，说明如何使用。

提示: 本内容由社区用户上传并分享。平台不对内容的真实性、合法性、知识产权归属及是否侵害第三方权利进行事前审核或保证。本内容可能包含受版权保护的图片、字体或其他第三方素材，使用前请自行确认授权范围。

编辑于2020-03-08 13:51:16

小冰

他的近期作品查看更多>>

JavaScript基础语法

社区模板帮助中心，点此进入>>

小冰

他的近期作品查看更多>>

相似推荐
大纲

互联网9大思维
- 42.3k
- 987
- 2.5k
- 401
- 0
MindMaster
组织架构-单商户商城webAPP 思维导图。
- 20.4k
- 3
- 187
- 8
- 1
Kacyun
域控上线
- 5.7k
- 173
- 11
- 4
- 0
jackrao
python思维导图
- 11.7k
- 561
- 243
- 6
- 0
(*^▽^*)
css
- 5.1k
- 1
- 43
- 3
- 0
A张舫
CSS
- 8.0k
- 278
- 189
- 33
- 0
journey
计算机操作系统思维导图
- 10.0k
- 362
- 213
- 14
- 0
journey
计算机组成原理
- 5.2k
- 98
- 71
- 8
- 0
journey
IMX6UL(A7)
- 3.8k
- 41
- 5
- 0
- 0
Handler XU
考试学情分析系统
- 5.1k
- 51
- 10
- 1
- 0
蒋龙

JavaScript基础语法

JavaScript组成

ECMAScript(JavaScript语法)

DOM(页面文档对象模型)

BOM(浏览器对象模型)

书写位置

行内式

直接写到元素的内部

内嵌式

外部JS

注释

单行注释

多行注释

/* */

输入输出

prompt('提示语')

弹出输入框

例：var myname = prompt('请输入你的名字');

alert(msg)

弹出输出框

console.log(msg)

控制台输出

变量

关键字var

不区分变量类型，都用var定义

使用

声明

var v;

赋值

v = 10;

初始化

var v = 10;

命名规范

由字母、数字、下换线、美元符号组成，不能以数字开头

严格区分大小写

驼峰命名法，首字母小写，后面单词首字母大写

尽量避免直接使用name作为变量名

数据类型

简单数据类型

数字型（Number)

可以保存整数值或者小数值，默认值为0

八进制：前加数字0

例：010，即十进制的8

十六进制：前加0x

例如：0x9

isNaN()

判断是不是非数字类型，是数字返回false，否则为true

例：isNaN(12) 结果为false

字符串类型（String）

默认值为空字符串''

可以用单引号或双引号，可单双嵌套，外双内单/外单内双都可

例：var str = '我很"可爱"的';

推荐使用单引号，因为HTML里面的属性用的是双引号

转义符

换行

斜杠\

单引号'

双引号"

缩进

空格

字符串长度

str.length

字符串拼接

str + 任意类型，结果为字符串

可拼接多项，可拼接变量

例：var str = '我' + 18 + '岁'; 即'我18岁'

布尔值类型（Boolean）

true/false，默认值为false

参与数值运算时，true值为1，false值为0

Undefined

未定义

NaN

not a number，非数字型

类型转换

变量的数据类型是可以变化的

例：var v = 10; v = "123";

获取变量类型：关键字typeof

例：var n = 10; alert(typeof n);

转为字符串

.toString()

例：var str = n.toString();

String()

例：var str = String(n);

任意类型+空字符串

例：var str = n + '';

转为数字型

parseInt(string)

取整（直接去掉小数位，无进位）

例：var n = parseInt('3.14'); //n=3

parseFloat(string)

取浮点数

例：var n = paresFloat('3.14'); //n=3.14

Number()

例：var n = Number('123');

js隐式转换(- * /)

例：var n = '12' - 0;

转为布尔型

Boolean()

只有''(空字符串)、0、NaN、null、undefined可以转为false，其余为true

运算符

算术运算符

+、-、*、/、%

赋值运算符

=、+=、-=、*=、/=、%=

递增、递减运算符

++（两个加号)、--(两个减号)

前置：先变值再运算。后置：先运算再变值

例：n++、--n

比较运算符

<、>、>=、<=、==、!=、===、!==

== 默认转换数据类型，会把字符串转为数字型

===全等，要求值和数据类型完全一致

逻辑运算法

&&、||、!

数组

数组内元素的类型可以不同

创建

用数组字面量创建

var arr = [];

var arr = [1, 'a', true]

用关键字new创建

var arr = new Array();

访问

按下标访问，下标从0开始

数组长度

arr.length

新增元素

修改length

例：假设数组arr元素数量为3 arr.length = 4;

修改数组索引

例：arr[4] = 1;

常用内置对象

MDN参考文档

https://developer.mozilla.org/zh-CN/

Math对象

静态对象，可直接使用

Math.PI

Math.max()

求最大值

Math.min()

求最小值

Math.floor()

向下取整

Math.ceil()

向上取整

Math.round()

四舍五入取整

Math.abs()

绝对值

Math.random()

随机数，范围[0,1)

Date对象

是一个构造函数，必须使用new来创建

Date()

当前时间

例：var date = new Date();

设置时间

例：var date1 = new Date(2020,3,8);

例：var date2 = new Date('2020-3-8 0:0:1');

.getFullYear()

获取当前年

例：var date = new Date(); console.log(date.getFullYear());

.getMonth()

获取当前月(0-11)

.getDate()

获取当前天

.getDay()

获取当前星期几(周日0-周六6)

.getHours()

获取当前小时

.getMinutes()

获取当前分钟

.getSeconds()

获取当前秒钟

获取Date总毫秒数，时间起点为1970-1-1

.valueOf()

例：console.log(date.valueOf());

.getTime()

+new Date()

例：var date = +new Date();

Date.now()

例：console.log(Date.now());

数组对象

使用字面量方式创建

使用new Array()创建

括号中单个值：数组长度括号中两个及以上值：数组元素

例：var arr = new Array();

例：创建长度为2的数组 var arr1 = new Array(2);

例：创建元素为2,3的数组 var arr2 = new Array(2,3);

检测是否为数组

instanceof

例：console.log(arr instanceof Array);

Array.isArray()

例：console.log(Array.isArray(arr));

添加元素

.push(若干参数)

在数组末尾添加若干个元素，返回值为数组新长度

例：arr.push(4);

.unshift(若干参数)

向数组的开头添加若干个元素，返回新的数组长度

删除元素

.pop()

删除数组最后一个元素，返回它删除的元素的值

.shift()

删除数组第一个元素，返回第一个元素的值

数组排序

.reverse()

颠倒数组中元素的顺序

例：arr.reverse();

.sort(function(){})

对数组的元素进行排序，参数为排序函数

例：arr.sort(function(a,b){ return a - b; //升序 //return b - a; 降序 });

获取元素索引

.indexOf(元素名)

从前往后查找，返回元素名的索引号，多个相同元素就返回第一个，找不到就返回-1

例：console.log(arr.indexOf('abc'));

.lastIndexOf(元素名)

从后往前查找，其余和indexOf相同

转成字符串

.toString()

将数组转为字符串，每项以逗号隔开

例：console.log(arr.toString());

.join('分隔符')

按'分隔符'将数组中各项连接起来

例：console.log(arr.join(','));

字符串对象

字符串所有的方法都不会修改字符串本身，而是返回一个新的字符串

根据字符返回位置

.indexOf('字符',[起始位置])

从前往后地从起始位置开始查找字符，返回其索引，起始位置可省略

例：从第3个字符开始查找 console.log(str.indexOf('abc',3));

.lastIndexOf('字符',[起始位置])

从后往前查找

根据位置返回字符

.charAt(index)

返回第index个元素

例：console.log(str.charAt(2));

.charCodeAt(index)

返回第index个元素的ASCII码

str[index]

返回第index个位置的字符

截取字符串

.substr(start,length)

从第start个开始，截取长度为length的字符串

例：console.log(str.substr(0,3));

.slice(start,end)

截取从第start个到第end个（不包括第end个）的字符串

.substring(start,end)

基本和slice相同，但不接受负值

替换字符串

.replace('被替换字符','替换为的字符')

将字符串中的'被替换字符'替换为'替换为的字符'，只会替换第一个

例：console.log(str.replace('a','b'));

转为数组

.split('分隔符')

将字符串以'分隔符'截断，截断后的若干个项作为数组的元素

例：var str = '1-2-3'; var sarr = str.split('-'); //sarr = ['1','2','3']

对象

创建

用字面量创建

直接初始化，可包含function

var obj = { uname: 'bob', age: 18, f: function(){}; ... };

用new Object创建

先声明再添加

var obj = new Object(); obj.age = 18; obj.name = 'bob';

用构造函数创建

先创建模板，再用模板创建对象

function Obj(uname, age){ this.name = uname; this.age = age; } var obj = new Obj('bob', 18);

访问

obj.age

obj['age']

遍历

使用for in

for(var k in obj){ console.log(k); //属性名 console.log(obj[k]); //属性值 }

预解析

js引擎会把js里所有的var和function提升到当前作用域的最前面

对于变量，只提升声明，不会赋值

对于函数，会提升完整的声明

函数

声明及调用

形参和return可省略

function 函数名(形参1,形参2,...){ //函数体 return 结果; }

调用：函数名(形参1,形参2,...);

var f = function(){};

调用：f();

函数参数数量不确定

关键字arguments,按数组的方式访问

流程控制

三元表达式

条件表达式 ? 表达式1 : 表达式2

分支

if(条件){ 若干语句; }

if-else

if(条件){ 若干语句; }else{ 若干语句; }

if-else if

if(条件){ 若干语句; }else if{ 若干语句; }else{ 若干语句; }

switch

switch(表达式){ case v1: 若干语句; break; case v2: 若干语句; break; ... default: 若干语句; }

循环

for

for(初始化变量;条件表达式;操作表达式){ 若干语句; }

while

while(条件表达式){ 若干语句; }

do while

do { 若干语句; }while(条件表达式)

改变当前循环

关键字continue

跳过后面的语句，进入到下次循环

关键字break

跳出循环