一、基础运用
(一)注意
1.在一对script标签中存在错误的js代码,该代码后面的js将不会执行
2.Html文件中可以出现多对script标签
- 常见四种引入JavaScript方式
- 内嵌JavaScript脚本
- 引入外部的JavaScript文件
- 在事件中编写JavaScript(不推荐)
- 模块化引入(详见VUE章节)
<!--在Script标签中加入js程序
自上而下依次运行
-->
<script type = "applocation/javascript" charset="UTF-8">
<!--外部导入-->
<script src="路径"></script>
<!--外部导入-->
(二)显示
alert("") | 弹出警告框 |
document.write("") | 向body中输出一个内容 |
console.log() | 向控制台输出一个内容 |
二、数据类型
typeof检查数据类型
console.log(typeof 变量名)
(一)数据类型
基本类型(单类型):(除Object)String、Number、boolean、null、undefined
引用类型:object(包含sunction、Array、Date)
1.Undefined
只有一个值,在使用var声明变量但未对起进行初始化时,这个变量就是undefined
2.Null
表示一个空对象指针
3.Boolean
- true 和 false ,其中 true 表示真(对),而 false 表示假(错)。
- 布尔型和数字型相加的时候, true 的值为 1 ,false 的值为 0。
4.Number
整数和浮点数(双精度值)
Number类型(以下为特殊数字,用typeof检查会返回number):
Number.MAX_VALUE数字的最大值
Number.MIN_VALUE大于0的最小值
Infinity正无穷(加个负号则是负无穷)
NaN表示Not A Number
5.String
可以由单引号,双引号表示。变量保存的字符串,要先销毁原来的字符串,然后用于另一个包含字符串填充该变量
(1)字符串的拼接
- 多个字符串之间可以使用 + 进行拼接,其拼接方式为 字符串 + 任何类型 = 拼接之后的新字符串
- 拼接前会把与字符串相加的任何类型转成字符串,再拼接成一个新的字符串
//1 字符串相加 alert('hello' + ' ' + 'World'); //hello World //2 数值字符串相加 alert('100' + '100'); //100100 //3 数值字符串+数值 alert('12'+12); //1212 //4 数值+数值 alert(12+12); //24
(二)数据类型转换
1.转换为字符串类型
方式 | 说明 | 案例 |
toString() | 转成字符串 null和undefined没有这个方法 | var num = 1; alert(num.toString()); |
String()强制转换 | 转成字符串 null转化为"null" undefind转化为"undefined" | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num =1; alert(num+“字符串”); |
2.转换为数字型
方式 | 说明 | 案例 |
parselnt(string)函数 | 将string类型转成整数数值型 | parselnt(‘78’) |
parseFloat(string)函数 | 将string类型转成浮点数数值型 | parseFloat(‘78.21’) |
Number()强制转换函数 | 将string类型转换为数值型 | Number(‘12’) |
js 隐式转换(- * /) | 利用算术运算隐式转换为数值型 | ‘12’-0 |
3.转换为布尔型
方式 | 说明 | 案例 |
Boolean()函数 | 其他类型转成布尔值 数字:除了0和NaN,其余都是ture 字符串:除了空串,其余都是ture null和undefined都是false 对象也是ture | Boolean(‘true’); |
三、运算符
1.比较> <
比较的是字符编码,比较时是一位一位进行比较,如果两位一样,则比较下一位(可以用来对英文进行排序)
console.log("abc"<"bcd")//ture
补充:Unicode编码
在字符串中使用转移字符输入Unicode编码: \u 四位编码
在网页中使用Unicode编码(10进制): &#编码;
console.log("\u2620") //字符串中
<h1>਼</h1> //网页中
2.判断某数据类型是否为某数据类型:
var b = NaN;
console.log(b == NaN);
//或者console.log(isNaN(b));
3.等于=
==(相等) | 比较两个操作数的值是否相等 |
!=(不相等) | 比较两个操作数的值是否不相等 |
===(全等) | 比较两个操作数的值是否相等,同时检测它们的类型是否相同 |
!==(不全等) | 比较两个操作数的值是否不相等,同时检测它们的类型是否不相同 |
- 如果操作数是布尔值,则先转换为数值,其中 false 转为 0,true 转换为 1。
- 如果一个操作数是字符串,另一个操作数是数字,则先尝试把字符串转换为数字。
- 如果一个操作数是字符串,另一个操作数是对象,则先尝试把对象转换为字符串。
- 如果一个操作数是数字,另一个操作数是对象,则先尝试把对象转换为数字。
- 如果两个操作数都是对象,则比较引用地址。如果引用地址相同,则相等;否则不等。
NaN与任何值都不相等,包括它自己。null 和 undefined 值相等,但是它们是不同类型的数据。在相等比较中,null 和 undefined 不允许被转换为其他类型的值
注意:
js非严格比较(==)会对两侧的值进行类型转换
空数组作为对象,转换到字符串时为“ ”(空字符串)
但到数值就会变成0
所以0==“0”为真(字符0转换到数值0,0==[]为真(空数组转换到空字符串再转换到数值0,但“0==[]为假(空数组转换为空字符串,空字符串不等于"0")
四、数组
(一)创建
JavaScript 中创建数组有两种方式:
-
利用 new 创建数组
var 数组名 = new Array();
var myCars=new Array();
myCars[0]="Saab";
myCars[1]="Volvo";
myCars[2]="BMW";
var myCars=new Array("Saab","Volvo","BMW");
-
利用数组字面量创建数组
var 数组名 =[];
1.数组的字面量是方括号 []
2.数组并赋值称为数组的初始化
//创建一个只有一个元素10的数组
arr = [10];
//创建一个长度为10的数组
arr2 = new Array(10);
//数组中的元素可以是任意数据类型
var myCars=["Saab",123,true, null,undefined];
//打印出来是Saab,123,true,,
(二)属性
1.length
(1)数组.length
作用:获取数组长度
对于非连续的数组,使用length会获取到数组的最大索引+1
console.log(arr.length);
(2)数组[数组.length] = 值;
作用:向数组的最后一个位置添加元素
arr[arr.length] = 70;
(三)数组相关方法:
1.join() 把数组的所有元素放入一个字符串,元素通过指定的分隔符进行分隔
2.push() 像末尾添加一个或多个元素,并返回新长度
var result = arr.push(1,2,3);
3.pop() 删除并返回最后一个元素
4.shift() 和 unshift() 删除/添加并返回数组的第一个元素
5.sort() 对数组进行排序
6.reverse() 颠倒数组中得顺序
7.concat() 连接两个或多个数组
8.slice() 从数组中提取指定元素(不改变数组元素,而是将截取到的元素封装到一个新数组中返回)
参数:1.截取开始位置的索引,包含开始索引
2.截取结束位置的索引,不包含结束索引
第二个参数可以省略不写
3.索引可以传递一个负值,如果传递负值,则从后往前计算
(-1 倒数第一个)
9.splice() 删除元素,并添加新元素
10.forEach()
(1)需要一个函数做参数(回调函数:由我们创建,不由我们调用)
(2)数组中有几个元素就会执行几次,每次执行时,浏览器会将便利到的元素以实参的形式传递进来
(3)浏览器会在回调函数中传递三个参数
第一个参数,当前正在遍历的元素
第二个参数,当前遍历元素的索引
第三个参数,正在遍历的数组
var arr = ["a","b","c"];
arr.forCach(function(a,b,c){
console.log(a,b,c);
});
/*打印:
a,1,a,b,c
b,2,a,b,c
c,3,a,b,c */
四、函数
1.定义
就是封装了一段可被重复调用执行的代码块。通过此代码块可以实现大量代码的重复使用。
函数定义= 声明 + 赋值
const sum = function (a1, a2) {
return a1 + a2
}
let a = sum(1, 2)
console.log(3)
function类型定义
const sum2 = new Function("a1", "a2", "return a1 + a2")
console.log(sum2(1, 3));
函数声明:
function 函数名(参数1, 参数2) {
console.log("我是一个函数")
}
例 :
function sum(a1 , a2) {
return a1 + a2
}
function 是声明函数的关键字,必须小写
2.函数调用:
函数名()
调用函数时,就会把函数体中的代码都执行了,函数调用的过程就是实参向形参赋值的过程,一个函数没有返回值,返回的类型就是undefined(return返回)
3.函数的形参与实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参
在JavaScript中,形参的默认值是undefined
4.胖箭头函数 es6
const frontEnd = (frontEnd) => {
console.log(frontEnd + ' yyds')
}
frontEnd('frontEnd')
const fe = a => a + 1
- => 虽然很便捷,但是相对于 函数声明 不能使用 arguments, super ,也不能用作构造函数,也没有prototype属性
最后附上本人参考学习的笔记链接(2条消息) JavaScript基础大总结_Augenstern_QXL的博客-CSDN博客