第52天学习打卡（JavaScript 流程控制Map和Set iterator 函数 内部对象）

其他 2021-03-03 19:34:33 阅读次数: 0

可以参考：廖雪峰的官方网站 JavaScript全栈教程

3.4流程控制

if判断:

  var age = 3;
        if(age>3){
    
    //第一个判断
            alert("haha");
        }else if(age < 5){
    
    //第二个判断
            alert("ku");
        }else{
    
    
            //否则
            alert("happy")
        }

while循环：避免死循环

 var age = 3;
        while(age<100){
    
    
            age = age + 1;
            console.log(age)
        }
do{
    
    
    age = age + 1;
    console.log(age)
}while(age<100)

for循环

var age = 3;
        for (let i = 0; i < 100; i++) {
    
    
            console.log(i)

        }

forEach循环：

5.1特性引入

var age = [12,3,12,,34,12,56,7,8];
         //函数
        /*
        java中的定义:
        for(Type str: element){}
         */

        age.forEach(function (value) {
    
    
            console.log(value)

        })

for…in

//索引for(var index in object)
        for (var num in age) {
    
    
            if(age.hasOwnProperty(num)){
    
    
                console.log("存在")
                console.log(num)
            }
        }

3.5Map 和Set

ES6的新特性

Map:

    //ES6 Map
        //学生的成绩，学生的名字
        // var names = ["tom", "jack", "haha"]
        // var scores = [100 ,90, 80]

        var map = new Map([['tom',100],['jack',90],['haha',80]]);
        var name= map.get('tom');//通过key获得value
        map.set('admin',123456);//新增或修改
        console.log(name);
        map.delete("tom");//删除

Set:无序不重复的集合

  var set = new Set([1,2,3,4,2,3,3,3,1,2,]); //set可以去重
        set.add(7);//添加
        set.delete(2);//删除
        console.log(set.has(3));//判断数组中是否有3，返回布尔值

3.6 iterator

es6新特性

打印下标：

 'use strict';
//通过for in
        var arr = [3,4,5]
        for (var x in arr){
    
    
            console.log(x)
        }

打印具体的值：

遍历数组

 'use strict';
//通过for of 
        var arr = [3,4,5]
        for (var x of arr){
    
    
            console.log(x)
        }

遍历map:

 var map = new Map([["tom",100],["jack",90],["haha",80]]);
        for (let x of map) {
    
    
            //使用let，当前块使用完就消失
            console.log(x);
        }

遍历set：

 var set = new Set([5,6,7]);
        for(let x of set){
    
    
            console.log(x)
        }

4.函数

方法：对象（属性，方法）

定义方式一

4.1 定义函数

java中的写法：
public 返回值类型 方法名(){
    
    
    return 返回值;
}

绝对值函数：

function abs(x){
    
    
    if(x>=0){
    
    
        return x;
    }else{
    
    
        return -x;
    }
}

一旦执行return代表函数结束，返回结果。

如果没有执行return,函数执行完也会返回结果，结果就是undefined(NaN)

定义方式二

var abs = function(x){
    
    
    if(x>=0){
    
    
        return x;
    }else{
    
    
        return -x;
    }
    
}

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var abs = function(x){
     
     
        if(x>=0){
     
     
            return x;
        }else{
     
     
            return -x;
        }

    }

</script>
</body>
</html>

function(x){…}这是一个匿名函数。但是可以把结果赋值给abs,通过abs就可以调用函数！

方式一和二等价。

调用函数

abs(10) //10
abs(-10) //10

参数问题：javaScript可以传任意个参数，也可以不传递参数

假设不存在参数，如何规避：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var abs = function(x){
     
     
        //手动抛出异常判断
        if (typeof x!=='number'){
     
     
            throw 'Not a Number';
        }
        if(x>=0){
     
     
            return x;
        }else{
     
     
            return -x;
        }

    }

</script>

</body>
</html>

arguments

arguments是JS免费赠送的关键字；

代表传递进来的所有的参数，是一个数组！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var abs = function(x){
     
     
       console.log("x=>"+x)
        for (var i = 0; i < arguments.length;i++){
     
     
            console.log(arguments[i]);
        }
        if(x>=0){
     
     
            return x;
        }else{
     
     
            return -x;
        }

    }

</script>
</body>
</html>

问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作。需要排除已有的参数~

rest

以前：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    function aaa(a,b){
     
     
        console.log("a=>"+a);
        console.log("b=>"+b);
        if (arguments.length>2){
     
     
            for (var i = 2; i<arguments.length;i++){
     
     
                
            }
        }
    }
</script>

</body>
</html>

ES6引入的新特性，获取除了已经定义的参数之外的所有参数…(可变长参数)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>
    function aaa(a,b,...rest){
     
     
        console.log("a=>"+a);
        console.log("b=>"+b);
        console.log(rest);


    }
</script>

</body>
</html>

结果：

aaa(1)
 a=>1
 b=>undefined
[]
undefined
aaa(111,12,11,23,1,234)
 a=>111
b=>12
(4) [11, 23, 1, 234]
undefined

rest参数只能写在最后面，必须用…标识（也就是说aaa[a,b]里面原本只有a,b两个参数，若给aaa()里面赋多个值，则第一个和第二个值给a,b其余的值是放在rest里面的）

4.2变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

假设在函数体中声明，则在函数体外不可以使用~（非要想实现的话，后面可以研究一下闭包）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

   function qj(){
     
     
      var x = 1;
      x = x + 1;
   }
   x = x + 2;//Uncaught ReferenceError: x is not defined
</script>




</body>
</html>

如果两个函数使用了相同的变量名，只要在函数内部，就不冲突

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

   function qj(){
     
     
      var x = 1;
      x = x + 1;
   }
   function qj2(){
     
     
       var x = 'A';
       x = x + 1;
   }

</script>

</body>
</html>

内部函数可以访问外部函数的成员，反之则不行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

   function qj(){
     
     
      var x = 1;

      //内部函数可以访问外部函数的成员，反之则不行


   function qj2(){
     
     
       var y = x + 1;//2

   }
   var z = y + 1;//Uncaught ReferenceError: y is not defined
   }

</script>
</body>
</html>

假设，内部函数变量和外部函数的变量，重名！(只有内部可以访问外部的)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

   function qj(){
     
     
      var x = 1;

   function qj2(){
     
     
       var x = 'A';
       console.log('inner' + x);// innerA

   }
   console.log('outer' + x);// outer1
   qj2()

   }
   qj()

</script>

</body>
</html>

假设在JavaScript 中函数查找变量从自身函数开始，由内向外查找（就近原则）。假设外部存在这个同名的函数变量，则内部函数会屏蔽外部函数的变量。

提升变量的作用域。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

   function qj(){
     
     
      var x = 'x' + y;
      console.log(x);
      var y = 'y';


   }


</script>
</body>
</html>

结果：x is not defined

说明：JS执行引擎,自动提升了y的声明，但是不会提升变量y的赋值；

function qj2(){
    
    
       // 我们会把所有的变量提到最前面去
       var y ;
       var x = 'x' + y;
       console.log(x);
       var y = 'y';


   }

这个是在JavaScript 建立之初就存在的特性，养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护。

   function qj2(){
    
    
       
       var x = 1,
           y = x + 1,
           z,i,a;//undefined

   }

全局函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    
    //全局变量 定义在函数外的就是全局变量

    var x = 1;

    function f() {
     
     
        console.log(x);

    }
    f()
    console.log(x);
</script>
</body>
</html>

全局对象window

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var x = 'xxx';
    alert(x);
    alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下


</script>
</body>
</html>

alert()这个函数本身也是一个window变量。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    var x = 'xxx';

    window.alert(x);
    var old_alert = window.alert;

   // old_alert(x);
    window.alert = function (){
     
     

    };
    //发现alert()失效了
    window.alert(123);

    //恢复
    window.alert = old_alert;
    window.alert(456);



</script>
</body>
</html>

JavaScript 实际上只有一个是全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用域范围内找到，就会向外查找，如果在全局作用域都没有找到，报错ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的window上，如果不同的JS文件使用了相同的全局变量，就会产生冲突。

如何能够减少冲突？—解决办法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    //唯一全局变量
    var KuangApp = {
     
     };

    //定义全局变量
    KuangApp.name = 'kuangshen';
    KuangApp.add = function (a,b){
     
     
        return a + b;
    }
</script>
</body>
</html>

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题~

jQuery

局部作用域let

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    function aaa(){
     
     
        for (var i = 0; i < 100; i++) {
     
     
            console.log(i)

        }
        console.log(i+1);// 问题？i出了这个作用域还可以使用
    }
</script>
</body>
</html>

Es6 let关键字，解决局部作用域冲突问题

   function aaa(){
    
    
        for (let  i = 0; i < 100; i++) {
    
    
            console.log(i)

        }
        console.log(i+1);// 此时只打印到99 Uncaught ReferenceError
    }

建议大家都使用let去定义局部作用域的变量

常量const

在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量；建议不要修改这样的值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>

    var PI = '3.14';
    console.log(PI);
    PI = '213';//可以改变这个值
    console.log(PI);
</script>
</body>
</html>

在ES6引入了常量关键字const

const PI = '3.14';//只读变量，不可以去改变
    console.log(PI);
    PI = '123';//Uncaught TypeError: Assignment to constant variable.
    console.log(PI);

4.3方法

定义方法

方法就是把函数放在对象的里面，对象只有两个东西：属性和方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var kuangshen = {
     
     
        name: '秦疆',
        birth: 2000,
        //方法
        age: function (){
     
     
            //今年 - 出生的年
           var now = new Date().getFullYear();
           return now-this.birth;
        }
    }
</script>
</body>
</html>

//属性
kuang.name
//方法，一定要带()
kuangshen.age()

//属性
kuang.name
//方法，一定要带()
kuangshen.age()

this代表什么，拆开上面的代码看看

this始终指向调用它的人

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function getAge(){
     
     
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var kuangshen = {
     
     
        name: '秦疆',
        birth: 2000,

        age: getAge
    }

    //kuangshen.age()
    //21  成功输出

    //若使用getAge() 调用则出现 NaN
</script>
</body>
</html>

this是无法指向的，是默认指向调用它的那个对象

apply

apply在js中可以控制this的指向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>

    function getAge(){
     
     
        var now = new Date().getFullYear();
        return now-this.birth;
    }
    var kuangshen = {
     
     
        name: '秦疆',
        birth: 2000,

        age: getAge
    };

    //kuangshen.age()
    //21  成功输出

    getAge.apply(kuangshen,[]);//this.指向了kuangshen这个对象,参数为空
</script>
</body>
</html>

输出结果

getAge.apply(kuangshen,[])
21
kuangshen.age()
21
getAge()
NaN

5.内部对象

标准对象

typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {
    
    }
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

5.1Date

基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var now = new Date();//Mon Mar 01 2021 21:31:48 GMT+0800
    now.getFullYear();//年
    now.getMonth();//月 0-11代表月
    now.getDate();//日
    now.getDay();//星期几
    now .getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒

    now.getTime();//时间戳 全世界统一 从1970 1.1 0:0:0毫秒数
    console.log(new Date(1614605508760))//时间戳转换为时间
</script>
</body>
</html>

转换：

now = new Date(1614605508760)
Mon Mar 01 2021 21:31:48 GMT+0800 (中国标准时间)
now.toLocaleString()//注意，调用是一个方式，不是一个属性
"2021/3/1 下午9:31:48"

猜你喜欢

转载自blog.csdn.net/doudoutj/article/details/114272971
今日推荐
周排行
Sping整合ActiveMQ（五.常见错误分析）
jquery ajax发送请求实例模板
北风设计模式课程---24、迭代模式
[Luogu] 兽径管理
1030 Travel Plan （30 分）(dijkstra算法+dfs+边权)
springboot-shiro中的问题
数据访问安全代理 CASB
RocketMQ与Kafka对比
Rider 2019.3.3 发布，跨平台 .NET IDE
Ubuntu切换root su -
每日归档
更多
2025-03-17(0)
2025-03-16(0)
2025-03-15(0)
2025-03-14(0)
2025-03-13(0)
2025-03-12(0)
2025-03-11(0)
2025-03-10(0)
2025-03-09(0)
2025-03-08(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022