JavaScript学习笔记

文章资讯 2020-06-14 17:10:19

1、JavaScri
JavaScris是一门最流行的脚本语言。
一个合格的后端人员，必须精通javaScrit
2、历史
ECMAScrit可以理解为是JavaScrit的一个标准。
最新版本已经到es6版本
但是大部分浏览器还只停留在支持es5代码上。
开发环境-线上环境，版本不一致。
3、快速入门
3.1、引入JavaScrit
内部标签
<scrit>
alert("1");
<scrit>外部引入
<scritsrc="js.js"><scrit>3.2、基本语法入门
浏览器调试：<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title<title>
<scrit>
1.定义变量变量类型变量名=变量值
varsco=78;
alert(sco);
2.条件控制
if(sco>70){
alert(">70");
}
console.log(sco);在浏览器的控制台打印变量
<scrit><head>
<body>
<body>
<html>控制台打印：4、数据类型
数值、文本、图形、音频、视频
4.1、number
js不区分小数和整数，Number
123 整数
123.1浮点数123.1
1.123e3科学计数法
-99 复数
NaN notanumber
Infinity表示无限大 4.2、字符串
1、正常字符串我们使用单引号、双引号
2、转义字符
'
n
t
u4e2du###Uni字符串
x41Ascll字符3、多行字符串编写
<scrit>
'usestrict';
varmsg=
`hello
worlf
youyuan`
<scrit>4、模板字符串
<scrit>
'usestrict';
Tab上面，Esc下面
letname="youyuan";
letage=23;
letmsg=`hello,${name}`;
alert(msg)
<scrit>5、字符串长度
console.log(msg.length)6、字符串的可变性，不可变。
7、大小写转换
调用方法
msg=msg.toUerCase()
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、逻辑运算
&am;&am; 两个都为真，结果为真
|| 一个都为真，结果为真
! 真即假，假即真4.4、比较运算
=
== 等于（类型不一样，值一样，也会判断为true）
=== 绝对等于（类型一样，值一样，结果为true）这是一个JS的缺陷，坚持不要使用==比较
须知：NAN===NAN,这个与所有的数值都不相等，包括自己。
只能通过isNAN(NAN)来判断这个数是否是NAN浮点数问题：尽量避免使用浮点数进行计算，存在精度问题。
console.log((13)===(1-23));
Math.abs((13)===(1-23))<0.0000000014.5、nl和undefined
4.6、对象
若干键值对
var对象名={
属性名：属性值，
属性名：属性值，
属性名：属性值
}JS中对象，{…}表示一个对象，键值对描述属性：xxx：xxx，每个属性之间使用逗号隔开，最后一个属性不加逗号。
对象是大括号，数组是中括号。
JavaScrit中的所有的键都是字符串，值都是任意对象
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title<title>
<scrit>
vararr=[1,2,3,4,5,"a",nl,true];
varerson={
name:'zs',
age:3,
hobby:["12",23]
}
<scrit>
<head>
<body>
<body>
<html>1、对象赋值
erson.name='ls'2、使用一个不存在的对象属性，不会报错！undefined
erson.age12
undefined3、动态的删减属性
deleteerson.age4、动态的添加，直接给新的属性添加值即可
erson.hbooy="ing-ing"5、判断一个属性值是否在这个对象中。
'age'inerson
true
继承
'toString'inerson
true6、判断一个属性是否是这个对象自身拥有的hasOwnProerty()
erson.hasOwnProerty('age')
true
erson.hasOwnProerty('toString')
false4.7、严格检查模式strict
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title<title>

<scrit>
'usestrict';
leti=1;
<scrit>
<head>
<body>
<body>
<html>4.8、数组
Array可以包含任意的数据类型。
vararr=[1,2,3,45,6]
arr[0]
arr1、长度
arr.length注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失。
2、indexOf，通过元素获得下标索引
arr.indexOf(2)
1字符串的"1"和数字1是不同的。
3、sce()截取Array的一部分，返回一个新的数组，类似于String中的substring
arr.sce(0,3)4、ush()，o()头部
ush：压入到尾部
o：弹出头部的一个元素5、unshift()、shitf()头部
unshift：压入到头部
shift：弹出头部的一个元素6、排序sort()
arr.sort()7、元素反转verse()
arr.verse()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判断
<scrit>
'usestrict';
letage=23;
if(age>50){
alert("50")
}elseif(age>22){
alert(">22");
}else{
alert("else..");
}
<scrit>5.2、while
while循环，避免程序死循环。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title<title>
<scrit>
'usestrict';
letage=23;
while(age<100){
age=age+2;
}
alert(age)
do{
age=age+3;
}while(age<200)
alert(age);
<scrit>
<head>
<body>
<body>
<html>for循环
varage=[12,34,56,34];
for(leti=0;i<age.length;i++){
console.log(age[i]);
}forEach循环（函数）es5特性
age.forEach(function(value){
console.log(value)
})for…in（下标索引）
for(varnuminage){
if(age.hasOwnProerty(num)){
console.log("存在");
console.log(num)
console.log(age[num]);
}
}5.3、Ma和Set
ES6的新特性
5.3.1、Ma
<scrit>
'usestrict';
varma=newMa([['zs',100],['ls',90],['ww',120]]);
letzs=ma.get(`zs`);获取value
letyouyuan=ma.set('youyuan',23);新增或修改
ma.delete("ww");
<scrit>5.3.2、Set
无序不重复的集合
varset=newSet([4,5,1,78,0,0]);
set.add(1);添加
set.add(100);
set.delete(78); 删除
set.has(1); 是否包含某个元素5.4、Iterator
es6新特性
使用iterator来遍历迭代我们Ma、Set
遍历数组：
vararr=[3,5,7];
for(varxofarr){
console.log(x);
}遍历Ma：
varma=newMa([['zs',100],['ls',90],['ww',120]]);
for(letxofma){
console.log(x);
}遍历Set
varset=newSet([4,5,1,78,0,0]);
for(letxofset){
console.log(x);
}6、函数
6.1、定义函数定义方式一绝对值函数
functionabs(x){
if(x>=0){
turnx;
}else{
turn-x;
}
}一旦执行到turn代表函数结束，返回结果。
如果没有执行turn，函数执行完也会返回结果，结果就是undefined。定义方式二varasb=functionabs(x){
if(x>=0){
turnx;
}else{
turn-x;
}
}function(x){…}这是一个匿名函数，但是可以把结果赋值给abs。
方式一和方式二等价！调用函数abs(10) 10
abs(-10) 10参数问题：JavaScrit可以传任意个参数，也可以不传递参数。
参数进来是否存在问题？
假设不存在参数，如何规避？
varabs=functionabs(x){
if(tyeofx!='number'){
throw'NotaNumber';
}
if(x>=0){
turnx;
}else{
turn-x;
}
}
argumentsarguments是一个JS免费赠送的关键字;
代表，传递进来的所有的参数，是一个数组。
for(leti=0;i<arguments.length;i++){
console.log(arguments[i]);
}问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有参数。st以前：
if(arguments.length==2){}elseif(arguments.length==3){}ES6引用的新特性，获取处理已定义的参数之外的所有的参数：
functionaaa(a,b,c,...st){
console.log("a="+a);
console.log("b="+b);
console.log("c="+c);
console.log(st)
}
st参数只能写在最后面，必须用…标识。
6.2、变量的作用域
在JavaScrit中，var定义变量实际是有作用域的。、
假设在函数体中声明，则在函数体外不可以使用（非要想实现的话，后面可以研究一下（闭包））
<scrit>
functionf(){
varx=1;
x=x+1;
}
x=x+2;
<scrit>
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突。
<scrit>
functionf1(){
varx=1;
x=x+1;
}
functionf2(){
varx=1;
x=x+1;
}
<scrit>内部函数可以访问外部函数的成员，反之不行。
<scrit>
varx=1;
functionf3(){
vary=x+1;
console.log(y);2
}
f3();
varz=y+1;UncaughtRefenceError:yisnotdefined
<scrit>假设，内部函数变量和外部函数的变量，重名！
<scrit>
varx=1;
functionf(){
varx='A';
console.log('inner'+x);innerA
}
console.log('outer'+x);outer1
f();
<scrit>
假设在javaScrit中函数查找变量从自生函数开始，有内向外查找，假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。提高变量的作用<scrit>
functionf(){
varx="x"+y;
console.log(x);xundefined
vary='y';
}
f();
<scrit>结果：xundefined
说明：js执行了引擎，自动提升了y的声明做用域。
functionf(){
vary;
varx="x"+y;
console.log(x);
y='y';
}这个是放在JavaScrit建立之初就存在的特性。
养成规范：所以的变量定义都放在函数的头部，不要乱放，便于维护。
functionf(){
varx,y,z.....;
之后随便用
}
全局变量全局变量
x=1
functionf(){
console.log(x);
}
f();
console.log(x);全局对象Window
<scrit>
varx='xxx';
alert(x);
alert(window.x);默认所有的全局变量，都会自动定位在window对象上
<scrit>alert()这个函数本身也是一个window函数
<scrit>
varx='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);
<scrit>JavaScrit实际上只有一个全局变量作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找。如果在全局作用域都没有找到，报错RefnceError。规范由于我们所有的全局变量都会绑定到我们的window上，如果不同的js文件，使用了相同的全局变量，冲突，如何能够减少冲突。
唯一全局变量
varyouyuan={};
定义全局变量
youyuan.name='you';
youyuan.add=function(a,b){
turna+b;
}把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题。
jQuery（$.）局部作用域letfunctionf(){
for(vari=0;i<100;i++){
console.log(i);
}
console.log(i+1);
}
f();ES6let关键字，解决局部作用域冲突问题。
functionf(){
for(leti=0;i<100;i++){
console.log(i);
}
console.log(i+1);
}
f();建议大家都是用’let’去定义局部作用域的变量。常量const在ES6之前，怎么定义常量：只有全部大写字母的变量就是常量，建议不要修改这样的值
varPI=3.14;
console.log(PI);
PI='12';
console.log(PI);在ES6引入了常量关键字const
constPI=3.14;
console.log(PI);6.3、方法的定义与调用定义方法方法就是把函数放在对象里面，对象只有两个东西：属性与方法。
varyouyuan={
name:'youyuan',
birth:2001,
age:function(){
varnow=newDate().getFlYear();
turnnow-this.birth;
}
}
属性
youyuan.name
方法，一定要带括号
youyuan.age()将方法分开：
functiongetAge(){
varnow=newDate().getFlYear();
turnnow-this.birth;
}
varyouyuan={
name:'youyuan',
birth:2001,
age:getAge
}youyuan.age()
getAge()NANthis是无法指向的，是默认指向调用它的那个对象。aly在js中可以控制this指向！
functiongetAge(){
varnow=newDate().getFlYear();
turnnow-this.birth;
}
varyouyuan={
name:'youyuan',
birth:2001,
age:getAge
}
getAge.aly(youyuan,[]);this，指向了youyuan7、内部对象标准对象tyeof123
"number"
tyeof'123'
"string"
tyeoftrue
"boolean"
tyeofNaN
"number"
tyeof[]
"object"
tyeof{}
"object"
tyeofundefined
"undefined"7.1、Date
vardate=newDate();
date.getFlYear();年
date.getMonth();月0~11
date.getData();日
date.getDay();星期几
date.getHours();时
date.getMinutes();分
date.getSeconds();秒
date.getTime();时间戳转换
now=newDate(1592006368511)
SatJun13202007:59:28GMT+0800(标准时间)
now.toLocaleString()
"2020613上午7:59:28"
now.toGMTString()
"Fri,12Jun202023:59:28GMT"7.2、JSONjson是什么早期，所有数据传输习惯用XML文件。JSON是一种轻量级的数据交换格式。
简洁和清晰的层次结构使得JSON成为理想的数据交换语言。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。在JavaScrit一切皆为对象，任何JS支持的类型都可以用JSON来表示：number，string…
格式：对象用{}
数组都用[]
所有的键值对都是用key:valueJSON字符串和JS对象的转换。
varuser={
name:'zs',
age:23,
sex:'男'
}
对象转化为json字符串
varjsonUser=JSON.stringify(user);
json字符串转化为对象
varobj=JSON.arse(jsonUser);jsonUser
"{"name":"zs","age":23,"sex":"男"}"
obj
{name:"zs",age:23,sex:"男"}JSON与JS对象的区别：
varobj={name:"zs",age:23,sex:"男"};
varjson="{"name":"zs","age":23,"sex":"男"}"7.3、Ajax原生的js写法xhr异步请求
jQuery封装好的方法$("#name").ajax("")
axios请求8.面向对象编程
JavaScrit、java、c#面向对象；JavaScrit有些区别类：模板
对象：具体的实例
原型varuser={
name:'zs',
age:23,
sex:'男'
}varstudent={
name:'xiaoming'
}
原型对象
student._roto_=user;
class继承class关键字，是在ES6引入的
1、定义一个类，属性，方法
classStudent{
constructor(name){
this.name=name;
}
hello(){
alert("hello");
}
}
varzs=newStudent("zs");继承
classxiaoStudentextendsStudent{
constructor(name,grade){
suer(name);
this.grade=grade;
}myGrade(){
alert("我是小学生");
}
}
varxs=newxiaoStudent("zs",6);本质：查看对象原型。

上一篇 photoshop图层、移动工具、选取详解

下一篇 BFC理解以及运用BFC解决cssbug

网站导航

网站导航

随机推荐

JavaScript学习笔记