JavaScript函数及其属性,自调用函数,全局方法对象,数组排序,void运算符,JS内置对象之Date,Math,Number,String,一维数组,二维数组及其方法
(1)JavaScript函数
函数:类似于Java中的方法,封装一段逻辑功能,以实现重复调用。
JavaScript函数是被设计为执行特定任务的代码块。
JavaScript函数会在某代码调用它时被执行。
JS中定义函数的三种方式:
方式1:
var show = function(){
alert("abc");
}
show();
方式2:
function test(){
alert("我爱你");
}
test();
方式3:
var str=new Function("a","b","alert(a+b)");
str(2,3);
JS中的形参不需要声明数据类型
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//JS中的形参不需要声明数据类型
var show = function(a, b) {
alert(a + b);
}
show(10, 20);
function add(a, b) {
//直接使用return返回
alert(a);
alert(b);
alert(a * b);
}
var v = add(10, 20);
alert(v);
//注意:JS中的形参和实参,不需要一一对应
var sum = add();
alert(sum);
var v2 = add(10, 20, 30, 40);
alert(v2);
</script>
</head>
<body>
</body>
</html>
自调用函数
(function showHello(a,b){
alert("你好");
}());
可以看到,函数得到了执行,这就是自调用函数,在声明函数完成之后就会被自动调用,需要注意的是,自调用函数的格式
(function 函数名(){
函数体;
})();
(1)自调用函数需要外层被一对括号包围。
(2)自调用函数需要在函数尾部加一个括号();
(3)函数名可写可不写,一般自调用函数是给匿名函数用的,因为匿名函数是没有函数名的,不能直接被调用。
函数的arguments属性
arguments是一个类数组对象,包含着传入函数中的所有参数,主要用途是保存函数参数,但这个对象还有一个名叫callee的属性,该属性是一个指针,只向拥有这个arguments对象的函数。
//函数又是个对象,他有一个属性 arguments 是一个数组,可以接收所有实参
var test=function(){
return+arguments[0]+arguments[1]+arguments[2];
}
var sum=test(20,30,50);
alert(sum);
(2)JS中的全局方法对象
Infinity
一个数值,表示无穷大,有Infinity和-Infinity。
(1)Infinity 的初始值是Number.POSITIVE_INFINITY
(2)用0作除数会产生Infinity
(3)比无穷大还大的值仍然是无穷大
(4)Infinity(正无穷大)大于任何值。该值和数学意义上的无穷大很像,例如任何正值乘以 Infinity 结果为 Infinity,
任何数值(除了Infinity 和 -Infinity)除以 Infinity 为 0。
(5)NaN 属性是一个不可配置(non-configurable)、不可枚举、不可写(non-writable)的属性,所以无法使用 for/in 循环
来枚举 NaN 属性,也不能用 delete 运算符来删除它。
NaN
表示 Not-A-Number 的值。NaN 属性的初始值就是 NaN,和 Number.NaN 的值一样。
(1)在现代浏览器中(ES5中), NaN 属性是一个不可配置(non-configurable)、不可枚举、不可写(non-writable)的属性,
所以无法使用 for/in 循环来枚举 NaN 属性,也不能用 delete 运算符来删除它。
(2)但在ES3中,这个属性的值是可以被更改的,但是也应该避免覆盖。
(3)等号运算符(== 和 ===) 不能被用来判断一个值是否是 NaN。必须使用 Number.isNaN()或isNaN()函数。
(4)NaN 与所有值都不相等,包括它自己(在JavaScript中唯一一个不等于自己的值):NaN === NaN; // false
(5)NaN是一个数字,类型为number :typeof NaN //number
(6)NaN转为数字为NaN,转为布尔值为false
(7)0 除以0会返回NaN ,但是其他数除以0则不会返回NaN,而是Infinity。
undefined
在JavaScript中,undefined这个词有多重含义。undefined是全局对象的一个属性
(1)一个未初始化的变量的值为undefined,一个没有传入实参的形参变量的值为undefined,如果一个函数什么都不返回,则该函数默认
返回undefined.
(2)首字母大写的Undefined表示的是一种数据类型,小写的undefined表示的是属于这种数据类型的唯一的一个值.
(3)在JavaScript代码中,你看到的undefined最有可能是全局对象的一个属性,该属性的初始值是就是前面所说的原始值undefined,
还有种情况就是,这个undefined是个局部变量,就像其他普通变量一样,没有任何特殊性,它的值不一定是undefined,但通常情况下都是的.
下面我们所说的undefined,都指的是window.undefined这个属性.
(4)在ES5中,window.undefined成了一个不可写,不可配置的数据属性,它的值永远是undefined,但是undefined这个词不是保留字,
可以被重新声明并赋值,所以直接使用undefined是不保险的,可以用void 0来获得一个纯正的undefined。
(5)必须使用严格相等运算符===来判断一个值是否是undefined,而不能使用普通的相等运算符==,因为在JavaScript中null == undefined
是返回true的
(6)如果一个变量根本没有被声明,只有使用typeof判断才不会报错typeof x === 'undefined'。用相等运算符判断会抛出异常。
(对已声明但未初始化的和未声明的变量执行typeof,都返回"undefined"。)
(7)undefined转为数字为NaN,转为布尔值为false
isNaN
用来判断一个值是否为 NaN。注:isNaN函数包含一些非常有意思的强制转换规则;你也可以通过 ECMAScript 6 中定义的 Number.isNaN()
或者 typeof 来判断一个值是否为非数值
(1)如果isNaN函数的参数不是Number类型, isNaN()会首先尝试将这个参数转换为数值,然后才会对转换后的结果是否是NaN进行判断
(空字符串和布尔值会被强制转换为数值0或1,对它们isNaN返回false)而isNaN(undefined)返回true
(2)ECMAScript (ES6)包含了Number.isNaN()函数。通过Number.isNaN(x)来检测变量x是否是一个非数值将会是一种可靠的做法。然而,
在缺少Number.isNaN函数的情况下, 通过表达式(x != x) 来检测变量x是否是NaN会更加可靠。
parseFloat
将参数中指定的字符串解析成为一个浮点数字并返回.parseFloat是个全局函数,不属于任何对象.
(1)参数字符串前置的空白符会被忽略。
(2)它会正确解析:正负号(+或-),数字(0-9),小数点,或者科学记数法中的指数(e或E),当它遇到其它字符时,会忽略之后的所有字符,
并立即返回结果
(3)如果参数字符串的第一个字符不能被解析成为数字,则parseFloat返回NaN
(4)最好通过调用isNaN函数来判断parseFloat的返回结果是否是NaN。如果让NaN作为了任意数学运算的操作数,则运算结果必定也是NaN.
(5)parseFloat 也可转换和返回Infinity值. 可以使用isFinite 函数来判断结果是否是一个优先的数值(非Infinity,-Infinity, 或NaN).
(6)该函数通过正则表达式的方式,在需要更严格地转换float值时可能会有用: (只接受纯数字值)
parseInt
将给定的字符串以指定基数(radix/base)解析成为整数。radix是一个2到36之间的整数值,用于指定转换中采用的基数。比如参数"10"表示
使用我们通常使用的十进制数值系统。总是指定该参数可以消除阅读该代码时的困惑并且保证转换结果可预测。当忽略该参数时,不同的实现
环境可能产生不同的结果。
(1)parseInt 函数将第一个参数(字符串)解析并试图返回一个整数或者NaN(Not a Number)。如果第一个字符不能被转换成数字,
parseInt返回NaN。如果结果不是NaN,那么返回值是把第一个参数看作是radix参数指定的进制下的数,然后把它转换成十进制的整数
(2)如果 parseInt 遇到了不属于radix参数所指定的基数中的字符,那么该字符和其后的字符都将被忽略。接着返回已经解析的整数部分。
parseInt 将截取整数部分。开头和结尾的空白符允许存在,会被忽略。
var a=parseInt("2000abc");
var b=parseFloat("3.14abc");
alert(a+b); //2003.14
var c=parseInt("abc2000");
var d=parseFloat("abc3.14");
alert(c+d); //NaN
var e=parseInt("2000abc");
var f=parseFloat("abc3.14");
alert(e+f); //NaN
(3)JavaScript中的数组排序问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var arr=[20,1,11,35,120,305,24];
//sort()空参的排序方式,是按照字典顺序排列的。
arr.sort();
alert(arr);//1,11,120,20,24,305,35
//我们要按照元素的大小来排序
var bjp=function(a,b){
return a-b;//正 负 0
}
/* //匿名函数,可以作为参数传递
function(a,b){
return a-b;//正 负 0
} */
arr.sort(function(a,b){
return a-b;//正 负 0
});
alert(arr);//1,11,20,24,35,120,305
//反转数组中的元素
arr.reverse();
alert(arr);//305,120,35,24,20,11,1
//slice() 从某个已有的数组中返回选定的元素
var arr2=[20,1,11,35,120,305,24];
//根据起始索引和终止索引,截取旧数组中的一部分元素,到一个新数组中,含头不含尾。
var newArr=arr2.slice(0,4);
alert(newArr);//20,1,11,35
</script>
</head>
<body>
</body>
</html>
(4)JavaScript语法之void运算符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function toBaidu(){
//alert("进入百度");
if(window.confirm("你要跳转到外部网站,你确定吗?")){
window.open("https://www.baidu.com");
}
}
</script>
</head>
<body>
<!-- a标签,默认有两个行为,可以点击,可以跳转到其他界面 -->
<a href="https://www.baidu.com">百度一下</a>
<!-- 我只想保留a标签可以点击的功能,但是不想让他跳转页面 -->
<a href="#">百度一下</a>
<!-- 我只想保留a标签可以点击的功能,但是不想让他跳转页面 -->
<a href="javascript:void(0)">百度一下</a>
<!-- 点击a标签可以调用函数 -->
<a href="javascript:void(toBaidu())">百度一下</a>
<!-- 这样写也可以拦截a标签的跳转 -->
<a href="javascript:;">百度一下</a>
</body>
</html>
(5)JavaScript内置对象之Date对象
Date对象:用于处理日期和时间。
创建Date对象的语法:var myDate=new Date();
var myDate = new Date();
//获取到的是从1970年到现在间隔的毫秒值
var time = myDate.getTime();
alert(time);
//获取年月日,时分秒
var year = myDate.getFullYear(); //获取年
var month = myDate.getMonth(); //获取月
var day = myDate.getDate();//获取日
var hour = myDate.getHours(); //获取时
var min = myDate.getMinutes(); //获取分
var second = myDate.getSeconds(); //获取秒
document.write(year + "-" + month + "-" + day + "-" + hour + "-" + min + "-" + second);
toLocaleString() 根据本地时间格式,把Date对象转换为字符串
toLocaleTimeString() 根据本地时间格式,把Date对象的时间部分转换为字符串
toLocaleDateString() 根据本地时间格式,把Date对象的日期部分转换为字符串
var dateStr=myDate.toLocaleString();
alert(dateStr);
var timeString =moment().format('YYYY-MM-DD HH-mm-ss dddd');
document.write(timeString);
var n=moment("1985-03-08","YYYY-MM-DD").fromNow();
alert(n);
(6)JavaScript内置对象之Math对象
Math对象,不需要new,直接使用对象名调用方法即可
Math.random();随机产生0—1之间的随机数 var num=Math.random()100;
Math.round(3.14);对小数进行四舍五入 得到一个整数var n=Math.round(Math.random()100);
Math.min(15,25);//取最小值
Math.max(15,25);//取最大值
Math.abs(-2);//返回数的绝对值
Math.floor(2.6);//向下取整
Math.ceil(3.6);//向上取整
//随机取1--100以内的整数
for(var i=0;i<100;i++){
var v=Math.random()*100;
//向上取整
var m=Math.ceil(v);
document.write(m);
document.write("<br>");
}
(7)JavaScript内置对象之Number对象
Number 对象是原始数值的包装对象
创建Number对象的语法:
var myNum=new Number(value);
var myNum=Number(value);
var myNum1 = new Number(100);
var myNum2 = new Number("100");
var myNum3 = new Number("3,14");
var v = myNum2 * 1;
alert(myNum2 + myNum1);
/* MAX_VALUE 可表示的最大的数 1.0 4.0
MIN_VALUE 可表示的最小的事 */
//Number.MAX_VALUE 直接使用对象名来调用
//toFixed 把数字转换为字符串,结果的小数点后有指定位数的数字
var myNum4 = Number(3.141592678);
var str=myNum4.toFixed(6);//小数部分会自动四舍五入
alert(str);
alert(typeof str);
(8)JavaScript内置对象之string对象
String对象用于处理文本(字符串)
创建String对象的语法:new String(s); String(s);
var str=new String("zkj");
var str2=new String("我爱你");
var s="嘿嘿";
//length 属性,获取字符串的长度
var length ="zkj".length;
返回值:当String()和运算符new 一起作为构造函数使用时,它返回一个新创建的string对象,存放的是字符串s或s的字符串表示当不用new运算符调用String()时,它只是把S转换成原始的字符串,并返回转换后的值。
alert(typeof str);//object
alert(typeof str2);//object
alert(typeof s);//string
String对象中的方法:
charAt() 返回在指定的位置的字符
例:var v="abcd";
var a=v.charAt(2);
concat() 连接字符串
例:var v="abc"; var w="def";
var z=v.concat(w);
indexOf() 根据字符检索此符在字符串中的索引
例:var v="abcdefgh";
var w=v.indexOf("g");
lastIndexof() 从后向前搜索字符串
substring() 提取字符串中两个指定的索引号之间的字符
例:var v="abcdefgh";
var w=v.substring(1,4);//含头不含尾
toLowerCase() 把字符串转换成小写
例:var str="Hello World";
document.write(str.toLowerCase(str));
toUpperCase() 把字符串转换为大写
replace() 替换字符串
例:var v="abcghi";
var w=v.replace("ghi","def"); //参数1:被替换的字符或字符串 字符2:替换的字符或字符串
document.write(w);
split() 把字符串切割成字符串数组
例:var v="ab#cd#ef#gh";
var w=v.split("#");
trim() 去掉字符串两端的空格
例:var v=" abcabcabc ";
var w=v.trim();//去掉左右两端的空格
trimRight();去掉右端的空格
trimLeft();去掉左端的空格
(9)JavaScript内置对象之数组对象
Array 对象用于在单个的变量中存储多个值
创建Array对象的语法:
new Array();
new Array(size);
new Array(element0,element1,element2,…elementn);
JS中的数组特点:
1.数组长度是可变的,
2.JS的数组,可以存储多种数据类型
3.JS中的数组更加的像我们Java中的list集合
var arr= new Array();
arr[0]=10;
arr[1]=20;
alert(arr[0]);//10
alert(arr[1]);//20
alert(arr[10]);//undefined
//获取数组的长度 length
var len=arr.length;
alert(len);//2
//方式2:在创建数组时,可以规定数组的长度
var arr2=new Array(5);
alert(arr2[0]);//undefined
arr2[5]=20;
alert(arr2[5]);//20
//方式3:创建数组时,直接把元素放进去
var arr3=new Array(10,20,30,40,"abc","def",true,false,new Object());
alert(arr3[8]);
//JS中定义数组的简便方式
var arr4=[20,40,60,80];
JavaScript数组中的方法
//splice() 删除元素,并向数组中添加新元素
var arr=[20,40,60,80];
//从1索引处开始删除数组中的一个元素
//arr.splice(1,1);//从1索引处开始删除1一个元素
//arr.splice(1,1,300);//从1索引处删除了一个元素,又在相同位置上补了一个元素300.
arr.splice(1,2,100,200,300,400,500);//从1索引处删除2个元素,又补上了5个元素。
alert(arr);
JavaScript中的二维数组
//定义了一个空数组
var arr=[];
//var arr2=new Array();
var one=new Array(10,20,309,40,50);
var two=new Array(100,200,300,400,500,600,700);
arr[0]=one;
arr[1]=two;
//遍历二维数组
for(var i=0;i<arr.length;i++){
for(var j=0;j<arr[i].length;j++){
document.write([i][j]);
document.write("<br>");
}
}
//定义二维数组的简便方式
var arr2=[[1,2,3],[10,20,30],[100,200,300]];
JavaScript中数组对象的方法
var one=[10,20,30];
var two=[30,40,50];
//把两个数组中的元素,归并到一个数组当中。返回一个新的数组。
var arr=one.concat(two);
//console.log(arr);//打印到控制台输出
document.write(arr);
//把数组转换成字符串"10-20-30" 可以指定分隔符
var str=one.join("-");
alert(str);
alert(typeof str);
var arr2=[];
//往后面添加元素
arr2.push(20);
arr2.push(40);
arr2.push(60);
arr2.push(80);
//往前面添加元素
arr2.unshift(1000);
arr2.unshift(2000);
alert(arr2);
//删除数组中的元素,从后面删除,返回的是被删除的元素
var ele=arr2.pop();
alert(ele);
alert(arr2);
//从数组的前面删除元素
var ele2=arr2.shift();
alert(ele2);
alert(arr2);
//reverse() 颠倒数组中的元素
var v=new Array();
v.push(500);
v.push(400);
v.push(300);
v.push(200);
v.push(100);
v.unshift(1000);
v.unshift(2000);
var w=v.reverse();
alert(w);
ES6中新增加的数组的方法
//every() 检测数值元素的每个元素是否都符合条件
var arr=[10,20,30,50,500,203];
//判断数组中的每个元素,是否都大于200
var v=arr.every(function(ele){
return ele>200;
});
alert(v);
//过滤
//filter() 检测数值元素,并返回符合条件的所有元素的数组
var arr2=[10,20,30,50,500,203];
//把大于200的元素,过滤到一个新的数组中
var newArr=arr2.filter(function(ele){
return ele>200;
});
alert(newArr);
//forEach() 数组的每个元素都执行一次回调函数
var arr3=[10,20,30,50,500,203];
arr3.forEach(function(ele,index){
alert(index+"==="+ele);
})
//map()通过指定函数处理数组的每个元素,并返回处理后的数组
var arr4=[10,20,30,50,500,203];
var myArr=arr4.map(function(ele){
//return ele*ele;
return Math.pow(ele,2);
});
alert(myArr);
//reduce() 将数组元素计算为一个值(从左到右)
var arr5=[10,20,30,50,500,203];
var r=arr5.reduce(function(sum,ele,index,arr){
return sum+=ele;
},0);//这个0是可以给数组元素增加的值
alert(r);