JS基础总结
JavaScript简称js,可以用来控制网页内容，给网页增加动态的效果,js不是一门面向对象的语言，但是js可以模拟面向对象的思想
- js是一门基于对象的语言
- 是一门脚本语言-----不需要编译
- 解释性语言------通过浏览器解析
- 动态类型语言------对象的属性创建(对象.属性)，声明变量之前并不知道变量的类型
- 弱类型语言------声明变量都用var
JavaScript的组成
- ECMAScript 描述了语言的基本语法和数据类型
- DOM 文档对象模型
- BOM 浏览器对象模型
JavaScript的书写位置
- 写在行内
- 写在script标签中
- 写在外部js文件中，在页面引入,引用外部js文件的script标签中不可以写JavaScript代码
一、变量
1.变量就是一个存储数据的容器
①全局变量
②局部变量
- 全局作用域 函数外，在全局中定义的变量 全局变量 在哪都可以访问
- 局部作用域 函数内，在局部中定义的变量 局部变量 只能在函数内部访问
变量退出作用域之后会销毁，全局变量关闭网页或浏览器才会销毁
隐式全局变量：不使用var声明的变量，不推荐使用
全局变量：在内的任何地方都能使用
隐式全局变量与全局变量的区别：
- 隐式全局变量可以删除
- 全局变量不可以删除，全局变量关闭网页或浏览器才会销毁
2.数据类型
Number String Boolean Undefined Null Object
- 基本数据类型（简单数据类型，值类型）：number string boolean
- 复杂数据类型（引用类型）：object
- 空类型：undefined null
简单类型和复杂类型的区别
- 值类型：在存储时，变量中存储的是值本身，因此叫做值类型。
- 引用类型：在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。
3.数据类型转换
-
转string类型
① toString() 最常用的 var num = 10; num.toString(); ② String() 强制转换 可以转换undefined和null ③ 隐式转换（加一个字符串）: num + "" -
转number
① parseInt(a) 取整 常用 ② parseFloat(a) 保留小数 ③ Number(a) 保留小数 但是遇到非数字,返回的结果就是NaN ④ 隐式转换（做加/减运算）: +a a - 0 -
转boolean
① Boolean(a) ② 隐式转换：0,NaN,"",undefined,null,false 转换的结果为false， 其余都为true
注意：
NaN：not a number(不是一个数据)
isNaN(): is not a number 判断是不是不是一个数据-----true，不是数据，false，是数据
typeof 获取变量的类型
操作符
优先级从高到底
1. () 优先级最高
2. 一元运算符 ++ – !
3. 算数运算符 先* / % 后 + -
4. 关系运算符 > >= < <=
5. 相等运算符 == != === !==
6. 逻辑运算符 先&& 后||
7. 赋值运算符
注意
①++前置 先自增 后运算 或者 先自增 后赋值
后置++ 先运算 后自增 或者 先赋值 后自增
② == 比较的是值是否相等
=== 比较的是值和类型是否相等
流程控制程序的三种基本结构
-
顺序结构
程序默认从上到下执行的代码就是顺序结构 -
分支结构
if语句
三元运算符(表达式1 ? 表达式2 : 表达式3)
switch语句 -
循环语句
while、do…while、for循环
循环次数已知使用for
循环次数未知使用while do…while
break:立即跳出整个循环，即循环结束，开始执行循环后面的内容
continue:立即跳出当前循环，继续下一次循环
二、函数
①声明函数
function 函数名(形参1, 形参2, 形参…){
// 函数体
}
// 带参数的函数调用
函数名(实参1, 实参2, 实参3);
②匿名函数
function (形参1, 形参2, 形参…){
// 函数体
}
//声明函数
function fn() {
}
fn();//调用函数 函数不调用 自己不执行
//函数表达式
var fun = function () {
};
fun();
//自调用函数方式一
(function(){
})();
//自调用函数方式二
(function(){
}());
//回调函数
//把函数当做参数传递进去 被传入的函数 就是回调函数
fn(function(){});
- 函数的参数
形参 形式上的参数 用来接收实参的一个变量
实参 实际传入的参数
如果形参比实参多 那么多出来的形参接受不到值,那么就是undefined
如果实参比形参多 那么多出来的实参就废掉了
- 函数的返回值 return
如果你需要用的函数的结果,再次利用 那么我就需要用到返回值
1.函数没有return 那么该函数的返回值就是undefined
2.函数有return 但是后面没有任何值 那么该函数的返回值还是undefined
3.return 后面是什么 该函数的返回值就是什么
4.函数也可以被当做返回值
5.return后面的代码将不再执行 和 循环里的break相似;
arguments
JavaScript中，arguments对象是比较特别的一个对象，实际上是当前函数的一个内置属性。也就是说所有函数都内置了一个arguments对象，arguments对象中存储了传递的所有的实参。
arguments是一个伪数组，因此及可以进行遍历，arguments 打印的是实参列表 这是一个伪数组但是我们可以通过arguments.length来遍历该伪数组。
arguments[0] 取到的就是 实参的第一个值
arguments[1] 取到的就是 实参的第二个值
预解析
-
把变量的声明提升到当前作用域的最前面，只会提升声明，不会提升赋值。
-
把函数的声明提升到当前作用域的最前面，只会提升声明，不会提升调用。
-
函数如果使用表达式声明，只会提升声明，不会提升函数体。
-
先提升var，再提升function
三、对象
对象的行为和特征
特征—属性
行为—方法
创建对象的方式
①对象字面量
var o = {
name: 'zs',
age: 18,
sex: true,
sayHi: function () {
console.log(this.name);
}
};
②new Object()创建对象
var person = new Object();
person.name = 'lisi';
person.age = 35;
person.job = 'actor';
person.sayHi = function(){
console.log('Hello,everyBody');
}
③工厂函数创建对象
function createPerson(name, age, job) {
var person = new Object();
person.name = name;
person.age = age;
person.job = job;
person.sayHi = function(){
console.log('Hello,everyBody');
}
return person;
}
var p1 = createPerson('张三', 22, 'actor');
④自定义构造函数
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayHi = function(){
console.log('Hello,everyBody');
}
}
var p1 = new Person('张三', 22, 'actor');
自定义构造函数创建对象时做了4件事：
1.在内容中申请一片内存，存储对象
2.把this指向当前对象
3.设置当前对象的属性与方法
4.把this对象返回
遍历对象for…in
//通过for..in语法可以遍历一个对象,key--->对象属性，obj[key]---->获取对应的属性值
for(var key in obj) {
console.log(key + "==" + obj[key]);
}
删除对象的属性 delete
function fun() {
this.name = 'mm';
}
var obj = new fun();
delete obj.name;
console.log(obj.name); // undefined
四、内置对象
JavaScript中的对象分为3种：内置对象、浏览器对象、自定义对象
①Math对象
Math.PI // 圆周率
Math.random() // 生成随机数 [0,1)之间的随机数 0能取到 1取不到
Math.floor()/Math.ceil() // 向下取整/向上取整
Math.round() // 取整，四舍五入
Math.abs() // 绝对值
Math.max()/Math.min() // 求最大和最小值
Math.sin()/Math.cos() // 正弦/余弦
Math.pow()/Math.sqrt() // 求指数次幂/求平方根
②String对象
1 字符方法
charAt(索引) //获取指定位置处字符，如果索引不在范围内返回空的字符，没有给参数默认索引0.
charCodeAt(索引)//获取指定位置处字符的ASCII码 如果索引不在范围内返回NAN，没有给参数默认索引0.
str[0] //HTML5，IE8+支持 和charAt()等效
2 字符串操作方法
concat() //拼接字符串，等效于+，+更常用
slice() //从start位置开始，截取到end位置，end取不到
substring() //从start位置开始，截取到end位置，end取不到
substr() //从start位置开始，截取length个字符
3 位置方法
indexOf() //返回指定内容在元字符串中的位置
lastIndexOf() //从后往前找，只找第一个匹配的
4 去除空白
trim() //只能去除字符串前后的空白
5 大小写转换方法
to(Locale)UpperCase() //转换大写
to(Locale)LowerCase() //转换小写
6 其它
replace() 替换字符串 两个参数:1.要查找的元素 2.替换的元素
split() 切割字符串 里面的值 就是你要以什么来切割 会返回一个***数组***
fromCharCode() String.fromCharCode(101, 102, 103); //把ASCII码转换成字符串
③Date对象
var d= new Date();
获取从现在到1970年1月1号的毫秒值
d.getTime()
d.valueOf();
d.getTime();
Date.now();
getMilliseconds()
getSeconds() // 返回0-59
getMinutes() // 返回0-59
getHours() // 返回0-23
getDay() // 返回星期几 0周日 6周6
getDate() // 返回当前月的第几天
getMonth() // 返回月份，从0开始
getFullYear() //返回4位的年份 如 2016
④Array对象
创建数组对象的两种方式
1. 使用构造函数创建数组对象, new Array()
// 创建了一个空数组
var arr = new Array();
// 创建了一个数组，里面存放了3个字符串
var arr = new Array('zs', 'ls', 'ww');
// 创建了一个数组，里面存放了4个数字
var arr = new Array(1, 2, 3, 4);
// 创建了一个数组，长度为3
var arr=new Array(3);
2. 使用字面量创建数组对象
var arr = [1, 2, 3];
检测一个对象是否是数组
-
instanceof
-
Array.isArray() HTML5中提供的方法，有兼容性问题
数组的方法
push 在数组的末尾追加元素,返回值是数组的长度
unshift 在数组的最前面追加元素,返回数组的长度
pop 删除最后一个元素,返回值是删除的元素
shift 删除第一个元素,返回值是删除的元素
reverse 翻转数组
concat 合并数组
sort 排序 要传入一个回调函数
arr.sort(function(a,b){ return a - b}) 升序
arr.sort(function(a,b){ return b - a}) 降序
splice 删除替换数组里的元素三个参数 1.从哪里开始 索引 2.要删除的个数 3.替换的元素
slice 截取数组元素 1.从哪里开始 2.到哪里结束 开始能取到 结束取不到
indexOf 查找元素在数组中的第一个出现的位置 如果找不到返回 -1
lastIndexOf 查找元素在数组中的最后出现的位置 如果找不到返回 -1
join 把数组转换成字符串 默认是以逗号拼接 可以任意传参
toString 把数组转换成字符串
every()、filter()、forEach()、map()、some() 迭代方法 不会修改原数组