Please enable JavaScript.
Coggle requires JavaScript to display documents.
javascript基础 - Coggle Diagram
javascript基础
数组
定义：一组数据的集合，可以存放任意类型的元素
创建数据
使用new创建数组
如：var arr = new Array（）；创建了一个空的arr数组
var 数组名=new Array（）；
var arr=new Array（2）创建了一个长度为2的空数组
var arr=new Array（2，3）创建了一个有2和3两个元素的数组
使用数组字面量创建数组
数组的初始化：var 数组名 = 【’大白‘，’小黑‘】；
获取数组元素
数组的索引（下标）：从0开始，可以通过数组名【下标】来访问数组中指定的元素
slice（）函数，不改变原数组
拷贝到的数组名=要拷贝的数组名.slice（第一个元素的索引号，最后一个元素的索引号）
范围【第一个元素，最后一个元素）
获取数组长度：数组名.length
修改数组元素
修改索引号，追加数组
切记
不能直接给数组名赋值，否则会修改全部元素
将一个数组的元素复制到另一个数组
例如：newArr【newArr.length】= Arr【i】；
concat()：用于合并两个或多个数组，返回一个新数组
新数组名=第一个数组名.concat( 第二个数组名)；
添加数组元素（常用）
push（添加元素1，添加元素2……）
在数组的
末尾
添加一个或多个元素，返回新数组的长度
unshift（添加元素1，添加元素2……）
在数组的
开头
添加一个或多个元素，返回新数组的长度
删除数组元素（常用）
pop（）
删除数组的
最后一个元素
，返回删除的元素
shift（）
删除数组的
第一个元素
，返回删除的元素
splice（）函数
Link Title
检测变量是否为数组
①：利用instanceof函数，返回true或者false
如：console.log( 数组名 instanceof Array)；
如：Array.iaArray( arr )
②：利用Array.isArray( 参数 ) 函数H5新增IE9以上支持
数组排序
reverse（）：翻转数组中的元素，改变原来的数组返回新数组
sort（）：对数组元素进行排序，改变原来的数组返回新数组，只作用于个位数
语法结构：数组名.reserse（）；
语法结构：数组名.sort（）；
sort的完美写法
数组名. sort( function（a，b）){ return a-b;( 升序) / b-a ;（降序） }
数组索引方法
indexof（数组元素）
返回该数组元素出现的第一个索引号，如果没有返回-1
如：arr.indexof( ’ 卢南琪 ‘)
lastindexof（数组元素）
返回该数组元素的最后一个的索引号
数组转换为字符串
数组名.join（’分隔符‘）
数组名.tostring（）
js变量
概念
用来存储数据的容器
命名规则
必须以字母开头
也可以用$和-开头
变量名称对大小写敏感
不能使用关键字
名字必须有意义
变量的使用
声明变量
使用
var的关键字
来声明变量
例如：var age ; 声明了一个名称为age的变量
赋值
使用=号来赋值
例如：age = 18 ；
只声明不赋值，程序会显示undefine
不声明直接赋值使用是允许的，但是会变成全局变量
打印可以使用：console .log（变量名），作用:将"内容"输出在控制台中,方便以后的调试,是一个使用频率极高的功能。
变量的初始化
声明变量时同时赋值，例如：var name = ‘ pink 老师 ’
实际应用
弹出输入框
prompt（' 对话框所显示的提示信息'）；
弹出提示框
alert（存储输入框的值的变量名）；
更新变量
后面更改变量会更新变量
同时声明多个变量
多个变量名之间用逗号分隔即可
数据类型
简介
作用
便于把数据分成所需内存大小不同的数据，充分利用存储空间
变量的数据类型
在程序运行过程中由等号右边的值的类型来确定
数据类型是可以变化的，数据类型由最后的定义语句来确定
分类
简单数据类型
Boolean布尔值
概念
只有两个值true（1） 和 false（0）
语法
例如：var flag = true; 即flag=1
String字符串
语法
使用单引号括起来的语句是字符串
字符串的嵌套：外双内单，外单内双
在a标签中任何地方都可以使用双引号
字符串中的转义符
在字符串中具有特定作用的字符叫做
转义符
分类
\ n
：换行符
\ \
；斜杠
\ '
：单引号
\ *
：双引号
\ t
：tab缩进
\ b
：空格
实际应用
变量名.length：检测获取字符串的长度(包括空格)
字符串的拼接：
用+号来连接
两个
常量，不用加引号（字符串和其他类型相拼接，结果为字符串）
字符串不能写到字符串里面，可以通过相连的方式实现，例如：‘我是刘亦菲’+age
口诀：引引加加
或者使用字符串+=另一个字符串来实现拼接效果
注：不能修改字符串中的任意一个值，只能将字符串全部修改重新赋值
Number数字型
包含整型和浮点型
特殊值
-infinity：无穷小，小于任何数
NaN：代表一个非数值
infinity：无穷大，大于任何值
Underline还未定义的
和字符相加为字符串
和数字相加为NaN
Null空值
和字符相加为字符串
和数字相加为数字
数据类型转换
常用方式
转换为数字
praselnt ( string ) ：取整，不进位，省略数字单位
parseFloat ( string )：可以得到小数，与上面基本相同
Number（变量）：将字符转换为数字
利用算数运算符
- * /
：隐式转换，将字符转换为数字
转换为布尔
代表空的，否定的值会转换为false，比如：0 、 NaN 、null 、undef
其他的值都为true
转换为字符串
string ( 变量 )
重要：隐式转换：变量 + ‘ ’；
变量 . tostring()
获取变量数据类型
isNaN（）：用来判断变量是否非数字并且返回值，是数字返回false，不是数字返回true
typeof 变量名：可以检测变量为什么数据类型
在调试工具中，蓝色为数字，黑色为字符
变量命名规则拓展
关键字
指js本身已经使用了的字，不再充当变量名、方法名
包括：break、case、continue、default等等
保留字
预留的关键字，以后或许会成为关键字
例如：Boolean、byte、char等
标志符
开发人员为变量、属性、函数、参数取的名字
标志符不能为关键字或保留字
运算符
比较运算符
=：赋值
==：判断两边的值是否相等,会将两种类型进行转换
===：判断两边的值是否完全相同，不会转换等式两边的类型
逻辑运算符
||：或，一方为true就成立
短路运算
表达式1||表达式2
表达式1为真就返回表达式1，否则返回表达式2，当左边的表达式值可以确定后，就不再进行后面的运算
例如：console.log(123||456);结果为123
！：非，取反符，用来取一个布尔值的相反值
&&：与，两边都为true是成立
短路运算
表达式1为真就返回表达式2，否则返回表达式1，当左边的表达式值可以确定后，就不再进行后面的运算
例如：console.log( 0 && 456);返回0
表达式1&&表达式2
递增和递减运算符
++
--
和变量配合使用，有前置和后置两种方法
前置：先自加，后显示
后置，先显示，后自加
赋值运算符
age-=5：age=age-5
age
=5：age=age
5
age+=5：age=age+5
算数运算符
*：乘法
/：除法
-：减法
%：取余数（求模）
+：加法
在算数运算中，浮点数会出现问题
也被称为操作符，用于实现赋值、比较和执行算数运算等功能的符号
运算符优先级
++ -- ！
* / % + -
（）
= < <=
== != === !==
&& ||
=
,
逻辑与比逻辑或优先级高
下列运算符在计算时会自动转换两边的数字类型
number类型
自增运算符
++
--
数字比较
=
<
<=
算数运算符
*
/
-
%
+
string类型
,>=,<,<=：字母排序比较
+:字符串连接
Boolean类型
while do
&&
do while
||
!
?:
if
特殊
==
！=
在检测两个操作数是否相等时，会进行类型转换
函数
概念：一段可以被重复使用的代码块
函数使用
声明函数
1.function 函数名（）{ 函数体 }
2.var 变量名=function（）{ 执行语句 }
调用：变量名（实参）；
调用函数
函数名 （）；
函数的参数
形参
在声明函数的小括号里面是形参
实参
在函数调用的小括号里面是实参
执行过程，调用函数时把实参传递给函数，替换形参执行函数
使用：function getsum（num1,num2）；
getsum（1,2）；
形参和实参个数不匹配问题
实参多于形参：多的部分省略
实参少于形参：NAN
形参的默认值是undefined
函数的返回值return
函数内部不应该有输出语句，应该用return返回值
在函数声明中书写return 需要返回的结果
在调用函数中要用打印的函数取出
函数遇到return后就终止函数，只能返回一个值
如果要返回多个值，可以用数组将他们存起来
例如：return 【num1+num2，num1-num2，num1*num2，num1/num2】
没有返回值，则返回undefined
arguments
定义：是一个伪数组，它只有在形参数据个数不确定的时候使用
可以使用下标来访问arguments里面的各个对象
只有函数才有arguments对象，每个函数都有内置arguments函数，不用再进行声明
分支流程控制
if语句
语法结构
if（条件表达式）{
执行语句
}
执行思路：表达式结果为真，执行大括号里面的语句，否则执行if语句后的代码
if……else语句
语法规则：如果表达式1为真则执行该语句，否则执行表达式2
if（条件表达式）{
执行语句1
}else{
执行语句2
}
if……else……if语句
三元表达式
定义：有三元运算符？：组成的式子，我们称为三元表达式
语法结构：条件表达式？表达式1：表达式2；
执行思路：条件表达式为真，执行表达式1，否则执行表达式2
switch语句
定义：多分支语句，可以实现多选一
语法结构：switch后面的表达式，是这个语句取得的值，用来匹配各个选项，case 多个选项的名字
循环
while
语法格式：while（条件表达式）{循环体}
先判断，后执行
do……while
语法格式：do{ 循环体 } while（条件表达式）
先执行，后判断
至少会执行一次循环
for
语法结构：for( 初始化变量；条件表达式；操作表达式)
初始化变量：用var声明的一个变量
循环最后执行的代码，用于对计数器变量进行更新
决定每一次循环是否继续进行，就是终止的条件
双重循环：外面执行一次，里面全部执行
关键字
continue
逃过本次循环，执行下面的语句
break
结束循环
js基础
js运用规则
在HTML输出流中只能运用
document.write（“”）
来输出文字内容
函数
通常把函数放在head部分或者页面底部
head中的函数引用
在标签的行内属性中书写onclick="函数名（）"来调用
body中的函数引用
与head中的相同
引用外部的js文件
在head或者body中书写<script src="文件路径"><script>
HTML中的
脚本必须位于<script>标签之间
，可放在head和body中（必须在页面元素的后面书写）
js输出
操作HTML元素
在<script>中使用document.getElementByid(id)的方法
使用ID来访问HTML元素
写到文档输出
在<script>中书写document.write("输出内容")可以想文档输出写内容
如果在文档完成加载后执行该语句，整个HTML将被覆盖
js语句
document.getElementByid("demo").innerHTML=“Hello world”表示向ID为demo的HTML元素输出文本hello world
在js 中，用分号来结束语句是可选的
浏览器会按照js书写的代码顺序来执行语句，如果有语句错误，程序就不再执行下面的语句
js代码块
由左花括号和右花括号来标志，使语句序列一起执行
js对大小写敏感
js会忽略多余的空格
js中可以使用“
\
”在输出的语句中实现换行
js注释
单行注释以“//”开头
多行注释以"/*
"开始 "
*/"结尾
js常量
声明
let或者const
命名格式（后者：全部大写且单词之间用_分隔
let
不同于var的性质，不能重复赋值
