JavaScript总结day1
这一套总结笔记主要针对学过其他高级语言的同学,因为其中我省略了一些与高级相同的语法功能等!如果那些也细讲的话,js主要的功能就得很靠后才涉及了,我这系列文章主要针对js的功能做总结。
JS的组成
ECMAScript : JavaScript语法
DOM : 页面文档对象模型
BOM : 浏览器对象模型
JS书写位置
内嵌式 : 跟内嵌样式一样,在head标签内部书写script标签(其实script标签可以在html文件的然后地方书写,一般在head标签内)。
行内式 : 直接写在HTML元素内部。
外部引入 : 外部引入js文件,在script标签中的src属性中引入文件位置。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 内嵌式js书写 -->
<script>
//alert('内嵌式1');
</script>
<!-- 外部引入js文件 -->
<script src="js文件地址"></script>
</head>
<body>
<!-- 行内式的js 直接写到元素的内部 -->
<input type="button" value="按一下" onclick="alert('行内式')"/>
</body>
</html>
注释
// : 单行注释 快捷键 :ctrl + /
/* */ :多行注释 快捷键 :默认 :shift + alt + / 建议修改为 :shift + ctrl + /
输入输出语句
alert(“警告语句”); : 浏览器弹出警示框
console.log(“打印信息”); : 浏览器控制台打印输出信息
prompt(“提示信息”); : 浏览器弹出提示框,带有输入框,可以给变量赋值。
数据类型
js是动态语言 一个变量的数据类型是可以变化的
简单数据类型
Number : 数字型,包含整型值和浮点值 默认值 : 0
Boolean : 布尔值类型,如 true ,false ,等价于 1 、0 默认值:false
String :字符串类型。 默认值 : “”
Undefined : var a; 声明了变量a但没赋值,此时 a = undefined 默认 :undefined
Null :空值。
Infinity :无穷大
-Infinity :无穷小
NaN :非数字值
isNaN() :判断是否为数字 ,是则返回false ,否则返回true
String.length() : 得出字符串的长度。
字符串与任何类型相加都是拼接为字符串
+号总结口诀 : 数值相加,字符相连
typeof : 检测这个是什么类型
例 :
alert(typeof 13);
其他类型转字符型
方法:
.toString()
String()
与字符串相加
例:
//方法一:
alert(num.toString());
//方法二:
alert(String(num));
//方法三:
alert(""+num);
其他类型装换为数字型
方法:
parselnt() : 将字符串转换为整数数值型
parseFloat() : 将String类型转换为浮点数数值型
Number() : 将String类型转换为数值型
算术运算隐式转换
例:
//方法一:
parselnt('28'); //有小数默认去掉取整。数值后面有单位可以自动去掉
//方法二:
parseFloat('28.00'); //也可以去单位
//方法三:
Number('28')
//方法四:
'28'-0 // - * / 都可以转换为数值型
其他类型转换为布尔值
Boolean();
“” 、 0 、NaN 、 null 、undefined 这些都会转换为false
其他则都转换为true
特殊比较运算符
=== : 全等,要求值和数据类型都一致
!== : 不全等
特殊逻辑比较
用数值逻辑比较可以直接输出数值而非布尔值
例:
console.log(123 && 456) // 456
console.log( 0 && 456) // 0
console.log(0 && 1+2 && 456) // 0
数组
js数组不分数据类型,都可以存。
创建方式:
//创建一个新的空数组
var 数组名 = new Array();
//利用数组字面量创建数组
var arr = [];
//数组长度
var l = arr.length;
函数
封装了一段可以被重复的代码,相当于java中的方法。
声明方法1:
function 函数名 (参数) {
函数体
}
声明方法2 :
var fn = function (参数) {
函数体
}
直接用函数名或方法名调用执行。
函数参数解析:
参数无需声明类型。直接声明参数名
1.如果实参的个数和形参的个数一致 则对应接收,正常输出结果
2.如果实参的个数多余形参的个数,多余的参数会被忽略掉,只接收对应的参数。
3.如果实参的个数小于形参的个数,没对应接收的形参会被认为是没赋值变量,默认值是undefined。
例:
function getSum ( num1 , num2 ) {
函数体;
}
getSum( 1 , 2 ); // 正常调用
getSum( 1 , 2 , 3 ); // 参数溢出,实参3并没传过去
getSum( 1 ); // 缺少参数,num2会被认为是没赋值的变量,值为undefined
break :结果当前循环体
continue : 跳出本次循环,继续执行下次循环
return : 跳出本次循环,还可以返回结果给调用者。也能结束本个方法体
函数体内置对象:
arguments : 其中存储了调用者传过来的参数。展示形式是一个伪数组,可以进行遍历
伪数组特点:
1.具有length属性
2.按索引方式储存数据
3.不具有数组的push,pop等方法
使用例子:
function sinfi () {
// 查看参数个数
var s = arguments.length;
alert("传来了"+s+"个参数");
// 遍历参数
for(var i = 0; i < arguments.length; i++){
console.log("第"+(i+1)+"个参数:"+arguments[i]);
}
}
sinfi(28,86,34,38,22)
变量作用域
在函数内没声明直接赋值的变量属于全局变量
没有块级作用域,if()、for()的大括号内的声明变量属于全局变量。只有函数内的声明变量才是局部变量。
1、全局变量只有浏览器关闭的时候才会销毁,比较占内存
2、局部变量,当程序执行完毕就销毁,节约内存资源
预解析
js引擎运行js分为两步 : 预解析 代码执行
1、预解析 js引擎会把js 里面所有的 var 还有 function 提升到当前作用域的最前面
2、代码执行 按照代码书写的顺序从上往下执行
var声明 和 函数声明 会被预编译先存进内存,只存了变量名 ,并没赋值。
// 代码一:
fun();
var fun = function() {
console.log(22);
}
// 运行会报错
// 相当于运行了一下代码
var fun;
fun();
fun = function() {
console.log(22);
}
// 代码二:
console.log(num); // 结果 : undefined ,输出了没赋值的变量
var num = 10;
// 相当于运行了以下代码
var num;
console.log(num);
num = 10;
预解析分为 变量预解析 (变量提升) 和 函数预解析 (函数提升)
1、变量提升 就是把所有的变量声明提升到当前的作用域最前面 不提升赋值操作
2、函数提升 就是把所有的函数声明提升到当前作用域的最前面 不调用函数
练习:
var num = 10;
fun();
function fun() {
console.log(num); // 结果 : undefined
var num = 20;
}
//预编译后代码如下
var num;
function fun(){
var num;
console.log(num);
num = 20;
}
num = 10;
fun();
对象
创建对象的方法1:
// 利用对象字面量创建对象 {} : 花括号内是对象体
var obj = {
uname : '张三丰',
age : 18,
sex :'男' ,
sayHi : function() {
函数体
}
}
// 调用: 直接用 方法.属性名或函数 调用
obj.sayHi();
1、对象的属性和属性值以键值对形式声明赋值。 键 属性名 :值 属性值
2、多个属性或者方法中间用逗号隔开
3、方法冒号后面跟的是一个匿名函数
创建对象方法2:
// 利用 new Object 创建对象
var obj = new Object(); // 创建一个空对象
//直接用 对象名.要创建的属性或函数名 就等于声明并赋值
obj.uname = '张三丰';
obj.age = 18;
obj.sex = '男';
obj.sayHi = function() {
// 函数体
console.log('hi~');
}
// 调用方法跟以上的一样
创建对象方法3:
// 构造函数创建对象
function Star() {
this.name = uname;
this.age = age;
this.sex = sex;
this.sing = function(sang){
console.log(sang);
}
}
// 创建两个不一样的对象
var ldh = new Star('刘德华',18,'男');
ldh.sing('冰雨'); // 调用并传值
var zxy = new Star('张学友',19,'男');
//调用的方法一样
//1.构造函数名字首字母要大写
//2.我们构造函数不需要return 就可以返回结果
遍历对象属性内容
示例:
// 创建一个对象
var obj = {
name : 'uname',
age : 18,
sex : '男',
sing : function(sang){
console.log(sang);
}
}
// 遍历对象属性与方法
for(var k in obj){
console.log(k); // k 输出的是所有的 属性名与方法名
console.log(obj[k]) // 输出 对象中的键值 属性名与值 函数名与函数体
}
// 结果
uname
uname
age
18
sex
男
sing
function sing(sang)
浏览器弹窗
alert()、confirm()、prompt()的区别和联系:
警告框alert()
alert是警告框,只有一个按钮“确定”无返回值,警告框经常用于确保用户可以得到某些信息。当警告框出现后,用户需要点击确定按钮才能继续进行操作。语法:alert(“文本”)
确认框confirm()
confirm是确认框,两个按钮,确定或者取消,返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。语法:confirm(“文本”)
提示框prompt()
prompt是提示框,返回输入的消息,或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。语法:prompt(“文本”,“默认值”)
内置对像
javaScript中的对象分为三种:自定义对象、内置对象、浏览器对象。
内置对象 : js语言自带的一些对象,方便开发者开发。
javaScript提供了多个内置对象:Math、Date、Array、String等
所有内置对象可以到文档中查找使用方法
文档: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
getRandom(a,b):从a,b间随机生成一个整 数
Array :
instanceof 运算符 它可以用来检测是否为数组
Array.isArray(参数) 用来检测是否为数组
例
// 检测数组方法1:
var arr = [1,2,3];
if(arr instanceof Array)
// 检测数组方法2:
console.log(Array.isArray(arr)); // 返回 true 或 false
数组添加删除元素
push(参数1…) : 末尾添加一个或多个 返回值 : 新的长度
pop() : 删除数组最后一个元素,把数组长度减1 返回值 : 删除的元素
unshift(参数1…) : 向数组的开头添加一个或多个元素 返回值 : 新的数组长度
shift() : 删除数组的第一个元素,数组长度减1 返回值 : 删除的元素
数组.reverse() :翻转数组
数组.shrt():数组排序:
// 只能排10以内的数,如果是11则根据第一个数来排
var arr1 = [13,4,77,1,7];
arr1.sort();
// 改进、让他可以排序所有数
arr.sort(function(a,b){
//return a - b; 升序排序
return b - a; //降序排序
});
indexOf(“元素”) :查找元素在数组中的位置 没有这个元素就 返回-1 找到元素就返回索引号
数组去重:
function unique (arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++){
if(newArr.indexOf(arr[i]) === -1 ){
//如果新数组没有这个元素就添加进来
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = [1,5,4,3,1,4,6];
console.log(unique(demo));
数组转化字符串
数组.toString() :将数组转换为字符串,每个元素以 ,号相隔
数组.join(“自定义隔开符”) : 将数组转换为字符串,默认以 ,号隔开,可以自定义。