数组
一、数组
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 内建对象 * 宿主对象 * 自定义对象 * * 数组(Array) * 数组也是一个对象 * 它和我们普通对象功能类似,也是用来存储一些值的 * 不同的是普通对象是使用字符串作为属性名的, * 而数组时使用数字来作为索引操作元素 * 索引: * 从0开始的整数就是索引 * 数组的存储性能比普通对象要好,在开发中经常使用数组来存储一些数据 */ //创建数组对象 var arr = new Array(); //使用typeof检查一个数组时,会返回object console.log(typeof arr); /* * 向数组中添加元素 * 语法:数组[索引] = 值 */ arr[0] = 10; arr[1] = 33; arr[2] = 22; arr[3] = 44; arr[10] = 31; arr[100] = 90; /* * 读取数组中的元素 * 语法:数组[索引] * 如果读取不存在的索引,他不会报错而是返回undefined */ console.log(arr[3]); /* * 获取数组的长度 * 可以使用length属性来获取数组的长度(元素的个数) * 语法:数组.length * * 对于连续的数组,使用length可以获取到数组的长度(元素的个数) * 对于非连续的数组,使用length会获取到数组的最大的索引+1 * 尽量不要创建非连续的数组 */ console.log(arr.length); console.log(arr); /* * 修改length * 如果修改的length大于原长度,则多出部分会空出来 * 如果修改的length小于原长度,则多出的元素会被删除 */ arr.length = 10; console.log(arr.length); console.log(arr); arr.length = 2; console.log(arr.length); console.log(arr); arr[4] = 50; arr[5] = 60; //向数组的最后一个位置添加元素 //语法:数组[数组.length] = 值; arr[arr.length] = 70; arr[arr.length] = 80; arr[arr.length] = 90; console.log(arr); //创建一个数组 var ar = new Array(); console.log(typeof ar) //使用字面量来创建数组 //语法:[] var ar2 = []; console.log(typeof ar2); //使用字面量创建数组时,可以在创建时就指定数组中的元素 var ar3 = [1,2,3,4,5,10]; console.log(ar3[3]); //使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作文构造函数的参数传递,元素之间使用,隔开 var arr2 = new Array(10,20,30); console.log(arr2); //创建一个数组,数组中只有一个元素10 arr3 = [10]; console.log(arr3.length) //创建一个长度为10的数组 arr4 = new Array(10); console.log(arr4.length); //数组中的元素可以是任意的数据类型 arr5 = ["hello",1,true,null,undefined]; //也可以是对象 var obj = {name:"孙悟空"}; arr5[arr.length] = obj; console.log(arr5) arr6 = [{name:"孙悟空"},{name:"沙和尚"},{name:"猪八戒"}]; console.log(arr6) //也可以是一个函数 arr7 = [function(){alert(1)},function(){alert(2)}]; console.log(arr7); arr7[0](); //数组中也可以放数组,如下这种数组称为二维数组 arr8 = [[1,2,3],[3,4,5],[5,6,7]]; console.log(arr8[1]); </script> </head> <body> </body> </html>
二、数组的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚"]; /* * push() * 该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度 * 可以将要添加的元素作为方法的参数传递, * 这样这些元素将会自动添加到数组的末尾 * 该方法会将数组新的长度作为返回值返回 */ var result = arr.push("唐僧","蜘蛛精","白骨精","玉兔精"); console.log(arr); console.log("result = "+result); /* * pop() * 该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回 */ result = arr.pop(); console.log(arr); console.log("result = "+result); /* * unshift() * 向数组开头添加一个或多个元素,并返回新的数组长度 * 向前边插入元素以后,其他的元素索引会依次调整 */ console.log(arr); arr.unshift("牛魔王","二郎神"); console.log(arr); /* * shift() * 可以删除数组的第一个元素,并将被删除的元素作为返回值返回 */ result = arr.shift(); result = arr.shift(); console.log(arr); console.log("result = "+result); </script> </head> <body> </body> </html>
三、数组的遍历
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; //所谓的遍历数组,就是将数组中所有的元素都取出来 console.log(arr[0]); console.log(arr[1]); console.log(arr[2]); console.log(arr[3]); for(var i=0 ; i<arr.length ; i++){ console.log(arr[i]); } </script> </head> <body> </body> </html>
四、数组练习
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function Person(name , age , gender){ this.name = name; this.age = age; } //修改Person原型的toString Person.prototype.toString = function(){ return "Person[name="+this.name+",age="+this.age+"]"; }; //创建一个Person对象 var per = new Person("孙悟空",18); var per2 = new Person("猪八戒",28); var per3 = new Person("红孩儿",8); var per4 = new Person("蜘蛛精",16); var per5 = new Person("二郎神",38); /* * 将这些person对象放入到一个数组中 */ var perArr = [per,per2,per3,per4,per5]; /* * 创建一个函数,可以将perArr中的满18岁的Person提取出来, * 然后封装到一个新的数组中并返回 * arr 形参,要提取信息的数组 */ function getAdult(arr){ //创建一个新的数组 var newArr = []; //遍历arr,获取arr中Person对象 for(var i=0 ; i<arr.length ; i++){ var p = arr[i]; //判断Person对象的age是否大于等于18 if(p.age >= 18){ //如果大于等于18,则将这个对象添加到newArr中 //将对象放入到新数组中 newArr.push(p); } } //将新的数组返回 return newArr; } var result = getAdult(perArr); console.log(result); </script> </head> <body> </body> </html>
五、forEach
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 一般都是使用for循环去遍历数组, * JS中还提供了一个方法,用来遍历数组 * forEach() * 这个方法只支持IE8以上的浏览器 * IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8,则不要使用forEach * 还是使用for循环来遍历 */ //创建一个数组 var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /* * forEach()方法需要一个函数作为参数 * 这种函数由开发者创建但是不由开发者调用的,称为回调函数 * 数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来, * 可以来定义形参,来读取这些内容 * 浏览器会在回调函数中传递三个参数: * 第一个参数,就是当前正在遍历的元素 * 第二个参数,就是当前正在遍历的元素的索引 * 第三个参数,就是正在遍历的数组 */ arr.forEach(function(value , index , obj){ console.log(index+" "+value+" "+obj); }); </script> </head> <body> </body> </html>
六、数组的方法2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> var arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; /* * slice() * 可以用来从数组提取指定元素 * 该方法不会改变元素数组,而是将截取到的元素封装到一个新数组中返回 * 参数: * 1.截取开始的位置的索引,包含开始索引 * 2.截取结束的位置的索引,不包含结束索引 * 第二个参数可以省略不写,此时会截取从开始索引往后的所有元素 * 索引可以传递一个负值,如果传递一个负值,则从后往前计算 * -1 倒数第一个 * -2 倒数第二个 */ var result = arr.slice(1,4); console.log(result); result = arr.slice(3); console.log(result); result = arr.slice(1,-2); console.log(result); /* * splice() * 可以用于删除数组中的指定元素 * 使用splice()会影响到原数组,会将指定元素从原数组中删除 * 并将被删除的元素作为返回值返回 * 参数: * 第一个,表示开始位置的索引 * 第二个,表示删除的数量 * 第三个及以后。。 * 可以传递一些新的元素,这些元素将会自动插入到开始位置索引前边 */ arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; var result = arr.splice(3,0,"牛魔王","铁扇公主","红孩儿"); console.log(arr); console.log(result); arr = ["孙悟空","猪八戒","沙和尚","唐僧","白骨精"]; result = arr.splice(1,2,"牛魔王","铁扇公主","红孩儿"); console.log(arr); console.log(result); </script> </head> <body> </body> </html>
七、数组练习2
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个数组 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++){ //console.log(arr[i]); /*获取当前元素后的所有元素*/ for(var j=i+1 ; j<arr.length ; j++){ //console.log("---->"+arr[j]); //判断两个元素的值是否相等 if(arr[i] == arr[j]){ //如果相等则证明出现了重复的元素,则删除j对应的元素 arr.splice(j,1); //当删除了当前j所在的元素以后,后边的元素会自动补位 //此时将不会在比较这个元素了,所有需要再比较一次j所在位置的元素 //使j自减 j--; } } } console.log(arr); </script> </head> <body> </body> </html>
八、数组的方法3
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> var arr = ["孙悟空","猪八戒","沙和尚"]; var arr2 = ["白骨精","玉兔精","蜘蛛精"]; var arr3 = ["二郎神","太上老君","玉皇大帝"]; /* * concat()可以连接两个或多个数组,并将新的数组返回 * 该方法不会对原数组产生影响 */ var result = arr.concat(arr2,arr3,"牛魔王","铁扇公主"); console.log(result) /* * join() * 该方法可以将数组转换为一个字符串 * 该方法不会对原数组产生影响,而是将转换后的字符串作为结果返回 * 在join()中可以指定一个字符串作为参数,这个字符串将会成为数组中元素的连接符 * 如果不指定连接符,则默认使用,作为连接符 */ arr = ["孙悟空","猪八戒","沙和尚","唐僧"]; result = arr.join("@-@"); console.log(result) /* * reverse() * 该方法用来反转数组(前边的去后边,后边的去前边) * 该方法会直接修改原数组 */ arr.reverse(); console.log(arr) arr = ["b","d","e","a","c"]; /* * sort() * 可以用来对数组中的元素进行排序 * 也会影响原数组,默认会按照Unicode编码进行排序 */ arr.sort(); console.log(arr) arr.reverse(); console.log(arr) /* * 即使对于纯数字的数组,使用sort()排序时,也会按照Unicode编码来排序, * 所以对数字进排序时,可能会得到错误的结果。 * * 可以自己来指定排序的规则 * 在sort()添加一个回调函数,来指定排序规则, * 回调函数中需要定义两个形参, * 浏览器将会分别使用数组中的元素作为实参去调用回调函数 * 使用哪个元素调用不确定,但是肯定的是在数组中a一定在b前边 * 浏览器会根据回调函数的返回值来决定元素的顺序, * 如果返回一个大于0的值,则元素会交换位置 * 如果返回一个小于0的值,则元素位置不变 * 如果返回一个0,则认为两个元素相等,也不交换位置 * * 如果需要升序排列,则返回 a-b * 如果需要降序排列,则返回b-a */ arr = [5,4,2,1,3,6,8,7]; arr.sort(function(a,b){ //升序排列 if(a > b){ return 1; }else if(a < b){ return -1; }else{ return 0; } }); console.log(arr); arr = [5,4,2,1,3,6,8,7]; arr.sort(function(a,b){ //降序排列 if(a > b){ return -1; }else if(a < b){ return 1; }else{ return 0; } }); console.log(arr); arr = [5,4,2,1,3,6,8,7]; arr.sort(function(a,b){ //升序排列 return a-b; }); console.log(arr); arr = [5,4,2,1,3,6,8,7]; arr.sort(function(a,b){ //升序排列 return b-a; }); console.log(arr); </script> </head> <body> </body> </html>
九、函数的方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> function fun(a,b) { console.log("a = "+a); console.log("b = "+b); console.log(this); } var obj = { name: "obj", sayName:function(){ console.log(this.name); } }; /* * call()和apply() * 这两个方法都是函数对象的方法,需要通过函数对象来调用 * 当对函数调用call()和apply()都会调用函数执行 * 在调用call()和apply()可以将一个对象指定为第一个参数 * 此时这个对象将会成为函数执行时的this * call()方法可以将实参在对象之后依次传递 * apply()方法需要将实参封装到一个数组中统一传递 * * this的情况: * 1.以函数形式调用时,this永远都是window * 2.以方法的形式调用时,this是调用方法的对象 * 3.以构造函数的形式调用时,this是新创建的那个对象 * 4.使用call和apply调用时,this是指定的那个对象 */ fun.call(obj,2,3); fun.apply(obj,[1,4]); var obj2 = { name: "obj2" }; fun.apply(); fun.call(); fun(); fun.call(obj); fun.apply(obj); fun(); obj.sayName.apply(obj2); </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.length可以用来获取实参的长度 * 即使不定义形参,也可以通过arguments来使用实参, * 只不过比较麻烦 * arguments[0] 表示第一个实参 * arguments[1] 表示第二个实参 。。。 * 它里边有一个属性叫做callee, * 这个属性对应一个函数对象,就是当前正在指向的函数的对象 * */ function fun(a,b){ console.log(arguments instanceof Array); console.log(Array.isArray(arguments)); console.log(arguments[1]); console.log(arguments.length); console.log(arguments.callee == fun); } fun("hello",true); </script> </head> <body> </body> </html>
十一、Date
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * Date对象 * 在JS中使用Date对象来表示一个时间 */ //创建一个Date对象 //如果直接使用构造函数创建一个Date对象,则会封装为当前代码执行的时间 var d = new Date(); //创建一个指定的时间对象 //需要在构造函数中传递一个表示时间的字符串作为参数 //日期的格式 月份/日/年 时:分:秒 var d2 = new Date("2/18/2011 11:10:30"); /* * getDate() * 获取当前日期对象是几日 */ var date = d2.getDate(); /* * getDay() * 获取当前日期对象是周几 * 会返回一个0-6的值 * 0 表示周日 * 1表示周一 * ...... */ var day = d2.getDay(); /* * getMonth() * 获取当前时间对象的月份 * 会返回一个0-11的值 * 0 表示1月 * 1 表示2月 * 11 表示12月 */ var month = d2.getMonth(); /* * getFullYear() * 获取当前日期对象的年份 */ var year = d2.getFullYear(); console.log(d) console.log(d2); console.log("date = "+date); console.log("day = "+day); console.log("month = "+month); console.log(year); /* * getTime() * 获取当前日期对象的时间戳 * 时间戳,指的是从格林威治标准时间的1970年1月1日,0时0分0秒到当前日期所花费的毫秒数(1秒 = 1000毫秒) * 计算机底层在保存时间时使用都是时间戳 */ var time = d2.getTime(); console.log(time) console.log(time/1000/60/60/24/365); var d3 = new Date("1/1/1970 0:0:0"); time = d3.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)+"毫秒"); </script> </head> <body> </body> </html>
十二、Math
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * Math * Math和其他的对象不同,它不是一个构造函数, * 它属于一个工具类不用创建对象,它里边封装了数学运算相关的属性和方法 * 比如Math.PI 表示的圆周率 */ console.log(Math.PI); /* * abs()可以用来计算一个数的绝对值 */ console.log(Math.abs(-1)); /* * Math.ceil() * 可以对一个数进行向上取整,小数位只有有值就自动进1 * Math.floor() * 可以对一个数进行向下取整,小数部分会被舍掉 * Math.round() * 可以对一个数进行四舍五入取整 */ console.log(Math.ceil(1.1)); console.log(Math.floor(1.99)); console.log(Math.round(1.4)); /* * Math.random() * 可以用来生成一个0-1之间的随机数 * 生成一个0-10的随机数 * 生成一个0-x之间的随机数 * Math.round(Math.random()*x) * * 生成一个1-10 * 生成一个x-y之间的随机数 * Math.round(Math.random()*(y-x)+x) */ for(var i=0 ; i<100 ; i++){ console.log(Math.round(Math.random()*10)); console.log(Math.round(Math.random()*20)); console.log(Math.round(Math.random()*9)+1); console.log(Math.round(Math.random()*8)+2); //生成1-6之间的随机数 console.log(Math.round(Math.random()*5+1)); } /* * max() 可以获取多个数中的最大值 * min() 可以获取多个数中的最小值 */ var max = Math.max(10,45,30,100); var min = Math.min(10,45,30,100); console.log(min); console.log(max) /* * Math.pow(x,y) * 返回x的y次幂 */ console.log(Math.pow(12,3)); /* * Math.sqrt() * 用于对一个数进行开方运算 */ console.log(Math.sqrt(2)); </script> </head> <body> </body> </html>
十三、包装类
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> /* * 基本数据类型 * String Number Boolean Null Undefined * 引用数据类型 * Object * * 在JS中为提供了三个包装类,通过这三个包装类可以将基本数据类型的数据转换为对象 * String() * 可以将基本数据类型字符串转换为String对象 * Number() * 可以将基本数据类型数值转换为Number对象 * Boolean() * 可以将基本数据类型的布尔值转换为Boolean对象 * 注意:在实际应用中不会使用基本数据类型的对象, * 如果使用基本数据类型的对象,在做一些比较时可能会带来一些不可预期的结果 */ //创建一个Number类型的对象 //num = 3; var num = new Number(3); var num2 = new Number(3); console.log(num == num2 ) var str = new String("hello"); var str2 = new String("hello"); console.log(str == str2) var bool = new Boolean(true); var bool2 = true; //向num中添加一个属性 num.hello = "abcdefg"; console.log(num.hello) var b = new Boolean(false); if(b){ alert("我运行了~~~"); } /* * 方法和属性只能添加给对象,不能添加给基本数据类型 * 当对一些基本数据类型的值去调用属性和方法时, * 浏览器会临时使用包装类将其转换为对象,然后在调用对象的属性和方法 * 调用完以后,在将其转换为基本数据类型 */ var s = 123; s = s.toString(); s.hello = "你好"; console.log(s.hello); console.log(typeof s); </script> </head> <body> </body> </html>
十四、字符串的相关方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript"> //创建一个字符串 var str = "Hello Weekend"; /* * 在底层字符串是以字符数组的形式保存的 * ["H","e","l"] */ /* * length属性 * 可以用来获取字符串的长度 */ console.log(str.length); console.log(str[6]); /* * charAt() * 可以返回字符串中指定位置的字符 * 根据索引获取指定的字符 */ str = "中Hello Weekend"; var result = str.charAt(8); console.log(result) /* * charCodeAt() * 获取指定位置字符的字符编码(Unicode编码) */ result = str.charCodeAt(0); console.log(result) /* * String.formCharCode() * 可以根据字符编码去获取字符 */ result = String.fromCharCode(0x2692); console.log(result) /* * concat() * 可以用来连接两个或多个字符串 * 作用和+一样 */ result = str.concat("你好","再见"); console.log(result) /* * indexof() * 该方法可以检索一个字符串中是否含有指定内容 * 如果字符串中含有该内容,则会返回其第一次出现的索引 * 如果没有找到指定的内容,则返回-1 * 可以指定一个第二个参数,指定开始查找的位置 * * lastIndexOf(); * 该方法的用法和indexOf()一样, * 不同的是indexOf是从前往后找, * 而lastIndexOf是从后往前找 * 也可以指定开始查找的位置 */ str = "hello world"; result = str.indexOf("h",1); console.log(result) result = str.lastIndexOf("h",5); console.log(result) /* * slice() * 可以从字符串中截取指定的内容 * 不会影响原字符串,而是将截取到内容返回 * 参数: * 第一个,开始位置的索引(包括开始位置) * 第二个,结束位置的索引(不包括结束位置) * 如果省略第二个参数,则会截取到后边所有的 * 也可以传递一个负数作为参数,负数的话将会从后边计算 */ str = "abcdefghijk"; result = str.slice(1,4); console.log(result) result = str.slice(1,-1); console.log(result) /* * substring() * 可以用来截取一个字符串,和slice()类似 * 参数: * 第一个:开始截取位置的索引(包括开始位置) * 第二个:结束位置的索引(不包括结束位置) * 不同的是这个方法不能接受负值作为参数, * 如果传递了一个负值,则默认使用0 * 而且他还自动调整参数的位置,如果第二个参数小于第一个,则自动交换 */ result = str.substring(0,1); console.log(result) /* * substr() * 用来截取字符串 * 参数: * 1.截取开始位置的索引 * 2.截取的长度 */ str = "abcdefg"; result = str.substr(3,2); console.log(result) /* * split() * 可以将一个字符串拆分为一个数组 * 参数: * 需要一个字符串作为参数,将会根据该字符串去拆分数组 */ str = "abcbcdefghij"; result = str.split("d"); console.log(result) /* * 如果传递一个空串作为参数,则会将每个字符都拆分为数组中的一个元素 */ result = str.split(""); console.log(Array.isArray(result)); console.log(result[0]); console.log(result); /* * toUpperCase() * 将一个字符串转换为大写并返回 */ str = "abcdefg"; result = str.toUpperCase(); console.log(result) /* * toLowerCase() * 将一个字符串转换为小写并返回 */ str = "ABCDEFG"; result = str.toLowerCase(); console.log(result); </script> </head> <body> </body> </html>