文章目录
JavaScript对象
1、Object对象
- object类型,我们也称为一个对象。是 Javascript中的引用数据类型。
- 它是一种复合值,它将很多值聚合到起,可以通过名字访问这些值
- 对象也可以看做是属性的无序集合,每个属性都是一个名/值对。
- 对象除了可以创建自有属性,还可以通过从一个名为原型的对象那里
继承属性。 - 除了字符串、数字、true、 false、null和 undefined之外,JS中的值
都是对象。
object初识
<!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>
</head>
<body>
<script>
/*
* JS中数据类型
* - String 字符串
* - Number 数值
* - Boolean 布尔值
* - Null 空值
* - Undefined 未定义
* - 以上这五种类型属于基本数据类型，以后我们看到的值
* 只要不是上边的5种，全都是对象
* - Object 对象
*
*
* 基本数据类型都是单一的值"hello" 123 true,
* 值和值之间没有任何的联系。
*
* 在JS中来表示一个人的信息（name gender age）：
* var name = "孙悟空";
* var gender = "男";
* var age = 18;
* 如果使用基本数据类型的数据，我们所创建的变量都是独立，不能成为一个整体。
*
* 对象属于一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。
*
* 对象的分类：
* 1.内建对象
* - 由ES标准中定义的对象，在任何的ES的实现中都可以使用
* - 比如：Math String Number Boolean Function Object....
*
* 2.宿主对象
* - 由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象
* - 比如 BOM DOM
*
* 3.自定义对象
* - 由开发人员自己创建的对象
*
*/
//创建对象
/*
* 使用new关键字调用的函数，是构造函数constructor
* 构造函数是专门用来创建对象的函数
* 使用typeof检查一个对象时，会返回object
*/
// 创建对象
var obj = new Object();
/*
* 在对象中保存的值称为属性
* 向对象添加属性
* 语法：对象.属性名 = 属性值;
*/
// 添加属性 callingName
obj.callingName = "花和尚";
// 添加属性 name
obj.name = "鲁提辖";
/*
* 修改对象的属性值
* 语法：对象.属性名 = 新值
*/
// 修改属性
obj.name = "鲁智深";
// 删除属性
delete obj.name;
/*
* 读取对象中的属性
* 语法：对象.属性名
* 如果读取对象中没有的属性，不会报错而是会返回undefined
*/
document.writeln("obj:");
document.writeln(obj.name); // 删除之后 undefined
document.writeln(obj.callingName);
</script>
</body>
</html>
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>
</head>
<body>
<script>
/*
* 向对象中添加属性
* 属性名：
* - 对象的属性名不强制要求遵守标识符的规范
* 什么乱七八糟的名字都可以使用
* - 但是我们使用是还是尽量按照标识符的规范去做
*
*/
var obj = new Object();
obj.name = "老黑";
/*
* 如果要使用特殊的属性名，不能采用.的方式来操作
* 需要使用另一种方式：
* 语法：对象["属性名"] = 属性值
* 读取时也需要采用这种方式
*
* 使用[]这种形式去操作属性，更加的灵活，
* 在[]中可以直接传递一个变量，这样变量值是多少就会读取那个属性
*/
obj["123"] = 780;
obj["nihao"] = "你好";
var n = "nihao";
document.writeln(obj["123"])
/*
* 属性值
* JS对象的属性值，可以是任意的数据类型
* 甚至也可以是一个对象
*/
var temp = new Object();
temp.name = "骇客";
obj.test = true;
obj.test = undefined;
obj.test = temp;
document.writeln(obj.test.name)
/*
* in 运算符
* - 通过该运算符可以检查一个对象中是否含有指定的属性
* 如果有则返回true，没有则返回false
* - 语法：
* "属性名" in 对象
*/
document.writeln("true" in obj); //false
</script>
</body>
</html>
3、基本数据类型和引用数据类型
- JS中的变量可能包含两种不同数据类型的值:基本数据类型和引用数据类型。
- JS中一共有5种基本数据类型: String、 Number、Boolean、 Undefined、Null
- 基本数据类型的值是无法修改的,是不可变的
- 基本数据类型的比较是值的比较,也就是只要两个变量的值相等,我们就认为这两个变量相等。
引用数据类型
- 引用类型的值是保存在內存中的对象
- 当一个变量是一个对象时,实际上变量中保存的并不是对象本身,而是对象的引用。
- 当从一个变量向另一个变量复制引用类型的值时,会将对象的引用复制到变量中,并不是创建一个新的对象。
- 这时,两个变量指向的是同一个对象。因此,改变其中一个变量会影响另一个
<!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>
</head>
<body>
<script>
/*
* 基本数据类型
* String Number Boolean Null Undefined
*
* 引用数据类型
* Object
*
* JS中的变量都是保存到栈内存中的，
* 基本数据类型的值直接在栈内存中存储，
* 值与值之间是独立存在，修改一个变量不会影响其他的变量
*
* 对象是保存到堆内存中的，每创建一个新的对象，就会在堆内存中开辟出一个新的空间，
* 而变量保存的是对象的内存地址（对象的引用），如果两个变量保存的是同一个对象引用，
* 当一个通过一个变量修改属性时，另一个也会受到影响
*/
var a = 123;
var b = a;
a++;
document.writeln("a = " + a);
document.writeln("b = " + b);
var obj = new Object();
obj.name = "孙悟空";
var obj2 = obj;
//修改obj的name属性
obj.name = "猪八戒";
document.writeln(obj2.name)
</script>
</body>
</html>
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>
</head>
<body>
<script>
//创建一个对象
//var obj = new Object();
/*
* 使用对象字面量来创建一个对象
*/
var obj = {};
//console.log(typeof obj);
obj.name = "孙悟空";
//console.log(obj.name);
/*
* 使用对象字面量，可以在创建对象时，直接指定对象中的属性
* 语法：{属性名:属性值,属性名:属性值....}
* 对象字面量的属性名可以加引号也可以不加，建议不加,
* 如果要使用一些特殊的名字，则必须加引号
*
* 属性名和属性值是一组一组的名值对结构，
* 名和值之间使用:连接，多个名值对之间使用,隔开
* 如果一个属性之后没有其他的属性了，就不要写,
*/
var obj2 = {
name: "猪八戒",
age: 13,
gender: "男",
test: { name: "沙僧" }
};
console.log(obj2.test);
</script>
</body>
</html>
5、函数
函数 function
- 函数也是一个对象
- 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
- 函数中可以保存一些代码在需要的时候调用
- 使用typeof检查一个函数对象时，会返回function
demo实现
<!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>
</head>
<body>
<script>
/*
* 函数 function
* - 函数也是一个对象
* - 函数中可以封装一些功能（代码），在需要时可以执行这些功能（代码）
* - 函数中可以保存一些代码在需要的时候调用
* - 使用typeof检查一个函数对象时，会返回function
*/
//我们在实际开发中很少使用构造函数来创建一个函数对象
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给构造函数
//var fun = new Function("console.log('Hello 这是我的第一个函数');");
//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//调用函数 语法：函数对象()
//当调用函数时，函数中封装的代码会按照顺序执行
//fun();
/*
* 使用 函数声明 来创建一个函数
* 语法：
* function 函数名([形参1,形参2...形参N]){
* 语句...
* }
*/
function fun2() {
console.log("这是我的第二个函数~~~");
alert("哈哈哈哈哈");
document.write("~~~~(>_<)~~~~");
}
// 调用fun2
fun2();
// console.log(fun2);
/*
* 使用函数表达式来创建一个函数
* var 函数名 = function ([形参1，形参2...形参n]){
* 语句。。。
* }
*/
var fun3 = function () {
console.log("我是匿名函数中封装的代码");
}
// 函数调用
fun3();
</script>
</body>
</html>
6、函数参数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 定义一个用来求两个数和的函数
* 可以在函数的()中来指定一个或多个形参（形式参数）
* 多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
* 但是并不赋值
*/
function sum(a, b) {
console.log("a = " + a);
console.log("b = " + b); // undefined
console.log(a + b); // NaN
}
/*
* 在调用函数时，可以在()中指定实参（实际参数）
* 实参将会赋值给函数中对应的形参
*/
/*sum(1,2);
sum(123,456);*/
/*
* 调用函数时解析器不会检查实参的类型,
* 所以要注意，是否有可能会接收到非法的参数，如果有可能则需要对参数进行类型的检查
* 函数的实参可以是任意的数据类型
*/
//sum(123,"hello");
//sum(true , false);
/*
* 调用函数时，解析器也不会检查实参的数量
* 多余实参不会被赋值
* 如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined
*/
// sum(123,456,"hello",true,null);
sum(123);
</script>
</head>
<body>
</body>
</html>
7、返回值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript">
/*
* 创建一个函数，用来计算三个数的和
*
* 可以使用 return 来设置函数的返回值
* 语法：
* return 值
*
* return后的值将会会作为函数的执行结果返回，
* 可以定义一个变量，来接收该结果
*
* 在函数中return后的语句都不会执行
* 如果return语句后不跟任何值就相当于返回一个undefined，
* 如果函数中不写return，则也会返回undefined
* return后可以跟任意类型的值
*
*/
function sum(a, b, c) {
//alert(a + b +c);
var d = a + b + c;
return d;
//return undefined;
}
//调用函数
//变量result的值就是函数的执行结果
//函数返回什么result的值就是什么
var result = sum(4, 7, 8);
//var result = alert("hello");
console.log("result = " + result);
</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>
</head>
<body>
<script>
/*
* 定义一个函数，判断一个数字是否是偶数，如果是返回true，否则返回false
*
* 分析：
* 在自然数中，能被2整除的数称为偶数
* 自然数：0,1,2,3....
*/
function evenNumFlag(param) {
if (param % 2 == 0) {
return true;
}
}
console.log(evenNumFlag(4));
var objec = {
name: 'geekmice',
age: 18
}
// 实参是对象
function isObject(o) {
return o.name + '-' + o.age;
}
var result = isObject(objec);
document.writeln(result);
// 入参是函数
function baoFunction(b) {
console.log(b);
}
baoFunction(result);
</script>
</body>
</html>
8、立即执行函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//函数对象()
/*
* 立即执行函数
* 函数定义完，立即被调用，这种函数叫做立即执行函数
* 立即执行函数往往只会执行一次
*/
/*(function(){
alert("我是一个匿名函数~~~");
})();*/
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
})(123,456);
</script>
</head>
<body>
</body>
</html>
9、对象说明
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个对象
*/
var obj = new Object();
//向对象中添加属性
obj.name = "孙悟空";
obj.age = 18;
//对象的属性值可以是任何的数据类型，也可以是个函数
obj.sayName = function(){
console.log(obj.name);
};
function fun(){
console.log(obj.name);
};
//console.log(obj.sayName);
//调方法
obj.sayName();
//调函数
//fun();
/*
* 函数也可以称为对象的属性，
* 如果一个函数作为一个对象的属性保存，
* 那么我们称这个函数时这个对象的方法
* 调用这个函数就说调用对象的方法（method）
*
* 但是它只是名称上的区别没有其他的区别
*
*/
var obj2 = {
name:"猪八戒",
age:18,
sayName:function(){
console.log(obj2.name);
}
};
obj2.sayName();
</script>
</head>
<body>
</body>
</html>
10、枚举对象中的属性
<!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>
</head>
<body>
<script>
var person = {
name: 'dawson',
age: 18,
sex: '男'
}
for (let i in person) {
document.writeln(i);
document.writeln(person[i]);
}
</script>
</body>
</html>
11、作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 作用域
* - 作用域指一个变量的作用的范围
* - 在JS中一共有两种作用域：
* 1.全局作用域
* - 直接编写在script标签中的JS代码，都在全局作用域
* - 全局作用域在页面打开时创建，在页面关闭时销毁
* - 在全局作用域中有一个全局对象window，
* 它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
* - 在全局作用域中：
* 创建的变量都会作为window对象的属性保存
* 创建的函数都会作为window对象的方法保存
* - 全局作用域中的变量都是全局变量，
* 在页面的任意的部分都可以访问的到
*
* 2.函数作用域
*
*/
var a = 10;
var b = 20;
//var c = "hello";
console.log(window.a);
console.log(window);
function fun(){
console.log("我是fun函数");
}
//window.fun();
//window.alert("hello");
</script>
</head>
<body>
</body>
</html>
12、变量的声明提前
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 变量的声明提前
* - 使用var关键字声明的变量，会在所有的代码执行之前被声明（但是不会赋值），
* 但是如果声明变量时不适用var关键字，则变量不会被声明提前
*
* 函数的声明提前
* - 使用函数声明形式创建的函数 function 函数(){}
* 它会在所有的代码执行之前就被创建，所以我们可以在函数声明前来调用函数
* 使用函数表达式创建的函数，不会被声明提前，所以不能在声明前调用
*/
/*console.log("a = "+a);*/
var a = 123;
//fun();
//函数声明，会被提前创建
function fun(){
console.log("我是一个fun函数");
}
//函数表达式，不会被提前创建
var fun2 = function(){
console.log("我是fun2函数");
};
fun2();
</script>
</head>
<body>
</body>
</html>
13、函数作用域
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 函数作用域
* - 调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
* - 每调用一次函数就会创建一个新的函数作用域，他们之间是互相独立的
* - 在函数作用域中可以访问到全局作用域的变量
* 在全局作用域中无法访问到函数作用域的变量
* - 当在函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用
* 如果没有则向上一级作用域中寻找，直到找到全局作用域，
* 如果全局作用域中依然没有找到，则会报错ReferenceError
* - 在函数中要访问全局变量可以使用window对象
*/
//创建一个变量
var a = 10;
function fun() {
var a = "我是fun函数中的变量a";
var b = 20;
//console.log("a = "+a);
function fun2() {
// 没有指定window对象时候 先从函数作用域内 找
// 找不到的话 再去 全局作用域
console.log("a = " + a);
console.log("a = " + window.a);
}
fun2();
}
fun();
//console.log("b = "+b);
/*
* 在函数作用域也有声明提前的特性，
* 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
* 函数声明也会在函数中所有的代码执行之前执行
*/
// function fun3(){
// fun4();
// //console.log(a);
// var a = 35;
// function fun4(){
// alert("I'm fun4");
// }
// }
//fun3();
// var c = 33;
/*
* 在函数中，不适用var声明的变量都会成为全局变量
*/
// function fun5(){
//console.log("c = "+c);
//c = 10;
//d没有使用var关键字，则会设置为全局变量
// d = 100;
// }
// fun5();
//在全局输出c
//console.log("d = "+d);
// var e = 23;
/*
* 定义形参就相当于在函数作用域中声明了变量
*/
// function fun6(e){
// alert(e);
// }
// fun6();
</script>
</head>
<body>
</body>
</html>
14、debug
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
alert(d);
var a = 10;
var b = "hello";
c = true;
function fun(){
alert("hello");
}
var d = 35;
</script>
</head>
<body>
</body>
</html>
15、this关键字
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 解析器在调用函数每次都会向函数内部传递进一个隐含的参数,
* 这个隐含的参数就是this，this指向的是一个对象，
* 这个对象我们称为函数执行的 上下文对象，
* 根据函数的调用方式的不同，this会指向不同的对象
* 1.以函数的形式调用时，this永远都是window
* 2.以方法的形式调用时，this就是调用方法的那个对象
*/
function fun(){
//console.log("a = "+a+", b = "+b);
console.log(this.name);
}
//fun();
//创建一个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//console.log(obj.sayName == fun);
var name = "全局的name属性";
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//创建一个name变量
var name = "全局";
//创建一个fun()函数
function fun(){
console.log(this.name);
}
//创建两个对象
var obj = {
name:"孙悟空",
sayName:fun
};
var obj2 = {
name:"沙和尚",
sayName:fun
};
//我们希望调用obj.sayName()时可以输出obj的名字
//obj.sayName();
obj.sayName();
</script>
</head>
<body>
</body>
</html>
16、对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个对象
*/
var obj = {
name:"孙悟空",
age:18,
gender:"男",
sayName:function(){
alert(this.name);
}
};
/*
* 使用工厂方法创建对象
* 通过该方法可以大批量的创建对象
*/
function createPerson(name , age ,gender){
//创建一个新的对象
var obj = new Object();
//向对象中添加属性
obj.name = name;
obj.age = age;
obj.gender = gender;
obj.sayName = function(){
alert(this.name);
};
//将新的对象返回
return obj;
}
/*
* 用来创建狗的对象
*/
function createDog(name , age){
var obj = new Object();
obj.name = name;
obj.age = age;
obj.sayHello = function(){
alert("汪汪~~");
};
return obj;
}
var obj2 = createPerson("猪八戒",28,"男");
var obj3 = createPerson("白骨精",16,"女");
var obj4 = createPerson("蜘蛛精",18,"女");
/*
* 使用工厂方法创建的对象，使用的构造函数都是Object
* 所以创建的对象都是Object这个类型，
* 就导致我们无法区分出多种不同类型的对象
*/
//创建一个狗的对象
var dog = createDog("旺财",3);
console.log(dog);
console.log(obj4);
</script>
</head>
<body>
</body>
</html>
17、构造函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个构造函数，专门用来创建Person对象的
* 构造函数就是一个普通的函数，创建方式和普通函数没有区别,
* 不同的是构造函数习惯上首字母大写
*
* 构造函数和普通函数的区别就是调用方式的不同
* 普通函数是直接调用，而构造函数需要使用new关键字来调用
*
* 构造函数的执行流程：
* 1.立刻创建一个新的对象
* 2.将新建的对象设置为函数中this,在构造函数中可以使用this来引用新建的对象
* 3.逐行执行函数中的代码
* 4.将新建的对象作为返回值返回
*
* 使用同一个构造函数创建的对象，我们称为一类对象，也将一个构造函数称为一个类。
* 我们将通过一个构造函数创建的对象，称为是该类的实例
*
* this的情况：
* 1.当以函数的形式调用时，this是window
* 2.当以方法的形式调用时，谁调用方法this就是谁
* 3.当以构造函数的形式调用时，this就是新创建的那个对象
*
*/
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
alert(this.name);
};
}
function Dog(){
}
var per = new Person("孙悟空",18,"男");
var per2 = new Person("玉兔精",16,"女");
var per3 = new Person("奔波霸",38,"男");
var dog = new Dog();
/*console.log(per);
console.log(dog);*/
/*
* 使用instanceof可以检查一个对象是否是一个类的实例
* 语法：
* 对象 instanceof 构造函数
* 如果是，则返回true，否则返回false
*/
//console.log(per instanceof Person);
//console.log(dog instanceof Person);
/*
* 所有的对象都是Object的后代，
* 所以任何对象和Object左instanceof检查时都会返回true
*/
//console.log(dog instanceof Object);
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个Person构造函数
* - 在Person构造函数中，为每一个对象都添加了一个sayName方法，
* 目前我们的方法是在构造函数内部创建的，
* 也就是构造函数每执行一次就会创建一个新的sayName方法
* 也是所有实例的sayName都是唯一的。
* 这样就导致了构造函数执行一次就会创建一个新的方法，
* 执行10000次就会创建10000个新的方法，而10000个方法都是一摸一样的
* 这是完全没有必要，完全可以使所有的对象共享同一个方法
*/
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
//向对象中添加一个方法
//this.sayName = fun;
}
//将sayName方法在全局作用域中定义
/*
* 将函数定义在全局作用域，污染了全局作用域的命名空间
* 而且定义在全局作用域中也很不安全
*/
/*function fun(){
alert("Hello大家好，我是:"+this.name);
};*/
//向原型中添加sayName方法
Person.prototype.sayName = function(){
alert("Hello大家好，我是:"+this.name);
};
//创建一个Person的实例
var per = new Person("孙悟空",18,"男");
var per2 = new Person("猪八戒",28,"男");
per.sayName();
per2.sayName();
//console.log(per.sayName == per2.sayName);
</script>
</head>
<body>
</body>
</html>
18、原型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 原型 prototype
*
* 我们所创建的每一个函数，解析器都会向函数中添加一个属性prototype
* 这个属性对应着一个对象，这个对象就是我们所谓的原型对象
* 如果函数作为普通函数调用prototype没有任何作用
* 当函数以构造函数的形式调用时，它所创建的对象中都会有一个隐含的属性，
* 指向该构造函数的原型对象，我们可以通过__proto__来访问该属性
*
* 原型对象就相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，
* 我们可以将对象中共有的内容，统一设置到原型对象中。
*
* 当我们访问对象的一个属性或方法时，它会先在对象自身中寻找，如果有则直接使用，
* 如果没有则会去原型对象中寻找，如果找到则直接使用
*
* 以后我们创建构造函数时，可以将这些对象共有的属性和方法，统一添加到构造函数的原型对象中，
* 这样不用分别为每一个对象添加，也不会影响到全局作用域，就可以使每个对象都具有这些属性和方法了
*/
function MyClass(){
}
//向MyClass的原型中添加属性a
MyClass.prototype.a = 123;
//向MyClass的原型中添加一个方法
MyClass.prototype.sayHello = function(){
alert("hello");
};
var mc = new MyClass();
var mc2 = new MyClass();
//console.log(MyClass.prototype);
//console.log(mc2.__proto__ == MyClass.prototype);
//向mc中添加a属性
mc.a = "我是mc中的a";
//console.log(mc2.a);
mc.sayHello();
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*
* 创建一个构造函数
*/
function MyClass(){
}
//向MyClass的原型中添加一个name属性
MyClass.prototype.name = "我是原型中的名字";
var mc = new MyClass();
mc.age = 18;
//console.log(mc.name);
//使用in检查对象中是否含有某个属性时，如果对象中没有但是原型中有，也会返回true
//console.log("name" in mc);
//可以使用对象的hasOwnProperty()来检查对象自身中是否含有该属性
//使用该方法只有当对象自身中含有属性时，才会返回true
//console.log(mc.hasOwnProperty("age"));
//console.log(mc.hasOwnProperty("hasOwnProperty"));
/*
* 原型对象也是对象，所以它也有原型，
* 当我们使用一个对象的属性或方法时，会现在自身中寻找，
* 自身中如果有，则直接使用，
* 如果没有则去原型对象中寻找，如果原型对象中有，则使用，
* 如果没有则去原型的原型中寻找,直到找到Object对象的原型，
* Object对象的原型没有原型，如果在Object原型中依然没有找到，则返回undefined
*/
//console.log(mc.__proto__.hasOwnProperty("hasOwnProperty"));
//console.log(mc.__proto__.__proto__.hasOwnProperty("hasOwnProperty"));
//console.log(mc.__proto__.__proto__.__proto__);
//console.log(mc.hello);
//console.log(mc.__proto__.__proto__.__proto__)
</script>
</head>
<body>
</body>
</html>
19、js基础之toString()
<!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>
</head>
<body>
<script>
function Hero(name, age, hobby) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
// 重写Person的toString()
// Hero.prototype.toString = function () {
// return "Person[name=" + this.name + ",age=" + this.age + ",hobby=" + this.hobby + "]";
// }
var h1 = new Hero("戚继光", 16, "打野");
/**
* 当我们直接在页面中打印一个对象时候，实际上输出的对象de toString()方法返回值
* 如果我们希望在输出对象时候不输出[object,object]，可以给对象添加一个toString()方法
*/
console.log(h1);
console.log(h1.toString());
</script>
</body>
</html>
关于Number类型的toString()方法有点特殊，有默认模式和基模式
<!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>
</head>
<body>
<script>
function Hero(name, age, hobby) {
this.name = name;
this.age = age;
this.hobby = hobby;
}
// 重写Person的toString()
// Hero.prototype.toString = function () {
// return "Person[name=" + this.name + ",age=" + this.age + ",hobby=" + this.hobby + "]";
// }
var h1 = new Hero("戚继光", 16, "打野");
/**
* 当我们直接在页面中打印一个对象时候，实际上输出的对象de toString()方法返回值
* 如果我们希望在输出对象时候不输出[object,object]，可以给对象添加一个toString()方法
*/
console.log(h1);
console.log(h1.toString());
var n1 = 100;
var n2 = 100.00;
console.log(n1.toString());
console.log(n1.toString());
console.log(n1.toString(2)); // 转换二级制数据
console.log(n1.toString(8));// 转换八进制数据
console.log(n1.toString(16));// 转换十六进制数据
</script>
</body>
</html>
20、垃圾回收
<!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>
</head>
<body>
<script>
/**
* 垃圾回收(GC)
* - 就想人生活的时间长了会产生垃圾一样，程序运行过程中也会产生垃圾
* 这些垃圾积攒过多以后，会导致程序运行的速度过慢
* 所以我们需要一个垃圾回收机制，来处理程序运行过程中产生的垃圾
* - 当一个对象没有任何的变量或者属性对它进行引用，此时我们将永远无法
* 操作该对象，此时这种对象就是一个垃圾，这种对象过多会占用大量空间内存，
* 导致程序运行变慢，所以这种垃圾必须进行清理
* - js中拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们
* 不需要也不能进行垃圾回收操作
* - 我们需要做的是将不再使用的对象设置null即可
*/
var obj = new Object();
obj = null;
</script>
</body>
</html>
21、数组介绍
21.1、简单使用数组
<!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>
</head>
<body>
<script>
/**
* 内建对象
* 宿主对象
* 自定义对象
*
* 数组（Array）
* - 数组也是一个对象
* - 他和普通对象功能类似，也是用来存储一些值的
* - 不同的是普通对象是使用字符串作为属性名的，而数组是使用数字来作为索引操作元素
* - 索引index
* 从0开始，0,1,2,3...就是索引
* - 数组的存储性能比普通对象要好，开发中我们经常使用数组存储数据
*/
// 1、创建数组对象
var arr = new Array();
// 2、判断数组类型
console.log(typeof arr); // object
// 3、向数组中添加元素
arr[0] = 0;
arr[1] = 1;
arr[2] = 2;
/**
* 4、读取数组元素
* 语法：数组名[索引]
* 如果读取不存在的索引 ，它不会报错而是返回undefined
* */
console.log(arr[1]);
console.log(arr[3]);
/**
* 5、获取数组的长度
* 可以使用length属性来获取数组的长度
* 语法：数组名.length
*
* 注意：
* 对于连续的数组，使用length可以获取数组元素个数（数组长度）
* 对于非连续的数组，使用length会获取数组的最大索引+1，尽量不要创建连续的数组
*/
console.log(arr.length);
/**
* 6、修改length
* 如果修改的length大于原长度，则多出部分空出来
* 如果修改的length小于原长度，则多出的元素被删除
*/
arr.length = 2;
// 此时数组长度2
console.log(arr.length);
/**
* 7、向数组的最后一个位置添加元素
* 语法：数组名[数组名.length]=值
*/
arr[arr.length] = "最后一个值";
console.log(arr);
</script>
</body>
</html>
21.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>
</head>
<body>
<script>
// 1、创建一个数组
var arr = new Array();
/**
* 2、使用字面量创建数组
* 3、语法：[]
*/
var arr1 = [];
console.log(typeof arr1);
// 4、使用字面量创建数组时候，可以在创建时候指定数组中元素
var arr2 = [1, 2, 3, 4, 5];
console.log(arr2[2]);
// 5、使用构造函数创建数组，也可以同事添加元素，将要添加的元素作为构造函数的参数传递
var arr3 = new Array(1, 2, 3, 4);
console.log(arr3);
// 6、创建一个数组，数组只有一个元素10
arr4 = [10];
console.log(arr4);
// 7、创建一个长度为10的数组
arr5 = new Array(10);
console.log(arr5);
// 8、数组可以是任意数据类型
arr6 = ["helol", 123, null, undefined];
console.log(arr6);
// 9、可以是对象
var obj = { sex: "中性" };
arr6[arr6.length] = obj;
console.log(arr6);
// 10、数组元素也可以是函数
arr7 = [function () { alert(1) }, function () { alert(2) }]
console.log(arr7)
</script>
</body>
</html>
21.3、 数组方法
<!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>
</head>
<body>
<script>
// 1、创建一个数组
var arr = ["刘备","关羽","张飞"];
/**
* 2、push()
* - 该方法可以向数组的尾部添加一个或者多个元素，并且返回数组的长度
* - 可以将要添加的元素作为方法的参数传递，这样这些元素将会自动添加到数组的末尾
*/
var res1 = arr.push("黄忠","马超");
console.log(res1); // 5
/**
* 3、pop()
* - 该方法删除数组的最后一个元素，将被删除元素返回
*/
var res2 = arr.pop();
console.log(res2);
console.log(arr.length);
/**
* 4、unshift()
* - 向数组开头添加一个或者多个元素，返回数组长度
* - 前边插入元素以后，其他元素索引会一次调整
*/
arr.unshift("马谡","诸葛亮");
console.log(arr);
/**
* 5、shift()
* - 可以删除数组第一个元素，将删除的元素作为返回值返回
*/
var res3 = arr.shift();
console.log(res3);
/**
* 6、slice()
* - 可以用来从数组提取指定元素
* - 不会改变原数组，而是将截取的元素封装一个新数组返回
* - 参数说明
* 1、截取开始位置索引，包含
* 2、截取结束位置索引，不包含
*/
var res4 = arr.slice(0,3);
console.log(res4);
/**
* 7、splice()
* - 可以用于删除，数组中指定元素
* - 参数
* 1、第一个，表示开始位置索引
* 2、第二个，表示删除的数量
* 3、第三个及其以后，这些元素自动插入开始位置索引前边
*/
// 插入操作
// 从第一个位置开始前面添加元素 "吕布"
var res5 = arr.splice(0,0,"吕布");
console.log(res5);
console.log(arr);
// 删除操作
// 从第一位开始删除两位
var res6 = arr.splice(0,2);
console.log(arr);
</script>
</body>
</html>
后续方法
var arr1 = ["关羽", "张飞", "马超"];
var arr2 = ["诸葛亮", "荀彧", "陆逊"];
/**
* concat()可以连接两个或者多个数组，并将新的数组返回
* 该方法不会对原数组产生影响
* */
var res1 = arr1.concat(arr2, "刘伯温", "信息");
console.log(res1);
/**
* join()
* - 该方法可以将数组转换一个字符串
* - 该方法不会对原数组产生影响，而是转换后的字符串作为结果返回
* - 在join()可以指定一个字符串作为参数，这个字符串将会称为数组中元素的连接符
* - 如果不指定连接符，默认使用，作为连接符
*/
var res2 = arr1.concat(arr2, "刘伯温", "信息").join("*");
console.log(res2);
console.log(typeof res2);
/**
* reverse()
* - 该方法用来翻转数组（前面去后边，后边去前面）
* - 该方法会直接修改原数组
*/
arr1.reverse();
console.log("转换后")
console.log(arr1)
/**
* sort()
* - 可以对数组中的元素进行排序
* - 会影响原数组，默认会按照Unicode编码进行排序
*/
arr1.sort();
console.log(arr1);
/**
* 即使对于纯数字的数组，使用sort排序，也会按照Unicode编码排序
* 所以对数字进行排序时候，肯恩会得到错误的结果
*
* 我们可以自己来定义排序的规则
* 我们可以在sort()添加一个回调函数，来指定排序规则
* 回调函数需要定义两个形参，
* 浏览器将会分别使用数组中的元素作为实参去调用回调函数
* 使用哪个元素调用不确定，但是肯定的是在数组中a一定在b前边
*
* 浏览器会根据回调函数的返回值来决定元素的顺序
* 如果返回一个大于0的值，则元素会交换位置
* 如果返回一个小于0的值，则元素位置不变
* 如果返回一个0，两元素相等，不交换位置
*
* 如果需要升序，返回a-b
* 如果需要降序，返回b-a
*/
var arr3 = [23, 12, 1, 34, 116, 8, 18, 37, 56, 50];
// arr3.sort();
console.log(arr3.sort());
// 1, 116, 12, 18, 23, 34, 37, 50, 56, 8
arr3.sort(function (a, b) {
// return a - b;
return b - a;
})
console.log(arr3);
21.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>
</head>
<body>
<script>
var hero = ["刘备", "关羽", "张飞", "黄忠", "马超", "赵云"];
// 1、使用for循环遍历
for (var i = 0; i < hero.length; i++) {
console.log(hero[i]);
}
// 2、forEach遍历
/**
* - 该方法需要一个函数作为参数
* - 像这种函数，由我们创建不由我们调用的，称为回调函数
* - 数组中有几个元素函数执行几次，每次执行时候，浏览器会将遍历到的元素以实参形式传递进来，我们可以来定义形参，读取内容
* - 第一个参数：当前正在遍历的元素
* - 第二个参数：就是当前正在遍历的元素索引
* - 第三个参数：正在遍历数组
*/
hero.forEach(function (item, index, obj) {
console.log(item);
})
</script>
</body>
</html>
21.5、数组练习
需求：需求：创建一个函数，可以将perArr中的满18岁的person提取出来然后封装到一个新的数组中返回arr
/**
* 需求：创建一个函数，可以将perArr中的满18岁的person提取出来
* 然后封装到一个新的数组中返回arr
*
* 思路
* 1、创建Person构造函数
* 2、perArr添加五条Person数据
* 3、创建一个函数实现
*/
function Person(name, age, sex) {
this.name = name;
this.age = age;
this.sex = sex;
}
var perArr = [
new Person("关羽", 18, "男"),
new Person("张飞", 28, "男"),
new Person("马超", 38, "男"),
new Person("黄忠", 18, "男"),
new Person("赵云", 18, "男"),
];
function overEighteen(arr) {
var tempArr = [];
var j = 0;
for (var i = 0; i < arr.length; i++) {
if (arr[i].age > 18) {
tempArr[j] = arr[i];
j++;
}
}
return tempArr;
}
var temp = overEighteen(perArr);
console.log(temp);
需求：去除数组中重复的数组，并且获取数组的每一个元素
/**
* 需求：去除数组中重复的数组，并且获取数组的每一个元素
* a=[1,3,5,4,1,49,]
* 思路
* 双层
*
* */
var a = [1, 3, 5, 4, 1, 49, 1, 2, 3];
// 删除指定位置的元素
// a.splice(0, 1);
console.log(a.splice(0, 1));
console.log(clearRepeatNum(a));
function clearRepeatNum(arr) {
for (var i = 0; i < arr.length; i++) {
for (var j = i + 1; j < arr.length; j++) {
if (arr[i] === arr[j]) {
arr.splice(j, 1);
j--;
}
}
}
return arr;
}
22、Date对象
/**
* Date对象
* - js中使用Date对象表示一个时间
*/
// 创建一个Date对象
// 如果直接使用构造函数床一个Dae对象，则会
// 封装为当前代码执行的时间
var d = new Date();
console.log(d);
/**
* 创建一个指定的时间对象
* 需要在构造函数中传递一个表示时间的的字符串作为参数
* 日期的格式 月份/日/年 时：分：秒
*/
var d2 = new Date("2/18/2021 11:11:30")
console.log(d2);
/**
* getDate()
* 获取当前日期对象几日
*/
var date = d.getDate();
console.log(date);
/**
* getMonth()
* d2=new Date("12/18/2011 11:11:23");
* 获取当前时间对象的月份
* 返回一个0-11的值
* 0:1月
* 1:2月
* 。。。
* 11:12月
*/
var month = d.getMonth();
console.log(month);
/**
* getFullYear()
* 获取当前日期对象的年份
*/
var year = d.getFullYear();
console.log(year);
/**
* getTime()
* - 获取档期那日期对象的时间戳
* - 时间戳：指的是1970年1月1日，0时0分0秒到当前日期所花费的毫秒数1秒=1000毫秒
* - 计算机底层在保存事件时使用都是时间戳
*/
var time = d.getTime();
console.log(time);
var start = Date.now();
for (var i = 0; i < 100; i++) {
console.log(i);
}
var end = Date.now();
console.log("花费时间" + (end - start) + "毫秒");
23、Math
/**
* Math
* - Math和其他的对象不同，它不是一个构造函数
* - 它属于一个工具类不用创建对象，里面封装数学运算相关的属性
* 比如
* - Math.PI 表示圆周率
*/
console.log(Math.PI);
/**
* abs()可以用来计算一个数的绝对值
*/
console.log(Math.abs(-111));
// Math.ceil()
// 可以对一个数进行向上取整，小数位只要有值自动进1
// Math.floor()
// 可以对一个数进行向下取整，小数部分被舍掉
// Math.round()
// 可以对一个数进行四舍五入
console.log(Math.ceil(3.12)); // 4
console.log(Math.floor(3.12)); // 3
console.log(Math.round(3.12)); // 3
// Math.random() 可以生成一个0-1的随机数
console.log(Math.random()*10); //
// Math.max() 取最大值
// Math.min() 取最小值
console.log(Math.min(1,2,3));//1
console.log(Math.max(1,2,3));//3
// pow(x,y) 返回x的y次方
console.log(Math.pow(3,2)); // 9
// sqrt(x) x开方
console.log(Math.sqrt(36)); // 6
24、包装类
/**
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
*
* js中为我们提供了三个包装类，通过这三个包装类可以将
* 基本数据类型转换对象数据类型
* String()
* 将基本数据类型的字符串转换为String对象
* Number()
* 将基本数据类型的数字转换Number对象
* Boolean()
* 将基本数据类型布尔值转换Boolean
* 注意：一般开发中很少使用基本数据类型的对象
*/
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
//向num中添加一个属性
num.hello = "abcdefg";
//console.log(str === str2);
var b = new Boolean(false);
/*
* 方法和属性之能添加给对象，不能添加给基本数据类型
* 当我们对一些基本数据类型的值去调用属性和方法时，
* 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法
* 调用完以后，在将其转换为基本数据类型
*/
var s = 123;
s = s.toString();
s.hello = "你好";
console.log(s.hello);
25、字符串的方法
// 创建一个字符串
var str = "Hello GeekMice";
/**
* 在底层字符串都是以字符数组形式保存的
* ["H","e","l","l","o"]
*/
/**
* length属性
* 可以用来获取字符串的长度
*/
console.log(str.length); // 14
console.log(str[5]); // 空格
/**
* charAt()
* 返回字符串指定位置的字符
* 根据索引获取指定的字符
*/
var res1 = str.charAt(0); // H
var res2 = str.charAt("G");
console.log(res1);
console.log(res2);
/**
* concat()
* - 可以用来连接两个多个字符串
* 作用和+一样
*/
var res3 = str.concat("泰坦尼克号", "楚门的世界");
console.log(res3); // Hello GeekMice泰坦尼克号楚门的世界
/**
* indexof()
* - 该方法可以检索一个字符串中是否包含指定内容
* - 如果字符串含有该内容，则会返回其第一次出现的索引，如果没有返回-1
* - 可以指定一个第二个参数，指定开始查找的位置
*
* lastIndexOf()
* 类似于indexOf() 从后往前找
*/
var res4 = str.indexOf("G", 0);
var res5 = str.lastIndexOf("G");
console.log(res4);//6
console.log(res5);//6
/**
* slice()
* - 可以从字符串中截取指定的内容
* - 不会影响原字符串，而是将截取到内容返回
* - 参数：
* 第一个，开始位置的索引（包括开始位置）
* 第二个，结束位置的索引（不包括结束位置）
* - 如果省略第二个参数，则会截取到后边所有的
* - 也可以传递一个负数作为参数，负数的话将会从后边计算
*/
str = "abcdefghijk";
result = str.slice(1, 4);// bcd
console.log(result)
result = str.slice(1, -1);// [bcdefghij]
console.log(result)
/**
* substring()
* - 可以用来截取一个字符串，可以slice()类似
* - 参数：
* - 第一个：开始截取位置的索引（包括开始位置）
* - 第二个：结束位置的索引（不包括结束位置）
* - 不同的是这个方法不能接受负值作为参数，
* 如果传递了一个负值，则默认使用0
* - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换
**/
console.log(str.substring(0, 2)); // ab
/*
* substr()
* - 用来截取字符串
* - 参数：
* 1.截取开始位置的索引
* 2.截取的长度
*/
console.log(str.substr(0, 2)); //ab
/*
* split()
* - 可以将一个字符串拆分为一个数组
* - 参数：
* -需要一个字符串作为参数，将会根据该字符串去拆分数组
*/
console.log(str.split());
console.log(typeof str.split());
26、正则表达式
基本操作
/**
* 正则表达式
* - admin@geekmice.com
* 邮件的规则
* 1. 前边可以使xxxx
* 2. 跟着一个@
* 3. 后边可以使xxxx
* 4. .com获取其他的xxxx
*
* - 正则表达式用于定义一些字符串的规则
* 脚手架可以根据表达式，来检查一个字符串是否符号规则
* 获取将字符串中符合规则的内容提取出来
*/
/**
* 创建正则表达式的对象
* 语法：
* var 变量 = new RegExp("正则表达式","匹配模式")
* 使用typeof检查正则对象，会犯规object
* var reg = new RegExp("a"), 这个正则表达式可以用来检查一个字符串中含有a
* 在构造函数中可以传递一个匹配模式作为第二个参数
* 可以是： i-忽略大小写 g-全局匹配模式
*/
var reg = new RegExp("ab","i");
var str = "aB";
/**
* 正则表达式方法
* test()
* 使用这个方法可用来检查一个字符串是否符合正则表达式规则，如果符合true,否则false
*/
var result = reg.test(str);
console.log(result);
/**
* 使用字面量创建正则表达式
* 语法：var 变量 = /正则表达式/匹配模式
* 使用字面量的方式创建更加简单，使用构造函数创建更加灵活
*/
// var reg = new RegExp("a","i");
var reg = /a/i;
console.log(reg.test("a")); // true
console.log(reg.test("A")); // true
console.log(typeof reg); // object
/**
* 创建一个正则表达式，检查一个字符串中是否含有a或者b
* | 或者意思
*/
reg = /a|b/i;
console.log(reg.test("b")); // true
/**
* []里面的内容也是或者的关系
* [ab]==a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[a-z]/;
console.log(reg.test("a"));// true
console.log(reg.test(""));// false
// 检测一个字符串是否含有abc adc aec
reg=/a[bde]c/;
console.log(reg.test("abc")); //true
// [^] 除了
reg=/[^ab]/; // 除了a之外
console.log(reg.test("c")); // true
console.log(reg.test("a")); // false
reg=/[^0-9]/; // 除了0-9任意均为true
console.log(reg.test("k"))
搭配方法使用
var str = "1a2b3c4d5E";
/**
* split()
* 可以将一个字符串拆为一个数组
* 方法中可以传递一个正则表达式作为参数，这样方法将会根据正则表达式拆分字符串
* 这个方法即使不指定全局匹配，也会都拆分
*/
var result = str.split(/[A-z]/);
console.log(result); // [ '1', '2', '3', '4', '5', '' ]
/**
* search()
* 可以搜索字符串中是否含有指定内容
* 如果搜索到指定内容，则返回第一次出现索引，如果没有搜索到返回-1
* 它可以接受一个正则表达式作为参数，然后根据正则表达式检索字符串
* search()只会查找第一个，设置全局匹配没用
*/
str = "hello abc hello adc aec";
// 搜索字符串中是否含有abc,ade,add
result=str.search(/a[bde]c/)
console.log(result); // 7
/**
* 可以根据正则表达式，从一个字符串中将符合条件的内容提取出来
* 默认情况我们的match只会找到第一个符合要求的内容，
* 找到以后就停止检索
* 我们可以设置正则表达式为全局匹配模式，这样就会匹配所有内容
* 可以为一个正则表达式设置多个匹配模式，且顺序无所谓
*
*
* match()会将匹配的内容封装一个数组返回，即使只查询到一个结果
*/
str = "1a2a3a4a5e6f7A8B9C";
result = str.match(/[a-z]/ig);
// [
// 'a', 'a', 'a',
// 'a', 'e', 'f',
// 'A', 'B', 'C'
// ]
console.log(result);
/**
* replace()
* 可以将字符串中指定内容替换新的内容
* 参数
* 1、被替换的内容，可以接受一个正则表达式作为参数
* 2、新的内容
* 默认只会替换一个
*/
// result = str.replace(/[a-z]/gi,"@_@");
result = str.replace(/[a-z]/gi,"");
console.log(result);
//1@_@2@_@3@_@4@_@5@_@6@_@7@_@8@_@9@_@
// 123456789
2584
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
