跟着狂神老师学习的JavaScript笔记
JavaScript
1、快速入门
- 内部定义
- 外部引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--注意：script必须成对出现-->
<!--不用显示定义type，也默认就是-->
<script type="text/javascript">
// alert 是 JavaScript 语言提供的一个警告框函数。
// 它可以接收任意类型的参数，这个参数就是警告框的提示信息
alert("Hello,Word!");
</script>
<!--外部引入-->
<script src="yanyu.js"> </script>
<body>
<!--也可以写在这里-->
</body>
</html>
检查语法
<script>
'use strict';
let i = 1;
script>
1.关系（比较）运算（重点）
等于： == 等于是简单的做字面值的比较(类型不一样，值一样，也会为true)
全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型（类型一样，值一样，结果true）
- 这是JS的一个缺陷，坚持不要使用 == 比较
- NaN===NaN,这个与所有的数值都不相等，包括自己
- 只能通过isNaN（NaN）来判断这个数是否是NaN
var a = "12";
var b = 12;
alert( a == b ); // true
alert( a === b ); // false
2、逻辑运算
且运算： &&
或运算： ||
取反运算： !
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、
&& 且运算
有两种情况：
第一种：当表达式全为真的时候。返回最后一个表达式的值。
第二种：当表达式中，有一个为假的时候。返回第一个为假的表达式的值
|| 或运算
第一种情况：当表达式全为假时，返回最后一个表达式的值
第二种情况：只要有一个表达式为真。就会把回第一个为真的表达式的值
并且 && 与运算 和 ||或运算 有短路。
短路就是说，当这个&&或||运算有结果了之后 。后面的表达式不再执行
在 JavaScript 语言中，所有的变量，都可以做为一个 boolean 类型的变量去使用。
0 、null、 undefined、””(空串) 都认为是 false；
2、数据类型
- 什么是变量？变量是可以存放某些值的内存的命名。
JavaScript 的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function - JavaScript 里特殊的值：
undefined 未定义，所有 js 变量未赋于初始值的时候，默认值都是 undefined.
null 空值
NaN 全称是：Not a Number。非数字。非数值。 - JS 中的定义变量格式：
var 变量名;
var 变量名 = 值; - js不区分小数和整数
3.1 字符串
- 正常字符串我们使用 单引号，或者双引号包裹
- 注意转义字符\
\'
\n
\t
\u4e2d Unicode字符
3.多个字符串编写
var msg =
`hello
world
yanyu`
4.模板字符串
'use strict';
let name = "yanyu";
let age = 3;
let msg = `你好呀，${name}`
console.log(msg);
5、字符串长度
str.length
6、字符串的可变性–不可变
7、大小写转换
//注意，这里是方法，不再是属性了
student.toUpperCase（）
student.toLowerCase（）
其余跟java的String方法一样
indexof--通过元素获得下标索引
截取字符串--含头不含尾，左闭右开
3.2数组（*****重点）
数组定义方式
JS 中 数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。如果赋值过小，元素就会丢失
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert( arr.length ); // 0
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 0
// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
script>
head>
数组定义方式
JS 中 数组的定义：
格式：
var 数组名 = []; // 空数组
var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素
javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript">
var arr = [true,1]; // 定义一个空数组
// alert( arr.length ); // 0
arr[0] = 12;
// alert( arr[0] );//12
// alert( arr.length ); // 0
// javaScript 语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。
arr[2] = "abc";
alert(arr.length); //3
// alert(arr[1]);// undefined
// 数组的遍历
for (var i = 0; i < arr.length; i++){
alert(arr[i]);
}
script>
head>
Array可以包含任意的数据类型
var arr =[1,2,3,4,5,6];arr[0]arr[0]=1
1、长度
arr.length
2、indexOf,通过元素获得下标值
arr.indexOf(2)1
字符创的“1”和数字1是不同的
3、slice（）截取Array的一部分，返回一个新数组，类似于String 中的substring
4、push（），pop()尾部
push:压入到尾部pop:弹出尾部的一个元素
5、unshift(),shift()头部
unshift:压入到头部shift：弹出头部的一个元素
6、排序sort
arr.sort
7、元素反转reverse()
arr.reverse
8、concat()拼接字符串
arr.contact([1,2,3])
注意：contac()并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接
arr.join('-')
10、多维数组
arr = [[1,2],[3,4],["5","6"]];arr[1][1]1
3.3 对象
对象是大括号，数组是中括号
var 对象名 ={
属性名： 属性值，
属性名： 属性值，
属性名： 属性值
}
<script>
var persion = {
name: "yanyu",
age:3,
tag:['js','java','web','...']
}
script>
取对象的值：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rVffZZ82-1620889813388)(JavaScript.assets/image-20210420201825234.png)]
js中对象，{…}表示一个对象，键值对描述属性xxxx: xxxx，多个属性之间使用逗号隔开，最后一个属性不加逗号
javaScript所有的键都是字符串，值是任意对象！
1、对象赋值
person.name= "yanyu""yanyu"
2、使用一个不存在属性，不会报错！undefined
person.hahaundefined
3、动态的删除属性，通过delete删除对象的属性
delete person.nametrueperson
4、动态的添加
person.haha = "haha""haha"person
5、判断属性值是否在这个对象中！ xxx in xxx
'age' in persontrue//继承'toString' in person true
6、判断一个属性是都是这个对象自身拥有的hasOwnProperty
person.hasOwnProperty('toString')
false
person.hasOwnProperty('age')
true
3.4 流程控制
if判断
var age = 3;
if(age>3){
alert("haha");
}else if{
alert("kuas");
}else{
alet("nihaoya");
}
while循环，避免死循环
while(age<100){ age=age+1;}
for循环
for (let i = 0; i < 100; i++) { console.log(i); }
foreach循环
var age = [12,4,2321,231,23,11];
//函数
age.forEach(function (value) {
console.log(value)
})
for…in
//for(var index in ovject){}
for (var num in age ){
console.log(age[num])
}
3.5 Map和Set
// var names =["tom","jack","haha"];
let map = new Map([['tom',100],['java',60],['haha',80]]);
let name = map.get('tom');
map.set('admin',100);
console.log(name);
set:无序不重复的集合
set.add(2);
set.delete(1);
console.log(set.has(3));//是否包含某个元素
3.6 iterator
ES6新特性
遍历数组
var arr =[3,4,5]for(var x of arr){ console.log(x)}
遍历map
let map = new Map([['tom',100],['java',60],['haha',80]]);
for(let x of map){
console.log(x);
}
遍历set
let set = new Set([5,6,7]);
for(let x of set){
console.log(x);
}
3、函数及面向对象
3.1 定义函数
定义方式一
绝对函数
function abs(x){
}
一旦执行到return代表函数结束，返回结果
如果没有执行return，函数也会返回结果，结果就是undefined
定义方式二
var abs = function(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function（x){…}这是一个匿名函数。但是可以把结果赋值给abs,通过abs就可以调用函数。
调用函数
abs(10)//10abs(-10)//-10
参数问题：JavaScript可以传任意参数，也可以不传参数
参数传进来是否存在问题？假设不存在参数如何规避？
var abs = function(x){
if(typeof x!== 'number'){
throw 'Not a Number';
}
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包含所有的参数，我们有时候想使用多余的参数进行附加操作。需要排除已有的参数。
rest
以前：
if(arguments.length>2){
for(var i =2;i ES6引入的新特性，获取除了已经定的参数之外的所有参数
function aaa(a,b...rest){
console.log("a=>"+a);
console.log("b=>"+b);
}
rest参数只能写在最后面，必须用…标识。
3.2 变量的作用域
在javaScript中，var定义变量实际上是有作用域的。
假设在函数体中声明，则函数体外不可以使用~（非要实现的话，后面可以研究一下闭包）
function yy(){
var x = 1;
x = x +1;
}
x = x + 2;//Uncaught ReferenceError
如果两个函数使用了相同的变量名，只要在函数内部就不冲突
function fh(){
var x = 1;
x = x +1;
}
function fh2() {
var x ='A';
x = x + 1;
}
内部函数可以访问外部函数，反之则不行（就像匿名内部类）
function fh(){
var x = 1;
x = x +1;
function abx() {
var y = x + 1;
}
var z = y + 1;
}
假设内部函数变量和外部函数的变量重名
function fh(){
var x = 1;
function abx() {
var x = 'A';
console.log('inner'+x);//outer1
}
console.log('outer'+x);//innerA
abx();
}
fh();
假设在JavaScript中 函数查找变量从自身函数开始~，由内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量
提升变量的作用域
function fh() {
var x = "x" + y;
console.log(x);
var y = 'y';
}
结果：x undefined
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值；
function fh2() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是JavaScript建立之初就存在的特性。养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码的维护。
function fh2() { var x = 1; y = x +1; z,i,a;//undefined //之后随意用}
全局函数
function fh2() {
var x = 1;
y = x +1;
z,i,a;//undefined
//之后随意用
}
全局对象window
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert=function () {
};
//发现alert（）失效了
window.alert(123);
//恢复
window.alert=old_alert;
window.alert(256);
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有函数作用范围内找到，就会向外查找，如果在全局作用域没有找到，报错RefernceError
规范
由于我们所有的全部变量都会绑定到我们的window上。如果不同的js文件，使用了相同全局变量，冲突~ —>如何能减少冲突？
//唯一全局变量
var yanApp ={};
//定义全局变量
yanApp.name = 'yanyu';
yanApp.add = function(a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名中，降低全局命名冲突的问题
局部作用域
function aaa() {
for (var i = 0; i <100 ; i++) {
console.log(i);
}
console.log(i+1);//101 i出了这个作用域还可以使用
}
ES6 let关键字，解决局部作用域冲突问题！
建议大家都使用let去定义局部作用域的变量；
常量
在ES6之前，怎么定义常量：只有全部大写字母命名的变量就是常量；建议不要修改这样的值
var PI = '3.14';
console.log(PI);
PI = '213';//可以改变这个值
console.log(PI)
在ES6引入了常量关键字const
3.3 方法
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性和方法
var yanyu ={
name: 'yanyu',
birth: '1999',
//方法
age: function () {
var now = new Date().getFullYear();
return now-this.birth;
}
}
//属性
yanyu.name//方法，一定带（）
yanyu.age()
this.代表什么？拆开上面的代码看看~
function getAge() {
//今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bind;
}
var yanyu ={
name: 'yanyu',
birth: '1999',
age: getAge
}
//yanyu.age()
//getAge()//NaN
this是无法指向的，是默认指向调用它的那个对象。
apply
在js中可以控制this指向
getAge().apply(yanyu,[]);
4、内部对象
标准对象
typeod 123
"string"
typeof undefined
"undefined"
4.1 Date
基本使用
var now = new Date();
now.getFullYear();//年
now.getMonth();//月 0~11 代表月
now.getDate();//日
now.getDay();//星期几
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳 全世界统一
转换
now.toLocalString();
4.2 Json
早期，所有数据传输习惯于xml文件
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：number，String…
格式：
- 对象都用{}
- 数组都用[]
- 所有的键值对 都使用 key: value
JSON字符串和JS对象的转换
//对象转化为json字符串
var jsonUser = JSON.sttringfy('{"name":"yanyu","age":"3"}');
//json字符转化为对象
JSON.parse(jsonUser);
很多人搞不清楚JSON和JS对象的区别
var obj = {a:'hello',b:'thanks'};
var json = '{"a":"hello","b":"thanks"}';
4.3 Ajax
- 原生js写法 xhr异步请求
- JQuey封装好的 方法 $("#name").ajax("")
- axios 请求
5、面向对象编程
原型对象
- 类：模板
- 对象：具体的实例
在JavaScript这个需要大家换一下思路
var Student ={
name: "xiaoming",
age :3,
run: function () {
console.log(this.name + "run...")
}
};
var xiaoming = {
name:"xiaoming"
};
//小明的原型是Student
xiaoming.__proto__ =Student;
function Student(name) {
this.name = name;
}
//给student新增一个方法
Student.prototype.hello = function () {
alert('hello');
}
class继承
class 关键字，是在ES6引入的。
1、定义一个类、属性、方法
//定义一个学生的类
class Student{
constructor(name){
this.name =name;
}
hello(){
alert('hello');
}
}
var xiaoming = new Student("xiaoming");
var xiaoming = new Student("xiaohong");
2、继承
//定义一个学生的类
class Student{
constructor(name){
this.name =name;
}
hello(){
alert('hello');
}
}
class XiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert('我是一名小学生');
}
}
var xiaoming = new Student("xiaoming");
var xiaohong = new XiaoStudent("xiaohong",2);
本质：查看原型对象
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Jxa5OztP-1620889813395)(JavaScript.assets/image-20210424112630037.png)]
原型链
proto
6、操作BOM对象
JavaScript和浏览器的关系？
JavaScript诞生就是为了能够让它在浏览器中运行。
BOM:浏览器对象模型
- IE 6 ~11
- Chrome
- Safari
- FireFox
三方
- QQ浏览器
- 360浏览器
window(重要)
window代表 浏览器窗口
window.alert(1)
undefined
window.innerHeight
225
window.innerWidth
1034
window.outerHeight
698
window.outerWidth
1050
//可以调整浏览器窗口试试
Navigator
Navigator,封装浏览器的消息
navigator.appName
"Netscape"
navigator.appVersion
"5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36"
navigator.platform
"Win32"
大多数时候，我们不会使用navigator对象，因为会被人为修改
不建议使用这些属性判断和编写代码
screen
screen.width1360screen.height768
location(重要)
location代表当前页面的URL信息
host: "localhost:63342"
hostname: "localhost"
protocol: "http:"
reload: ƒ reload()b//刷新网页
//设置新的地址
location.assign('')
document
docement代表当前的页面，HTML DOM文档树
document.title"Title"document.title='狂神说'"狂神说"
获取具体的文档树节点
- Java
- Java EE
- Java SE
获取cookie
document.cookie
截取cookie原理
www.taobao.com
恶意人员：获取你的cookie上传到他的服务器
服务器可以设置cookie：httpOnly
history
history代表浏览器的历史记录
history.back() //后退history.forward()//前进