JavaScript笔记
1、JavaScrip
JavaScrips是一门世界上最流行的脚本语言。
一个合格的后端人员，必须精通javaScript
2、历史
ECMAScript可以理解为是JavaScript的一个标准。
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上。
开发环境-线上环境，版本不一致。
3、快速入门
3.1、引入JavaScript
内部标签
<script>
alert("1");
script>
外部引入
<script src="js.js"></script>
3.2、基本语法入门
浏览器调试：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
// 1.定义变量 变量类型 变量名 = 变量值
var score = 78;
alert(score);
// 2. 条件控制
if (score > 70){
alert(">70");
}
//console.log(score); 在浏览器的控制台打印变量
script>
head>
<body>
body>
html>
控制台打印：
4、数据类型
数值、文本、图形、音频、视频
4.1、number
js不区分小数和整数，Number
123 //整数
123.1 //浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大
4.2、字符串
1、正常字符串我们使用 单引号、双引号
2、转义字符\
\'
\n
\t
\u4e2d \u### Unicode字符串
\x41 Ascll字符
3、多行字符串编写
<script>
'use strict';
var msg =
`hello
worlf
youyuan`
script>
4、模板字符串
<script>
'use strict';
//Tab 上面，Esc下面
let name = "youyuan";
let age = 23;
let msg = `hello,${name}`;
alert(msg)
<script>
5、字符串长度
console.log(msg.length)
6、字符串的可变性，不可变。
7、大小写转换
//调用方法
msg = msg.toUpperCase()
alert(msg);
msg = msg.toLowerCase();
alert(msg);
8、msg.indexOf(“y”);
返回字符在字符串当中的位置
9、substring
msg.substring(0)
msg.substring(1) //从第一个字符串截取到最后一个字符串
msg.substring(1,9) //[1,9)
4.3、布尔值
true 、false
4.3、逻辑运算
&& //两个都为真，结果为真
|| //一个都为真，结果为真
! //真即假，假即真
4.4、比较运算
=
== //等于（类型不一样，值一样，也会判断为true）
=== //绝对等于（类型一样，值一样，结果为true）
这是一个JS的缺陷，坚持不要使用 == 比较
须知：
- NAN === NAN ,这个与所有的数值都不相等，包括自己。
- 只能通过isNAN(NAN)来判断这个数是否是NAN
浮点数问题：尽量避免使用浮点数进行计算，存在精度问题。
console.log((1/3)===(1-2/3));
Math.abs((1/3)===(1-2/3))<0.000000001
4.5、null和undefined
4.6、对象
若干键值对
var 对象名 = {
属性名：属性值，
属性名：属性值，
属性名：属性值
}
JS中对象，{…}表示一个对象，键值对描述属性：xxx：xxx，每个属性之间使用逗号隔开，最后一个属性不加逗号。
对象是大括号，数组是中括号。
JavaScript中的所有的键都是字符串，值都是任意对象
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
var arr = [1,2,3,4,5,"a",null,true];
var person = {
name:'zs',
age:3,
hobby:["12",23]
}
script>
head>
<body>
body>
html>
1、对象赋值
person.name='ls'
2、使用一个不存在的对象属性，不会报错！undefined
person.age12
undefined
3、动态的删减属性
delete person.age
4、动态的添加，直接给新的属性添加值即可
person.hbooy="ping-ping"
5、判断一个属性值是否在这个对象中。
'age' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
4.7、严格检查模式strict
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
'use strict';
let i = 1;
script>
head>
<body>
body>
html>
4.8、数组
Array可以包含任意的数据类型。
var arr = [1,2,3,45,6]
arr[0]
arr
1、长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
1
字符串的"1" 和数字1 是不同的。
3、slice()截取Array的一部分，返回一个新的数组，类似于String中的substring
arr.slice(0,3)
4、push()，pop() 头部
push：压入到尾部
pop：弹出头部的一个元素
5、unshift()、shitf()头部
unshift：压入到头部
shift：弹出头部的一个元素
6、排序 sort()
arr.sort()
7、元素反转 reverse()
arr.reverse()
8、concat()
rr.concat([1,67])
[4590, 456, 2, 1, 1, 0, 1, 67]
注意：concat（）并没有修改数组，只是会返回一个新的数组。
9、连接join
打印拼接数组，使用特定的字符串连接。
arr.join("_")
10、多维数组
arr = [[1,2],[3,4]]
arr[1][1]
数组：存储元素（如何存，如何取）。
5、流程控制
5.1、if判断
<script>
'use strict';
let age = 23;
if(age > 50){
alert("50")
}else if(age > 22){
alert(">22");
}else {
alert("else ..");
}
script>
5.2、while
while循环，避免程序死循环。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script>
'use strict';
let age = 23;
while (age < 100){
age = age + 2;
}
alert(age)
do {
age = age + 3;
}while (age < 200)
alert(age);
script>
head>
<body>
body>
html>
for循环
var age = [12,34,56,34];
for (let i = 0; i < age.length; i++) {
console.log(age[i]);
}
forEach循环（函数）es5特性
age.forEach(function (value) {
console.log(value)
})
for…in（下标索引）
for(var num in age){
if (age.hasOwnProperty(num)){
console.log("存在");
console.log(num)
console.log(age[num]);
}
}
5.3 、Map 和 Set
ES6的新特性
5.3.1、Map
<script>
'use strict';
var map = new Map([['zs',100],['ls',90],['ww',120]]);
let zs = map.get(`zs`); //获取value
let youyuan = map.set('youyuan',23); //新增或修改
map.delete("ww");
script>
5.3.2、Set
无序不重复的集合
var set = new Set([4,5,1,78,0,0]);
set.add(1); //添加
set.add(100);
set.delete(78); //删除
set.has(1); //是否包含某个元素
5.4、Iterator
es6新特性
使用iterator来遍历迭代我们Map、Set
遍历数组：
var arr = [3,5,7];
for (var x of arr){
console.log(x);
}
遍历Map：
var map = new Map([['zs',100],['ls',90],['ww',120]]);
for (let x of map){
console.log(x);
}
遍历Set
var set = new Set([4,5,1,78,0,0]);
for(let x of set){
console.log(x);
}
6、函数
6.1、定义函数
定义方式一
绝对值函数
function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
一旦执行到return 代表函数结束，返回结果。
如果没有执行return ，函数执行完也会返回结果，结果就是undefined。
定义方式二
var asb = function abs(x){
if(x>=0){
return x;
}else{
return -x;
}
}
function(x){…}这是一个匿名函数，但是可以把结果赋值给abs。
方式一和方式二等价！
调用函数
abs(10) //10
abs(-10) //10
参数问题：JavaScript可以传任意个参数，也可以不传递参数。
参数进来是否存在问题？
假设不存在参数，如何规避？
var abs = function abs(x){
if (typeof x != 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments是一个JS免费赠送的关键字;
代表，传递进来的所有的参数，是一个数组。
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数。
rest
以前：
if (arguments.length == 2){
}else if(arguments.length == 3){
}
ES6引用的新特性，获取处理已定义的参数之外的所有的参数：
function aaa(a,b,c,...rest) {
console.log("a="+a);
console.log("b="+b);
console.log("c="+c);
console.log(rest)
}
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-V7IMuxsY-1592012961434)(C:\Users\游建成\AppData\Roaming\Typora\typora-user-images\image-20200612142649106.png)]](http://img.e-com-net.com/image/info8/9d317e41d20f4c95ba64c40c1f267091.jpg)
rest参数只能写在最后面，必须用…标识。
6.2、变量的作用域
在JavaScript中，var定义变量实际是有作用域的。、
假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，后面可以研究一下（闭包））
<script>
function f() {
var x = 1;
x = x + 1;
}
x = x + 2;
script>
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
<script>
function f1() {
var x = 1;
x = x + 1;
}
function f2() {
var x = 1;
x = x + 1;
}
script>
内部函数可以访问外部函数的成员，反之不行。
<script>
var x = 1;
function f3() {
var y = x + 1;
console.log(y); //2
}
f3();
var z = y + 1; // Uncaught ReferenceError: y is not defined
script>
假设，内部函数变量和外部函数的变量，重名！
<script>
var x = 1;
function f() {
var x = 'A';
console.log('inner'+x); //innerA
}
console.log('outer'+x); //outer1
f();
script>
假设在javaScript中函数查找变量从自生函数开始，有内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。
提高变量的作用
<script>
function f() {
var x = "x" + y;
console.log(x); //xundefined
var y = 'y';
}
f();
script>
结果：xundefined
说明：js执行了引擎，自动提升了y的声明做用域。
function f() {
var y;
var x = "x" + y;
console.log(x);
y = 'y';
}
这个是放在JavaScript建立之初就存在的特性。
养成规范：所以的变量定义都放在函数的头部，不要乱放，便于维护。
function f() {
//var x ,y,z.....;
//之后随便用
}
全局变量
//全局变量
x = 1
function f(){
console.log(x);
}
f();
console.log(x);
全局对象Window
<script>
var x = 'xxx';
alert(x);
alert(window.x); //默认所有的全局变量，都会自动定位在window对象上
script>
alert()这个函数本身也是一个window函数
<script>
var x = 'xxx',old_alert;
alert(x);
alert(window.x); //默认所有的全局变量，都会自动定位在window对象上
old_alert = window.alert ;
window.alert = function () {
};
window.alert(123); //失效
window.alert = old_alert;//恢复
window.alert(124);
script>
JavaScript实际上只有一个全局变量作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到，报错RefrenceError。
规范
由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突，如何能够减少冲突。
//唯一全局变量
var youyuan = {};
//定义全局变量
youyuan.name = 'you';
youyuan.add = function(a,b){
return a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
jQuery（$.）
局部作用域 let
function f() {
for (var i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
f();
ES6 let 关键字，解决局部作用域冲突问题。
function f() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
f();
建议大家都是用’let’去定义局部作用域的变量。
常量 const
在ES6 之前，怎么定义常量：只有全部大写字母的变量就是常量，建议不要修改这样的值
var PI = 3.14;
console.log(PI);
PI = '12';
console.log(PI);
在ES6引入了常量关键字 const
const PI = 3.14;
console.log(PI);
6.3、方法的定义与调用
定义方法
方法就是把函数放在对象里面，对象只有两个东西：属性与方法。
var youyuan = {
name:'youyuan',
birth:2001,
age:function () {
var now = new Date().getFullYear();
return now - this.birth;
}
}
//属性
youyuan.name
//方法，一定要带括号
youyuan.age()
将方法分开：
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var youyuan = {
name:'youyuan',
birth:2001,
age:getAge
}
//youyuan.age()
//getAge() NAN
this是无法指向的，是默认指向调用它的那个对象。
apply
在js中可以控制this指向！
function getAge() {
var now = new Date().getFullYear();
return now - this.birth;
}
var youyuan = {
name:'youyuan',
birth:2001,
age:getAge
}
getAge.apply(youyuan,[]);//this，指向了youyuan
7、内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof undefined
"undefined"
7.1、Date
var date = new Date();
date.getFullYear(); //年
date.getMonth(); //月 0~11
date.getData(); //日
date.getDay(); //星期几
date.getHours(); //时
date.getMinutes(); //分
date.getSeconds(); //秒
date.getTime(); //时间戳
转换
now = new Date(1592006368511)
Sat Jun 13 2020 07:59:28 GMT+0800 (中国标准时间)
now.toLocaleString()
"2020/6/13 上午7:59:28"
now.toGMTString()
"Fri, 12 Jun 2020 23:59:28 GMT"
7.2、JSON
json是什么
早期，所有数据传输习惯用XML文件。
- JSON是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。
在JavaScript一切皆为对象，任何JS支持的类型都可以用JSON来表示：number，string…
格式：
- 对象用{}
- 数组都用 []
- 所有的键值对都是用key:value
JSON字符串和JS对象的转换。
var user = {
name:'zs',
age:23,
sex:'男'
}
//对象转化为json字符串
var jsonUser = JSON.stringify(user);
//json字符串转化为对象
var obj = JSON.parse(jsonUser);
jsonUser
"{"name":"zs","age":23,"sex":"男"}"
obj
{name: "zs", age: 23, sex: "男"}
JSON与JS对象的区别：
var obj = {name: "zs", age: 23, sex: "男"};
var json = "{"name":"zs","age":23,"sex":"男"}"
7.3 、Ajax
- 原生的js写法 xhr异步请求
- jQuery封装好的方法$("#name").ajax("")
- axios请求
8. 面向对象编程
JavaScript、java、c#面向对象；JavaScript有些区别
- 类：模板
- 对象：具体的实例
原型
var user = {
name:'zs',
age:23,
sex:'男'
}
var student = {
name:'xiaoming'
}
//原型对象
student._proto_ = user;
class 继承
class关键字，是在ES6引入的
1、定义一个类，属性，方法
class Student{
constructor(name) {
this.name = name;
}
hello(){
alert("hello");
}
}
var zs = new Student("zs");
//继承
class xiaoStudent extends Student{
constructor(name,grade) {
super(name);
this.grade = grade;
}
myGrade(){
alert("我是小学生");
}
}
var xs = new xiaoStudent("zs",6);
本质：查看对象原型。