JavaScript笔记
1、什么是Javascript
1.1、概述
(脚本语言是为了缩短传统的编写-编译-链接-运行过程而创建的计算机编程语言)
javaScript是世界上最流行的脚本语言。
]ava javascript
10天~
一个合格的后端人员，必须要精通Javascript
1.2 历史
JavaScript的起源故事_杨校的博客-CSDN博客_javascript历史
ECMAScript可以理解为javascript的一种标准
最新版本已经更新到了es6
但大多数浏览器还停留在es5
开发环境和线上环境不一致，前端工程需要使用到webpack把es6变成es5
2、快速入门
2.1、引入JavaScript
1、 内部引入
<script>
//...
</script>
2、外部引入
abc.js
内容...
test.html
<script src="abc.js"></script>
//注意：javascript标签必须成对存在 type默认是javascript
2.2、基本语法入门
var n=5;
alert(n);//弹窗弹出n
console.log(n);//控制台输出n
浏览器必备调试须知：
2.3、数据类型
变量
//java和javascript都允许中文变量名
var 王者荣耀="倔强青铜";
console.log(王者荣耀);
number
js不区分小数和整数，number
123 //整数123
123.1//浮点数123.1
1.23e3 //科学计数法
-99 //负数
NaN //not a number
Infinity //表示无限大
字符串
'abc' "abc"
boolean
逻辑运算
&& 与
|| 或
! 非
比较运算符！！！重要
=
== 等于（类型不一样，值一样，也会判断为true）
=== 全等于（类型一样，值一样，才会判断为true）
这是JS的缺陷，坚持不使用==进行比较
须知：
- NaN===NaN，NaN与所有的数值都不相等，包括自己
- 只能通过isNaN(NaN)来判断这个数是不是NaN
浮点数问题：
console.log(1/3===(1-2/3));
尽量避免使用浮点数计算，存在精度问题
Math.abs(1/3-(1-2/3))<0.00000001
null和undefined
- null: 定义了为null
- undefined: 未定义
数组
var arr=[1,2,3,4,true,null,undefined]
var arr=new Array(1,2,,true,null,undefined)
取数组下标：如果越界了，就会
undefined
对象
var person={
"name":"jack",
"hobby":["baseball","badminton"]
}
//js对象 键都是字符串，可以加引号（单双都可），也可不加
2.4、严格检查模式
i=1; //全局变量
//全局变量定义;不需要var关键字 这有不严谨性，项目会引入多个script文件，多个相同变量名起冲突
'use strict';
let i=1;
//严格检查模式'use strict';
前提：编译器支持ES6的语法
'use strict';严格检查模式，预防javascript的随意性导致产生的一些问题
必须写在Javascript的第一行！
局部变量都建议使用let取定义
3、数据类型
3.1、字符串
1、正常字符串我们使用单引号 或双引号包裹
2、注意转义字符 \
\'
\n
\t
\4e2d \u#### Unicode字符
\x41 Asc11字符
3、多行字符串编写
var str=` //tab键下面 esc键下面
hello
world
!
`
4、模板字符串
let name="qing jang";
let age=3;
let msg=`你好呀，${name}`
5、字符串长度
var str="there is it";
consolo.log(str.length);
6、字符串的可变性，不可变性
var student='hello,there is a student again!'
student[0]='a';
console.log(student);
// hello,there is a student again!
7、大小写转换
console.log(student.toUpperCase());
//HELLO,THERE IS A STUDENT AGAIN!
console.log(student.toLowerCase());
//hello,there is a student again!
8、student.indexOf("t") student.chatAt("1")
var student='hello,there is a student again!'
console.log(student.indexOf('s'));
//13
console.log(student.charAt(0));
//h
console.log(student[0]);
//h
9、subString
var student='hello,there is a student again!'
console.log(student.substring(6)); //[6, )
//there is a student again!
console.log(student.substring(6,11));//[6,11)
//there
3.2、数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,"小明",true];//通过下标取值赋值
arr[0];
arr[0]=1;
1、长度
var arr=[1,2,3,4,5,6];
console.log(arr.length);
6
//修改数组长度，数组大小发生变化
arr.length=10
10
arr
(10) [1, 2, 3, 4, 5, 6, 空 × 4]
//如果赋值过小，元素就会丢失
arr.length=5
5
arr
(5) [1, 2, 3, 4, 5]
2、indexOf 通过元素获得下标索引
var arr=[1,2,3,4,5,6];
consolo.log(arr.indexOf(2));
1
3、slice() ：截取数组的一部分，相当于String 的subString()
var arr=[1,2,3,4,5,6,'1','2'];
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.slice(1);//slice方法不会使原来的数组变化 [1,)
(7) [2, 3, 4, 5, 6, "1", "2"]
arr.slice(2,5);//[2,5)
(3) [3, 4, 5]
4、splice() :可用于插入，也可删除
//三个参数依次：要插入的位置索引，在插入位置起删除元素的个数，插入的元素列表
//在索引为2的位置插入'3'
var arr=[1,2,3,4,5,6,'1','2'];
arr.splice(2,0,'3')
arr
(9) [1, 2, "3", 3, 4, 5, 6, "1", "2"]
//在索引为2的位置删除2个元素并插入'3','4'
var arr=[1,2,3,4,5,6,'1','2'];
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.splice(2,2,'3','4');
arr
(8) [1, 2, "3", "4", 5, 6, "1", "2"]
5、push(), pop() 在尾部插入删除元素， 相当于栈
var arr=[1,2,3,4,5,6,'1','2'];
arr.pop();
"2"
arr.push('3','4');
9
arr
(9) [1, 2, 3, 4, 5, 6, "1", "3", "4"]
6、unshift(), shift() 在头部插入删除元素
var arr=[1,2,3,4,5,6,'1','2'];
arr
(8) [1, 2, 3, 4, 5, 6, "1", "2"]
arr.shift();
1
arr.unshift('1','2');
9
arr
(9) ["1", "2", 2, 3, 4, 5, 6, "1", "2"]
7、排序sort()
arr
(3) ["C", "B", "A"]
arr.sort();
(3) ["A", "B", "C"]
8、反转reverse()
arr
(3) ["B", "C", "A"]
arr.reverse();
(3) ["A", "C", "B"]
9、连接concat()
(3) ["A", "C", "B"]
arr.concat(['D','E']);
(5) ["A", "C", "B", "D", "E"]
注意：concat()并没有改变数组，只是会返回一个新的数组
10、连接符join
(3) ["A", "C", "B"]
arr.join('-');
"A-C-B"
11、多维数组
var arr=[[1,2],[2,3],[4,5]];
arr[1][1]
3
数组：存储数据（掌握存和取，方法都可以自己实现！）
3.3、对象
若干个键值对。键可加引号（单双都可），也可不加
var person={
属性名：属性值，
属性名：属性值，
属性名：属性值
}
//定义了一个person对象，它有4个属性
var person={
name:"kuangshen",
age:3,
email:"123456@qq.com",
score:0
}
JavaScript对象中所有的键都是字符串，值是任意对象
1、对象赋值
person.name
"kuangshen"
person.name="qingjiang"
"qingjiang"
person.name
"qingjiang"
2、使用一个不存在的对象属性，不会报错！
person.haha
undefined
3、动态删减属性 通过delete删除对象的属性
person
{name: "kuangshen", age: 3, email: "123456@qq.com", score: 0}
delete person.name
true
person
{age: 3, email: "123456@qq.com", score: 0}
4、动态的添加 直接给新的属性添加值即可
person.haha="haha"
"haha"
person
{age: 3, email: "123456@qq.com", score: 0, haha: "haha"}
5、判断属性值是否在这个对象中 "xxx" in xxx
'age' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的 hasOwnProperty()
person.hasOwnProperty('toString')
false
person.hasOwnProperty("age")
true
3.4、流程控制
1、if...else
2、while
3、for循环
for (var i = 0; i < Things.length; i++) {
Things[i]
}
4、forEach 循环
5.1引入
var ages=[12,52,51,23,62,70];
ages.forEach(function(element){
console.log(element);
})
5、for... in
var ages=[12,52,51,23,62,70];
//for(var index in Object)
for(var age in ages){
console.log(ages[age]);
}
3.5、Map和Set
ES6新特性
1、Map 键和值都可以是任意的！
//查询
let map=new Map([[2,101],[true,90],["haha",59]]);
console.log(map.get("haha"));
console.log(map.get(2));
console.log(map.get(true));
//添加
map.set(false,true);
console.log(map)
//删除
map.delete('haha');
console.log(map);
//结果输出
59
101
90
Map(4) {2 => 101, true => 90, 'haha' => 59, false => true}
Map(3) {2 => 101, true => 90, false => true}
2、Set：无序不重复的集合
var set=new Set([1,3,3,3,3]);
console.log(set);
set.delete(3); //删除元素
console.log(set);
set.add(2); //添加元素
console.log(set);
console.log(set.has(2));//是否有元素2
//结果输出
Set(2) {1, 3}
Set(1) {1}
Set(2) {1, 2}
true
3.6、iterator
使用iterator遍历Map和Set
map和set无length属性，也不可使用getLength()方法，也不能使用下标查询
ES6新特性 for...of
遍历数组
var arr=new Array(100,200,300);
for(var str of arr){
console.log(str);
}
遍历Map
4、函数
4.1、函数定义和参数获取
方法1
function abs(a){
if(a>0){
return a;
}else{
return -a;
}
}
一旦执行到return代表函数结束，返回结果！
如果没有执行return,函数执行完也会返回结果，结果就是undefined
方式2
var abs=function(a){
if(a>0){
return a;
}else{
return -a;
}
}
function(x){.....}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！
方式1和方式2等价!
调用函数
abs(10)//10
abs(-10)//10
参数问题：javaScript可以传任意个参数，也可以不传递参数~
参数进来是否存在的问题？
假设参数不存在，如何规避？
var abs=function(x){
//手动抛出异常来判断！
if(typeof x!='number'){
throw 'Not a Number!!';
}else{
if(x>0){
return x;
}else{
return -x;
}
}
}
arguments
arguments 是一个JS免费赠送的关键字；
代表传递进来的所有的参数，是一个数组！
var abs=function(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;
}
}
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数
rest
以前
if(arguments.length>=2){
for (var i = 2; i <= arguments.length; i++) {
}
}
ES6引入的新特性:获取除了已经定义的参数之外的所有参数~ ...
var ab=function(a,b,...rest){
console.log("a=>"+a);
console.log("b=>"+b);
console.log(rest);
}
rest参数只能写在最后面,必须用...标识
4.2、变量的作用域、let、const
在javascript中，var定义变量实际是有作用域的。
定义在函数中，就是局部变量，定义在函数外就是全局变量
假设在函数体中声明，则在函数体外不可以使用~ （非要想实现的话，后面可以研究一下闭包）
function qj(){
var x=1;
x=x+1;
}
x=x+2; //Uncaught ReferenceError:x is not defined
如果两个函数使用了相同的变量名，只要在各自函数内部，就不冲突
function qj1(){
var x=1;
x=x+1;
}
function qj2(){
var x="A";
x=x+1;
}
内部函数可以访问外部函数的变量，反之不行！
function qj(){
var x=1;
//内部函数可以访问外部函数的成员，反之不行
function qj2(){
var y=x+1; //2
}
var z=y+1; // Uncaught ReferenceError:y is not defined
}
假设，内部函数变量 和 外部函数变量 重名！
function qj(){
var x=1;
function qj2(){
var x= "A";
console.log("inner"+x)//
}
console.log("outer"+x); //
qj2();
}
//输出结果：
qj();
outer1
innerA
undefined
//结论：同名了也不碍事，外部没办法调用内部，而内部不会不调用自己的而去调外部（就近原则）
提升变量的作用域
function qj(){
var x="x"+ y;
console.log(x);
var y="y";
}
结果：xundefined
说明：js执行引擎，自动提升了y的声明，但不会提升变量y的赋值
function qj(){
var y;
var x="x"+ y;
console.log(x);
y="y";
}
这个是在JavaScript建立之初就存在的特性，养成规范：所有的变量定义在函数的头部，不要乱放，方便代码维护
function qj2(){
var x=1,
y=x+1,
z,i,a;//undefined
//之后随意用
}
全局函数
//全局变量
let x = 1;
function f(){
console.log(x);
}
f();
console.log(x);
全局对象 window
var x='xxx';
alert(x);
alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下
alert()这个函数本身也是一个window变量
var old_alert=window.alert;
old_alert("old_alert=>"+555); //成功弹出了窗口
window.alert=function(){
}
window.alert("window_alert=>"+555);//失效了
//恢复
window.alert=old_alert;
window.alert("恢复=>"+555);
JavaScript实际上只有一个全局作用域，任何变量（函数也可视为变量）。假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError
规范
由于我们所有的全局变量都会绑定在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(var i=0;i<100;i++){
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError: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='123';//Uncaught TypeError: Assignment to constant variable.
console.log(PI);
4.3、方法
定义方法
方法就是把函数放在对象的里面。对象只有参数或者方法
//定义方法
var person={
name:"狂神",
birth:2000,
age:function(){
return new Date().getFullYear()-this.birth;
}
}
//参数
person.name
//方法,一定要带()
person.age()
this代表什么?拆开上面的代码看看~
//定义方法
function getAge(){
return new Date().getFullYear()-this.birth;
}
var person={
name:"狂神",
birth:2000,
age:getAge
}
//person.age() ok
//getAge() NaN
this是无法指定的,是默认只想调用它的那个对象
apply
在js中可以控制this指向!
function getAge(){
return new Date().getFullYear()-this.birth;
}
var person={
name:"狂神",
birth:2000,
age:getAge
}
getAge.apply(person,[]); //this,指向了person,参数为空
//apply是所有函数都共用的
5、常用对象
标准对象
typeof 123
"number"
typeof "123"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
5.1、Date
基本使用
var now =new Date();//Fri Nov 12 2021 20:00:49 GMT+0800 (中国标准时间)
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(1636718449167)); //时间戳转为时间
转换
now=new Date(1636718449167)
Fri Nov 12 2021 20:00:49 GMT+0800 (中国标准时间)
now.toLocaleString()//转为本地时间
now.toGMTString()
5.2、JSON
json是什么
早期，所有数据传输习惯使用XML文件！
- JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率
在JavaScript中国一切皆为对象、任何js支持的类型都可以用JSON来表示
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对 都用 key:value
JSON字符串 和 JS对象的转换
//对象user
var user={
name:'kuang',
age:3,
sex:'男'
}
//对象转化为json字符串'{"name":"kuang","age":3,"sex":"男"}'
var jsonUser=JSON.stringify(user);
//json字符串转化为对象，参数为json字符串
var obj=JSON.parse('{"name":"kuang","age":3,"sex":"男"}');
JSON字符串和 JS对象的区别
var user={name:"kuang",age:3,sex:"男"}; //对象
var json='{"name":"kuang","age":3,"sex":"男"}'; //json字符串
6、面向对象编程
javascript、Java、c#都是面向对象；javascript有些区别！
- 类：模板
- 对象：具体的实例
在JavaScript这个需要换一下思维方式！
原型：原型对象_proto_
var person={
name:"person",
age:5,
run:function(){
console.log(this.name+":run...");
}
}
var bird={
fly:function(){
console.log(this.name+":fly...");
}
}
var kuang={
name:"kuangshen"
}
//原型对象_proto_
kuang.__proto__=person;
kuang.run();
kuang.__proto__=bird;
kuang.fly();
结果：
kuangshen:run...
kuangshen:fly...
//另一个例子
function student(){
console.log("我是一个学生");
}
student.__proto__.hello=function(){
console.log("我想和你说hello");
}
student.hello();
//结果输出
//我想和你说hello
//这个例子告诉我JS中任何类型（包括方法）都可视作变量
class继承
class关键字是在ES6引入的
class Student{
constructor(name) {
this.name=name;
}
hello(){
console.log("我想和你打招呼");
}
}
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade=grade;
}
myGrade(){
console.log("我的成绩是："+this.name+":"+this.grade);
this.hello();
}
}
var 王者荣耀=new xiaoStudent("吕布",95);
console.log(王者荣耀.myGrade());
输出结果：
我的成绩是：吕布:95
变量的作用域.html:30 我想和你打招呼
本质：查看对象原型，还是原型，不过有利于java程序员接受
7、操作BOM对象（重点）
location代表当前页面的URL信息
host:代表当前网址IP
href:重定向URL
protocol:"https"，协议
reload:reload() 刷新页面
//设置新的地址
location.assign('https://www.baidu.com')
document代表当前页面
获取cookie
document.cookie
//劫持cookie原理：在浏览器导入js文件，获取cookie上传到自己的服务器
screen
screen.width
screen.height
history
history.back();
history.forward();
8、操作DOM对象（重点）
更新节点
//操作文本
element.innerHTML=
element.innerText=
//操作JS
element.style.color=
element.style.padding=
element.style.fontSize= //驼峰命名
删除节点
9、操作表单验证
1、
表单级提交 onsubmit 绑定的方法返回值为true 才提交
按钮级提交 button type=submit
2、
md5验证 导入ma5.js 使用md5(pwd)加密
浙公网安备 33010602011771号