『笔记』JavaScript基础学习笔记 4

内建对象

二、函数的方法

1、 call() 和 apply()

{alert type="success"}

• 这两个方法都是函数对象的方法，需要通过函数对象来调用
• 当对函数调用call()和apply()都会调用函数执行
• 在调用call()和apply()可以将一个对象指定为第一个参数，此时这个对象将会成为函数执行时的 this
• call()方法可以将实参在对象之后依次传递
• apply()方法需要将实参封装到一个数组中统一传递
  {/alert}

this的情况：

{alert type="error"}

1. 以函数形式调用时，this永远都是window
2. 以方法的形式调用时，this是调用方法的对象
3. 以构造函数的形式调用时，this是新创建的那个对象
4. 使用call()和apply()调用时，this是指定的那个对象
   {/alert}

function fun(){
  // alert(this.name);
  console.log("a="+a);
  console.log("b="+b);
}

var obj = {
    name:"obj",
    sayName:function(){
    alert(this.name);
    }
};

// fun.call();
// fun.apply();
// fun();

fun.call(obj,2,2);
fun.apply(obj,[2,3]);
  

var obj2 = {
  name:"obj2"
};

fun.call(obj);
fun.apply(obj2);
// fun(); //this为window
obj.sayName.apply(obj2);

三、 arguments 对象

在调用函数时，浏览器每次都会传递进两个隐含的参数

1. 函数的上下文对象this
2. 封装实参的对象arguments
3. arguments是一个类数组对象，可以通过索引来操作数据，也可以获取长度
4. 在调用函数时，所传递的实参都会在arguments中保存
5. arguments.length可以用来获取实参的长度

6. 即使不定义形参，也可以通过arguments来使用实参

   • arguments[0]表示第一个实参
   • arguments[1]表示第二个实参。。。。。。
7. arguments里面有一个属性叫做callee，这个属性对应一个函数对象，就是当前正在指向的函数的对象

function fun(){
  // console.log(arguments instanceof Array);
  // console.log(Array.isArray(arguments));
  // console.log(arguments.length);
  // console.log(arguments[1]);
  console.log(arguments.callee);
}
fun("hello",true);

四、 Date对象

在JS中使用Date对象来表示一个时间

{alert type="success"}

• 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间
• 创建一个指定的时间对象，需要在构造函数中传递一个表示时间的字符串作为参数
• 日期的格式： 月份/日/年份 时:分:秒
  {/alert}

{alert type="error"}

• getDate() 获取当前日期对象是几日
• getDay() 获取当前日期对象是周几， 会返回0-6的值，0表示周日
• getMonth() 获取当前时间对象的月份， 会返回0-11的值，0表示1月.....11表示12月
• getFullYear() 获取当前时间对象的四位数年份
• getTime() 获取当前日期对象的时间戳
• 时间戳，指的是从格林威治标准时间的1970年1月1日0时0分0秒到当前日期所花费的毫秒数 （1秒=1000毫秒）
• 计算机底层在保存时间时使用的都是时间戳
• 可以使用时间戳来测试代码执行的性能
  {/alert}

//创建一个Date对象
var d = new Date();

//创建一个指定的时间对象
var d2 = new Date("12/03/2016 11:10:30")

var date = d2.getDate();
var day = d2.getDay();
var month = d2.getMonth();
var year = d2.getFullYear();
var time = d2.getTime();

console.log("date="+date);
console.log("day="+day);
console.log("month="+month);
console.log("year="+year);
console.log("time="+time/1000/60/60/24/365);

var d3 = new Date("1/1/1970 0:0:0");// 表示东八区北京时间
time = d3.getTime():
console.log(time);

//获取当前的时间戳
time = Date.now();
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)+"毫秒");

五、 Math对象

Math和其他的对象不同，他不是一个构造函数，属于工具类不用创建对象，他里面封装了数学运算相关的属性和方法

{callout color="#f0ad4e"}

• Math.PI 返回圆周率
• Math.abs() 返回数的绝对值
• Math.ceil() 可以对一个数进行向上取整，小数位只要有值就自动进1
• Math.floor() 可以对一个数进行向下取整，小数部分会被舍掉
• Math.round() 可以对一个数进行四舍五入取整
• Math.random() 可以用来生成0-1之间的随机数，生成一个x-y之间的随机整数： Math.round(Math.random()*(y-x)+x)
• Math.max() 可以获取多个数中的最大值
• Math.min() 可以获取多个数中的最小值
• Math.pow(x,y) 返回x的y次幂
• Matn.sqrt() 对一个数进行开方运算
  {/callout}

console.log(Math.PI); //返回圆周率
console.log(Math.abs(-1)); //返回绝对值1
console.log(Math.ceil(1.1)); //向上取整，返回2
console.log(Math.floor(1.99)); //向下取整，返回1
console.log(Math.round(1.4)); //进行四舍五入取整，返回1
console.log(Math.random()); //生成一个0-1之间的随机数

//生成一个0-10的随机整数
for(var i=0; i<100; i++){
  console.log(Math.round(Math.random()*10));
}

var max = Math.max(10,45,30,100);
var max = Math.min(10,45,30,100);
console.log(max);
console.log(min);

console.log(Math.pow(12,3));
console.log(Math.sqrt(2));

console.log(max);
console.log(min);

console.log(Math.pow(12,3));
console.log(Math.sqrt(2)); //开方运算

六、包装类

1. 基本数据类型： String Number Boolean Null Undefined
2. 引用数据类型：Object

1、包装类

在JS中提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

在实际应用中不会使用基本数据类型的对象

1. String() 可以将基本数据类型字符串转换为String对象
2. Number() 可以将基本数据类型的数字转换为Number对象
3. Boolean() 可以将基本数据类型的布尔值转换为Boolean对象

var a = 123;
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var bool = new Boolean(true);
var bool2 = true;

//向num中添加一个属性
num.hello = "abcdef";

console.log(num.hello);
console.log(num == num2);//返回false，对象永远不会相等
console.log(bool == bool2); // 返回true，会做转义比较

var b = new Boolean(fasle);
if(b){
  alert("能运行")
}

//方法和属性只能添加给对象，不能添加给基本数据类型
//当对一些基本数据类型使用包装类将其转换为对象，然后再调用对象的属性和方法
//调用完以后，再将其转换为基本数据类型，但是不会保存
var s = 123;
s = s.toString();
s.hello = "你好";
console.log(s);
console.log(s.hello);//返回undefined

2、字符串的相关方法

在底层字符串是以字符数组的形式保存的

{callout color="#f0ad4e"}

• length属性 可以用来获取字符串的长度
• charAt() 可以返回字符串中指定位置的字符
• charCodeAt() 可以返回字符串中指定字符的字符编码（Unicode编码）
• formCharCode() 可以根据字符编码去获取字符
• concat() 可以用来连接两个或多个字符串
• indexOf() 可以从前向后检索一个字符串中是否含有指定内容,如果有则返回第一次出现的引索，如果不存在则返回-1，可以指定第二个参数指定开始查找的位置
• lastIndexOf() 该方法用法与indexOf()一样，不同的是该方法是从后往前找
• slice(开始截取索引,结束位置索引) 可以从字符串中截取指定的内容，不会影响原字符串，而是将截取到的内容返回
• substring(开始截取索引,结束位置索引) 可以截取一个字符串，和slice()类似，不同的是该方法不能接收负值，负值默认变为0，还会自动调整参数的位置，如果第二个参数小于第一个参数，则自动交换位置
• substr(开始位置的索引,截取的长度) 可以用来截取字符串
• split(字符串作为参数) 可以将一个字符串拆分为一个数组，如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素
• toUpperCase() 将一个字符串转换为大写并返回
• toLowerCase() 将一个字符串转换为小写并返回
  {/callout}

//创建一个字符串
var str = "Hello nihao";
console.log(str.length);
console.log(str[0]); // 返回H

var result = str.charAt(1);
console.log(result); //返回e

var result1 = str.charCodeAt(1);
console.log(result1); //返回101

//可以根据字符编码去获取字符
var result2 = String.formCharCode(0x2692);
console.log(result2); //返回 锤子

var result3 = str.concat("你好","再见");
console.log(result3); //返回 hello你好再见

var result4 = str.indexOf("e",);
console.log(result4); //返回1

str = "absadksbdjka";
result = str.slice(1,2);
console.log(result);
result = str.substring(2,1);
console.log(result);

str = "abc,bcd,def,fgh";
result = str.split("");
console.log(Array.isArray(result));
console.log(result);

str = "abcdefg";
result = str.toUpprCace();
str = "ABCDEFG";
result = str.toLowerCace();
console.log(result);

七、正则表达式

1、正则表达式的简介

用于定义一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否符合规则，或者将字符串中符合规则的内容提取出来

1. 语法： var 变量 = new RegExp("正则表达式","匹配模式";
2. 使用typeof检查正则对象，会返回object

3. 在构造函数中可以传递一个匹配模式作为第二个参数

   • i 忽略大小写
   • g 全局匹配模式

{alert type="success"}
正则表达式的方法

• test() 可以用来检查一个字符串是否符合正则表达式的规则，符合返回true，否则返回false
  {/alert}

//创建正则表达式的对象
var reg = new RegExp("a");
var str = "a";

var result = reg.test(str);
console.log(result);
console.log(reg.test("bcabc"));

2、使用字面量创建正则表达式

语法： var 变量 = /正则表达式/匹配模式;

使用字面量的方式创建正则表达式更加简单，但是使用构造函数创建更加灵活

var reg = new RegExp("a","i");
reg = /a/i;

console.log(typeof reg);
console.log(reg.test("abc"));

//创建一个正则表达式，检查一个字符串中是否有a或b
//使用|表示 或 的意思
reg = /a|b/;

//创建一个正则表达式检查一个字符串在是否有字母
//[]里的内容也是 或 的关系
//[ab]=a|b
//[a-z] 任意小写字母
//[A-Z] 任意大写字母
//[A-z] 任意字母
//[0-0] 任意数字
reg = /[A-z]/;

//检查一个字符串中是否含有abc或adc或aec
reg = /a[bde]c/;

// [^ ] 除了方括号里的内容
reg = /[^ab]/;
console.log(reg.test("bacd"));

reg = /[0-9]/
console.log(reg.test(123));

3、字符串和正则表达式相关的方法

（1） split()

将一个字符串拆分为一个数组

• 该方法中可以传递一个正则表达式作为参数，则将会根据正则表达式去拆分字符串
• 该方法即使不指定全局匹配，也会全部拆分

var str = "1a2b3c4d5e6f7";

var result = str.split(/[A-z]/);
console.log("result="+result);

（2） search()

1. 可以搜索字符串中是否含有指定内容
2. 如果搜索到指定内容，则会返回第一次出现的索引，没有搜索到则返回-1
3. 可以接受一个正则表达式作为参数，然后根据正则表达式去检索字符串
4. 只会查找第一个，即使设置全局匹配也没用

var str = "hello abc hello aec";
// 搜索字符串中是否含有abc或aec或afc
var result = str.search(/a[bef]c/);
console.log(result);

（3） match()

可以根据正则表达式从一个字符中将符合条件的内容提取出来

{alert type="success"}

1. 默认情况下match只会找打第一个符合要求的内容，找到后就会停止检索
2. 可以设置正则表达式为全局匹配模式，这样会匹配到所以的内容
3. 可以为一个正则表达式设置多个匹配模式，且无顺序要求
4. match()会将匹配到的内容封装到一个数组中返回，即使只查询到一个结果
   {/alert}

var str = "1a2b3c4d5e6f7A8B9C";

var result = str.match(/[a-z]/ig);
console.log("result="+result[2]);

（4） replace()

可以将字符串中指定内容替换为新的内容,默认只会替换第一个

语法： replace(被替换的内容,新的内容)

var str = "1a2b3c4d5e6f7A8B9C";
// 搜索字符串中是否含有abc或aec或afc
var result = str.replace(/a-z/gi,"");
console.log(result);

4、正则表达式语法

（1） 量词：可以设置一个内容出现的次数

语法：var reg = /元素{次数}/

{alert type="success"}

• 量词只对它前边的一个内容起作用
• {n} 正好出现n次
• {m,n} 出现m至n次
• {n,} 出现n次以上
• + 出现至少1次，相当于{1,}
• * 出现0个或多个，相当于{0,}
• ? 出现0次或1次，相当于{0,1}
• ^ 表示开头
• $ 表示结尾
• 如果在正则表达式中同时使用 ^ 和 $ 则要求字符串必须完全符合正则表达式
  {/alert}

//创建一个正则表达式，检查一个字符串中是否含有aaa
var reg = /a{3}/;
reg = /(ab){3}/;
reg = /b{3}/;
reg = /ab{3}c/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
console.log(reg.test("abbbbbc"));

//检查一个字符串是否以a开头
reg = /^a/; //匹配开头的a
reg = /a$/; //匹配结尾的a
console.log(reg.test("abbbbbca"));

reg = /^a$/;
console.log(reg.test("a"));

例：

创建一个正则表达式，用来检查一个字符串是否为一个合法的手机号

/*手机号的规则
1 3 567890123（11位）
1、以1开头
2、第二位3-9任意数字
3、三位以后任意数字9个

^1  [3-9]   [0-9]{9}$
*/
var phoneStr = "13567890123";
var phoneReg = /^1[3-9][0-9]{0}$/;
console.log(phoneReg.test(phoneStr));

（2）元字符

{callout color="#b8cf89"}

• . 表示任意字符
• 在正则表达式中使用作为转义字符
• \. 表示.
• \\ 表示\
• 注意：使用构造函数时，由于他的参数是一个字符串，而 \ 是字符串中转义字符，如果要使用 \ 则需要使用 \\ 来代替
  {/callout}

{alert type="success"}

• \w 任意字母、数字、_ ，相当于 [A-z0-9_]
• \W 除了字母、数字、_ ，相当于 [^A-z0-9_]
• \d 任意数字，相当于[0-9]
• \D 除了数字，相当于[/^0-9]
• \s 空格
• \S 除了空格
• \b 单词边界,用来标记一个独立的单词
• \B 除了单词边界
  {/alert}

//检查一个字符串中是否含有.
var reg = /\./;
console.log(reg.test("@#ad.c"));

var reg = /\\/;
console.log(reg.test("b.\\"));
console.log("b.\\");//输出 b.\

reg = new RegExp("\\.");
console.log(reg);

reg = /\w/;
reg = /\W/;
console.log(reg.test("_"));

reg = /\s/;
reg = /\S/;

//创建一个正则表达式检查一个字符串中是否含有单词child
reg = /\bchild\b/;
console.log(reg.test("hello child"));

//接收一个用户的输入
//var str prompt("请输入你的用户名:");

var str = "    he  llo    ";
//去除字符串中的空格
//去除空格就是使用""空串来替换空格
console.log(str);

//str = str.replace(/\s/g,"");

//去除开头的空格^
str = str.replace(/^\s*/,"");
//去除结尾的空格$
str = str.replace(/\s*$/,"");
//整合为一个表达式，使用|和g来进行全局匹配
str = str.replace(/^\s*|\s*$/g,"");
console.log(str);

5、邮件的正则表达式

/* hello.nihao@abc.com.cn
任意字母数组下划线.任意字母下划线@任意字母数组.任意字母（2-5位）.任意字母（2-5位）
*/

//   \w{3,}  (\.\w+)*  @  [A-z0-9]+  (\.[A-z]{2,5})(1,2)

var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5})(1,2)$/;

var email = "abc@abc.com.123";

console.log(emailReg.test(email));