JavaScript基础
一、forEach
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // forEach() 需要一个函数作为参数 // IE8及以下的浏览器不支持该方法 // 像这种函数,由我们创建但是不由我们调用的,我们称回调函数 // 数组中有几个元素,函数就会执行几次 // 每次执行时,浏览器会将遍历到的元素以实参的形式传递进来 // 我们可以定义形参来读取这些内容 // 浏览器会在回调函数中传递三个参数 // 第一个参数:就是当前正在遍历的元素 // 第二个参数:就是当前正在遍历的元素的索引 // 第三个参数:就是正在遍历的数组 var arr = ["abc","def","ghi","jkl","mno"]; arr.forEach(function(value , index , obj){ console.log(value); }); </script> </head> <body> </body> </html>
二、slice和splice
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 1.slice()可以用来从数组中提取指定元素 // 该方法不会改变原数组,而是将截取到的元素封装到一个新数组中返回 // 参数: // 第一个参数：截取开始位置的索引，包含开始索引 // 第二个参数：截取结束位置的索引，不包含结束索引 // 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 // 索引可以是负值,就是从后往前计算 var arr = ["abc","def","ghi","jkl","mno"]; var result = arr.slice(0,2); result = arr.slice(1,-3); console.log(result); // 2.splice()可以用来删除数组中提取指定元素 // 使用splice()会影响到原数组,会将指定元素从原数组中删除 // 并将删除的元素作为返回值返回 // 参数: // 第一个参数：表示开始位置的索引 // 第二个参数：表示删除的数量 // 第三个参数及其后：可以传递一些新的元素，这些元素将会自动插入到开始位置索引前面 var result = arr.splice(0,1,"pqr"); console.log(arr); console.log(result); </script> </head> <body> </body> </html>
三、arguments
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript"> // 在调用函数时,浏览器每次都会传递进两个隐含的参数: // 1.函数的上下文对象this // 2.封装实参的对象arguments // arguments是一个类数组对象，它可以通过索引来操作数据也可以获取长度 // 在调用函数时,我们所传递的实参都会在arguments中保存 // 我们即使不定义，也可以通过arguments来使用实参(只不过比较麻烦) // arguments[0]表示第一个实参 // arguments[1]表示第二个实参 // arguments还有一个属性callee // 这个属性对应一个函数对象，就是当前正在指向的对象 function fun(){ // console.log(arguments instanceof Array); // console.log(Array.isArray(arguments)); // arguments.length用来获取实参的长度 console.log(arguments.length); // console.log(arguments[1]); console.log(arguments.callee); } fun("hello",true); </script> </head> <body> </body> </html>
四、数组的剩余方法
<script type="text/javascript"> var arr = ["abc","def","ghi"]; var arr2 = ["jkl","mno","pqr"]; // 1.concat()可以连接两个或多个数组,并将新的数组返回 // 该方法不会对原数组产生影响 var result = arr.concat(arr2,"stu"); console.log(result); // 2.join()可以将数组转化为字符串 // 该方法不会对原数组产生影响，而是将转换后的字符串作为结果返回 // 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符 // 如果不指定连接符,则默认使用逗号作为连接符 var arr = ["abc","def","ghi"]; result = arr.join("@"); console.log(result); // 3.reverse()用来反转数组(颠倒) // 该方法会直接修改原数组 var arr = ["abc","def","ghi"]; arr.reverse(); console.log(arr); // 4.sort()对数组中的元素进行排序 // 也会影响原数组,默认会按照Unicode编码进行排序 var arr = ["b","d","e","a","c"]; arr.sort(); // 也可以把数组排序后在反转 // arr.reverse(); console.log(arr); // 对于纯数字的数组排序,也会按照Unicode编码进行排序,所以可能会得到错误的结果 // 我们可以自己来指定排序规则 // 可以在sort()中添加一个回调函数,来指定排序规则 // 回调函数中需要定义两个形参，浏览器会分别使用数组中的元素作为实参去调用回调函数 // 使用哪个元素调用不确定,但肯定的是在数组中a一定在b前面 // 浏览器会根据回调函数的返回值来决定元素的顺序 // 如果返回一个大于0的值，则元素会交换位置 // 如果返回一个小于0的值，则元素位置不变 // 如果返回一个等于0的值，则认为元素相等,也不会交换位置 // 如果需要升序排列,使用return a-b; // 如果需要降序排列,使用return b-a; var arr = [5,4,1,3,7,2,6]; arr.sort(function(a,b){ // if(a>b){ // return 1; // }else if(a<b){ // return -1; // }else{ // return 0; // 或升序排列 return a-b; // 降序排列 return b-a; }); console.log(arr); </script>
五、call和apply
<script type="text/javascript"> // call()和apply()这两个方法都是函数对象的方法,需要通过函数对象来调用 // 当对函数调用call()和apply()都会调用函数执行 // 在调用call()和apply()可以将一个对象指定为第一个参数 // 此时这个对象将会成为函数执行时的this // 1.call()方法可以将实参在对象之后依次传递 // fun.call(obj,2,3); // 2.apply()方法需要将实参封装到一个数组中统一传递 // fun.apply(obj,[2,3]); // this的情况: // 1.以函数形式调用时,this永远都是window // 2.以方法的形式调用时,this是调用方法的对象 // 3.以构造函数的形式调用时,this是新创建的的那个对象 // 4.使用call和apply调用时,this是指定的那个对象 function fun(){ alert("我是fun函数！"); } fun.call(); fun.apply(); fun(); </script>
