JavaScript-ECMAScript学习归纳总结
现在所说的JavaScript包含了三个部分
- ECMAScript:js的语法规范
- DOM:操作网页的功能
- BOM:操作浏览器的功能
ECMAScript归纳总结:
1.书写JS代码的方式:
方式1:通过script标签即可
方式2:把JS代码写在单独的文件JS文件中,通过script标签引入
2.注释:
JS的注释:
// 单行注释 ctrl + /
/* 多行注释 */
HTML的注释:
CSS的注释:
3.JS的输出语句:
alert('警告');
confirm('你确定要删除吗?');
prompt('请输入你的银行卡密码。');
document.write('hell world');
console.log('调试见');
4.变量:
变量的命名规则:
① 由字母,数字,下划线,$符号组成,不能以数字开头
② 不能是关键字和保留字
③ 区分大小写
命名规范:
① 定义的变量要有意义
② 驼峰命名规范:除了第一个单词,其它单词首字母都需要大写
JS的特点:
代码从上往下执行,一行报错,后面的代码不执行
var age; // 声明变量 未声明时:is not defined => bug
age = 18; // 变量赋值
var age1 = 18, age2 = 20; // 声明多个变量,以‘,'号隔开
5.JS五种简单的数据类型(浏览器能直接认识的)
值类型:简单数据类型或者基本数据类型 在存储时变量中存储的是值本身 因此叫做值类型
引用类型:复杂数据类型 在存储时变量中存储的仅仅是地址(引用) 因此叫做引用数据类型
typeof判断类型:
① 只能判断简单数据类型的类型(number,string,boolean,undefined)
② typeof判断复杂类型,全都是Object。
③ 例外:typeof如果判断是函数,返回值为function
④ typeof null结果为Object
function fn(){}
console.log(typeof(fn)); // 输出结果为function
var ss = null;
console.log(typeof(ss)); // 输出结果为Object
(1)数字
① 八进制:数字0开头,如077
② 十六进制:0x开头,用0-9,A-F表示,如0xFF或0XFF
③ 浮点数:11.2 11.1 // 不要拿小数的运算结果作比较
④ 科学计数法:var num = 5e-5 // 5*10的-5次方
浮点数精度丢失问题:
所有编程语言中,小数时算不准确的,其他语言中,一般会对小数做处理,JS没有,所以不要拿小数的运算结果作比较
数字范围:
Infinity > Number.MAX_VALUE
Number.MIN_VALUE > 0
(2)字符串
字符串必须用’或者"包含
使用+可以实现字符串的拼串:
俩边都是数字,+为加法的功能
俩边只要有字符串,+表示字符串的拼接
(3)布尔类型
true 和 false
(4)undefined类型
当一个变量没有赋值的时候,值就是undefined
(5)undefined类型
null:表示一个空的对象
6.操作符
(1)算术运算符
+ - * / %
20 % 3 = 2 // 求余数,保留整数
+ 号有拼接功能
- * / % 只有算术的功能,如果有字符串,将字符串变成数字来算
(2)赋值运算符
= += -= *= /= %=
var num = 10;
var num = num + 10;
num %= 2 // num = num % 2
(3)自增自减(一元操作符)
① 自增:++age,先让age+1,再返回结果;age++,先返回结果,再让age+1
② 自减:–a,先让a-1,再返回结果;a–,先返回结果,再让a-1
var a = 1;
var b = ++a + ++a;
console.log(b); // 答案为5
(4)逻辑运算符
① 与(&&):只有俩个都为true,结果才为true
② 或(||):只要有一个为true,结果就为true
③ 非(!):取反
(5)比较运算符(> < == === >= <= !=)
= 为赋值运算符,不是比较运算符
== 比较俩个值是否相等,不会比较类型
=== 全等,值相同,类型也相同
运算优先级
① ()最高
② 一元运算符:++ –
③ 算术运算符:* / % 高于 + -
④ 比较运算符
⑤ 逻辑运算符
7.数据转换
(1)其它类型转换为数字类型
① Number()
② parseInt() // parse:转换 interesting:整数
③ parseFloat() // 转换成浮点数
④ 直接运算:+0 -0
转换成数字类型的注意点:
NaN:不是一个数字,NaN是number类型,表示一个没办法用数字表示的值
var age = '18';console.log(age - 0) // 结果为数字18
console.log(isNaN(num)) // 返true说明是NaN,说明不是数字
(2)转换成字符串
① String() num = String(num)
② toString num = num.toString
③ 拼串(推荐):num = num + ’ ’
(3)转换成布尔类型
① Boolean()
② 简单的方式(推荐):!!
转换布尔值为false的六种情况:
① undefined
② false
③ 0
④ “”(空字符串)
⑤ null
⑥ NaN
8.流程控制
(1)顺序结构
从上到下执行的代码就是顺序结构,程序默认就是由上到下顺序执行的。
(2)分支结构
① if语句:
if(条件){} if(){}else{} if(){}else if(){}else{}
② 三元运算符(条件满足为值一,不满足为值二):
var 结果 = 条件 ? 值一 : 值二
③ switch-case // 每个case都有break
分支结构三种语法的应用场景:
① if…else…:适用于范围的判断
② 三元运算符:只适用于非常简单的if…else…
③ switch…case:适用于具体值的判断
// if语句
var score = prompt('请输入自己的成绩');
if(score >= 90){
console.log('A')
}else if(score >= 60){
console.log('B')
}else{
console.log('C')
}
// 三元运算符
var result = score >= 80 ? "优秀" : (score >= 60 ? "合格" : "不合格");
console.log (result);
// switch...case...
switch (new Date().getDay()) {
case 0:
day = "星期天";
break; // break 结束整个switch...case...语句
case 1:
day = "星期一";
break;
case 2:
day = "星期二";
break;
case 3:
day = "星期三";
break;
case 4:
day = "星期四";
break;
case 5:
day = "星期五";
break;
case 6:
day = "星期六";
}
(3)循环结构
① while循环:
while(条件){
重复执行的代码,循环体
}
② do…while…:
do{
循环体
}while(条件)
③ for循环:
for(初始化语句; 判断条件; 自增或者自减){
循环体
}
循环结构使用场景:
① for循环:适用于有明确的循环次数
② while循环:适用于使用于不知道循环多少次的请求
③ do…while…:如果需要先执行一次,应该使用do…while…
// 数组的遍历
for(var i = 0; i <= arr.lengt-1; i++){
console.log(arr[i]);
}
for(var i = 0; i < arr.length; i++){
console.log(arr[i]);
}
for(var i = arr.length; i >= 0; i--){
console.log(arr[i]);
}
9.JavaScript复杂的数据类型
值类型:简单数据类型或者基本数据类型 在存储时变量中存储的是值本身 因此叫做值类型
引用类型:复杂数据类型 在存储时变量中存储的仅仅是地址(引用) 因此叫做引用数据类型
(1) 数组
(2) 函数
(3) 对象
10.数组
定义:有序的集合,内部可放多个元素(任意类型的)
(1) 创建数组:
① 构造函数的方式:
var arr = new Array();
var arr = new Array(100, 200, 300);
② 字面量的方式:
var arr = [];
var arr = [100, 200, 300];
(2) 数组的长度和下标:
arr[0] => 数组的第一个值
利用下标赋值:下标存在,修改值,不存在值时给数组增加这个值
下标不存在,返回undefined
(3) 给数组添加元素:
① arr[arr.length] = ‘元素1’
② arr.push() arr.push(‘元素2’)
// 冒泡排序
var arr = [7, 1, 2, 3, 4, 5, 6];
for(var j = 0; j < arr.length-1; j++){
var flag = true;
for(var i = 0; i < arr.length-1-j; i++){
if(arr[i] > arr[i+1]){
var temp = arr[i];
arr[i] = arr[i+1];
arr[i+1] = temp;
flag = false;
}
}
if(flag){
break
}
}
11.函数
函数的三要素:函数名,参数,返回值
① 调用函数:函数名()
② 函数参数:形参,实参
③ 返回值:return
(1)声明函数的俩种方式:
① 函数声明:
function fn(){
console.log('函数声明');
}
fn();
② 函数表达式(web的api中用的很多–注册事件):
var fn1 = function(){
console.log('函数表达式');
}
fn1();
二者的区别:
① function直接声明的函数,可以提升声明(预解析提升)
② 函数表达式必须先声明函数,才能调用
预解析:
① 提升所有的var声明,不会提升赋值
② 提升所有的函数的声明,不会提升调用
③ 如果变量名和函数名重名,函数优先
先预解析,代码再一步步执行(注意:不要让变量和函数名重名)
var fn = 12;
console.log(fn); // 12
function fn(){
console.log('好嗨森')
}
fn(); // 报错
// 变量声明和函数声明都会得到提升,但函数声明会最先得到提升,然后是变量声明。
// 对于代码var fn = 12来说,编译器看到的是两行代码var fn; fn = 12;第一个语句是声明语句,在编译阶段处理。第二个语句是赋值语句,在运行阶段处理。
(2)匿名函数(没有名字的函数)
① 调用1:赋值给变量,函数表达式
② 调用2:匿名函数自调用(沙箱–避免全局污染)
(function(window){
// 代码写在函数内部不会造成全局污染
// 在沙箱中开启严格模式
"use strict";
console.log('匿名函数的自调用');
})(window);
严格模式:
语法:‘use strict’
作用:让js引擎以更加严格的模式执行js代码
不能在严格模式中运行的代码:
① 变量必须显示声明
② 函数参数不能重名
③ 禁止使用八进制
④ 不能使用保留字作为变量名称:implements,interface,let,package,private,protected,public,static,yield
严格模式使用建议:不要在全局中开启严格模式,建议配合沙箱模式一起使用
注意:
① 只对当前作用域起作用
② 应在当前作用域最顶端使用’use strict’
(3)递归函数:把复杂的问题简单化
注意:递归函数一定要有结束条件
// 斐波那契数列
function getSum(n){
if(n === 1){
ruturn 1;
}
return getSum(n-1) + n;
}
12.对象
定义:无序的键值对集合,用逗号隔开键值对。
在js中,对象的特征叫做属性;
在js中,对象的行为叫做方法。
(1)创建单个对象
// 利用系统提供的Object构造函数创建
var obj = new Object();
var obj = new Object({});
// 直接使用字面量
var obj = {};
var obj = {name = 'zs'};
(2)批量创建对象
// 工厂函数
function creatPerson(){
var obj = {};
obj.name = '工厂张三'; // 给新对象增加属性和方法
return obj; // 返回这个新对象
}
var zs = creatPerson();
// 构造函数:默认首字母大写
function Student(){
// 给this增加属性和方法
this.name = '构造李四'
}
var ls = new Student(); // 对象是new创建
工厂函数和构造函数的对比(工厂函数的缺点):
① 需要自己创建对象
② 需要自己返回对象
③ 创建出来的对象全都是Object的对象模型,而构造函数可以匹配自定义的对象模型
构造函数的作用(实例化对象):
给新创建的对象增加属性和方法
new在执行时会做四件事情:
① 在内存中创建一个新的空对象
② 让this指向这个新的对象
③ 执行构造函数里面的代码,给这个新的对象添加属性和方法
④ 返回这个新的对象(所以构造函数里面不需要return)
13.内置对象
① 常用的内置对象:Math Date Array String arguments
② 其它内置对象:Number Boolean Object Function Error Regexp
(1)Math:提供了很多和数学运算相关的方法
圆周率:Math.PI
最值:Math.max() Math.min()
取整:
Math.ceil() // 向上取整
Math.floor() // 向下取整
Math.round() // 四舍五入
求绝对值(absolute):Math.abs()
求次幂:Math.pow(a, b) // a的b次幂
求开方:Math.sqrt(9)
随机数(默认0到1之间的数):Math.random
// 0-99的随机数:
var num = parseInt(Math.random()*(99 + 1))
console.log(num)
(2)Date:js内置的一个构造函数
用法1:new Date() // 创建一个当前时间
用法2:创建一个指定的时间,参数:指定的时间字符串
var time = new Date('2020-01-01 12:00:00');
console.log(time);
// 输出结果:Wed Jan 01 2020 12:00:00 GMT+0800 (中国标准时间)
用法3:参数可以是年月日时分秒 // 月份从0开始,既0代表1月
var time = new Date(2020, 1, 2);
console.log(time);
// Sun Feb 02 2020 00:00:00 GMT+0800 (中国标准时间)
用法4:参数可以是时间戳(1970年1月1日距离现在过去的毫秒数)
var time1 = new Date(2020, 0, 1);
var time2 = new Date(1970, 0, 1);
console.log(time1-time2); // 输出结果:1577836800000
var time3 = new Date(1577836800000);
console.log(time3);
// Wed Jan 01 2020 08:00:00 GMT+0800 (中国标准时间)
年,月,日,星期,小时,分钟,秒的获取
var date = new Date();
var year = date.getFullYear(); // 获取年份
var month = date.getMonth() + 1; // 获取月份
var day = date.getDate(); // 获取日期
var week = date.getDay(); // 获取星期
var hour = date.getHours(); // 获取小时
var minute = date.getMinutes(); // 获取分钟
var second = date.getSeconds(); // 获取秒
console.log(year, month, day, week, hour, minute, second)
Date多与moment或者timeline插件配合使用,将时间转换为自己想要的格式
如moment插件(npm安装):npm i moment
使用:moment(res).format(‘YYYY-MM-DD’)
(3)Array对象
☆ join:把一个数组中所有元素拼接成一个字符串,并返回字符串。
var arr = ['张三', '客串', '张飞'];
var result = arr.join('');
console.log(result); // 输出结果:张三客串张飞
☆ push:给数组最后面添加一个或者多个元素。
☆ unshift:在数组的最前面添加一个值或者多个值。
push/unshift的返回值:添加后数组的长度。
☆ pop:删除数组最后一个元素。
☆ shift:在数组最前面删除一个元素。
pop/shift的返回值:删除的元素。
// 数组的push,unshift,pop,shift方法
var arr = ['张三', '张飞'];
var result = arr.push('关羽', '刘备');
console.log(result); // 4
var result = arr.unshift('王五', '李四');
console.log(result); // 6
var result = arr.pop();
console.log(result); // 刘备
var result = arr.shift();
console.log(result); // 王五
reverse:翻转一个数组,返回这个翻转后的数组
sort:默认按照unicode排序
arr.sort(function(a, b){return b - a})
var arr = [1, 2, 3];
var result = arr.sort(function(a, b){return b - a});
// 返回值大于0,交换位置
console.log(result); // 输出结果:[3, 2, 1]
concat:合并俩个数组,原数组不改变,返回合并后的这个数组。
☆ slice(begin, end)截取数组
不传参数:浅拷贝原数组
传递一个begin
传递(begin, end)=>不包括end
☆ splice:在数组任意位置增加或者删除元素
splice(start, deleteCount, item1, item2)
从start删除指定个数,并且添加item1和item2
var arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(2), arr.slice(1, 3));
//输出:[3, 4, 5, 6] 和[2, 3] 取start位置的值,不取end位置的值
var result = arr.splice(2, 2, 7, 8);
console.log(arr); // 输出结果:[1, 2, 7, 8, 5, 6]
console.log(result); // 输出结果:[3, 4]
indexof
arr.indexof(value):获取value在数组第一次出现的下标
返回值:value第一次出现的位置,如果没有,返回-1
lastIndexof:从后往前查找,第一次出现的位置
// 数组去重:
var arr = [1, 1, 3, 2, 3]
console.log([...new Set(arr)]) // 输出结果:[1, 3, 2]
(4)String对象
基本包装类型:把简单类型包装成复杂类型(Number,Boolean,String)
由于js内部已将简单类型包装,故可调用复杂类型的属性和方法。
① Number对象:
tofixed:保留小数点位数
toString:转化为字符串
② Boolean对象:
toString:返回对象的字符串表示形式。
③ String对象的方法:
字符串所有的方法不改变字符串本身,需接受返回值
伪数组:可遍历(str.length,str[0])
indexof和lastIndexof:获取字符串第一次出现的位置(从前往后和从后往前)
trim:去除字符串俩边的空格
toUpperCase()和toLowerCase():全部转换成大写或者小写
☆ concat、slice:拼接和截取(与数组一样)
subString:截取字符串(string.substring(startIndex, endIndex))
☆ split:按照分隔符切割成一个数组,返回数组
// 字符串转换成数组
var str = 'a,b,c';
var arr = str.split(',');
console.log(arr); // 输出:["a", "b", "c"]
// 数组转换成字符串
var arr = [1, 2 ,3];
var str = arr.join('');
console.log(str); // 输出:字符串123
// 翻转一个字符串:str.split('').reverse().join('');
var str = 'doog';
console.log(str.split('').reverse().join('')); // 输出:good
replace(‘原先’,‘替换字符’)
(5)Arguments对象:所有函数都自带一个Arguments对象
作用:收集函数调用时传递的所有参数。