JavaScript Study
1、简介
JavaScript是世界上最流行的脚本语言
最新版本已经到es6,但大部分浏览器只停留在支持es5代码上
开发环境~线上环境版本不一致
廖雪峰完整JavaScript教程
https://www.liaoxuefeng.com/wiki/1022910821149312
2、快速入门
2.1 引入JavaScript
1、内部标签
<!--不用显式定义type,也默认是javascript-->
<script type="text/javascript">
//...
</script>
2、外部引入
abs.js
//...
test.html
<script src="qj.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签快,写javascript代码-->
<!--<script>-->
<!--alert('hello,world!');-->
<!--</script>-->
<!--外部引入-->
<!--注意:script:标签必须成对出现-->
<script src="js/qj.js"></script>
<!--不用显式定义type,也默认是javascript-->
<script type="text/javascript">
//...
</script>
</head>
<body>
</body>
</html>
qj.js
alert('hello,world');
2.2 基本语法入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//1.定义变量 类型变量 变量名=变量值
var score = 1;
//alert(num);
//2.条件控制
if(score>=60 && score<70){
alert("及格");
}else if(score>=70 && score<80){
alert("良好");
}else if(score>=80 && score<90){
alert("优秀");
}else {
alert("other!")
}
//console.log(score) 在浏览器控制台中打印变量
</script>
</head>
<body>
</body>
</html>
2.3 数据类型
变量
可以_ $ 开头 ,不能数字开头
var _
数值,文本,图形,音频,视频…
number
js不区分小数和整数,Number
123 //整数123
123.1 //是浮点数123.1
1.123e3 //科学计数法
-99 //负数
NAN //not a number
Infinity //表示无限大
字符串
’abc‘ “abc”
布尔值
true ,false
逻辑运算
&& 两者为真,结果为真
|| 一个为真,结果为真
! 真即假 假即真
比较运算符
=
== 等于(类型不一样,值一样,也会判断为true)
=== 绝对等于(类型一样,值一样结果为true)
这是js的一个缺陷,坚持不要用==进行比较
- NaN===NaN 这个与所有的数都不相等,包括它本身
浮点数问题:
console.log((1/3)===(1-2/3));
尽量避免使用浮点数进行比较,存在精度问题
Math.abs(1/3===(1-2/3))<0.0000001;
null 和 undefined
null 空
undefined 未定义
数组
var arr = [1,2,3,'hello',null,true];
对象
对象是大括号{},数组是中括号[]
每个属性之间用逗号隔开,最后一个不需要添加
var person = {
name: "ngk",
age:1,
tags:['js','java','linux']
}
取对象的值 person.name;
2.4 严格检查模式
<!--
前提:IDEA支持ES6
'use strict' 严格检查模式,预防JavaScript的随意性导致的一些问题
必须写在JavaScript第一行
局部变量尽量使用let去定义
-->
<script>
'use strict'
let i = 1; //ES6 let
</script>
3、数据类型
3.1 字符串
1、正常字符串使用单引号、双引号包裹
<script>
'use strict'
console.log('a');
console.log("a");
</script>
2、注意转义字符
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41 Ascll字符
3、多行字符串编写(用反引号包裹)
<script>
'use strict'
let msg = `
aa
bb
cc
dd
ee
`;
alert(msg);
</script>
4、模板字符串
'use strict'
let name = "ngk";
let msg = `你好呀,${
name}`;
5、字符串长度
str.length;
6、字符串的可变性(不可变)
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9sI62qXk-1597665231160)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816154539706.png)]
7、大小写转化
student.toLowerCase() //小写
student.toUpperCase() //大写
8、获取指定下标
student.indexOf('t');
9、substring
[)
//student
student.substring(1); //1个末尾元素 tudent
student.substring(1,3); //tu
3.2 数组
Array可以包含任意的数据类型
let arr = [1,2,3,4,5,6];
arr[0] //取值
arr[0]=1 //赋值
1、长度
arr.length
注意: 给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Oapai3c7-1597665231163)(C:\Users\NongGuangKan\AppData\Roaming\Typora\typora-user-images\image-20200816160532675.png)]
2、indexOf() 通过元素获得下标指引
3、slice() 截取Array的一部分,返回一个新数组,类似于String中的substring
4、push、pop 尾部
push: 压入尾部
pop: 弹出尾部元素
5、unshift,shift 头部
unshift: 压入到头部
shift: 弹出头部元素
6、排序 sort()
arr.sort(0)
7、元素反转 reverse()
arr.reverse()
8、concat()
arr.concat([1,2,3])
(6) ["a", "b", "c", 1, 2, 3]
console.log(arr)
(3) ["a", "b", "c"]
注意:concat()并没有修改数组,只是会返回一个新的数组
9、连接符 join
(3) ["a", "b", "c"]
arr.join('-')
"a-b-c"
10、多维数组
var arr1 = [[1,2],[3,4]];
console.log(arr1[1][1]);
4 //输出4
3.3 对象
若干个键值对
let person = {
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
let person = {
name: "ngk",
age: 3,
email: "927937414@qq.com"
}
多个属性之间用逗号隔开,最后一个不要用逗号,
JavaScript的对象键都是字符串&