文章目录
行为层(JavaScript)
1.什么是JavaScript
JavaScript是一门世界上最流行的脚本语言
Java,JavaScript
一个合格的后端人员,必须精通JavaScript
1.1 历史
ECMAScript它可以理解是JavaScript的一个标准
最新版本已经到es6版本
但是大部分浏览器还只是停留在es5代码上
开发环境-线上环境,版本不一致
2.快速入门
2.1 引入JavaScript
- 内部标签使用
<script>
//……
</script>
- 外部引入
ads.js
//...
test.html
<script sre="abc.js"></script>
2.2 基本语法入门
浏览器必备调试:
<!-- JavaScript严格区分大小写-->
<script>
//1. 定义变量 变量名称 变量名=变量值;
var score=88;
//alert(num);
//2.条件控制
if(score>60 && score<70){
alert("60~70")
}else if(score>70 &&score<80){
alert("70~80")
}else{
alert("other");
}
//console.log(score)在浏览器的控制台打印变量!System.out.println();
/*
*asdasdasd
*/
</script>
2.3 数据类型
数值,文本,图形,音频,视频……
变量
var a=1;
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,这个与所有的数值都不相等,包括自己
- 只能通过isNaN(NaN)来判断这个数是否是NaN
浮点数问题:
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算,存在精度问题!
Math.abs(1/3-(1-2/3))<0.000001
null和Undefined
- null空
- Undefined未定义
数组
Java的数值必须是相同类型的对象,Js中不需要这样
<!-- 保证代码的可靠性,尽量使用[]-->
var arr=[1,2,3,4,5,'hello',null,true]
new Array(1,22,3,4,'hello');
取数组下标:如果越界了,就会
Undefined
对象
对象是大括号,数组是中括号
每个属性之间用逗号隔开,最后一个不需要添加
//Person person=new Person(1,2,3,4,5);
var person={
name:"qinjiang",
age:3,
tags:['js','java','wed','……']
取对象的值
person.name
>"qinjiang"
person.age
>3
2.4 严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
前提:idea需要设置支持es6语法
'user strict':严格检查模式,预防JavaScript的随意性导致产生的一些问题
必须写在JavaScript第一行
局部变量建议都使用let去定义
-->
<script>
'user strict';
//全局变量
//es6 let
</script>
</head>
<body>
</body>
</html>
3.数据类型
3.1 字符串
- 正常字符串我们使用单引号或者双引号包裹
- 注意转义字符\
\'
\n
\t
\u4e2d \u### Unicode字符
\x41 ASCII字符
- 多行字符串编写
//tab键上面,esc键下面
'use strict ';
var msg=`hello
world
nihaoya
你好 `
- 模板字符串
//tab键上面,esc键下面
'use strict ';
let name="qinjiang";
let age=3;
let msg=`你好呀,${name}`
- 字符串长度
str.length
- 字符串的可变性,不可变
- 大小写转换
//注意:这里是方法,不是属性
student.toUpperCase()
student.toLowerCase()
- student.index(‘t’)
- substring
[)
student.substring(1)//从第一个字符串截取到最后一个字符串
student.substring(1,3)//[1,3)
3.2 数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6]//通过下标取值和赋值
arr[0]
arr[0]=1
- 长度
arr.length
注意:加入给arr.length赋值,数组大小就会发生变化,如果赋值过小,元素就会丢失
- indexOf,通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1"和数组1是不同的
- slice()截取Array的一部分,返回一个新数组,类似于String中的substring
- push(),pop()尾部
push:压入尾部
pop:弹出尾部的一个元素
- unshift(),shift()头部
push:压入头部
pop:弹出头部的一个元素
- 排序sort()
(3)["B","C","A"]
arr.sort()
(3)["A","B","C"]
- 元素反转reverse()
(3)["C","B","A"]
arr.reverse()
(3)["A","B","C"]
- concat()
(3)["C","B","A"]
arr.concat()
(3)["C","B","A",1,2,3]
arr
(3)["C","B","A"]
注意:concat()并没有修改数组,只是会返回一个新的数组
- 连接符join
打印拼接数组,使用特定的字符串连接
(3)["C","B","A"]
arr.jion('-')
"C-B-A"
- 多维数组
arr=[[1,2],[3,4],["5","6"]];
arr[1][1]
4
数组:存储数据(如何存,如何取,方法都可以自己实现)
3.3 对象
若干个键值对
var 对象名={
属性名:属性值,
属性名:属性值,
属性名:属性值,
属性名:属性值,
}
//定义了person对象,拥有四个属性
var person{
name:"qinjiang",
age:3,
email:"231",
score:0
}
Js中对象,{……}表示一个对象,键值对描述属性XXX:XXXX,多个属性之间使用逗号隔开,最后一个属性不用加逗号!
JavaScript中所有的键都是字符串,值是任意对象
- 对象赋值
person.name="qinjaing"
"qinjiang"
person.score
0
- 使用一个不存在的对象属性,不会报错!undefined
person.haha
undefined
- 动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
- 动态的添加,直接给新的属性添加值即可
person.haha="haha"
"haha"
person
- 判断属性值是否在对象中! XXX in XXX!
'age' in person
true
//继承
'toString in person'
true
- 判断一个属性是否是这个对象自身拥有的hasOwnproperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4 流程控制
if判断
var age=3;
if(age>3){//第一个判断
alert("haha");
}else if(age<5){//第二个判断
alert("kuwa");
}else{//否则
alert("kuwa")
}
while循环,避免程序死循环
while(age<100){
age=age+1;
console.log(age)
}
for循环
for(let i=0;i<100;i++){
console.log(i);
}
for-each循环
var age=[12,2,3,24,21,23,21]
//函数
age.forEach(function(value){
console.log(value)
})
for……in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在")
console.log(age[num])
}
}
3.5 Map和Set
es6的新特性
Map:
//学生的成绩,学生的名字
//var names=["tom","jack","haha"];
//var scores=[100,90,80];
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');//通过key获得value
map.set('admin',123456);//新增或者修改
map.delete("tom");//删除
Set:无序不重复的集合
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
3.6 iterator
es6新特性
作业:使用iterator来遍历迭代我们Map,Set!
遍历数组
//通过for of/for in下标
var arr=[3,4,5]
for(var x of arr){
console.log(x)
}
遍历Map
var map=new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of mao){
console.log(x);
}
遍历Set
var set=new Set([5,6,7]);
for(let x of set){
console.log(x)
}