JavaScript入门到精通（八）

 
本章节需要重点掌握对数组相关方法的使用!
 

71. slice和splice

slice：从数组中提取指定元素，不会改变原数组

语法：slice（start，end）
参数：截取开始的位置索引，包含开始索引；截取结束的位置索引，不包含结束索引

第二个参数可以省略不写，此时会截取从开始索引往后的所有元素
索引可以传递一个负值，表示后面索引位置

splice：删除元素并向数组添加新元素，指定元素会将原数组中删除并返回被删除元素

语法：splice（start，num）
参数：删除开始的位置索引，包含开始索引；删除元素的数量
    splice（start，num，…）
参数：删除开始的位置索引，包含开始索引；删除元素的数量；插入新元素到开始位置索引前面

var arr = ["张三","李四","王五","大雄","静香"];

a = arr.slice(1,2);//索引1开始，不到索引2
console.log(a);
a = arr.slice(2);//索引2开始，到末尾
console.log(a);
a = arr.slice(1,-1);//索引1开始，不到最后一个
console.log(a);
console.log(arr);//slice不改变原数组

a = arr.splice(0,2);
console.log(arr);//splice删除后改变原数组
console.log(a);//被删除元素

a = arr.splice(1,0,"Tom","Jerry");//不删除元素，在索引1位置插入2个新元素
console.log(arr);
console.log(a);

练习：去除数组中重复数字

var arr = [1,2,3,2,2,1,3,4,2,5];

 

72. 数组去重练习

var arr = [1,2,3,2,2,1,3,4,2,5];

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--;//避免splice删除连续重复元素问题
        }
    }
}

console.log(arr);

 

73. 数组剩余方法

concat( )：连接两个或多个数组，并将新数组返回，不会改变原数组

join( )：可以将数组转换为字符串并返回字符串，不会改变原数组
    可以指定一个字符串作为参数，成为数组中元素的连接符，默认逗号

reverse( )：颠倒数组中元素的顺序，会改变原数组

sort( )：对数组中元素进行排序，默认按照Unicode编码进行排序，会改变原数组
    对数字进行排序，可能得到错误的结果
    在sort( )中添加回调函数并传递两个参数，可指定排序规则
      浏览器根据回调函数返回值决定元素的顺序
        如果返回一个大于0的值，则元素会交换位置
        如果返回一个小于0的值，则元素位置不变
        如果返回一个等于0的值，则元素相等位置不变
      例如：升序排列a-b，降序排列b-a

var arr1 = ["张三","李四","王五","大雄","静香"];
var arr2 = [11,2,6,8,9,3,76];

console.log(arr1.concat(arr2,"迪迦"));//concat()连接数组或元素

console.log(arr1.join("-"));//join()将数组转换为字符串，并设置连接符为-

console.log(arr1.reverse());//反转数组

console.log(arr2.sort());//sort()排序得到错误结果
console.log(arr2.sort(function(a,b){return a-b}));//正确升序排列

 

74. call()和apply()

call( )和apply( )方法都是函数调用的方法，需要通过函数对象来调用

当函数调用call( )和apply( )都会调用函数执行
在调用call( )和apply( )可以将一个指定对象作为第一个参数，这个对象成为函数执行的this

call( )方法可以将实参在对象之后依次传递
apply( )方法需要将实参封装到一个数组中统一传递

function fun(a,b){
    console.log(this);
    console.log(a);
    console.log(b);
}

// fun.call();//函数对象调用call()会执行函数
// fun.apply();//函数对象调用apply()会执行函数

var obj1 = {
    name:"张三",
    sayName:function(){
        console.log(this.name);
    }

};
var obj2 = {
    name:"李四"
};
// fun.call(obj1);//调用者this为obj对象
// fun.apply(obj1);//调用者this为obj对象

obj1.sayName();
obj1.sayName.apply(obj2);//指定this为obj2进行调用

fun.call(obj1,2,3);
fun.apply(obj1,[2,3]);//实参需封装到数组中进行传递

this情况：
   以函数形式调用时，this永远是window
   以方法形式调用时，this是调用方法的对象
   以构造函数形式调用时，this是新创建的对象
   以call( )和apply( )调用时，this是指定的传参对象

 

75. arguments

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

• 函数的上下文对象this
• 封装实参的对象arguments

arguments是一个类数组对象，也可以通过索引获取长度

在调用函数时，所传递的实参都会在arguments中保存
即时不定义形参，可以使用arguments来使用实参

Arguments中属性callee，对应着一个当前正在执行的函数对象

function fun(a,b){
    console.log(arguments instanceof Array);//不是数组类型
    console.log(Array.isArray(arguments));//不是数组类型
    console.log(arguments.length);
    console.log(arguments.callee);//当前正在执行的函数对象
}

fun("张三"," ","");

 

76. Date对象

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

getDate( )：获取当前日期对象日的信息
getDay( )：获取当前日期对象是周几，0表示周日
getMonth( )：获取当前日期对象月的信息，0表示一月
getTime( )：返回 1970 年 1 月 1 日至今的毫秒数，表示时间戳

可以当前时间戳来测试代码执行时间，例如：var time = Date.now( );

查看Date对象其它属性和方法

var d = new Date("10/1/2022 13:14:00");

console.log(d);

console.log(d.getDate());//1号
console.log(d.getDay());//星期六
console.log(d.getMonth());//9表示10月
console.log(d.getTime());//时间戳。毫秒数

var startTime = Date.now();
var sum = 0
for(var i=0;i<=1000000;i++){
    sum += i;
}
var endTime = Date.now();
console.log("程序执行了"+(endTime-startTime)+"毫秒");

 

77. Math

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

abs( )：返回一个数的绝对值
ceil( )：对数进行向上取整
floor( )：对数进行向下取整
round( )：对数进行四舍五入取整
random( )：产生0-1之间的随机数，不包括0和1
   例如生成[0,x]之间随机数：Math.round(Math.random( )*x);
   生成[x,y]之间随机整数：Math.round(Math.random( )*(y-x)+x);
max( )：获取多个数中的最大值
min( )：获取多个数中的最小值
pow( )：获取x的y次幂

查看Math更多属性和方法

console.log(Math.abs(-13.14));
console.log(Math.abs("张三"));
console.log(Math.ceil(13.14));
console.log(Math.floor(13.14));
console.log(Math.round(Math.random(9-3)+1));
console.log(Math.max(1,2,3));
console.log(Math.min(1,2,3));
console.log(Math.pow(2,Math.PI));

【注意】可以看到当传入字符串当作实参时，求绝对值输出NaN，涉及到强制类型转换

 

78. 包装类

在JS中提供了3个包装类，可以将基本数据类型转换为包装类

String( )：将基本数据类型转换为Stirng对象
Number( )：将基本数据类型转换为Number对象
Boolean( )：将基本数据类型转换为Boolean对象

但实际开发中使用基本数据类型对象作比较时，可能得到错误结果

方法和属性只能添加给对象，不能添加给基本数据类型
当我们对一些基本数据类型去调用属性和方法时，浏览器会临时使用包装类将其转换为对象，然后再调用对象的属性和方法，调完以后，再转换为基本数据类型

因此不使用包装类进行转换，但可以直接使用基本数据类型调用相应对象的方法

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

console.log(typeof num);
console.log(typeof str);
console.log(typeof bool);

var s = 123;
s = s.toString();
s.hello = "你好";
console.log(s);
console.log(s.hello);//浏览器转换2次的对象不为同一对象，输出hello属性为undifined
console.log(typeof s);

 

79. 字符串的方法

在底层字符串以字符数组的形式保存的
属性length：获取字符串的长度

字符串方法一般不会对原字符串发生改变

charAt( )：返回字符串中指定位置的字符，根据索引获取指定的字符
charCodeAt( )：获取字符串中在指定的位置的字符的 Unicode 编码
fromCharCode( )：将Unicode 编码转为字符，使用String对象调用
concat( )：连接两个或多个字符串，作用和+一样
indexOf( )：可以检索一个字符串中是否含有指定内容，有则返回第一次出现的索引，没有则返回-1，可以指定第二个参数，表示开始查找的位置
lastIndexOf( )：与indexof方法使用类似，但为从后往前开始，可以指定第二个参数，表示开始查找的位置
slice( )：可以从字符串中截取指定内容，第一个参数开始位置的索引，包括开始位置；
    第二个参数结束位置的索引，不包括结束位置，传递负数作为参数，表示后面位置
substring( )：提取字符串中两个指定的索引号之间的字符；该方法不能接收负值作为参数，负值作为0；
    若第二个参数小于第一个参数则会自动交换位置
substr( )：用来截取字符串，第一个参数表示截取开始位置的索引，第二个参数表示截取的长度
split( )：可以将一个字符串拆分一个数组，需要一个字符串作为参数，根据该字符串拆分
toLowerCase( )：把字符串转换为小写，会改变原数组
toUpperCase( )：把字符串转换为大写，会改变原数组

str = "Hello, World!";

console.log(str.charAt(0));
console.log(str.charCodeAt(0));
console.log(String.fromCharCode(39));
console.log(str.concat("hi"));
console.log(str.indexOf("l",4));
console.log(str.lastIndexOf("o",4));
console.log(str.slice(2,-2));
console.log(str.substring(3,2));
console.log(str.substr(1,3));
console.log(str.split(""));
console.log(str.toLowerCase());
console.log(str.toUpperCase());

 

80. 正则表达式简介

正则表达式用于定义一些字符串的规则，计算机可以根据正则表达式检查一个字符串是否符合规则

创建正则表达式：
   语法：var 变量 = new RegExp(“正则表达式”,”匹配模式”);

使用typeof检查正则表达式会返回object

在构造函数中可以传递一个匹配模式作为第二个参数
   i ：忽略大小写
  g ：全局匹配模式

正则表达式的方法：
   Test( )，使用这个方法可以检查一个字符串是否符合正则表达式的规则，符合返回true

var reg = new RegExp("a");

var str = 'abc';
var result = reg.test(str);
console.log(result);//含a

console.log(reg.test("Abcd"));//没有a

var reg = new RegExp("a","i");//忽略大小写，含有a
console.log(reg.test("Abcd"));
var reg = new RegExp("a","g");//全局匹配
console.log(reg.test("Abcd"));

 
 
 

下一章节将对正则表达式进行更加深入了解并对DOM进行简单介绍!