ECMAScript
JavaScript历史
发明者布兰登.艾奇
1995年 原名livescript,与sun公司合作后改名JavaScript
运行在客户端,脚本语言,script脚本
不需要编译,读完一行,就读下一行
可以基于node.js进行服务端编程
js的作用
- 表单动态校验(最初目的)
- 网页特效
- 服务端开发(node.js)
- 桌面程序(Electron)
- App(Cordova)
- 控制硬件-物联网(Ruff)
- 游戏开发(cocos2d-js)
- html/css是描述类语言
- js是编程类语言
初始js
浏览器组成
- 渲染引擎
解析HTML和css,Chrome内核blink,老版本webkit - js引擎
用来读取js代码,Chrome的v8
每一行转换为二进制机器语言逐行解释执行
js组成
-
ECMAscript js语法
-
DOM 页面文档对象模型
-
BOM 浏览器对象模型
写法:行内,内嵌,外部
行内:onlick=“alert(‘弹出’)”
内嵌:<script> alert('弹出') </script>
外部:<script src="url"></script>
输入输出
prompt(’’)
alert()
console.log()
变量
- 数字型
- 字符串
- 布尔型
- undefined 未定义
- null
字符串中特殊字符
\n 换行newline
\\斜杠
\t 相当于tab,缩进
\b 相当于blank,空格
\’ 单引号
\’'双引号
控制台输出结果
NaN不是一个数字
isNaN()判断是不是非数字
任何类型+字符串都是字符串
undefined+数字 结果为NaN
null+数字 结果是数字
infinity无穷大
-infinity无穷小
最大最小数字
number.MAX_VALUE
number.MIN_VALUE
字符串长度
变量.length
布尔值
true为1;false为0;
检测数据类型
(typeof 变量)
(typeof null类型)结果为object
prompt 取过来的值是字符型
字面量
一眼就能看出来数据类型的值
数据类型转换
转成字符串型
变量.toString()转换成字符串
String(变量)强制转换成字符串
和加号拼接的结果都是字符串
转成数字型
parseInt(string)函数 将string转换成整数数值型,可以去除px单位
parseFloat(string)函数 将string转换成浮点数数值型
Number(string)强制转换成数值型
js隐式转换(- * /)运用算数运算符转换
==默认转换数据类型
转成布尔型
Boolean(变量)除了代表空的值,例如:‘’,0,NaN,null,undefined转换为0;其他都转换为1;
解释型语言和编译型语言
JavaScript是解释型语言,运行时进行解释,并立即执行
java是编译型语言,代码执行之前进行编译,生成中间代码文件
运算符
- num++;++num;
num–;--num;
-
>
;<
;>=
;<=
;==
;!=
;===
==
有默认自动转换,会把字符串型转换为数字型
===
全等于,要求两侧的值和数据类型完全相同 -
&&与;||或;!非
123&&456结果为456
0&&456结果为0
123&&0结果为0
123||456 结果为123
123||0 结果为123
0|456 结果为456
短路运算:左边的表达式的值可以确定结果时,就不在计算右边的表达式的值
与的短路:如果第一个为真,返回表达式2。如果第一个为假,则返回表达式1
或的短路:如果第一个为真,返回表达式1。如果第一个为假,则返回表达式2 -
优先级
[()]>[++ – !]>[*/%±]>[> >= < <=]>[== != === !==]>[先&&后||]>[=]>[,]
流程控制
-
分支/选择结构 if else{} ;switch{ case: break;default: break;}
if常用于判断范围,switch常用于比较确定的值 -
循环结构 while(){} /for( ; ; )/do{} while()
f12;source里面打断点 -
三元运算 a > b? c: d;
continue 立即跳出本次循环,继续下一次循环
break 立即跳出整个循环
数组
1.创建数组
-
var 数组名 = new Array();
数组名[0]=1;
var arr1 = new Array(2); // 这个2 表示 数组的长度为 2 里面有2个空的数组元素
var arr1 = new Array(2,3); // 等价于 [2,3] 这样写表示 里面有2个数组元素 是 2和3 -
var 数组名=[1, 2, 3];
console.log(arr);获取全部元素;
2.用循环遍历数组,
遍历就是从头到尾把数组中的元素都访问一次
3.数组长度
arr[].length;
4.新增数组元素
(1)改变数组的长度再新增
不要直接给 数组名赋值 否则里面的数组元素都没有了
(2)利用循环追加数组
检测是否是数组
(1) instanceof 运算符 它可以用来检测是否为数组
(2) Array.isArray(参数); H5新增的方法 ie9以上版本支持
添加数组元素方法
-
push() 在我们数组的末尾 添加一个或者多个数组元素 push 推
push() 参数直接写 数组元素就可以了
push完毕之后,返回的结果是 新数组的长度
原数组也会发生变化 -
unshift 在我们数组的开头 添加一个或者多个数组元素
删除数组元素方法
-
pop() 它可以删除数组的最后一个元素
pop是可以删除数组的最后一个元素; 没有参数;返回的结果是 删除的那个元素 ;原数组也会发生变化 -
shift() 它可以删除数组的第一个元素
shift是可以删除数组的第一个元素
翻转排序数组
- 翻转
数组名.reverse(); - 排序
数组名.sort(function(a, b) {
// return a - b; 升序的顺序排列
return b - a; // 降序的顺序排列
});
返回数组元素索引号
-
indexOf(数组元素) 作用就是返回该数组元素的索引号 从前面开始查找;它只返回第一个满足条件的索引号 ;它如果在该数组里面找不到元素,则返回的是 -1
-
lastIndexOf(数组元素) 作用就是返回该数组元素的索引号 从后面开始查找;它只返回最后一个满足条件的索引号
数组转换为字符
-
toString() 将我们的数组转换为字符串
-
join(分隔符)
连接两个数组
contact()
数组截取
slice(begin,end)
数组删除
splice(第几个开始,要删除个数)
函数
function 函数名(形参1,形参2){}
如果实参的个数多余形参的个数,会取到形参的个数
如果实参的个数多余形参的个数,输出NaN
return返回结果
在实际开发过程中,我们经常用一个变量来接受函数的返回结果
函数遇到return就终止,只能返回一个值,也可以退出循环
可以return[num1,num2,num3];
没有return会输出undefined
arguments
arguments存储了传递过来的所有实参
arguments展示形式是一个伪数组,具有length属性,按索引方式存储数据,不具有数组的push,pop等方法
只有函数才有arguments
函数的声明方式
-
利用函数的关键字自定义函数
function fn(){}; -
函数表达式(匿名函数)
var 变量名=function(参数){};
函数表达式也可以传递参数
变量名(参数);
js作用域(es6)之前
-
全局作用域;整个script标签,或者是一个单独的js文件
-
局部作用域:在函数内部
不同作用域下没有影响
变量分为全局变量和局部变量
函数可以调用全局变量,全局作用域不能调用局部变量
在函数中没有声明直接赋值的变量也是全局变量
全局变量只有浏览器关闭时才会销毁
局部变量程序执行完毕就销毁
js没有块级作用域(esc6之前)
块级作用域{}
作用域链:内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值 这种结构我们称为作用域链 就近原则
域解析
-
我们js引擎运行js 分为两步: 预解析 代码执行
(1). 预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
(2). 代码执行 按照代码书写的顺序从上往下执行 -
预解析分为 变量预解析(变量提升) 和 函数预解析(函数提升)
(1) 变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
(2) 函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
var a=b=c=9;相当于var a=9;b=9;c=9;
对象
在js中,对象是一组无序的相关属性和方法的集合的个体,所有的事物都是对象,例如字符串,数值,数组,函数
创建对象
- 利用对象字面量创建对象 {}
var obj = {}; // 创建了一个空的对象
var obj = {
uname: '张三疯',
age: 18,
sex: '男',
sayHi: function(){
console.log('hi~'); }
}
- 利用 new Object 创建对象
var obj = new Object(); // 创建了一个空的对象
obj.uname = '张三疯';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
console.log('hi~'); }
- 利用构造函数创建对象
构造函数 就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面
function Star(uname, age, sex) {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing =function(sang) {
console.log(sang);
}
}
var ldh = new Star('刘德华', 18, '男');
构造函数名字首字母要大写
我们构造函数不需要return 就可以返回结果
使用对象
-
console.log(obj.uname);
-
console.log(obj[‘age’]);
-
obj.sayHi();
变量,属性|函数,方法
-
变量和属性的相同点 他们都是用来存储数据的
变量: 单独声明并赋值 使用的时候直接写变量名 单独存在
属性:在对象里面的不需要声明的 使用的时候必须是 对象.属性 -
函数和方法的相同点 都是实现某种功能 做某件事
函数是单独声明 并且调用的 函数名() 单独存在的
方法在对象里面 调用的时候 对象.方法()
遍历对象
for(var k in obj){
console.log(k);得到的是属性名
console.log(obj[k]);得到的是属性值
}
内置对象
Math对象
不是构造函数,直接使用即可
Math.PI圆周率
Math.max()返回最大值,如果里面含有非数字,则返回NaN,如果为空,返回-infinity
Math.abs()输出绝对值,具有隐式转换
Math.floor() 向下取整
Math.ceil()向上取整
Math.round()四舍五入,-1.5为-1,遇到.5,它往大的取
Math.random()返回一个[0,1)的小数
return Math.floor(Math.random() * (max - min + 1)) + min;取两个数之间的随机整数,并包含这两个数
Date()
日期对象 ;是一个构造函数,需要new一个一个变量去接受
-
使用Date 如果没有参数 返回当前系统的当前时间
-
参数常用的写法 数字型 2019, 10, 01 结果月份会大1; 或者是 字符串型 ‘2019-10-1 8:8:8’
月份范围是0-11
getFullYear()年
getMonth()月 0~11
getDate()日
getDay()星期0~6
getHours时
getMinutes分
getSeconds秒
Date对象基于1970年1月1日
获得毫秒数(时间戳)
- 通过 valueOf() getTime()
- 简单的写法 (最常用的写法)
var date1 = +new Date(); - H5 新增的 获得总的毫秒数
console.log(Date.now());
字符串
-
字符串具有不可变
-
字符串对象 根据字符返回位置 str.indexOf(‘要查找的字符’, [起始的位置])
根据位置返回字符
1.charAt(index) 根据位置返回字符
2.charCodeAt(index) 返回相应索引号的字符ASCII值
3.str[index] H5 新增的
字符串操作
-
concat(‘字符串1’,‘字符串2’…)连接字符串
-
substr(‘截取的起始位置’, ‘截取几个字符’);截取字符串
-
替换字符 replace(‘被替换的字符’, ‘替换为的字符’) 它只会替换第一个字符
-
字符转换为数组 split(‘分隔符’) 前面我们学过 join 把数组转换为字符串,分隔符为字符串所用的分隔符
简单复杂类型
-
简单数据类型 是存放在栈里面 里面直接开辟一个空间存放的是值
-
复杂数据类型 首先在栈里面存放地址 十六进制表示 然后这个地址指向堆里面的数据