JS函数、内置对象

时间：2019-07-22 00:19:21 阅读：91 评论：0 收藏：0 [点我收藏+]

一、函数

1）作用 ：封装一段待执行的代码

2）语法：

//函数声明
function 函数名(参数列表){
    函数体
    return 返回值;
 }
//函数调用
函数名(参数列表);

1.无参数无返回值的函数

//函数声明
function f1(){
    console.log(‘f1被调用‘);
}
//函数调用
f1()

2.带参数的函数

//Js允许形参和实参的个数不匹配
function f2(n,m){//形参未传值，默认为undefined
    console.log(n*n);
    //函数内部可以使用arguments获取实际传递的参数
    console.log(arguments)
}
f2(5);//函数调用是将实际参数赋值给形式参数     //25
f2(3,9);//允许形参和实参的个数布匹配            //9

3.带有返回值的函数

function f3(a){
    //局部变量r，只能在当前函数中使用
    var r=a*a;
    var r1=a+a;
    //将函数内部的变量传递给外界使用
    //只能返回一个值，后面的代码都不执行
    return r,r1;    //不管最后返回几个值 就返回最后一个值 r1
    console.log(‘函数使用‘)//不执行
}
//全局变量r
var r = f3(4);    
console.log(r,);//8

3）使用：函数名自定义，见名知意，命名规范参照变量的命名规范。普通函数以小写字母开头，用于区分构造函数(构造函数使用大写字母开头，定义类)

4）匿名函数：省略函数名的函数。语法为：

匿名函数自执行

 (function (形参){
  
 })(实参);

匿名函数的使用，自执行：(匿名函数的声明)(实参)

(function(){
//构建局部作用域                                                            
    console.log(‘匿名函数自执行‘);
})()

定义变量接收匿名函数

 var fn = function (){};
 fn(); //函数调用

匿名函数的使用，自执行：(匿名函数的声明)(实参)

(function(){
    //构建局部作用域
    console.log(‘1.匿名函数自执行‘);
})()
console.log(‘-----------------------‘)

var fn=function(){
    console.log(‘2.fn被调用‘);
}
fn();
console.log(2,fn)//函数
console.log(‘-----------------------‘)

//函数作为参数传递
function show(f){
    console.log(‘show:‘,f)
    f(); //因为show调用的fn的函数 所有此处的f就是fn
}
//直接传递函数名
show(fn);//f=fn
console.log(‘-----------------------‘)

//匿名函数作为参数传递
show(function(){
    console.log(‘4.直接传递匿名函数‘)
})

1.匿名函数自执行
 -----------------------
 
2.fn被调用
2 ƒ (){
    console.log(‘2.fn被调用‘);
}
 -----------------------
 
show: ƒ (){
    console.log(‘2.fn被调用‘);
}
2.fn被调用
 -----------------------
 
show: ƒ (){
    console.log(‘4.直接传递匿名函数‘)
}
4.直接传递匿名函数

5）作用域：JS中作用域分为全局作用域和函数作用域，以函数的{ }作为划分作用域的依据

1. 全局变量和全局函数
　　只要在函数外部使用var关键字定义的变量,或函数都是全局变量和全局函数,在任何地方都可以访问
　　所有省略var关键字定义的变量,一律是全局变量
2. 局部变量/局部函数
　　在函数内部使用var关键字定义的变量为局部变量,函数内部定义的函数也为局部函数,只能在当前作用域中使用,外界无法访问
3. 作用域链
　　局部作用域中访问变量或函数,首先从当前作用域中查找,当前作用域中没有的话,向上级作用域中查找,直至全局作用域

二、内置对象

1）对象：对象是由属性和方法组成的,使用点语法访问

2） Array 数组

1. 创建

1.1数组的创建

var arr1=[‘Maple‘,30,true];
console.log(arr1);
--------------------------
(3) ["Maple", 30, true]
0: "Maple"
1: 30
2: true
length: 3
__proto__: Array(0)

1.2使用构造函数new关键字创建

var arr2=new Array(‘Fox‘,31,false);
console.log(arr2);
--------------------------
(3) ["Fox", 31, false]
0: "Fox"
1: 31
2: false
length: 3
__proto__: Array(0)

1.3特殊

var arr3=[5];　　//长度为1,元素为5
//使用new关键字传递一个整数参数创建数组，代表初始化数组长度
var arr4=new Array(5);    //长度为5，元素为空
console.log(arr3,arr4);
console.log(arr3[0]);   //5 
--------------------------
[5]
0: 5
length: 1
__proto__: Array(0)

(5) [empty × 5]
length: 5
__proto__: Array(0)

2.操作数组元素（根据元素索引）

arr4[0]=‘下标0‘;
arr4[2]=‘下标2‘;
arr4[8]=‘下标8‘;
console.log(arr4)
--------------------------
(9) ["下标0", empty, "下标2", empty × 5, "下标8"]
0: "下标0"
2: "下标2"
8: "下标8"
length: 9
__proto__: Array(0)

3.数组对象的属相：length

console.log(arr4.length);    #9

4.遍历数组元素：

　　创建数组，包含若干元素，实现数组元素的正序遍历和倒序遍历

4.1 普通for循环

var arr5 = [1,2,3,4,5]
for(var i =0;i<arr5.length;i++){//正序遍历
    console.log(arr5[i]+‘\t‘);
}
#1 2 3 4 5

for(var i =arr5.length-1;i>=0;i--){//倒序遍历
    console.log(arr5[i]);
}
#5 4 3 2 1

4.2 for-in循环

var arr5 = [1,2,3,4,5]
for(var i in arr5){//i 是index元素下标
    console.log(i,arr5[i]);
}
0 1
1 2
2 3
3 4
4 5

4.3 数组对象提供的遍历方法，forEach(function(){})

arr5.forEach(function(elem,index){//(元素，下标)参数
    console.log(elem,index);//方法体
});
/*
解析 forEach(function(){})
function show(a){
    a();
}
show(function(elm,ind){
    console.log();
})
*/

练习1.循环接收用户输入，将数据存储在数组中，直至输入‘exit’结束，控制台打印数组

var arr1=[];
for(;;){
    var data=prompt(‘请输入‘);
    if(data==‘exit‘){
        break;
    }
    //添加至数组，数组长度表示数组中下一个元素的索引
    arr1[arr1.length]=data;
}
console.log(arr1);

练习2.声明包含若干元素的数组，打印数组中的最大值

var arr2=[1,2,3,99,5];
var max=arr2[0];
for(var i in arr2){
    if(max<arr2[i]){
         max=arr2[i];
    }
}
console.log(max);

练习3.查找元素第一次出现的下标（正序查找）

var arr=[1,1,3,1,5];
var data=prompt(‘请输入要查找的数值‘);
var index=-1;
for (var i = 0;i<arr.length;i++){
    if(data==arr[i]){
        index=i;
    }
}
console.log(‘查找的元素‘,data,‘所在位置：‘,index);
==============
查找元素最后一次出现的下标（倒序查找）
var arr=[1,1,3,1,5];
var data=prompt(‘请输入要查找的数值‘);
var index=-1;
for (var i = arr.length-1;i>=0;i--){
    if(data==arr[i]){
        index=i;
        break;
    }
}
console.log(‘查找的元素‘,data,‘所在位置：‘,index);

2. 特点

数组用于存储若干数据,自动为每位数据分配下标,从0开始
数组中的元素不限数据类型,长度可以动态调整
动态操作数组元素：根据元素下标读取或修改数组元素，arr[index]

3. 属性和方法

1）属性 : length 表示数组长度,可读可写

2）方法 :

push(data)

在数组的末尾添加一个或多个元素,多个元素之间使用逗号隔开

返回添加之后的数组长度

 var arr = [‘hello‘, ‘world‘];
//在数组末尾追加1,2,3
var r1 = arr.push(1, 2, 3);
console.log(r1);//5
console.log(arr);
---------------
(5) ["hello", "world", 1, 2, 3]
0: "hello"
1: "world"
2: 1
3: 2
4: 3
length: 5
 __proto__: Array(0)

pop()

移除末尾元素

返回被移除的元素

var r2=arr.pop();
console.log(r2);//3
console.log(arr);
---------------------------
(4) ["hello", "world", 1, 2]
0: "hello"
1: "world"
2: 1
3: 2
length: 4
__proto__: Array(0)

unshift(data)

在数组的头部添加一个或多个元素

返回添加之后的数组长度

var r3=arr.unshift(10);
r3=arr.unshift(20,30);
console.log(r3);//7（返回添加之后的数组长度）
console.log(arr);
----------------------------------------
(7) [20, 30, 10, "hello", "world", 1, 2]
0: 20
1: 30
2: 10
3: "hello"
4: "world"
5: 1
6: 2
length: 7
__proto__: Array(0)

shift()

移除数组的第一个元素

返回被移除的元素

var r4=arr.shift();
console.log(r4);//20
console.log(arr);
------------------------------------
(6) [30, 10, "hello", "world", 1, 2]
0: 30
1: 10
2: "hello"
3: "world"
4: 1
5: 2
length: 6
__proto__: Array(0)

toString()

将数组转换成字符串类型(不改变原有数组，新的数组)

返回字符串结果

var r5=arr.toString();
console.log(r5);
//30,10,hello,world,1,2

join(param)

将数组转换成字符串,可以指定元素之间的连接符,如果参数省略,默认按照逗号连接(不改变原有数组，新的数组)

返回字符串

var r6=arr.join();
console.log(r6);
//30,10,hello,world,1,2
var r7=arr.join(‘‘);
console.log(r7);
//3010helloworld12
console.log(arr);
(6) [30, 10, "hello", "world", 1, 2]
0: 30
1: 10
2: "hello"
3: "world"
4: 1
5: 2
length: 6
__proto__: Array(0)

reverse()

反转数组,倒序重排

返回重排的数组,注意该方法直接修改原数组的结构

arr.reverse();//调整原有数组的结构
console.log(arr);
(6) [2, 1, "world", "hello", 10, 30]
0: 2
1: 1
2: "world"
3: "hello"
4: 10
5: 30
length: 6
__proto__: Array(0)

sort()

对数组中元素排序,默认按照Unicode编码升序排列

返回重排后的数组,直接修改原有数组

参数 : 可选,自定义排序算法

arr.sort();//按照Unicode的编码值升序排序
console.log(arr);
(6) [1, 10, 2, 30, "hello", "world"]
0: 1
1: 10
2: 2
3: 30
4: "hello"
5: "world"
length: 6
__proto__: Array(0)

自定义升序

/*作用：作为参数传递到sort()中,会自动传入两个元素进行比较,如果a-b>0,交换元素的值,自定义升序排列*/
//对number值进行大小排列
function sortASC(a,b){
/*a,b代表数组中相邻的两个元素，如果a-b>0,则交换元素的位置*/
    //自定义升序
      return a-b;
}
arr.sort(sortASC);
console.log(arr);
-------------------------------------
(6) [1, 2, 10, 30, "hello", "world"]
0: 1
1: 2
2: 10
3: 30
4: "hello"
5: "world"
length: 6
__proto__: Array(0)

自定义降序

//如果返回值>0,交换元素的值,b-a表示降序排列

function sortDESC(a,b){
    //如果b-a>0,则交换两个元素的位置
      //自定义降序
      return b-a;
}
arr.sort(sortDESC);
console.log(arr);
------------------------------------
(6) [30, 10, 2, 1, "hello", "world"]
0: 30
1: 10
2: 2
3: 1
4: "hello"
5: "world"
length: 6
__proto__: Array(0)

forEach(param)

遍历数组元素

参数为函数

 arr.forEach(function (elem,index){
    //forEach()方法会自动调用匿名函数,依次传入元素及下标
});

复杂数组

var obj={
    uid:001,
    uname:‘Maple‘,
    play:function(){
        console.log(‘play‘);
    }
}
console.log(obj.uid);    //1
obj.play();        //play

===============================

var array=[
    {uname:‘Fox‘,age:35},
    {uname:‘Maple‘,age:34},
    {uuanm:‘MapleFox‘,age:33}
]
console.log(array[0].age)    //35
//将数组元素按照年龄升序排列
array.sort(function(e1,e2){
    return e1.age-e2.age;
})
console.log(array);
----------------------------------
(3) [{…}, {…}, {…}]
0: {uuanm: "MapleFox", age: 33}
1: {uname: "Maple", age: 34}
2: {uname: "Fox", age: 35}
length: 3
__proto__: Array(0)

复杂数组

练习：十进制转二进制（不断的除2取余，直至商为0，余数倒序排列）

function decide(){
        var num = prompt(‘请输入数字‘);
        var arr = [];
        while(num!=0){
            arr.unshift(num%2);//将余数在头部循环添加
            num=parseInt(num/2);//对商取整处理
        }
        console.log(arr.join(‘‘));
    }
    decide();

4. 二维数组

数组中的每个元素又是数组

var arr1 = [1,2,3];
var arr2 = [[1,2],[3,4],[5,6,7]];
//操作数组元素
var r1 = arr2[0] //内层数组
var num = r1[0]; //值 1
//简写
var num2 = arr2[1][0];

遍历二维数组

for(var i in arr){
    for(var j in arr[i]){
        console.log(arr[i][j]);
    }
}

3）String 对象

1. 创建

var str = "100";
var str2 = new String("hello");
console.log(str2)
String {"hello"}
        0: "h"
        1: "e"
        2: "l"
        3: "l"
        4: "o"
length: 5
__proto__: String
[[PrimitiveValue]]: "hello"
console.log(str[1],str2[0])
//0  h

遍历字符串

for(var i = 0; i <str2.length; i++){
    console.log(str2[i]);
}

2. 特点

　　字符串采用数组结构存储每位字符,自动为字符分配下标,从0开始

3. 属性

　　length ：获取字符串长度

4. 方法

转换字母大小写

toUpperCase() 转大写字母

toLowerCase() 转小写字母

返回转换后的字符串,不影响原始字符串

    var s=‘MapleFox‘;
    var r1=s.toUpperCase();
    var r2=s.toLowerCase();
    console.log(r1,r2,s);
    //MAPLEFOX    maplefox    MapleFox

获取字符或字符编码

charAt(index) 获取指定下标的字符

charCodeAt(index) 获取指定下标的字符编码

参数为指定的下标,可以省略,默认为0

    var s=‘MapleFox‘;
    var r3 = s.charAt(3);//-->l
    var r4 = s.charCodeAt(1)//M-->97
    console.log(r3,r4)//l    97

获取指定字符的下标

indexOf(str,fromIndex)

作用 : 获取指定字符的下标,从前向后查询,找到即返回

参数 :

　　str 表示要查找的字符串,必填

　　fromIndex 表示起始下标,默认为0

返回 :

　　返回指定字符的下标,查找失败返回-1

lastIndexOf(str,fromIndex)

作用 : 获取指定字符最后一次出现的下标,从后向前查找,找到即返回

参数 :

　　str 必填,表示要查找的内容

　　fromIndex 选填,指定起始下标

s=‘maria‘;
var r5=s.indexOf(‘a‘);//1
var r6=s.lastIndexOf(‘a‘);//4
console.log(r5,r6);
var r7=s.indexOf(‘a‘,3);//4
var r8=s.lastIndexOf(‘a‘,3);//1
console.log(r7,r8);

截取字符串

substring(startIndex,endIndex)

作用 : 根据指定的下标范围截取字符串,startIndex ~ endIndex-1

参数 :

　　startIndex 表示起始下标

　　endIndex 表示结束下标,可以省略,省略表示截止末尾

s=‘maria‘;
var r9=s.substring(0,2);
console.log(r9);    //ma

分割字符串

split(param)

作用 : 将字符串按照指定的字符进行分割,以数组形式返回分割结果

参数 : 指定分隔符,必须是字符串中存在的字符,如果字符串中不存在,分割失败,仍然返回数组

s=‘maria‘;
var r10=s.split(‘a‘);
console.log(r10);
 (3) ["m", "ri", ""]
    0: "m"
    1: "ri"
    2: ""
    length: 3
    __proto__: Array(0)

模式匹配

作用 : 借助正则表达式实现字符串中固定格式内容的查找和替换

正则表达式 :

var reg1 = /字符模式/修饰符;

修饰符 :

i : ignorecase 忽略大小写

g : global 全局范围

字符串方法 :

match(regExp/subStr)

作用 : 查找字符串中满足正则格式或满足指定字符串的内容

返回 : 数组,存放查找结果

replace(regExp/subStr,newStr)

作用 : 根据正则表达式或字符串查找相关内容并进行替换

返回 : 替换后的字符串,不影响原始字符串

/*Math对象*/
//1.向上取整：舍弃小数位，整数位+1
console.log(Math.ceil(0.99))
//2.向下取整：舍弃小数位，整数位不变
console.log(Math.floor(0.99))
//3.四舍五入取整
console.log(Math.round(0.49))
console.log(Math.round(0.5))
//4.生成0~1之间的随机小数
console.log(Math.random());

var str = ‘上知乎,搜知乎,问知乎,答知乎‘;
//定义正则，表示查找内容
var reg1=/知乎/ig;
var res1=str.match(reg1);
console.log(res1);
-----------
 Array(4)
 0: "知乎"
 1: "知乎"
 2: "知乎"
 3: "知乎"
 length: 4
 __proto__: Array(0)
 ==========================
 //replace()查找并替换，返回替换后的字符串结果
var reg1=/知乎/ig;
var res1 = str.replace(reg1,‘新浪‘);
console.log(res1,str)；
//上新浪,搜新浪,问新浪,答新浪 上知乎,搜知乎,问知乎,答知乎

练习1.接收用户输入的邮箱，提取用户名和服务商

//使用@截取字符串
var mail=‘zhangsan@163.com‘;
var index=mail.indexOf(‘@‘);
var username = mail.substring(0,index);
var servername = mail.substring(index+1);
console.log(username,servername);    //zhangsan 163.com  //使用@符号分割字符串
var res=mail.split(‘@‘);
console.log(res[0],res[1]);        //zhangsan 163.com    
//=====================================
//练习2.从身份证号中提取年月份信息
var uid=‘222222198812123333‘;
var year=uid.substring(6,10);
var month= uid.substring(10,12);
var day= uid.substring(12,14);
console.log(year,month,day);    //1988 12 12
//=======================================
//练习3.‘101_5&201_7&301_9‘ 打印出商品的id为101，数为5
//分割商品信息
var str=‘101_5&201_7&301_9‘;
var arr=str.split(‘&‘);
for(var i=0;i<arr.length;i++){
    var r = arr[i].split(‘_‘);
    console.log(‘商品id为‘,r[0],‘商品数量为‘,r[1])
}
id为 101 数量为 5
id为 201 数量为 7
id为 301 数量为 9

练习2：模拟验证码

1.创建数据源（有大小写字母和数字组成）

2.随机取四位字符，拼成验证码

随机数的生成：Math.random()返回[0-1)之间的随机小数用他获取随机下标调整为随机下标parseInt

3.提示用户输入（不区分大小写）

4.比较用户输入的内容，给出验证的结果

 1 <body>
 2     <input type="text" id="uinput">
 3     <span id="code">验证码</span>
 4     <button id="btn">验证</button>
 5     <script>
 6         //元素的id属性值作为变量直接操作，存储元素本身
 7         console.log(code);
 8         //生成4位验证码
 9         var str=‘qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM1234567890‘;
10         var show=‘‘;
11 
12             for(var i = 0;i<4;i++){
13                 //下标
14                 //除了parseInt可以取整 还可以用Math.floor向下取整
15                 //var index=math.floor(Math.random()*str.length)
16                 var index =parseInt(Math.random()*str.length);
17                 show+=str[index];
18             }
19         //操作元素内容(显示验证码)
20         code.innerHTML=show;
21         //获取输入框
22         console.log(uinput.type);
23         //onclick = ‘fn()‘
24         btn.onclick=function (){
25             //获取输入框的值
26             console.log(uinput.value);
27             //验证
28             if(uinput.value.toLowerCase()==show.toLowerCase()){
29                 alert(‘验证相同‘);
30             }else{
31                 alert(‘验证不对‘);
32             }
33         };
34     </script>
35 </body>

模拟验证码

JS函数、内置对象

原文：https://www.cnblogs.com/maplethefox/p/11222961.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)

JS函数、内置对象

一、函数

二、 内置对象

1. 创建

2.操作数组元素（根据元素索引）

3.数组对象的属相：length

4.遍历数组元素：

2. 特点

3. 属性和方法

4. 二维数组

二、内置对象