目录
基础:
分为:ECMAScript(标准化编程语言),DOM(文档对象模型),BOM(浏览器对象模型)
书写形式:
1.行内式
<input type="button" value="啊吧啊吧" onclick="alert('啊吧啊吧啊吧')">
2.内嵌JS
<script>
alert('啊吧啊吧');
</script>
3.外部JS文件
<script src="my.js"></script>
注释://(Ctrl+/)与/**/(Shift+Alt+A)
基础输入输出:
alert(msg) | 浏览器弹出警示框 | 浏览器 |
console.log(msg) | 浏览器控制台打印输出信息 | 浏览器 |
prompt(info) | 浏览器弹出输入框,用户可以输入 | 浏览器 |
变量:
1.声明变量:var age //var是JS关键字,用来声明变量
2.赋值
初始化=声明+赋值。
未赋值值为undefined。
数据类型
JS为弱类型语言;是动态语言,变量的数据类型是可以变化的。
数据类型:简单数据类型(Number,Bollean,String,Undefined,Null),复杂数据类型(object,Array,Date等)。
复杂数据类型使用new关键字创建。
Number:数字前面加0表示八进制;加0x表示十六进制。
console.log(Number.MAX_VALUE); //1.7976931348623157e+308
console.log(Number.MIN_VALUE); //5e-324
console.log(Infinity); //Infinity无穷大
console.log(-Infinity); //-Infinity无穷小
console.log(NaN); //一个非数值
isNaN //判断是否是数字,是数字则返回false,不是数字则返回true。
String:建议使用单引号。使用引号的嵌套关系,则外双内单或外单内双。
\n | 换行符 |
\\ | 斜杠\ |
\' | 单引号 |
\" | 双引号 |
\t | tab缩进 |
\b | 空格 |
var str = '啊吧啊吧';
console.log(str.length); //检测输出字符串的长度
console.log('abab'+srt); //字符串拼接
console.log(srt+18); //字符串拼接 啊吧啊吧18
var age = 18; console.log(srt+age); //字符串拼接 啊吧啊吧18
console.log('12'+18); //字符串拼接 '1218'
Boolean:可以直接参与运算。
Undefined:变量未赋值,则为undefined。
var str = '啊吧啊吧';
var ariable = undefined;
console.log(variable+srt); //undefined啊吧啊吧
console.log(variable+1); //NaN
Null
var str = '啊吧啊吧';
var space = null;
console.log(variable+srt); //null啊吧啊吧
console.log(variable+1); //1
获取数据类型typeof
var num=10;
console.log(typeof num); //number
var str='abab';
console.log(typeof str); //string
var flag=true;
console.log(typeof flag); //bollean
var vari=undefined;
console.log(typeof vari); //undefined
var timer=null;
console.log(typeof timer); //object
数据类型转换
toString() | 转成字符串 | var num = 1; alert(num.toString()); |
String() | 转成字符串 | var num = 1; alert(String(num)); |
加号拼接字符串 | 和字符串拼接的结果都是字符串 | var num = 1; alert(num+"字符串"); |
parseInt(String) | string转整数数值(向下取整,自动去掉单位字母(如px)) | parseInt('78') |
parseFloat(String) | string转浮点数数值(自动去掉单位字母(如px)) | parseFloat('78.21') |
Number() | string转数值型 | Number('12') |
js隐式转换(- * /) | 运用算数运算隐式转换为数值型 | '12' - 0 '12' * 1 '12' / 1 |
Boolean() | 其他型转换为boolean | Boolean('') |
console.log(Boolean('')); //false
console.log(Boolean(0)); //false
console.log(Boolean(NaN)); //false
console.log(Boolean(null)); //false
console.log(Boolean(undefined)); //false
console.log(Boolean()); //其他皆为true
JS:解释性语言;Java:编译性语言
运算符
算数运算符
递增递减运算符
比较运算符
!==与===表示全等,要求值和数据类型都一致
逻辑运算符
赋值运算符
优先级
小括号>一元运算符>算数运算符>关系运算符>相等运算符>逻辑运算符>赋值运算符>逗号运算符
流程控制
顺序
if判断
三元表达式
条件表达式 ? 表达式1 : 表达式2
switch分支
循环
数组
创建数组:
1.利用new创建数组;2.利用数组字面量创建数组
数组中可以放任意类型的数据
var arr = new Array(); //1.利用new创建数组
var arr = []; //2.利用数组字面量创建数组
var arr = [1,2,'abab',true];
获取元素:索引
console.log(arr); //Array(4)
console.log(arr[2]); //abab
求数组长度
console.log(arr.length);
增加数组元素
var arr = [1,2,'abab',true];
arr.length = 7; //1.修改数组长度
console.log(arr[4]); //undefined
arr[4] = 'ababab'; //2.增加数组元素
函数
1.声明函数,2.调用函数
function 函数名(){ //声明
函数体;
}
function 函数名(形参1,形参2){
函数体;
}
函数名(); //调用
函数名(实参1,实参2);
若实参个数多于形参个数,则只取前几个;若实参个数小于形参个数,多的形参定义为undefined。
函数若没有return,则返回undefined
arguments的使用:arguements对象存储了传递的所有实参。arguements展示形式是一个伪数组,具有的特点:1.具有length属性;2.按照索引方式存储数据;不具有数组push,pop等方法。
声明函数的两种方式:
function fun(){
}
var fun = function(){ //fun是变量名,不是函数名,变量里面存的是函数
}
作用域
全局作用域:整个script标签或单独的js文件。注意:在函数内部赋值但没声明变量也是全局变量;形参也可以看作全局变量。
局部作用域:一个函数内部
块作用域:es6之前没有。
作用域链:小域可以访问大域变量。链式查找访问机制。
JS预解析
JavaScript解析器在运行JavaScript代码的时候分为两步:预解析和代码执行。
1.预解析会把js里面所有的var和function提升到当前作用域的最前面。
2.代码执行:按代码书写顺序从上往下执行
3.预解析分为变量提升和函数提升。变量提升:吧所有变量声明提到最前面,不提升赋值操作。函数提升:吧所有函数声明提升到最前面,不调用函数。
对象
对象:一组无序的相关属性和方法的集合。
属性:事物特征。方法:事物行为。
创建对象:1.利用字面量创建对象;2.利用new Object创建对象;3.利用构造函数创建对象。
构造函数首字母大写。构造函数类似于class,用构造函数创建对象的过程也称为对象的实例。
//1.对象字面量创建对象:{}
var obj = {
uname: 'abab', //属性使用键值对
age: 18, //逗号隔开
sex:'man'
sayHi: function(){ //方法冒号后面跟一个匿名函数
console.log('abab');
}
}
console.log(obj.uname); //调用:对象名.属性名。
console.log(obgj['age']); //调用:对象名['属性名']。
obj.sayHi(); //调用:对象名.属性名。
//2.利用new Object创建对象
var obj = new Object();
obj.uname = 'abab'; //用=等号赋值的方法添加对象属性和方法
obj.age = 18;
obj.sex = 'man';
obj.sayHi = function(){
console.log('abab');
}
//3.构造函数创建对象
function 构造函数名(){
this.属性 = 值;
this.方法 = function(){}
}
new 构造函数名();
//实例
function Person(uname,age,sex){ //构造函数首字母大写,不需要return
this.name = uname;
this.age = age;
this.sex = sex;
}
var me = new Person('abab',18,'man'); //创建对象
console.log(me.name); //使用
console.log(me.age);
new的过程:
1.在内存中创建一个新的对象
2.this指向空对象
3.指向函数代码,为空对象添加属性和方法
4.返回这个对象
遍历对象:for...in语句可以对数组和对象的属性进行循环操作。
for(var k in obj){
console.log(k); //k变量地呼出得到属性名
console.log(obj[k]); //obj[k]输出得到属性值
}
JS内置对象
JS对象:自定义对象,内置对象,浏览器对象(JS API)。
文档:MDN:http://developer.mozilla.org/zh-CN/
Math
Math
不是一个构造器。Math
的所有属性与方法都是静态的。
常用:
Math.max();
Math.abs():绝对值;
三个取整方法:Math.floor()(向下取整);Math.ceil()(向上取整);Math.round()(四舍五入)
Math.random():返回随机小数[0,1)。
Date
创建一个 JavaScript Date
实例,该实例呈现时间中的某个时刻。
var date = new Date(); //创建了一个Date
console.log(date);
var date1 = new Date(2019,10,1);
var data2 = new Date(2019-10-1 8:8:8);
console.log(date1); //Fri Nov 01 2019 00:00:00 GMT+0800 (中国标准时间)
console.log(date2); //报bug
/*
new Date();
new Date(value);
参数常用写法:数字型:2019, 10, 01
new Date(dateString);
字符串型:'2019-10-01 8:8:8'
强烈不推荐使用Date构造函数来解析日期字符串
new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);
*/
方法:
getFullYear() | 获取当前年 |
getMonth() | 获取当前月(0-11) |
getDate() | 获取当前几号 |
getDay() | 获取当前星期几(日:0-六:6) |
getHours() | 获取当前小时 |
getMinutes() | 获取当前分钟 |
getSeconds() | 获取当前秒 |
//获取Date毫秒数(时间戳),距离1970年1月1日的毫秒数:
var date = new Date();
//1
console.log(date.valueOf());
console.log(date.getTime());
//2
var date1 = +new Date();
concole.log(date1);
//3 H5新增
concole.log(Date.now());
案例:倒计时:
function countDown(time) {
var nowTime = +new Date(); //当前毫秒数
var input = +new Date(time); //输入时间的毫秒数
var times = (input - nowTime) / 1000; //剩余时间的秒数
var d = parseInt(times / 60 / 60 / 24);
d = d<10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h<10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m<10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s<10 ? '0' + s : s;
return(d+'天'+h+'小时'+m+'分'+s+'秒');
}
数组对象
数组是一种类列表对象,它的原型中提供了遍历和修改元素的相关操作。
构造函数创建数组:
var arr = new Array(); //创建空数组
var arr = new Array(2); //创建数组,长度为2
var arr = new Array(2,3); //创建数组[2,3]
检测是否为数组:
//instanceof运算符
var arr = [];
var obj = {};
console.log(arr instanceof Array); //true
console.log(obj instanceof Array); //false
//Array.isArray() H5新增方法
console.log(Array.isArray(arr)); //true
添加删除方法:
push() | 末尾添加一个或多个元素,修改原数组 | 返回新的长度 |
pop() | 删除最后一个元素,数组长度减一,无参数,修改原数组 | 返回删除元素的值 |
unshift() | 向数组开头添加一个或更多元素,修改原数组 | 返回新的长度 |
shiift() | 删除第一个元素,数组长度减一,修改原数组 | 返回第一个元素的值 |
反转数组:arr.reverse();
冒泡排序:arr.sort();
//sort的成功形式:
arr.sort(function(a,b){
return a-b; //升序排列
//return b-a; //降序排序
});
数组索引:
indexOf() | 数组中查找给定元素的第一个索引 | 存在则返回索引号;不存在则返回-1 |
lastIndexOf() | 在数组中最后一个索引 | 存在则返回索引号;不存在则返回-1 |
转字符串:
toString() | 把数组转换成字符串,逗号分隔每一项 | 返回一个字符串 |
join('分隔符') | 吧数组中所有元素转换为一个字符串 | 返回一个字符串 |
其他:
concat() | 连接两个或多个数组,不影响原数组 | 返回一个新数组 |
slice() | 数组截取slice(begin,end) | 返回被截取项目的新数组 |
splice() | 数组删除splice(begin,end),影响原数组 | 返回被删除项目的新数组 |
字符串对象
基本包装类型:吧简单数据类型包装成复杂数据类型。
字符串的值不变,看上去改变了内容,实际上是改变了地址,内存中新开辟了一块地址空间。
由于字符串的所有方法都不会修改字符串本身,所以操作完成后会返回一个新的字符串。
根据字符返回位置:
indexOf() | 字符串中查找给定字符的第一个索引 | 存在则返回索引号;不存在则返回-1 |
lastIndexOf() | 在字符串中最后一个索引 | 存在则返回索引号;不存在则返回-1 |
//str.indexOf('要查找的字符',[起始的位置])
var str = 'abcdfsda';
console.log(str.indexOf('a',3)); //从索引号是3 的位置开始往后查找
//lastindexOf也可以设定起始查找位置
根据位置返回字符:
charAt(index) | 返回指定位置的字符 |
cahrCodeAt(index) | 获取指定位置处字符的ASCII码 |
str[index] | 获取指定位置处字符 H5新增 |
判断对象中是否有某个属性:对象['属性名']
var o = {
age: 18
}
if(o['age'])
{console.log('里面有该属性');}
else
{console.log('里面没有该属性');}
案例:获取一组字符串中出现次数最多的字符:
//1.获取字符和其最大值
var str = 'fdfsafewfsdfwefadsaf';
var o = {};
for(var i = 0; i < str.length; i++)
{
var chars = str.charAt(i);
if(o[chars]){
o[chars]++;
}else{
o[chars] = 1;
}
}
console.log(o);
//2.遍历对象
var max = 0;
var ch = '';
for(var k in o){
//k为属性名,属性值为o[k]
if(o[k] > max){
max = o[k];
ch = k;
}
}
console.log(max + ' ' + ch);
字符串其他操作方法:
concat(str1,str2,str3) | 连接两个或多个字符串。等效于+。+更常用 |
substr(start,length) | 从start来时,length取的个数 |
slice(start,end) | 从start开始,截取到end的位置,end取不到 |
substring(start,end) | 从start开始,截取到end的位置,end取不到,不接受负值 |
replace('被替换的字符','替换为的字符') | 替换字符串中的字符,只替换第一个字符 |
split('分隔符') | 字符串转换为数组 |
toUpperCase() | 转换大写 |
toLowerCase() | 转换小写 |
数据类型内存分配
堆与栈
简单数据类型直接存储在栈中。
复杂数据类型首先在栈中存放地址,然后这个地址指向存储在堆里面的数据。
简单数据类型:函数传参时,将实参复制一份给了形参。
复杂数据类型:函数传参时,将实参(地址)赋值给了形参,在函数内改变值会影响到原实参。