文章目录
一、什么是JavaScript
- JavaScript是一门世界上最流行的脚本语言
- 一个合格的后端人员，必须要精通JavaScript
- ECMAScript可以理解为是JavaScript的一个标准
二、快速入门
1、引入JavaScript
2.1.1、内部标签
<script>
//......
</script>
2.1.2、外部引入
abs.js
//...
test.html
<script src="js/abs.js"></script>
测试代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写JavaScript代码-->
<!--<script>
alert('hello word');
</script>-->
<!--外部引入 -->
<!-- 注意：script标签必须成对出现-->
<script src="js/01.kts"></script>
</head>
<body>
</body>
</html>
三、基本语法入门
3.1、浏览器调试须知
3.2、数据类型
变量
- 所有的变量都使用var关键字
- 变量的命名规则：只要不以数字开头就可以
<script>
// 1、定义变量 变量类型 变量名 = 变量值
var num=1;
alert(num);
// 2、条件控制
if(2>1){
alert("true");
}
<!-- JavaScript严格区分大小写-->
//console.log(num) 在浏览器的控制台打印变量，相当于System.out.printf();
</script>
number
- js不区分小数和整数，都用number
123 //整数
123.1 //浮点数
1.23e3 //科学计数法
-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.00000001
null和undefined
- null：空
- undefined：未定义
数组
- java的数值必须是一系列相同类型的对象，js中不需要这样
<script>
//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello',null,true);
</script>
- 取数组下标，如果越界了就会报undefined
对象
- 对象使用大括号{ }，数组使用中括号[ ]
- 每个属性之间使用逗号隔开，最后一个不需要添加
<script>
//Person person=new Person(); java中的写法
var person={
name:'yuqing',
age:3,
tags:['js','java','...']
}
</script>
在控制台取对象的值
person.name
>"yuqing"
person.age
> 3
3.3、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--前提：IEDA需要支持ES6语法
1、'use strict';代表严格检查格式，预防js的随意性导致产生的一些问题
2、局部变量建议使用let来定义
3、'use strict'必须写在javaScript的第一行
-->
<script>
'use strict';
let i=1;
</script>
</head>
<body>
</body>
</html>
四、数据类型
4.1、字符串
4.1.1、正常字符串使用单引号或者双引号包裹
4.1.2、注意转义字符\
\'
\n
\t
\u4e2d \u#### unicode字符
\x41 Ascll字符
4.1.3、多行字符串编写
//tab上面esc键下面的键包裹，可以写多行
var mag=
`hello
world
你好ya
你好`
4.1.4、模板字符串
//tab 上面esc键下面
let name="yuqing";
let age=3;
let mag=`你好呀，{name}`
4.1.5、字符串长度
console.log(student.length)
4.1.6、字符串的可变性，不可变
4.1.7、大小写转换
//注意，这里是方法，不是属性
student.toUpperCase()
student.toLowerCase()
4.1.8、获取指定的下标
student.indexOf('t')
4.1.9、截取字符串
student.substring(1)//[ ) 从第一个字符串截取到最后一个字符串
student.substring(1，3)//[1,3]截头不截尾
4.2、数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6]//定义
arr[0] //通过下标取值
arr[0]=1 //通过下标赋值
4.2.1、长度
arr.length
注意：
假如给arr.length赋值，数组大小就会发生变化,如果赋值过小，元素就会丢失
4.2.2、indexOf
- 通过元素获得下标索引
- 字符串的"1"和数字的1是不同的
>arr=[1,2,3,4,5,6,"1","2"]
<(8) [1, 2, 3, 4, 5, 6, '1', '2']
>arr.indexOf("1")
<6
4.2.3、slice()
- 截取Array的一部分，返回一个新数组，类似于String中的substring
arr=[1,2,3,4,5,6,"1","2"]
>arr.slice(3)//从数组第三个开始截取（不包括第三个），截取后面所有的
<(5) [4, 5, 6, '1', '2']
>arr.slice(1,5)
<(4) [2, 3, 4, 5]//不包括前面的，包括后面的
4.2.4、push()、pop()尾部
- push：压入到尾部
- pop：弹出尾部的一个元素
>arr=[1,2,3,4,5,6,"1","2"]
<(8) [1, 2, 3, 4, 5, 6, '1', '2']
>arr.push('a','h')
<10
>arr
<(10) [1, 2, 3, 4, 5, 6, '1', '2', 'a', 'h']
>arr.pop()
<'h'
4.2.5、unshift()、shift()头部
- unshift：压入到头部
- shift：弹出头部的一个元素
>arr=[1,2,3,4,5,6,"3"]
<(7) [1, 2, 3, 4, 5, 6, '3']
>arr.unshift('a','b')
<9
>arr
<(9) ['a', 'b', 1, 2, 3, 4, 5, 6, '3']
>arr.shift()
<'a'
>arr
<(8) ['b', 1, 2, 3, 4, 5, 6, '3']
4.2.6、数组排序sort()
>arr=["A","C","B"]
<(3) ['A', 'C', 'B']
>arr.sort()
<(3) ['A', 'B', 'C']
4.2.7、元素反转 reverse()
arr=["A","C","B"]
(3) ['A', 'C', 'B']
arr.reverse()
(3) ['C', 'B', 'A']
4.2.8、== concat==
arr=["A","C","B"]
(3) ['A', 'C', 'B']
arr.concat([1,2,3])
(6) ['C', 'B', 'A', 1, 2, 3]
arr
(3) ['C', 'B', 'A']
注意：concat(）并没有修改数组，只是会返回一个新的数组
4.2.9、连接符 join
- 打印拼接数组，使用特定的字符串连接
arr
(3) ['C', 'B', 'A']
arr.join('-')
'C-B-A'
4.2.10、多维数组
>arr=[[1,2],[3,4],["5","6"]]
>arr[1][1]
<4
数组：存储数据（主要知道如何存、如何取，方法可以自己实现）
4.3、对象
- js中对象，{…}表示一个对象
- 键值对描述属性 xxxx：xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号
- javascript中的所有的键都是字符串，值是任意对象
var 对象名={
属性名：属性值
属性名：属性值
属性名：属性值
}
//定义了一个person对象，它有四个属性
var person={
name:"yuqing",
age:3,
email:"2569873@qq.com",
score:0
}
4.3.1、 对象赋值
person.name
'yuqing'
person.age
3
person.name="liangyu"
'liangyu'
4.3.2、使用一个不存在的对象属性，不会报错！undefined
person.haha
undefined
4.3.3、动态的测试属性
- 通过delete删除对象的属性
delete person.name
true
person
{age: 3, email: '2569873@qq.com', score: 0}
4.3.4、动态的添加
- 直接给新的属性添加值即可
person.haha="haha"
'haha'
person
{age: 3, email: '2569873@qq.com', score: 0, haha: 'haha'}
4.3.5、判断属性值是否在对象中：xxx in xxx！
"age" in person
true
//继承
'toString' in person
true
4.3.6、判断一个属性是否是这个对象自身拥有hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
4.4、流程控制
4.4.1、if判断
<script>
'use strict';
var age=3;
if(age>3){//第一个判断
alert("haha");
}else if(age<5){//第二个判断
alert("kuwa~") ;
}else{//否则
alert("lala");
}
</script>
4.4.2、while循环,避免死循环
var age=3;
while(age<100){
age=age+1;
console.log(age);
}
4.4.3、for循环
for (let i = 0; i < 100; i++) {
console.log(i)
}
4.4.4、forEach循环
var age=[12,3,12,3,12,3,12,31,23,123];
//函数
age.forEach(function(value){
console.log(value)
})
4.4.5、for…in
//for(var index in object){}
for(var num in age){
if(age.hasOwnProperty(num)){
console.log("存在");
console.log(age[num]);
}
}
4.5、Map、Set
ES6的新特性
4.5.1 、Map
<script>
'use strict';
//ES6
//学生的成绩，学生的名字
// var names=["tom","jack","haha"];
//var scores=[100,90,90];
var map=new Map([['tom',100],['jack',90],['haha',80]]);
var name=map.get('tom');//通过key获得value
map.set('admin',123456);
console.log(name);
map.delete("tom");
</script>
4.5.2、Set
- 无序不重复的集合
var set=new Set([3,1,1,1,1]);//set可以去重
set.add(2);//添加
set.delete(1);//删除
console.log(set.has(3));//是否包含某个元素
4.6、interator
es6新特性
遍历数组
//通过for of实现
var arr=[3,4,5];
for(var x of arr){//打印具体的值
console.log(x);
}
//for in
for(var x in arr){//打印下标
console.log(x);
}
遍历map
var map=new Map([["tom",100],["jack",90],["haha",80]]);
for(let x of map){
console.log(x);
}
遍历set
var set=new Set( [5,6,7]);
for(let x of set){
console.log(x)
}
五、函数
5.1、定义一个函数
定义方式一
绝对值函数
/*public 返回值类型 方法名（）{
return 返回值；
}*/
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
- 一旦执行到return代表函数结束，返回结果！
- 如果没有执行return，函数执行完也会返回结果，结果就是、undefined
定义方方式二
var abs=function(X){
if(x>=0){
return x;
}else{
return -x;
}
}
- 定义方式一、二是等效的
- function(x){…}这是一个匿名函数，但是可以把结果赋值给abs,通过abs就可以调用函数
调用函数
abs(10)//10
abs(-10)//10
- 参数问题：js可以传任意个参数，也可以不传递参数
- 参数进来是否存在？存在
var abs=function(X){
arguments.length
if(x>=0){
return x;
}else{
return -x;
}
}
- 假设不存在参数，如何规避
var abs=function(X){
//手动抛出异常
if(typeof x!=='number'){
throw'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments 是js免费赠送的关键字，代表传递进来的所有参数，是一个数组
<script>
function abs(x){
console.log("x=>"+x)
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if(x>=0){
return x;
}else{
return -x;
}
}
</script>
问题: arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数，故引入rest。
rest
以前：
function aaa(a,b){
console.log("a=>"+a);
console.log("b=>"+b);
if(arguments.length>2){
for(var i=2;i<arguments.length;i++){
//...
}
}
ES6新特性，获取除了已经定义的参数之外的所有参数
现在：
function aaa(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面，必须用…标识。
5.2、变量的作用域
局部函数
- 在js中，var定义变量实际是有作用域的
- 假设在函数体中声明，则在函数体外不可以使用（非要实现，引入闭包）
<script>
function qj(){
var x=1;
x=x+1;
}
x=x+2;//ReferenceError: x is not defined
</script>
- 如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
<script>
function qj(){
var x=1;
x=x+1;
}
function qj2(){
var x='a';
x=x+1;
}
</script>
- 内部函数可以访问外部函数的成员，反之则不行
<script>
function qj(){
var x=1;
//内部函数可以访问外部函数的成员，反之则不行
function qj2(){
var y=x+1;//
}
var z=y+1;//报错
}
</script>
- 假设，内部函数变量和外部函数的变量重名
<script>
function qj(){
var x=1;
function qj2(){
var x='a';
console.log('inner'+x);
}
console.log('outer'+x);
qj2();
}
qj();
/*结果
outer1
innera
*/
</script>
假设在js中 函数查找变量从自身函数开始，由‘内’向‘外’查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function qj(){
var x="x"+y;
console.log(x);
var y="y";
}
结果：x-undefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值
//养成规范，所有的变量定义都放在函数的头部，不要乱放，便于代码维护
function qj(){
var y;
var x="x"+y;
console.log(x);
var y="y";
}
全局函数
//全局变量
var x=1;
function f(){
console.log(x)
}
f();
console.log(x);
全局对象：window
var x='xxx';
alert(x);
alert(window.x);
//默认所有的全局变量，都会自动绑定在window对象下，与上一行是等价的
1、alert()这个函数本身也是一个window变量
2、Javascript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError
规范
- 由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件，使用了相同的全局变量，冲突~>如何能够减少冲突?
//唯一全局变量
var KuangApp = {;
//定义全局变量
KuangApp .name = 'kuangshen ';
KuangApp . add = function (a,b) {
return a + b;
把自己的代码全部放到自己定义的唯一空间名字中，降低全局命名冲突的问题
jQuery就是如此，简化符号->$()
局部作用域 let
function aaa(){
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//不会报错，有问题，i出了这个作用域还可以使用
}
ES6 引入let关键字，解决局部作用域冲突问题
function aaa(){
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);//会报错 i is not defined
}
建议大家都使用 let定义局部作用域的变量
常量 const
在ES6之前，定义常量：只有用全部大写字母命名的变量就是常量
var PI='3.14';
console.log(PI);
PI="213";//可以改变这个值
console.log(PI);
在ES6引入了常量关键字：const
const PI='3.14';
console.log(PI);
PI="213";//会报错，不会改变这个值
console.log(PI);
5.3、方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var kuangshen={
name:'秦江',
birth:2001,
//方法
age:function (){
//今年-出生年
var now= new Date().getFullYear();
return now-this.birth;
}
}
//属性
kuangshen.name
//方法，一定要带（）
kuangshen.age()
this代表什么？上面代码拆开看看
function getAge(){
var now= new Date().getFullYear();
return now-this.birth;
}
var kuangshen={
name:'秦江',
birth:2001,
//方法
age:getAge
}
//kuangshen.age() 可以运行
//getAge() NaN(not a number)
this是无法指向的，是默认指向调用它的那个对象(引出了apply)
apply 在js中可以控制this指向
function getAge(){
var now= new Date().getFullYear();
return now-this.birth;
}
var kuangshen={
name:'秦江',
birth:2001,
//方法
age:getAge
}
getAge.apply(kuangshen,[]);//this,指向了kuangshen这个对象
六、内部对象
标椎对象
number 、string 、boolean 、object、 function 、undefined
6.1、Date
基本使用
<script>
var now=new Date();//可以打印出当前的时间
now.getFullYear();//年
now.getMonth();//月 0~11代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一1970 1.1 0:00:00
console.log(new Date(1578106175991))//时间戳转为时间
</script>
转换
>now = new Date(1578106175991)
<Sat Jan 04 2020 10:49: 35 GMT+0800(中国标准时间)
>now.toLocaleString l/ 注意，调用是一个方式，不是一个属性!
<f toLocaleString(){ [native code] }
>now.toLocaleString(
<"2020/1/4 上午10:49: 35"
>now.toGMTString()
<"sat，04 Jan 2020 02:49:35 GMT"
6.2、JSON
在js中一切皆为对象，任何js支持的类型都可以用JSON来表示:number string…
格式：
- 对象都用{ }
- 数组都用 [ ]
- 所有的键值对都用 key:value
JSON字符串和js对象的转化
var user={
name:"qinjiang",
age:3,
sex:'男'
}
//对象转化为json字符串{"name":"qinjiang","age":3,"sex":"男"}
var jsonUser=JSON.stringify(user)
//json字符串转化为对象
var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"男"}')
JSON和js的区别
var obj={a:'hello',b:'hello'};
var json='{"a":"hello","b":"hello"}';
6.3、Ajax
- 原生的js写法 xhr 异步请求
- jQuey 封装好的方法 $(“#name”).ajax(" ")
- axios请求
七、面向对象编程
- 类：模板
- 对象：具体的实例
在js中需要换一下思维方式
class继承
class关键字是在ES6引入的
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
