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

可以参考：廖雪峰的官方网站 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"

posted @ 2021-03-01 22:05 豆豆tj 阅读(81) 评论(0) 收藏举报

刷新页面返回顶部

豆豆tj

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