目录
第一章 简介
1.起源
2.JavaScript组成
-
ECMAScript是JavaScript标准，一般情况下一个意思
-
完整JavaScript由三部分组成：ECMAScript,DOM,BOM，DOM和BOM并为Web APIs
3.JavaScript特点
-
解释型语言，无需编译。使用JIT技术提高运行速度
-
动态语言（性能不如静态语言），语言中的内容并不确定，例如变量类型随时可能随时发生改变
-
类似C和Java的语法结构
-
基于原型的面向对象
-
严格区分大小写
4.JavaScript的使用
-
标签引用：在HTML文件中使用script标签
<script> alert("hello world"); </script> -
文件引用：在HTML文件中引用js文件
<script src="main.js"></script>
5.JavaScript输出
-
页面输出
参考代码：
<script> document.write("hello,world!"); </script> -
控制台输出
参考代码：
<script> console.log("输出一条日志");//最常用 console.info("输出一条信息"); console.warn("输出一条警告"); console.error("输出一条错误"); </script> -
弹出窗口输出
参考代码：
<script> alert("hello,world!"); </script>效果：
6.JavaScript注释
-
单行注释：
//注释内容 -
多行注释：
/*注释内容*//** *注释内容 */
第二章 基础语法
1.标识符
-
第一个字符必须是字母、下划线或美元符号
-
其他字符可以是如上另加数字
-
ECMAScript标识符采用驼峰命名法
如它的名称CamelCase所表示的那样，是指混合使用大小写字母来构成变量和函数的名字
-
标识符不能是关键字和保留字
保留字就是ECMA-262规定的JavaScript语言内部预备使用的一组名称(或称为命令)
关键字是指已经被编程语言规定为固定含义的单词或符号
2.字面量和变量
-
字面量：固定的值，如数字、字符、字符串、true、false，JavaScript是动态语言，很少直接使用字面量
-
变量：给某一个值或对象标注名称
-
声明、赋值和c、java语法一样
-
3.数据类型
3.1分类
-
一共六种数据类型
-
5种基本数据类型
-
字符串型String：需要用单引号或双引号
转义字符：
-
数值型Number：表示十进制整数和浮点数，大小有限。
特殊数字：正负无穷：+/-Infinity ; 非法数字：NaN
其他进制：0b开头二进制（非所有浏览器支持）；0开头八进制；0x开头十六进制
-
布尔型Boolean：true/false
-
Undefined型Undefined
此类型只有一个值Undifined
使用var声明变量但不初始化，则变量值为Undifined
使用typeof对没有初始化和没有声明的变量，会返回“undefined”
-
null型null
此类型只有一个值Null
undifined由null衍生出，比较undefined和null是否相等，会返回true
语义上看null表示的是一个空的对象，所以使用typeof检查null会返回一个Object
-
-
其余的类型都称为Object
-
使用typeof操作符可以得到数据类型
typeof 数据；
3.2强制类型转换
-
转换为String
-
toString()：不影响原变量，返回转换的结果。null和undifined没有toString方法
-
String()：对于Number和Boolean实际上就是调用的toString()方法，将 null 直接转换为 “null”，将 undefined 直接转换为 “undefined”
-
为任意的数据
+""
-
-
转换为Number
-
Number()：可以转换任意类型的数据
-
字符串-->数字 有非数字内容则NaN,空串或全空格则为0
-
布尔-->数字 true=1,false=0
-
null-->0
-
undifined-->NaN
-
-
parseInt()：字符串转换为一个整数
-
parseFloat()：字符串转换为浮点数
-
对非字符串型使用parseInt()或parseFloat()，会先转换为String再操作
-
-
转换为Boolean：使用Boolean()函数
-
数字-->布尔：除了0和NaN其余都是true
-
字符串-->布尔：除了空串其余都是true
-
null,undifined-->false
-
object-->true
-
4.运算符/操作符
-
算术运算：注意自增自减符号位置，若在后则是先进行该语句操作后自增自减
-
关系运算：大于小于等于
-
赋值运算：注意+=，-=，/=，%=
-
逻辑运算：或且非
-
比较运算：注意“==，!=”两侧值的类型不同会自动进行类型转换；“===,!==”（全等不全等运算）不进行
-
条件运算符：
variablename=(condition)?value1:value2; //执行流程：如果condition为true，执行语句1并返回执行结果，如果为false，执行语句2并返回执行结果。
运算符优先级：从上到下依次减小：
5.条件语句
-
if...else
-
switch...case：一旦case匹配的条件程序会一直运行到结束，故一般加break
6.循环语句
-
while
-
do...while：尾部检查，循环比while多一次
-
for
7.对象基础
7.1概述
-
一个复合值，将很多值聚合在一起，可以通过名字访问这些值（属性的无序集合）
-
可以自己创建属性，可以从名为原型的对象继承属性
7.2创建对象
-
方式一
var person = new Object(); person.name="lilei"; person.age=18; -
方式二
var person={ name:"lilei", age:18 };
7.3访问属性
-
对象.属性名 -
对象[属性名]
7.4删除属性
-
delete 对象.属性名
7.5遍历对象
语法格式：
for (var 变量 in 对象){
}7.6数据类型
-
基本数据类型：String Number Boolean Undefined Null 基本数据类型的值无法修改
-
引用数据类型：变量是对象时，保存的是对对象的引用，一个变量复制另一个变量时，复制对象的引用到变量中，不创建新的对象，两个变量指向同一个对象，改变其中一个会影响另一个
7.7数据的保存
-
栈内存：保存变量和基本类型，声明变量就是栈内存中创建空间保存变量
-
堆内存：保存对象，变量为引用类型则变量保存对象在堆内存中的地址
8.函数
8.1函数创建
-
利用函数对象创建（基本不用）
var 函数名 = new Function("执行语句"); -
利用函数声明创建（比较常用）
function 函数名(形参1,形参2,...,形参N){ 语句... } //实例 function fun(){ console.log("这是我的第二个函数"); } -
使用函数表达式创建（比较常用）
var 函数名 =function(形参1,形参2,...,形参N){ 语句... } //实例 var fun = function(){ console.log("这是我的第一个函数"); }
8.2函数参数
-
调用函数时，实参赋值给形参
-
调用函数注意检查实参类型，解析器不会检查
-
调用函数注意检查实参数量，解析器不会检查，多余实参不被赋值，没有对应实参的形参将是undifined
8.3特殊函数
-
嵌套函数：函数中声明的函数，只在当前函数内可以访问，当前函数外不能访问
-
匿名函数：直接让变量接收的就是匿名函数，没有名字，即函数表达式创建的函数
-
立即执行函数：定义完立即被调用，往往只会执行一次
案例演示
(function(){ alert("我是一个立即执行函数") })(); -
对象中的函数：对象的属性值可以是个函数，称为该对象的方法
案例演示
var person={ name:"zhangsan", age:18, sayHello:function(){ console.log(name+"hello") } } person.sayHello();
9.对象进阶
9.1用工厂方法创建多个对象
//使用工厂模式创建对象
function createPerson(name,age){
//创建新的对象
var obj = new Object();
//设置对象属性
obj.name =name;
obj.age=age;
//设置对象方法
obj.sayName=function(){
console.log(this.name);
};
//返回对象
return obj;
}
var person1=createPerson("zhangsan",18);
var person2=createPerson("lisi",17);
person.sayName();9.2用构造函数创建对象
function Person(name, age) {
//隐藏了创建对象
this.name = name;
this.age = age;
this.sayName = function () {
console.log(this.name);
};
//隐藏了返回对象
}
var person1 = new Person("lilei", 19);
person1.sayName();用构造函数可以理解为创造了一个类别，用构造函数创造的对象就是类的实例
-
构造函数：习惯首字母大写，使用new关键字调用，其余与普通函数没有区别
-
创建执行过程：
-
调用构造函数，立即创建一个新对象
-
新建对象设置为构造函数中的this，构造函数中直接使用this引用新建的对象
-
逐行执行函数中的代码
-
新建对象作为函数返回值返回
-
9.3原型prototype
//使用构造函数创建对象
function Person(name,age){
//设置对象属性
this.name=name;
this.age=age;
}
//在Person类的原型对象中添加方法
Person.prototype.sayName=fuction(){
console.log(this.name);
};
var person1 = new Person("zhangsan",19);
person1.sayName();将一个类共有的方法写到构造函数中，就会导致内存浪费太大（n个同样类的对象会有n个相同的方法）
这时候就可以使用原型对象
-
每创造一个函数，解析器添加一个属性prototype,即是原型对象，相当于一个共有区域，所有同类对象都可以访问原型对象。作用体现在构造函数，普通函数prototype无用
-
函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，指向该构造函数的原型对象，我们可以通过
__proto__（隐式原型）来访问该属性
9.4原型链
访问一个对象的属性时，先在自身属性中查找，找到返回， 如果没有，再沿着__proto__这条链向上查找，找到返回，如果最终没找到，返回undefined，这就是原型链，又称隐式原型链
Object对象是所有对象的祖宗，Object没有原型对象
9.5Object对象方法
-
toString()
-
in运算符判断当前对象是否包含指定属性或方法，返回结果boolean型：
"name" in myObject -
Object的hasOwnProperty()判断对象是否包含某（非继承）的特定自身属性，返回boolean型
9.6对象继承
代码见练习
-
原型链继承：子类型的原型为父类型的一个实例对象，缺点不能传递参数继承单一
-
借用构造函数继承：使用.call()和.apply()将父类构造函数引入子类，等于复制父类的实例给子类，只能引入父类实例属性和方法，不能继承父类原型属性和方法
-
组合继承（最常用）：原型链+构造函数组合继承：原型链实现对父类型对象的方法继承；super()借用父类型构建函数初始化相同属性原型式继承。注意：子类原型中会存在两份相同的属性和方法
-
寄生式继承
-
寄生组合式继承
9.7垃圾回收
-
长期不被引用的对象即垃圾
-
JS有自动回收机制，我们需要将这些对象置为null
9.8作用域
-
函数声明
function 函数名（）{}以及变量声明var 变量名会在所有代码执行前执行 -
全局作用域
-
随页面打开关闭而创建销毁
-
全局作用域都有一个全局对象window，代表一个浏览器的窗口
-
全局作用域创建的变量和函数属于window对象的属性和方法
-
-
函数作用域
-
相互独立
-
作用域链：本级没有，向上一级作用域查找，直到全局作用域依然找不到抛出ReferenceError异常
-
访问全局变量可以使用window对象
-
第三章JavaScript常用对象
1.数组对象
1.1数组概述
-
数组也是对象一种
-
JS数组可以存放不同类型的元素
1.2创建数组
-
使用对象创建
var arr=new rray(); arr[0]=1; arr[1]="2"; arr[2]=3; -
使用字面量创建
var arr=[1,"2",3];
1.3遍历数组
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
}1.4数组属性
-
constructor属性：创建数组对象的原型函数
-
length属性
1.5数组方法
-
push(x,y,z,...,n)：向数组末尾添加一到多个元素，并返回数组新长度 -
pop()：删除数组最后一个元素并返回删除的元素 -
unshift(x,y,z,...,n)数组开头添加一到多个元素，并返回数组新长度 -
shift()：删除数组第一个元素并返回删除的元素 -
forEach()：遍历数组，只支持IE8及以上浏览器需要一个函数作为参数，该函数(回调函数，我们创建但不由我们调用)有三个参数：正遍历元素；正遍历元素的索引；正遍历的数组
var arr = ["孙悟空", "猪八戒", "沙和尚"]; arr.forEach(function (value, index, obj) { console.log(value + " #### " + index + " #### " + obj); }); -
slice(index1,index2)：截取数组[index1,index2)元素，封装到一个新数组中返回，不改变原数组第二个参数不写默认截取到结束所有；
索引为负数表示倒数第几个，-1就是倒数第一个
-
splice(index,n,x,y,...)：删除数组指定元素，从index开始，删除n个，x,y,....插入index前，返回被删除的元素 -
concat(arr1,arr2,x,y,...)：连接两个至多个数组和元素形成新的数组并返回，不改变原数组 -
join("连接符")：将数组转换为字符串并返回，不改变原数组，没有设置连接符默认","为连接符 -
reverse()：翻转原数组 -
sort()：给原数组重新排序，默认按照Unicode编码进行排序，可以自己通过回调函数指定排序的规则回调函数中需要定义两个形参，浏览器将会分别使用数组中的元素作为实参去调用回调函数，根据回调函数的返回值来决定元素的顺序，如下：
-
如果返回一个大于0的值，则元素会交换位置
-
如果返回一个小于0的值，则元素位置不变
-
如果返回一个等于0的值，则认为两个元素相等，也不交换位置
-
2.函数对象
-
call()和apply()：在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的this，call()方法可以将实参在对象之后依次传递，apply()方法需要将实参封装到一个数组中统一传递//2，3为传给fun函数的参数，fun函数的this指向obj fun.call(obj,2,3); fun.apply(obj,[2,3]); -
this指向
-
以函数形式调用时，this永远都是window
-
以方法的形式调用时，this是调用方法的对象
-
以构造函数的形式调用时，this是新创建的那个对象
-
使用call和apply调用时，this是传入的那个指定对象
-
-
arguments参数
调用函数时，浏览器每次都会传递两个隐含的参数
-
函数上下文对象：this
-
封装实参的对象：arguments，在调用函数时，我们所传递的实参都会在arguments中保存，可以通过索引来操作数据，也可以获取长度
-
3.Date对象
JS使用Date对象表示一个时间，如果直接使用构造函数创建一个Date对象，则会封装当前代码执行时间
var date=new Date();
console.log(date);
console.log(date.getFullYear());//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());//获取当前日期对象的日数(1 ~ 31)
console.log(date.getHours());//获取当前日期对象的小时(0 ~ 23)
console.log(date.getMinutes());//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getSeconds());//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getMilliseconds());//获取当前日期对象的毫秒(0 ~ 999)4.Math对象
Math不是构造函数，属于工具类，封装了数学运算相关的属性和方法，不需要创建对象
/*固定值*/
console.log("PI = " + Math.PI);
console.log("E = " + Math.E);
console.log("===============");
/*正数*/
console.log(Math.abs(1)); //可以用来计算一个数的绝对值
console.log(Math.ceil(1.1)); //可以对一个数进行向上取整，小数位只有有值就自动进1
console.log(Math.floor(1.99)); //可以对一个数进行向下取整，小数部分会被舍掉
console.log(Math.round(1.4)); //可以对一个数进行四舍五入取整
console.log("===============");
/*负数*/
console.log(Math.abs(-1)); //可以用来计算一个数的绝对值
console.log(Math.ceil(-1.1)); //可以对一个数进行向上取整，小数部分会被舍掉
console.log(Math.floor(-1.99)); //可以对一个数进行向下取整，小数位只有有值就自动进1
console.log(Math.round(-1.4)); //可以对一个数进行四舍五入取整
console.log("===============");
/*随机数*/
//Math.random()：可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数：Math.round(Math.random()*x)
//生成一个x-y之间的随机数：Math.round(Math.random()*(y-x)+x)
console.log(Math.round(Math.random() * 10)); //生成一个0-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1)); //生成一个1-10之间的随机数
console.log("===============");
/*数学运算*/
console.log(Math.pow(12, 3)); //Math.pow(x,y)：返回x的y次幂
console.log(Math.sqrt(4)); //Math.sqrt(x) ：返回x的平方根
5.String对象
5.1包装类
可以将基本数据类型转换为对象
-
String()
-
Number()
-
Boolean()
5.2字符串属性
-
constructor
-
length
5.3字符串方法
-
CharAt(index)：根据索引获得指定位置的字符 -
charCodeAt(index)：获得指定位置字符编码 -
concat(str1,str2,..)：连接两个及多个字符串 -
indexof("指定内容"，startindex)：检索字符串中是否有指定内容，第二个参数可以设置为检索开始位置，找到则返回第一次出现的索引，没有则返回-1 -
lastIndexOf("指定内容"，startindex)：从后往前找，其余和indexof一样 -
slice(index1,index2)：截取部分内容并返回，第一个参数开始位置包括，第二个参数结束位置（不包括），负数就是倒数第几个，省略第二个参数就是取后面所有 -
substring(index1,index2)：类似上一个方法，不同的是这个方法不能接受负值作为参数，如果传递了一个负值，则默认使用0，而且它还自动调整参数的位置，如果第二个参数小于第一个，则自动交换 -
substr(startIndex,length)：截取字符串 -
split()：一个作为截取符的字符串作为参数将字符串拆分为数组 -
toUpperCase()：字符串转换为大写并返回 -
toLowerCase()：字符串转换为小写并返回
6.RegExp对象
6.1概念
-
正则表达式是一组由字母和符号组成的特殊文本，可以用来从文本中找出满足想要格式的句子
-
一个正则表达式是一种从左到右匹配主体字符串的模式
6.2创建正则对象
-
使用对象创建
var "变量名"=new RegExp("正则表达式","匹配模式");匹配模式
-
i：忽略大小写
-
g：全局匹配模式
-
ig：忽略大小写且全局匹配模式
//检查字符串str是否含有a var reg=new RegExp("ab","i"); var str="Abc"; var result=reg.test(str);
-
-
使用字面量创建
var 变量名= /正则表达式/匹配模式；
匹配模式
-
i：忽略大小写
-
g：全局匹配模式
-
m：执行多行匹配
//检查字符串str中是否含有a var reg = /a/i; var str="Abc"; var result=reg.test(str); console.log(result);
可以为一个正则表达式设置多个匹配模式，顺序无影响
-
6.3正则进阶
-
创建正则表达式检查一个字符串中是否有a或b，使用"a|b"
var reg =/a|b/; -
创建正则表达式检查一个字符串中是否含有字母（包括大小写），使用"[A-z]"
var reg= /[A-z]/; -
常见组合:
-
[a-z]：所有小写字母
-
[A-Z]：所有大写字母
-
[A-z]：所有字母
-
[0-9]：所有数字
-
[^a-z]：除所有小写字母
-
[^A-Z]：除所有大写字母
-
[^A-z]：除所有字母
-
[^0-9]：除所有数字
-
6.4正则方法
正则方法其实是字符串方法，需要参数是正则表达式
-
split()：将字符串拆分为数组，传递正则表达式为参数则根据正则表达式拆分字符串。无需设置全局匹配也会全部拆分
-
search()：查找字符串，只查找第一个并返回索引。设置全局匹配也无用。
-
match()：提取符合的内容，默认找到第一个就停止，可以设置全局匹配模式提取所有符合要求的内容封装到数组里返回
var sreult = str.match(/[a-z]/ig);//返回str中所有的小写字母组成的数组 -
replace()：替换指定内容为新内容，默认第一个指定内容，可以改为全局匹配模式替换所有指定内容
var result =str.replace(/[a-z]/ig,"-");//str中的所有小写字母替换为-
6.5正则量词
通过量词设置一个内容出现的次数，只对前面一个内容起作用，若需要对多个内容起效可以给内容加（）
-
{n}：正好出现n次 -
{m,}：出现m次及以上 -
{m,n}：出现m-n次 -
+：至少一个，相当于{1,} -
*：0个或多个，相当于{0,} -
?：0个或1个，相当于{0,1}reg =/(ab){3}/; //ababab reg =/ab{3}/; //abbb reg =/ab{3,}c/; //abb...(b至少三个)c reg = /ab{1,3}c/;//ab..(b1-3个)c reg = /ab+c/;//a....(1-n个b)c eg = /ab*c/;//a....(0-n个b)c reg = /ab?c/;//ac或abc
6.6正则高阶
-
以某个字符开头或结尾分别使用
^和$。 -
转义字符的使用：
-
\.表示. -
\\表示\ -
\w：任意字母、数字、下划线，相当于[A-z0-9_] -
\W：除了字母、数字、下划线，相当于[^A-z0-9_] -
\d：任意的数字，相当于[0-9] -
\D：除了任意的数字，相当于[^0-9] -
\s：空格 -
\S：除了空格 -
\b：单词边界 -
\B：除了单词边界//去除字符串中前后的空格 var str=" hello child "; var reg=/^\s*|\s*$/g;//以0或多个空格开头或结尾 str=str.replace(reg,"");//用""（无内容）替换掉开头结尾的空格 //检查字符串中是否有单词child var str ="hello child"; var reg=/\bchild\b/g; console.log(reg.test(str)); //检查手机号是否符合格式 var phoneStr="15208080010"; var phoneReg=/^1[3-9][0-9]{9}$/;//以1开头，第二个数3-9，最后九位为任意数字 //检查邮箱号是否符合格式 var emailStr="abc.def@hao123.com"; //以不少于三个任意字母数字下划线开头，随后0或多个“.至少一个任意字母数字下划线组合”，接着@，后不少于一个任意字母或数字，最后以一或两个“.二到五个任意字母组合”结尾 var emailReg=/^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
-
https://blog.csdn.net/qq_38490457/article/details/109257751?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522169706797416800184120397%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=169706797416800184120397&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~top_positive~default-1-109257751-null-null.142%5Ev96%5Epc_search_result_base2&utm_term=javascript&spm=1018.2226.3001.4187
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
