流程控制语句 函数 对象和数组

流程控制语句 函数 对象和数组

  • 流程控制语句
  • 函数
  • 对象和数组

流程控制语句

复习

if(5>4) alert('对');
if(){

}else{

}

if(){

}else if(){

}else{

}


switch(a+b){
    case 值:
        语句;
        break; 跳出所有循环 防止穿透
    case 值:
        语句;
        break; 
    default:
        语句;
}

var box = 1;
if(box<=5){
    alert(box);
    box++;
}
for(var i=0;i<=9;i++){

}

do while 循环 不管条件是否满足 先执行一遍循环体

do{

}while();


var box = 1;
do{
    alert(box); 
    box++;
}while(box <=9);

while 先判断再循环

var box=1;
while (box<=9){
    console.log(box);
    box++;
}

for in 列出对象的属性有哪些 先了解

    var person = {
                'name':'zhangsan',
                'age':18,
                'sex':'男'
            }
            for(var p in person){
                console.log(p);
            }


输出 : 
    name  age sex 

break continue 重点

for (var test=1;test<=10;test++) {
                if(test == 5) break;  跳出所有循环 
                document.write(test);
                document.write('<br />');
}
1
2
3
4

for (var test=1;test<=10;test++) {
                if(test == 7) continue; 跳出本次循环  继续下面的循环  
                document.write(test);
                document.write('<br />');
}
输出 1 2 3 4 5 6 8 9 10

with 先了解

var person = {
                'name':'zhangsan',
                'age':18,
                'sex':'男'
                 talk:函数名()
            }
            /*alert(person.name);
            alert(person.age);
            alert(person.sex);
            var n = person.name
            var a = person.age
            var s = person.sex
            alert("姓名:"+n+"年龄"+a+"性别"+s);*/

            with(person){
                var n=name;  //不用person.属性名
                var a=age;
                var s=sex;
            }
            alert("姓名:"+n+"年龄"+a+"性别"+s);

函数

  • js 函数 声明
  • return 返回值
  • arguments 对象

函数声明

function 函数名字(){  #没有参数的函数
    alert('只有调用我才执行');
}

function wenbiya(){
    alert("苦了农民百姓");
}

wenbiya(); #直接调用

function sum(num1,num2){  //形式参数
    alert(num1+num2);
}
sum(10,1000); //实际参数

函数return 返回值

function box(){
    return '我被返回';
}

alert(box());


function person(name,age){
    return '您的姓名:'+name+'您的年龄:'+age;
}

console.log(person("空空",35));

特殊return 非常重要

function test(num){
    if(num < 5) return num; #如果num<5 直接返回
    return '扛把子';
}
alert(test(6));

arguments 对象

function test(){
    //在不知道你有多少参数的情况下 相求第三个参数和第五个参数的和 
    return arguments[2]+arguments[4];
}

    alert(test(10,20,30,40,50,60));//80
    alert(test(9,8,7,6,5,4,3,2,1));//12
    alert(test(9,8,700,6,500,4,3,2,1));//1200


function test1(){
    return arguments.length; //获取参数的长度
}
    alert(test1(9,8));
    alert(test1(9,8,700,6));

?问题

不管你过来多少参数  我给你返回所有参数的和

1.有参数   
2.没有参数 直接返回0


function sums(){
    var sum = 0;
    if(arguments.length == 0 ) return sum;
    //如果有参数  累加  
    for (var i=0;i<arguments.length;i++) {
        sum+=arguments[i];
    }
    return sum;
}
alert(sums());  //0
alert(sums(1,2,3,4,5,6,7,8,9,10)); //55

对象

  • object 类型

object 类型

var person = new Object(); //空对象    new 可以省略 但是新创建的对象 尽量保留  提高代码的易读性 
person.name = '扣丁哥';
person.age = 18;

alert(person.name);



var person = {
    name:'扣丁哥',
    age:18,
}


var person = {
    'name':'扣丁哥',
    'age':18,
}


var person = {};//空对象   
person.name = '扣丁哥';
person.age = 18;


输出属性的值  
1.alert(person.name);
2.alert(person['age']);


对象的方法  

var box={
name:'扣丁哥',
age:18,
eat:function(){
   跟下面效果一样 
}
function eat(){
  跟上面效果一样
}
}


var box={
    name:'扣丁哥',
    age:18,
    eat:function(num1,num2){
       return num1+num2;
    }
}
alert(box.eat(5,6));


删除属性 delete 对象名.属性名;
var box={
    name:'扣丁哥',
    age:18,
    eat:function(num1,num2){
        return num1+num2;
    }
}
delete box.age;
alert(box.name);
alert(box.age); //会提示undefined
alert(box.eat(5,6));

数组

var arr = [1,2,3,4,5];
console.log(typeof arr);

var arr1 = new Array(1,2,3,4,5);
alert(arr1.length); //返回数组的长度   


var arr2 = new Array(2); //声明一个包含10个元素的数组   数组长度是10
console.log(arr2.length); //10

var arr3 = new Array(1,'abc',[1,2],true,null,box = {name:'zhangsan'});
console.log(arr3.length); //6 任何数据类型 包括数组在内都可以当成数组的元素  



字面量的形式 

var box = []; //创建一个空数组   
var box = [1,2,'a',null,true]; //包含元素的数组

var box = [1,2,]; //ie浏览器会认为 三个元素   w3c浏览器 认为2个   
console.log(box.length);
var box =[,,,]; ie w3c浏览器识别不一样    不要这么写   

console.log(box[4]); //获取下标为4的元素  第五个 
arr3[3] = false; //修改下表为3的元素 


console.log(test[test.length-1]); //获取最后一个元素 
test[test.length] = '云迪'; //添加元素到数组的末尾 

数组最多有4294967295 个元素 超出抛异常

var test = [
    {
        name:'zhangsan',
        age:18,
        talk:function(){
            return '大吉大利,今晚吃鸡';
        }
    },
    [1,'a',null,true],
    '张三',
    12+13
];

系统提供的数组方法

join 将数组拼接成字符串

var box = ['他强任他强','老子','尼克杨'];
alert(box.join(''));//将数组 拼接成字符串    
alert(box.join('@'));   
alert(box.join('|'));   

栈方法 先进后出 杯子 电梯 操作的是数组的结尾

push()
pop()

var box = ['a','b','c','d','e'];
console.log(box.push('f'));//输出新数组的长度  
console.log(box);//输出所有的元素
console.log(box.pop());//弹出数组的最后一个元素 f
console.log(box.pop());//e 
console.log(box.pop()); //d

队列方法 先进先出 操作的是数组的开头

unshift()
shift()

console.log(box);
console.log(box.unshift('f','g')); //返回 插入元素之后数组的新长度 
console.log(box); 

console.log(box.shift()); //弹出数组的第一个元素

排序方法

  • sort() 既可以排序数字 也可以排序字母
  • reverse()
var box = [1,4,2,3,5];
console.log(box.sort());
var box = [1,14,32,23,5];
console.log(box.sort()); //排序不准确   需要自己写函数 干预以下    
var box1 = ['e','f','b','a','c'];
console.log(box1.sort());

function compare(num1,num2){
    if(num1 < num2){
        return -1; //小于返回负数 表示 位置不动 还是num1 在num2前面
    }else {
        return 1; //调换位置  返回正数
    }
}
var box = [1,14,2,23,5];
console.log(box.sort(compare));//compare 当作参数传递给  sort   


reverse 反转倒叙的意思 
console.log(box.reverse()); 

两个方法 新数组 不会对原来的数组产生一样 会呈现给用户一个新的数组

  • concat
  • slice

concat

var box = ['a',1,'b',5];
var box1 = box.concat('计算机'); 
console.log(box1); //输出a 1 b 5 计算机
console.log(box);//输出a 1 b 5 原来数组 没有发生变化  

slice

var box = ['a',1,'b',5];
var box1 = box.slice(1,3);
//1,b
//从下标为1的元素开始截取 直到截取到下标为3 包括第一个不包括第三个[1,3)
var box1 = box.slice(1);//从下标为1的元素开始  截取到末尾  包括下标为1的    
var box1 = box.slice(0);//从下标为0的元素开始截取 直到结尾 
console.log(box1);
console.log(box);

综上:

复制数组有以下方法: 

​ push()

​ slice()

splice()

var box = ['a',1,'b',5];
var box1 = box.splice(1,3);
//从下标为1开始截取3个
console.log(box1); //1,'b',5   对原来的数组产生影响
console.log(box);//a


var box1 = box.splice(1,0,'科学','技术');
//从下标为1开始截取0个 然后再第一个位置插入 科学  技术 
console.log(box1);//因为截取了0个 所以box1 为空
console.log(box);//"a,科学,技术,1,b,5"


var box1 = box.splice(1,2,'科学','技术');
//从下标为1开始截取2个 然后再第一个位置插入 科学  技术 
console.log(box1);//因为截取了2个 box1 的值就是 1,b
console.log(box);//"a,科学,技术,5"


//splice 替换功能
var box1 = box.splice(1,1,666);
console.log(box1);//1
console.log(box);//a,666,b,5

时间和日期

js 提供的一些组件方法

  1. 首先获取时间对象
  2. 调用方法
var timed = new Date();
console.log(timed.toDateString());//Mon Aug 20 2018
console.log(timed.toTimeString());//15:52:41 GMT+0800 (中国标准时间)
console.log(timed.toLocaleDateString());//2018年8月20日
console.log(timed.toLocaleTimeString());//下午3:53:32



    var timed = new Date();
    /*console.log(timed.toDateString());//Mon Aug 20 2018
    console.log(timed.toTimeString());//15:52:41 GMT+0800 (中国标准时间)
    console.log(timed.toLocaleDateString());//2018年8月20日
    console.log(timed.toLocaleTimeString());//下午3:53:32*/
    console.log(timed.getTime());//1534751668024 获取日期的毫秒数
    console.log(timed.setTime(1534751668024));//以毫秒数设置日期 可能会改变整个日期
    console.log(timed.getTime());
    console.log(timed.getFullYear());//2018
    console.log(timed.setFullYear(2020));//2018
    console.log(timed.getFullYear());
    console.log(timed.getMonth());//月份从0开始返回7 代表 8月
    console.log(timed.setMonth(11));//设置年份
    console.log(timed.toLocaleDateString())
    console.log(timed.getDate());//20号 
    console.log(timed.setDate(25)); //返回的是毫秒数
    console.log(timed.getDay());
    //星期几console.log(timed.setDay());报错
    console.log(timed.getHours());
    console.log(timed.setHours(16));
    console.log(timed.getHours());
    console.log(timed.getMinutes());
    console.log(timed.setMinutes(6));
    console.log(timed.getMinutes());
    console.log(timed.getSeconds());
    console.log(timed.setSeconds(37));

正则表达式 用来验证用户输入的内容是否符合你定的规范

  • 登陆注册 表单验证 防止用户输入

创建正则表达式

  1. new RegExp(“规则”,参数)
var test1 = new RegExp("kangbazi",'igm'); //创建规则
var contents = prompt("请输入你的昵称");//用户输入的内容 
//test()方法用来检测用户输入的是否符合规则
//规则.test(内容);
if(test1.test(contents)){
    alert("欢迎光临");
}else{
    alert("谢绝入内");
}
  1. /规则/参数
    var box = /kangbazi/ig;
    var contents = prompt("请输入你的昵称");
    alert(box.test(contents));
    alert(box.exec(contents));
参数 含义
i 忽略大小写 KANGBAzi 跟 kangbazi 效果一样
g 全局匹配
m 多行匹配

检测的方法

方法 说明
test() 返回true或false
exec() 返回匹配的结果 如果匹配到返回匹配到的结果 否则 返回 null
var test1 = new RegExp('kangbazi','i'); //创建规则
var contents = prompt("请输入你的昵称");
//alert(test1.test(contents));
alert(test1.exec(contents));

猜你喜欢

转载自blog.csdn.net/qq_42426237/article/details/81876128