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

最新推荐文章于 2024-08-27 13:38:21 发布
最新推荐文章于 2024-08-27 13:38:21 发布
阅读量80 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/doudoutj/article/details/114272971
版权

可以参考：廖雪峰的官方网站 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"
doudoutj
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript-Map和Set集合、iterator、函数的定义和参数获取
qq_61727355的博客
09-01 662
1.Map和Set集合 Set：无序不重复的集合 Set 可以去重 2.iterator 作用：使用iterator来遍历Map、Set 3.函数的定义和参数获取 3.1 定义一个函数 java中的格式：public 返回值类型 方法名(){ return 返回值；} 一旦执行到 return 代表函数结束，返回结果！如果没有执行 return，函数执行完也会返回结果，结果就是 undefined function(x){…}这是一个匿名函数。但是可以把结......
深入解读JavaScript中的Iterator和for-of循环
10-23
JavaScript中的Iterator和for-of循环是ES6（ECMAScript 2015）规范中引入的重要特性。它们为遍历数据结构提供了一种更加简洁、直观且功能强大的方法。在介绍这两个概念之前，我们先来回顾一下传统的遍历方法。 在...
JS高级 之 使用 Iterator - Generator
玄鱼殇
08-09 506
JS高级 之 使用 Iterator - Generator
JavaScript基础一：JavaScript概述、基本语法、字符串、数组、对象、while和for循环、map和set集合、iterator遍历
她长眠于月色
02-08 267
一、JavaScript概述 JavaScript（简称JS）是当今互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备 JavaScript 与 Java无关， 是两种完全不同的语言 JavaScript的版本： 1997年，ECMAScript 1，是JavaScript的第一个版本 1998年，ECMAScript 2...
JS Iterator（迭代器）
我本可以
12-07 9181
任何数据结构只要部署 Iterator 接口，就可以完成遍历操作，即依次处理该数据结构的所有成员。 遍历器对象本质上，就是一个指针对象。指针对象的next方法，用来移动指针。 next方法返回一个对象，表示当前数据成员的信息。这个对象具有value和done两个属性，value属性返回当前位置的成员，done属性是一个布尔值，表示遍历是否结束，即是否还有必要再一次调用next方法。对于遍历器对象来说，done: false和value: undefined属性都是可以省略的。
es6 javascript的Iterator 和 for...of 循环
现在学习也不晚
12-05 9201
1 Iterator（ 遍历器） 的概念JavaScript 原有的表示“ 集合” 的数据结构， 主要是数组（ Array） 和对象（ Object）， ES6 又添加了 Map 和 Set。 这样就有了四种数据集合， 用户还可以组合使用它们， 定义自己的数据结构， 比如数组的成员是 Map， Map 的成员是对象。 这样就需要一种统一的接口机制， 来处理所有不同的数据结构。遍历器（ Iterat...
小议JavaScript中Generator和Iterator的使用
10-23
JavaScript中的Generator（生成器）和Iterator（迭代器）是ES6（ECMAScript 6）引入的两个非常重要的概念，它们提供了更为强大的异步编程和控制循环流程的手段。 Generator 生成器是一种特殊的函数，它支持在函数...
unordered_map和unordered_set的模拟实现
01-20
unordered_map和unordered_set的模拟实现 （一）哈希表的特性及概念 定义： 哈希表（Hash table，也叫散列表），是根据关键字值（key,value）直接进行访问的数据结构。也就是说，它通过把关键字映射到表中一个位置来...
Map、Set、Iterator迭代详解
09-15
### Map接口详解 #### 1. Map接口概览 ...通过以上对`Map`、`Set`、`Iterator`以及Java集合框架的详细介绍，我们不仅可以了解到这些接口和类的基本概念和使用方法，还能深入理解它们在实际编程中的应用价值。
js中的迭代器iterator
dtbk123的博客
04-23 2175
js的symbol中有个iterator迭代器，它也是一个接口，它有三个作用：1.它可以为数据结构提供访问接口 2.可为数据有序排列 3.可用于forof循环和...rest参数，它的工作流程是：1.创建一个指针对象，指向数据结构中的起始位置 2.调用next方法指向下一个数据，直到指向的数据没有时，结束位置。 下面来看下代码 var arr=[1,4,5] var i...
JS为对象添加Iterator接口
Cahier
04-27 2756
ES5： //如为对象添加Iterator 接口; let obj = { name: "XX", age: 20, job: 'teacher', [Symbol.iterator]() { const self = this; const keys = Object.keys(self); let index...
JavaScript——使用iterator遍历迭代map，set集合元素
zhu_fangyuan的博客
11-13 1997
代码演示： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <script> /** * 需求： * 使用iterator遍历迭代map,set集合 */ 'use strcit'; var array .
js中Iterator
weixin_70989429的博客
06-03 616
处理集合中的每个项是很常见的操作。JavaScript 提供了许多迭代集合的方法，从简单的for循环到map()和filter()。
ES6中的Set与Map及Iterator迭代器
King的博客
08-17 908
Set数据结构 类似于数组，但成员的值是唯一的，没有重复的值 去除数组中的重复成员 [...new Set(arr)] Set原型对象的属性 constructor 返回当前实例的构造函数，默认就是Set size 返回Set实例的成员总数 Set原型对象的方法 add(value) 添加某个值，返回Set结构本身 delete(value) 删除某个值，返回一个布尔值，表示...
jQuery基础——DOM基础
最新发布
m0_54066656的博客
08-27 472
JQ基础——DOM操作
python12 中，No module named‘distutils‘错误
qq_43557600的博客
08-27 93
python12 “ No module named'distutils' ”,​ 安装 pip install setuptools ，解决 ​
2024前端面试题-js篇
FormAda的博客
08-22 954
是数组的一种迭代方法，主要用于对数组中的每一项执行给定的函数。它只是简单地对数组进行遍历，没有提供跳出循环的机制。基础数据类型：string,number,boolean，null，undefined，bigInt，symbol。在规定的时间内没有触发事件，就执行函数，如果在规定的时间触发了时间久重新开始计时。当异常被抛出时，正常的流程被打断，可以通过。函数执行一次后，在规定的时间内不再执行。块捕获异常，从而实现停止迭代的效果。执行顺序：同步代码->微任务->宏任务。引用数据类型：Object。
Ant-Design-Vue快速上手指南+排坑，操作详细步骤
liyy614的博客
08-23 854
总的来说，掌握Ant-Design-Vue的基本使用并不复杂，但是要想充分利用其提供的功能，就需要深入了解每个组件的详细用法，以及如何合理地整合到你的项目之中。Ant-Design-Vue是一款基于Vue.js的UI组件库，它不仅提供了丰富的高质量组件，还支持灵活的配置选项，使得开发者能够快速构建出既美观又功能强大的前端应用。例如，当你首次注册Ant Design Vue时，需要确保Vue实例已经正确创建并且版本兼容。再如，在按需引入组件的时候，配置正确的webpack策略可以避免不必要的资源请求。
vue全局参数
qq_34631220的博客
08-24 224
其它页面如果想监听改变。
map容器报错cannot dereference end map/set iterator 是什么意思
05-26
这个错误通常会出现在使用`map`容器时，当尝试使用一个`end`迭代器进行解引用操作时。`end`迭代器表示容器的最后一个元素之后，因此不能对其进行解引用操作。 这个错误经常是由于循环中使用了错误的迭代器范围导致...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值