目 录
一、函数
函数相当于java中的方法。Function(*****)， 代表函数。创建格式如下：
- 方式一：var fun = new Function("参数列表","方法体");
- 方式二：function 方法名称(形参列表){ 方法体 }；
- 方式三：var fun = function(){ 方法体 } ；
函数的使用：函数名称(实参列表); 特点是：函数的调用，只与函数名称有关，与实参列表无关。且函数内部有内置对象 arguments 封装实参数组。
<script>
//方式1：
function show() {
var a = 100;
var b = 200;
alert(a + b);
}
show();
//方式2：
var test = function() {
var a = 100;
var b = 200;
alert(a + b);
}
test();
//匿名函数，作为参数传递
/* function() {
var a = 100;
var b = 200;
} */
//方式3：了解
//var fun = new Function("参数列表","方法体");
//var fun = new Function("a,b", "alert(a+b)");
//fun(2, 3)
//形参不需要写数据类型
function add(a, b) {
alert(a);
alert(b);
var sum = a + b;
//alert(sum);
}
//JS 调用函数式，这个实参，你可以传，也可以不传，传多，传少都可以。
add(5, 6, 8, 9)
//返回值
function add2(a, b) {
var sum = a + b;
return sum; //如果你要返回数据，直接 return返回
}
var r = add2(5, 9)
//alert(r);
//函数有一个内置的属性
//arguments 他是一个数组，会接收所有传过来的实参
function show(a, b) {
var one = arguments[0]
var two = arguments[1]
var three = arguments[2]
var four = arguments[3]
console.log(one, two, three, four);
return a + b + one + two + three + four;
}
var v = show(5, 6, 7, 8)
console.log(v);
//函数的length可以查看有几个形参
var len = show.length;
alert(len);
</script>补充： void运算符，拦截返回值，一般结合a标签一起使用。 例如：注销a标签跳转功能，保留可被点击的功能 ---> <a href="javascript:void(0);" οnclick="exit();">退出</a>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function show() {
alert("hello")
}
</script>
</head>
<body>
<!-- a标签可以点击，并且可以跳转页面 -->
<a href="http://www.baidu.com">进入百度</a>
<!-- a标签可以点击，但是不跳转页面-->
<a href="#">可以点击</a>
<!-- a标签可以点击，但是不跳转页面，但是可以调用函数-->
<a href="#" onclick="show()">可以点击</a>
<!-- a标签可以点击，但是不跳转页面-->
<a href="javascript:void(0)">可以点击</a>
<!-- a标签可以点击，但是不跳转页面，但是可以调用函数-->
<a href="javascript:void(show())">可以点击</a>
<a href="javascript:window.open('about:blank')" target="_blank">Click me</a>
<a href="javascript:void(window.open('about:blank'))">Click me2222</a>
<!-- a标签可以点击，但是不跳转页面 -->
<a href="javascript:;;">可以点击</a>
</body>
</html>
自调用函数如下演示：
<script>
/* function show(a, b) {
alert(a + b);
}
show(5, 8); */
//自调用函数：(function () { /* code */ } ());
var sum = (function(a, b) {
return a + b;
}(2, 3));
alert(sum);
</script>二、JS中的内置对象
1.String对象
定义方式1： String str=new String("abckdddd"); 定义方式2：var str="我爱你爱你"; 属性：length: 字符串的长度。常用的方法如下：
- charAt() 返回在指定位置的字符。
- concat() 连接字符串。
- indexOf() 根据字符检索此符在字符串中的索引。
- lastIndexOf() 从后向前搜索字符串。
- substring() 提取字符串中两个指定的索引号之间的字符。
- toLowerCase() 把字符串转换为小写。
- toUpperCase() 把字符串转换为大写。
- replace() 替换字符串。
- split() 把字符串分割为字符串数组。
- trim() 去除字符串两端的空格。
<script type="text/javascript">
var str = new String("abc");
var s = String("hello");
alert(typeof str); //object
alert(typeof s); //string
alert(str instanceof String);
alert(s instanceof String);
var ss = "Hello"; //定义字符串
var v = "hello".charAt(0);
alert(v);
</script>2.Number对象
定义方式：var num=new Number(555.6666); 或 var num1=Number(5694);等等。常用的方法如下：
- toString() 把数字类型转成字符串类型
- toPrecision() 把数字格式化为指定的长度。也就是小数后面保留几位
<script>
//toFixed 把数字转换为字符串，结果的小数点后有指定位数的数字。
//toPrecision 把数字格式化为指定的长度。
var num = new Number(3.58585858585);
//算整数部分在内。保留三位数字
var vv = num.toPrecision(3);
alert(vv);
//保留小数点后面几位，会四舍五入，返回的是字符串
var strNum = num.toFixed(3);
alert(strNum);
alert(strNum * 1 + 1);
//数字的字符串----数字
var strNum = "100";
var n1 = +"100";
var n2 = strNum * 1;
var n3 = strNum - 0;
var n4 = Number(strNum);
alert(n4 + n3);
var n5 = window.parseInt(strNum);
//数字-----数字的字符串
var n6 = 100;
var str7 = n6 + "";
</script>3.Date 对象
定义方式： var myDate=new Date();常用的方法如下：
- getTime() 获取从1970-01-01 00:00：00 到当前的毫秒值
- toLocaleString() 将时间转化成本地格式 利于阅读
<script>
//Math 直接使用名称调用它的方法就行了
var pi = Math.PI
for (let i = 0; i < 100; i++) {
var num = Math.random();
document.write(num);
document.write("<br>");
}
//随机生成四位验证码
</script>补：第三方的日期工具类 moment.js
该工具类已经上传至小编的资源中。需要可去下载！！！！
<script src="js/moment.js"></script>
<script>
var dateStr = moment().format('YYYY-MM-DD HH:mm:ss');
document.write(dateStr);
/* var str = moment("19850505", "YYYYMMDD").fromNow();
document.write(str); */
//把指定的毫秒值毫秒值，格式化成日期字符串。
var time = new Date().getTime(); //获取当前的毫秒值
var dateStr2 = moment(time).format('YYYY-MM-DD HH:mm:ss');
document.write("<h1>" + dateStr2 + "</h1>");
var v = new Date('2019-08-22 12:30:23').getTime();
alert(v);
var dateObj = new Date();
/*
toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。 1 3
toLocaleTimeString() 根据本地时间格式，把 Date 对象的时间部分转换为字符串。 1 3
toLocaleDateString() */
var vstr = dateObj.toLocaleString();
document.write(vstr);
</script>4.Math对象
该对象有一个特点： 该对象不需要创建 直接对象名点上方法即可。常用的方法如下：
- Math.random()； 随机产生0----1 之间的随机数
- Math.round(2.36); 对小数进行四舍五入 得到一个整数
- Math.min(15,25); 取最小值
- Math.max(15,25); 取最大值
- Math. abs(-2)； 返回数的绝对值。
- Math.floor(2.6); 向下取整
- Math.ceil(3.82); 向下取整
<script>
//Math 直接使用名称调用它的方法就行了
var pi = Math.PI
for (let i = 0; i < 100; i++) {
var num = Math.random();
document.write(num);
document.write("<br>");
}
//随机生成四位验证码
</script>5.数组对象
定义方式： var arr=new Array(2,6,8); 或 var arr1=[6,"a",6]; 属性： length 数组的长度。
注意：在js中数组可以存储任意类型元素并且在js中数组的长度可变。常用的方法如下：
- concat() 连接两个或更多的数组，并返回结果。
- join() 把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
- pop() 删除并返回数组的最后一个元素
- push() 向数组的末尾添加一个或更多元素，并返回新的数组长度。
- reverse() 颠倒数组中元素的顺序。
- sort() 对数组的元素进行排序 从小到大。默认排序方式：字典顺序；要想实现自己的比较方式，需要传入比较器方法对象。
<script>
var arr = [20, 30, 58, 98, 62, 85, 74];
//往数组中后面添加元素。
arr.push(500);
//往数组的前面添加元素。
arr.unshift(17);
//删除数组中的元素。
var ele = arr.pop(); //从后面删除元素
alert(arr);
alert(ele);
//shift() 删除并返回数组的第一个元素
var ele2 = arr.shift();
alert(ele2)
alert(arr);
//可以根据索引来删除。
var arr2 = [20, 30, 58, 98, 62, 85, 74];
arr2.splice(1, 1); //从1索引处开始删除，删除1个元素
//从1索引处开始删除，删除1个元素,把这个元素替换为300
//arr2.splice(1, 1, 300);
//从1索引处开始删除，删除3个元素,再2替换成 300, 500, 600, 700, 800
//arr2.splice(1, 3, 300, 500, 600, 700, 800);
alert(arr2);
//把多个数组，拼接成一个数组
var arr3 = [20, 30, 58, 98, 62, 85, 74];
var arr4 = [200, 300, 580, 980, 620, 850, 740];
var newArr = arr3.concat(arr4);
alert(newArr);
//把数组转换成字符串。
var arr5 = [200, 300, 580, 980, 620, 850, 740];
var str = arr5.join("-");
alert(str);
//reverse() 颠倒数组中元素的顺序。
arr5.reverse();
alert(arr5);
//slice() 方法可从已有的数组中返回选定的元素。
var arr6 = [200, 300, 580, 980, 620, 850, 740];
var arr7 = arr6.slice(0, 3); //含头不含尾
alert(arr7);
var ss = "HelloWorld";
var ss3 = ss.split("").reverse().join("");
alert(ss3);
</script>补：ES6中数组对象新增的方法
<script>
//filter() 检测数值元素，并返回符合条件所有元素的数组。
var arr = [200, 300, 580, 980, 620, 850, 740];
//获取数组中大于500的元素
var newArr = arr.filter(function(ele) {
return ele > 500; //true 符合条件，false不符合条件
});
alert(newArr);
//forEach() 数组每个元素都执行一次回调函数。
arr.forEach(function(ele, index) {
alert(index + "===" + ele);
});
//findIndex() 返回符合传入测试（函数）条件的数组元素索引。
var arr2 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var index = arr2.findIndex(function(ele) {
return ele % 2 == 0;
})
alert(index);
//includes() 判断一个数组是否包含一个指定的值。
var f = arr2.includes(9);
alert(f);
//indexOf() 搜索数组中的元素，并返回它所在的位置。
var index2 = arr2.indexOf(9);
var index3 = arr2.indexOf(90);
alert(index2);
alert(index3);
//isArray() 判断对象是否为数组。
//instanceof
//map()通过指定函数处理数组的每个元素，并返回处理后的数组。
var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var newArr2 = arr3.map(function(ele) {
return Math.pow(ele, 2);
});
alert(newArr2);
//reduce() 将数组元素计算为一个值（从左到右）。
var arr4 = [1, 2, 3, 4, 5, 6, 7, 8, 9];
//array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
var sum = arr4.reduce(function(total, num, index, arr) {
return total + num;
}, 10);
alert(sum); //45
</script>
</head>6.Global全局方法对象
特点：该对象中的方法调用，不需要对象的引用，可直接使用。常用的方法如下：
- isNaN() 检查某个值是否是NaN。
- parseInt() 解析一个字符串并返回一个整数。 从左向右依次查找，每一位是否是数字，直到遇到不是数字为止。将前边的值转为数字。
<script>
var f = isNaN(NaN);
alert(f);
var f2 = this.isNaN(NaN);
alert(f2);
var f3 = window.isNaN(NaN);
alert(f3);
//parseFloat() 解析一个字符串并返回一个浮点数。 1 3
//parseInt()
//把数字字符串，转换成数字
var num = parseInt("1000");
alert(num + 100);
var xs = parseFloat("3.2585858");
alert(xs + 1);
</script><html>
<head>
<meta charset="utf-8">
<title></title>
<script>
/* encodeURI() 把字符串编码为 URI。 1 5.5
decodeURI() 解码某个编码的 URI。 1 5.5 */
// decodeURIComponent() 解码一个编码的 URI 组件。
// encodeURIComponent() 把字符串编码为 URI 组件。
//浏览器会对中文参数进行uri编码
//http://www.hehehhe.com/?username=%E5%BC%A0%E4%B8%89&sex=%E7%94%B7
var username = "张三";
var enCode = encodeURIComponent(username);
document.write(enCode); //%E5%BC%A0%E4%B8%89
var dCode = decodeURIComponent(enCode);
document.write(dCode); //%E5%BC%A0%E4%B8%89
https
: //www.baidu.com/s?tn=39042058_4_oem_dg&ie=utf-8&wd=%E4%B8%BA%E4%BB%80%E4%B9%88%E6%B5%8F%E8%A7%88%E5%99%A8%E4%BC%9A%E8%BF%9B%E8%A1%8Curi%E7%BC%96%E7%A0%81
</script>
</head>
<body>
<a href="http://www.hehehhe.com?username=张三&sex=男">一个链接</a>
</body>
</html>
7.RegExp(**)正则表达式对象
常用方法如java中的一样。常用的方法如下：
- test() 使用正则对象去匹配字符串 如果匹配成功返回ture，否则返回false.
- exec() 根据正则表达式去查找字符串符合规则的内容。
<script>
/* RegExp 对象
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。
直接量语法
/pattern/attributes创建 RegExp 对象的语法：
new RegExp(pattern, attributes); */
//方式1
var regp = new RegExp("[0-9A-Z]+", "i");
//方式2:常用
var regp2 = /^[0-9A-Z]+$/; //i 表示不区分大小写
//test()
var flag = regp2.test("abc123");
alert(flag);
</script>
(小编也在努力学习更多哟!以后再慢慢分享的啦!)
希望对友友们有所帮助!!!
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
