JS之已被我一脚踢开
对象的简介
Object（看到的值不是字符串、数值、布尔值、空值、未定义，就全是对象）
基本数据类型都是单一的值，值和值之间没有任何联系
如果使用基本数据类型的数据，我们所创建的变量都是独立的，不能成为一个整体
对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性
对象的分类
1、内建对象（ES标准中定义的对象，在任何ES中都可以使用）
例如：Math、String、Number、Boolean、Function、Object
2、宿主对象（JS运行环境提供的对象，目前来讲主要指由浏览器提供的对象）
例如：BOM、DOM
3、自定义对象（由开发人员自己创建的对象）
对象的基本操作
使用new关键字调用的函数，是构造函数constructor
构造函数是专门用来创建对象的函数
使用typeof检查一个对象时，会返回Object
在对象中保存的值叫属性，向对象添加属性
语法：对象.属性名=属性值
读取对象中的属性
语法：对象.属性名
如果读取对象中没有的属性，不会报错而是会返回undefined
修改对象的属性值
语法：对象.属性名=新值
删除对象的属性
语法：delete 对象.属性名
<!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>
<script>
//在JS中表示一个人的信息（name、gender、age）
/*var name = "孙悟空";
var gender = "男";
var age = 18;*/
//console.log();
//document.write();
//创建对象
var obj = new Object();
console.log(typeof obj);
//向obj中添加一个name属性
obj.name = "孙悟空";
//向obj中添加一个gander属性
obj.gander = "男";
//向obj中添加一个age属性
obj.age = "18";
//console.log(obj);
obj.name = "tom";
delete obj.name;
console.log(obj.age);
</script>
</head>
<body>
</body>
</html>
属性名和属性值
属性名：对象的属性名不强制要求遵守标识符的规范，什么名字都可以使用，但尽量按照标识符规范做
如果使用特殊的属性名，不能采用.的方式，需要使用另一种方式，更加灵活
语法：对象【“属性名”】=属性值
在【】中可以直接传递一个变量，这样变量值是多少就会读取那个属性
属性值：JS对象的属性值，可以是任意的数据类型
in运算符：通过该运算符可以检查一个对象中是否含有指定的属性，如果有则返回true，没有则返回false
语法：“属性名” in 对象
<!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>
<script>
var obj = new Object();
//向对象中添加属性
obj.name = "孙悟空";
obj.var = "hello";
obj["123"] = 789;
console.log(obj["123"]);
console.log(obj.var);
var n = 123;
console.log(obj.["n"]);
console.log(obj.["123"]);
obj.test = "hello";
var obj2 = new Object();
obj2.name = "猪八戒";
obj.test = obj2;
console.log("test" in obj);
</script>
</head>
<body>
</body>
</html>
基本和引用数据类型
基本数据类型：String、Number、Boolean、Null、Undefined
引用数据类型：Object
JS中变量都是保存在栈内存中，基本数据类型的值直接在栈内存中，值与值之间独立存在
对象保存到堆内存中，每创建一个新的对象，就会在堆内存中开辟一个新的空间
变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用的，当一个通过一个变量修改属性时，另一个也会受到影响
<!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>
<script>
var a = 124;
var b = a;
a++;
console.log("a ="+a);
console.log("b ="+b);
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
obj.name = "猪八戒";
obj2 = null;
console.log(obj.name);
console.log(obj2.name);
</script>
</head>
<body>
</body>
</html>
对象字面量
使用对象字面量，可以在创建对象时，直接指定对象中的属性
语法：{属性名：属性值，属性名：属性值。。。。。。}
属性名可以加“”，也可以不加
如果要使用特殊名字，必须加引号
属性名和属性值是一组一组
<!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>
<script>
var obj = {};
console.log(typeof obj);
obj.name = "孙悟空";
console.log(obj.name);
var obj2 = {
name:"猪八戒",
age:28,
gender:男,
test:{name:"沙和尚"}
};
console.log(obj2);
</script>
</head>
<body>
</body>
</html>
函数的简介
函数也是一个对象，可以封装一些功能（代码），在需要时可以执行，可以保存一些代码在需要的时候调用
封装到函数中的代码不会立刻执行，函数中的代码会在函数调用的时候执行
使用函数声明创建一个函数
语法：function 函数名（【形参1，形参2】）
{
语句。。。
}
<!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>
<script>
var fun = new Function(console.log('hello 这是第一个函数'));
console.log(fun);
function fun2()
{
console.log("这是第二个函数");
alert("哈哈哈哈哈哈");
document.write("(>_<)");
}
console.log(fun2);
</script>
</head>
<body>
</body>
</html>
函数的参数
定义一个用来求两个数和的函数，可以在函数的（）中指定一个或多个形参（形式参数）
在调用函数时，可以在（）中指定实参（实际参数）
注意是否有可能接收到非法的参数，如果有可能要对参数进行类型的检查
调用函数时，解析器也不会检查实参的数量，多余实参不会被赋值
如果实参数量少于形参的数量，则没有对应实参的形参将是undefined
<!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>
<script>
function sum(a,b){
console.log("a = "+a);
console.log("b = "+b);
console.log(a+b);
}
sum(1,2);
</script>
</head>
<body>
</body>
</html>
函数的返回值
使用return设置函数的返回值，return后的值将会作为函数的执行后结果返回
如果return后不跟任何值，相当于返回一个undefined
<!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>
<script>
function sum(a,b,c){
//alert(a + b + c);
var d = a + b + c;
//return d;
return;
}
var result = sum(4,7,8);
</script>
</head>
<body>
</body>
</html>
参数可以是任何值
<!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>
<script>
function isOu(num){
if(num % 2 == 0){
return true;
}else{
return false;
}
}
var result = isOu(2);
console.log("result = "+result);
function mianji(r){
return 3.14*r*r;
}
result = mianji(10);
console.log("result = "+result);
function sayhello(o){
console.log("我是"+o.name+",今年我"+o.age+"岁了,"+"我是一个"+o.gender+"人");
}
//sayhello("孙悟空",18,"男","花果山");
var obj = {
name:"孙悟空",
age:18,
gender:"男",
address:"花果山"
};
sayhello(obj);
function fun(a){
//console.log("a = "+a);
a(obj);
}
//fun(sayhello);
//fun(function(){alert("hello")});
fun(mianji(10));
//minaji() 调用函数
//mianji 函数对象
</script>
</head>
<body>
</body>
</html>
返回值的类型
break：退出当前循环
continue：跳过当次循环
return：结束整个函数
<!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>
<script>
function fun(){
alert("函数要执行了");
for(var i=0; i<10; i++){
if(i == 2){
//break;
//continue;
return;
}
console.log(i);
}
alert("函数执行完了");
}
fun();
</script>
</head>
<body>
</body>
</html>
立即执行函数
<!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>
<script>
//立即执行函数,只执行一次
(function(){
alert("我是一个匿名函数");
})();
</script>
</head>
<body>
</body>
</html>
全局作用域
scope
全局作用域
直接编写在script标签中，在页面打开时创建。关闭时销毁
创建的变量都会作为window对象的属性保存
创建的函数都会作为window对象的方法保存
函数作用域
调用函数时创建函数作用域，函数执行完毕，函数作用域销毁
每调用一次函数会创建一个新的函数作用域，相互独立
<!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>
<script>
var a = 10;
function fun(){
console.log("a = "+a);
}
fun();
</script>
</head>
<body>
</body>
</html>
变量的声明提前
<!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>
<script>
var a;
a = 123;
console.log("a = "+a);
fun();
var fun2 = function(){
console.log("我是函数");
}
</script>
</head>
<body>
</body>
</html>
构造函数
专门用来创建Person对象
流程：
1、立刻创建一个新的对象
2、将新建的对象设置为函数中this，在构造函数中可以使用this来引用新建的对象
3、逐行执行函数中的代码
4、将新建的对象作为返回值返回
<!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>
<script>
function Person(name,age){
alert(this);
//name = "hello";
this.name = "孙悟空";
this.age = 18;
}
var per = new Person();
console.log(per);
</script>
</head>
<body>
</body>
</html>
数组介绍
是一个对象，和普通对象功能相似
不同的是普通对象使用字符串作为属性名，数组使用数字作为索引操作元素
索引：从0开始的整数
数组的存储性能比普通对象好，开发中常用数组存储数据
向数组中添加元素
语法：数组【索引】 = 值
<!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>
<script>
var arr = new Array();
console.log(typeof arr);
arr[0] = 10;
arr[1] = 33;
arr[2] = 22;
console.log(arr[3]);
</script>
</head>
<body>
</body>
</html>
四个方法
1、push（）
该方法可以向数组的末尾添加一个或多个元素，并返回数组的新长度
可以将要添加的元素作为方法的参数传递
2、pop（）
该方法可以删除数组最后一个元素，并将删除元素作为返回值返回
3、unshift（）
向数组开头添加一个或多个元素，并返回新的数组长度
4、shift（）
可以删除数组的第一个元素，并将删除元素作为返回值返回
<!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>
<script>
var arr = ["孙悟空","猪八戒","沙和尚"];
arr.push("唐僧");
console.log(arr);
result = arr,pop();
console.log(arr);
console.log("result = "+result);
console.log(arr);
arr.unshift("牛魔王");
result = arr.shift();
</script>
</head>
<body>
</body>
</html>
正则表达式
规则：根据正则表达式检查一个字符串是否符合规则
方法：test（）
<!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>
<script>
var reg = new RegExp();
var str = "a";
var result = reg.test(str);
console.log(reg.test("bcbc"));
</script>
</head>
<body>
</body>
</html>
语法
<!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>
<script>
var reg = new RegExp("a","i");
reg = /a/i;
console.log(typeof reg);
reg = /a|b/;
console.log(reg.test("d"));
reg = /[ab]/;
console.log(reg.test("d"));
</script>
</head>
<body>
</body>
</html>
邮件的正则
\w{3,} (,\w+)*
@ [A-z0-9]+
(,[A-z]{2,5}){1,2}
<!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>
<script>
var emailReg = /^\w{3,}(\,\w+)*@[A-z0-9]+(\,[A-z]{2,5}){1,2}$/;
var email = "abc@abc.com";
console.log(emailReg.test(email));
</script>
</head>
<body>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
