nodejs学习-day01

最新推荐文章于 2024-05-15 17:56:36 发布
最新推荐文章于 2024-05-15 17:56:36 发布
阅读量140 收藏 1
点赞数
分类专栏： JavaScript 文章标签： javascript es6
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41427445/article/details/113250787
版权

2.22

严格模式

‘use strict’;
严格模式与混杂模式的区别：

  1. 严格模式必须使变量声明符声明变量
  2. 严格模式不能使用delete删除变量
  3. 严格模式中八进制使用0o开头
  4. 严格模式中this不能指向window
  5. eval函数有自己独立的作用域

ES5-JSON

JSON的主要作用是传输数据 做数据交互 或者使用JSON做配置文件使用
JSON独立于语言和平台（操作系统） 任何语言和平台都支持JSON的序列化和反序列化
序列化：对象->JSON json.stringify
反序列化：JSON->对象 json.parse

let与const

一、ES6简介

ES6是ECMAScript6的简写
2015年发布ECMA2015，又称ES6。将2015年及以后每年发布的ES，都称为新一代ES，简称ES6。

  1. ES与js的关系？
    ES是JS的规格，js是ES的实现
  2. ES5与ES6的关系？
    ES6是下一代的JavaScript，新一代的JavaScript
    ES6相比于ES5的语法更加的简介，严谨
    ES6相比于ES5，它并没有修改ES5的语法(全方位兼容ES5)，新增知识
    新增：
    let，const
    字符串模板
    数组扩展
    对象扩展
    解构赋值，模式匹配
    class/继承
    promise
    iterator和generator
    async，await
    模块化（import/export）
  3. ES6的兼容性问题
    由于ES6是一个较新的技术，并不是所有的内容都会被浏览器支持(尤其是最新的内容，ES2019、ES2020…),到时候会使用一些工具，将ES6代码重新编译为ES5的代码，再执行。

二、let

能够定义变量的关键字：var function let const class
在ES5中，使用功能var定义变量
在ES6中新增了let关键字来定义变量
let和var的区别
1. let定义的变量没有变量提升，var有
2. let定义的变量属于块级作用域，var定义的变量属于函数作用域（ES5的作用域包括全局和局部，ES6新增块级）
3. let定义的变量不允许被重复定义
4. let定义的变量会出现暂时性死区的情况
5. let定义的变量不会被绑定到顶级对象window中

// 暂时性死区
let username = "admin";

if (true){
    console.log(username);  //直接报错  不做变量提升
    let username = "root";
}

使用let解决for循环问题

//正确添加了点击事件，点击不同li显示对应数值
    for (let i = 0; i < lis.length; i++) {
        lis[i].onclick = function () {
            alert(i);
        };
    }

使用let解决for循环问题–拆分

    //在for循环内部存在一个父子作用域
    //系统在每次for循环执行的时候，都会定义一个变量，来保存上一次i的值，把这个进行加1之后，赋值给下一次循环
    //第一步：
    {
        let i = 0;
        {
            lis[i].onclick = function () {
                alert(i);//0
            };
        }
    }
    //第二步：
    {
        let i = 1;
        {
            lis[i].onclick = function () {
                alert(i);
            }
        }
    }
    // 第三步：
    {
        let i = 2;
        {
            lis[i].onclick = function () {
                alert(i);//2
            };
        }
    }
    //..

特点：

  1. 在for循环圆括号内声明的变量，是for语句块作用域的父作用域
  2. JS引擎内部会记录for循环上一轮的值，每一轮循环 i 都是新的变量，初始化给下一轮循环

三、const

在ES6中新增了const来定义常量(一旦定义，就不能被修改)

  1. 1.let拥有的特点，const都有
  2. 2.const定义的变量不能被修改
  3. 3.const定义的常量，定义同时需要被初始化
    常量一般使用大写

解构赋值

在ES6中，允许通过一定的模式，将对象和数组中的内容提取出来，赋值给变量，这个过程称为解构赋值。

一、解构赋值的概念

回顾一下ES5中是如何提取数组的数据
ES6中的解构赋值，核心：模式匹配

  1. 解构赋值，需要有一个=(赋值符号)
  2. 解构赋值的=两变的模式是一致(都是对象，或都是数组)
  3. =的右边是要被解构的值，左边是变量
    结构的分类：完全解构、不完全解构（解构的缺省）、解构失败、解构的默认值

二、数组的解构赋值

数组结构的特点：1.数据有序 2. 数组中的元素有索引 3. 数组是一个集合类型
数组的解构：

  1. 数组的完全解构
        let arr=[10,20,30];
        //1.完全解构 要解构的数组数据与变量一一对应
        let [a, b, c] = arr;
        console.log(a, b, c);
  1. 不完全解构 要解构的数据数量多于变量的个数
        //2.不完全解构        let [a,b]=arr;
        console.log(a,b);
        //不完全解构缺省
        let [a, , b] = arr;
        console.log(a, b);//a=100  b=5
  1. 解构失败
        //3.解构失败   要解构的数据个数少于变量的个数
        let [a,b,c,d]=arr;
        console.log(a,b,c,d);//d =undefined
  1. 解构赋值的默认值（在解构过程中，允许给变量添加默认值）
       let [a, b, c = 0, d = 0] = [10, 20, 300];
        console.log(d);//默认值为0
        console.log(c);//300

默认值生效的前提是：判断变量的值是否严格等于（===）undefined，只有满足时，才去默认值。

        //默认值的特殊情况
        let [a = 0, b = 0, c = 0] = [undefined, null, undefined];
        console.log(a, b, c);// a=0  b=null  c=0

        // console.log(null==undefined);//true
        // console.log(null===undefined);//false
        //默认值：判断变量的值是否真等于undefined

三、对象的解构赋值

对象的特点：1.对象是无序的 2.对象是一种hash结构 ，是依靠key去取值的。
对象的解构中，就是使用key来进行匹配
模式：{}

  1. 完全解构
		let obj={
		name:'赵帅鸽',
		age：21,
		addr:'海淀区'
		};
        //es6  {}模式匹配
        //注意：在解构中，name,age,address不是变量
        //a,b,c是变量
        //1.完全解构
        let { name: a, age: b, address: c } = obj;
        console.log(a, b, c);
		console.log(age);//error age不是变量 a才是变量
  1. 不完全解构
    //2.不完全解构
    let {name:a,age:b}=obj;
    console.log(a,b);

3）解构失败

        let { name: a, no: b } = obj;
        console.log(a);
        console.log(b);//undefined

4）解构默认值

        //4.解构默认值
        let { name: a, no: b = '00000' } = obj;
        console.log(a);
        console.log(b);//默认值

特殊情况：若要解构的对象key与变量名一致，则可以简写

        //简写情况
        // let { name: name, age: age } = { name: 'lucy', age: 100 };
        //可以简写为如下：
        let { name, age } = { name: 'lucy', age: 100 };
        console.log(name, age);

注意：在简写中，name和age充当了两个角色，第一是：key,第二是：变量名

四、其他类型的解构

  1. 字符串的解构
        let str = 'hello';
        let [a] = str;
        console.log(a);//h
        let { length } = str;//str.length
        console.log(length);
  1. 数值的解构
        let a=10;//包装对象  Number
        // let b=a.toString();
        // console.log(b);//'10'
        let {toString}=a;
        console.log(toString);

五、解构的使用场景

  1. 用于数据交换
        let a = 5;
        let b = 3;
        //在不使用第三个变量的前提下，完成a,b的数据交换
        // a = a + b;//8
        // b = a - b;//5
        // a = a - b;//3
        // console.log(a, b);

        [b, a] = [a, b];
        console.log(a, b);
  1. 解构服务端数据
        //解析后台数据
        let obj = {
            code: 200,
            msg: '登陆成功',
            data: {
                name: 'lucy',
                no: '10001'
            }
        };

        //取出
        let { code, data } = obj;
        console.log(code, data);
        let { name, no } = data;//{name: "lucy", no: "10001"}
        console.log(name, no);

        //取出code和name
        let { code, data: { name } } = obj;
        console.log(code, name);
  1. 解构函数的参数
        function getSum([a = 0, b = 0, c = 0]) {
            let sum = a + b + c;
            console.log(sum);
        }

        // getSum([10, 20, 30]);
        // getSum([10, 20]);
        // getSum();//报错
        getSum([]);
        getSum([5]);

当函数的形参较多时，推荐将函数参数封装为对象来进行传递，可以解决参数的顺序问题。再搭配上解构默认值，又可以解决参数的默认值问题

ES6扩展

一、字符串扩展

  1. 模板字符串，允许通过使用反引号来定义字符串
    模板字符串的特性
    • 支持换行
    • 内部支持js表达式，在${}中，可以支持js表达式
        //使用es6编辑页面
        //将后台数据展示到页面的ul中
        var oUl = document.querySelector('ul');
        let { data } = obj;//解构
        data.forEach(function (item) {
            // console.log(item);
            oUl.innerHTML += `
                <li>
                    <span class="bookname">${item.name}</span>
                    <span class="author">${item.autor}</span>
                </li>
            `;
        });
  1. 新增了一些方法
    includes() 判断字符串中是否包含字符 true/false
    startsWith() 判断字符串是否以指定字符串开头 true/false
    endsWith() 判断字符串是否以指定字符结尾 true/false
    padStart() 在头部补全字符串到指定长度
    padEnd() 在尾部补全字符串到指定的长度
        let num='1';
        num=num.padStart(2,'0');//补充字符串到长度为2，使用0来补
        console.log(num);//01

二、数组扩展

新增了一些方法

  1. includes() 判断数组中是否包含指定数据 true/false
  2. Array.from() 将其他类型转换为数组类型
        let obj = {
            '0': 100,
            '1': 200,
            '2': 300,
            length: 3
        };
        // //将上面的对象转换为数组
        let arr = Array.from(obj);
        console.log(arr);

三、对象扩展

  1. 对象属性名简写
        //若对象的属性名与属性值对应的变量名称一致，则可以简写为如下：
        let obj = {
            name,
            age,
            addr
        };
        console.log(obj);
  1. 对象属性表达式
    ES5中为对象添加属性：
    obj.属性名
    obj[‘属性名’]
    ES6中，新增属性表达式
    obj[‘表达式’]
        let str = 'no';

        let obj = {
            name: 'jack',
            'age': 20,
            // ['a'+'b'+5]:"hello"
            [str]: "100"
        };
        // obj['a' + 'b' + 5] = 1000;
        console.log(obj);

示例2：构建城市列表数据

        let obj={};
        for(let i=0;i<26;i++){
            var c=String.fromCharCode(65+i);
            obj[c]=[];
        }
        console.log(obj);
  1. 对象方法的简写
    对象中的方法可以去掉function关键字声明，直接使用函数名(),形式即可：
        let obj={
            name,
            age,
            addr,
            say(){
                console.log(111);
            },
            walk(){
                console.log(222);
            }
        };

四、函数扩展

  1. 参数默认
    在ES6中，允许给形参添加默认值
        //es6中
        //形参可以添加默认值
        function fn(a = 0, b = 0) {
            console.log(a + b);
        }
        fn(10,20);//30
        fn(10);//10
        fn();/0

回顾：在ES6中，有哪些默认值？

  • 解构默认值 //当解构的数据个数少于变量的个数，解构默认值可以解决解构失败的问题
  • 函数的形参默认值 //实参个数少于形参个数时，函数形参默认值起作用

解构默认值+形参 —>解决参数的顺序
示例1：ajax封装时，用对象作为参数，并给解构时传默认值 //当参数传递不全时，仍能正确运行
解构默认值+形参默认值—>解决参数顺序问题，又能解决参数默认值问题
示例1：求和函数 //当不传递参数时(fn()😉，形参默认值生效，当前参数为[]；对[]进行解构，解构默认值生效

function fn([a = 0, b = 0] = []) {
    console.log(a + b);
}
fn([10, 20]);
fn([10]);
fn([]);//解构默认值生效
fn();//形参默认值生效

示例2：

        //解构+形参默认值
        function ajax({
            method = "GET",
            url = "http://localhost:3000",
            params = '',
            success
        } = {}) {
            var xhr = new XMLHttpRequest();
            if (method == "GET" && params != undefined) {
                url = url + "?" + params;
            }

            xhr.open(method, url);
            xhr.onreadystatechange = function () { };
            if (method == "POST" && params != undefined) {
                xhr.send(params);
            } else {
                xhr.send();
            }
        }
        ajax();
  1. 箭头函数
    在ES6中，允许通过箭头来定义函数 => //多用于函数的表达式声明中let sum=function fn () { } let sum=fn()=>{}
    1. 参数的个数
      • 若参数的个数是一个，则省略()
      • 若无参或有两个以上参数，()不能省略
    2. 返回值
      • 若函数体只有一句代码，且是返回语句，则可以省略{}和return关键字
      • 其它情况，return和{}都不能省略
        特殊情况：若返回值为对象，则不能省略return和{}（有歧义，会把{}理解为函数体）
       let fn = function (a, b) {
       return {
            name: a,
            age: b
         };
    }
    1. 箭头函数中的this
      在普通函数和箭头函数中this的指向不一样。
      普通函数中：this指向调用者
      箭头函数中：this指向定义时的作用域(当前是谁的作用域，this就指向谁)
      普通函数和箭头函数的区别：
    • this指向不同
    • 箭头函数不能用于构造函数，普通函数可以
    • call和apply可以修改普通函数中this的指向，不能修改箭头函数中this的指向
    • 箭头函数中没有arguments属性，箭头函数使用rest参数实现arguments的功能
    • 箭头函数没有prototype属性，普通函数有
    • 箭头函数不会被绑定到顶级对象上
      箭头函数不适合的场景：
    • 构造函数
    • 对象的方法 /此时this都指向window
    • 事件函数
        var obj = {
            sName: "李四",
            age: 20,
            say: function () {
                console.log(this);//obj
                setTimeout(function () {
                    console.log(this);//window
                    console.log(this.sName + " 哈哈哈");
                }, 1000);
            }
        };

        var obj = {
            sName: "李四",
            age: 20,
            // say: function () {
            //     console.log(this);//obj
            //     setTimeout(() => {
            //         console.log(this);//obj
            //         console.log(this.sName + " 哈哈哈");//undefined哈哈哈
            //     }, 1000);
            // }
            // say: ()=> {
            //     console.log(this);//window
            //     setTimeout(() => {
            //         console.log(this);//window
            //         console.log(this.sName + " 哈哈哈");
            //     }, 1000);
            // }
        };

        obj.say();
  1. rest参数
    由于ES6中的箭头函数不能使用arguments属性，rest参数一定程度上类似arguments。
    …变量名
    rest参数能够接收任意多的数据
    rest参数只能是参数列表中的最后一个参数

五、扩展运算符

… 扩展运算符
运算规则：扩展运算符是rest参数的逆运算
rest参数：将离散数据转换为数组（聚合）
扩展运算符：将集合转换为离散数据（打散）
区分：在函数的参数位置的是rest参数，其他都是扩展运算符

//rest参数
function fn(...all){
	let sum=0;
	for(let i in all){
		sum+=i;
	}
}
fn(10,20,30);
//扩展运算符
let arr=[10,20,30];
let arr0=[...arr];//先将数据打散，再放入数组中
console.log(arr0);//[10,20,30   ]
Happiness_sc
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Node开发（三）ES6扩展
weixin_43933148的博客
09-26 132
一、字符串扩展 1.模板字符串，允许通过使用反引号来定义字符串 `` 模板字符串的特性： 1）支持换行 2）内部支持js表达式 在${}中，可以支持js表达式 //使用es6编辑页面 //将后台数据展示到页面的ul中 var oUl = document.querySelector('ul'); let { data } = obj;//解构 data.forEach(function (item) { // console.log(item); oUl.innerHTML += `
nodejs-day8.rar
03-05
"nodejs-day8.rar"这个压缩包很可能是第八天的Node.js学习资料，可能包括了代码示例、课件、讲解视频或笔记等内容。 首先，我们来讨论Node.js的核心概念： 1. **事件循环(Event Loop)**：Node.js的核心是事件循环...
node插件开发与发布
那谁家的博客
07-25 1199
本文主要给各位分享如何快速创建node插件并发布到npm上。 npm是一个让JavaScript程序员分享和复用代码的工具，我们不仅可以install别人的插件，也可以publish自己的代码。 npm install太多，是时候publish一波 1.初始化一个node项目 我暂且将这个node插件命名为my-plugin，创建目录my-plugin，进入目录，使用npm init --y...
node.js之自定义模块引入问题（使用es6扩展运算符）
a1071626267的博客
07-22 180
node.js之自定义模块引入问题（使用es6扩展运算符）
ECMAScript6笔记：对象的扩展
YuqiRealm.com
11-12 532
ECMAScript6笔记：对象的扩展
node-gyp编译c++编写的node扩展
feinifi的博客
11-08 2664
node-gyp编译c++编写的node扩展，并简单调用。
nodejs-day2.rar
03-05
在“nodejs-day2.rar”这个压缩包中，我们聚焦于Node.js的学习，这是一个基于Chrome V8引擎的JavaScript运行环境，专为构建可扩展的网络应用而设计。Node.js利用事件驱动、非阻塞I/O模型，使其轻量又高效，尤其适合...
nodejs-day7.rar
03-05
在本课程"Node.js Day7"中，我们将深入探讨...通过"Node.js Day7"的学习，你将掌握构建高效、可扩展的Node.js应用所需的关键技能。这个阶段的学习将涵盖许多实际项目中的常见任务，为你的Node.js开发之路打下坚实基础。
nodejs-day4.rar
03-05
在本课程"Node.js Day 4"中，我们将深入探讨Node.js的核心特性和高级概念，以便更好地理解和利用这个强大的服务器端JavaScript平台。Node.js以其异步、非阻塞I/O模型而闻名，使得它在处理高并发场景下表现出色。在这...
nodejs-day3.rar
03-05
在Day 3的学习中，我们还将讨论Node.js的事件循环。事件循环是Node.js实现异步处理的关键，它不断检查是否有待处理的事件，然后调用相应的回调函数。理解事件循环的工作原理对于优化性能和避免回调地狱至关重要。 ...
nodejs中es6 padStart()、padEnd()方法
Tirst_的博客
07-10 549
padStart()方法,padEnd()方法 ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。 'x'.padStart(5, 'ab') // 'ababx' 'x'.padStart(4, 'ab') // 'abax' 'x'.padEnd(5, 'ab') // 'xabab' 'x'.padEnd(4, 'ab') // 'xaba' 如果原字符串的长度，等于或大于指定的最小长度，则返回原
nodejs正则格式化规范输入
ArmadaDK的博客
09-15 252
比如我现在要格式为Axxx-xxx（xxx是数字）的格式，但是输入有可能为A1-2这种情况，就需要补零，变成A001-002。
Node插件开发(1)-快速入门
while(1) { smile(); }
03-04 1150
在使用Electron开发客户端时，如果现有Node模块所提供的功能无法满足需求，我们可以使用C++开发自定义的Node模块，也称插件（addon）。 Node.js插件的扩展名为`.node`，是二进制文件，其本质上是动态链接库重命名而来，在Windows平台是.dll文件，Linux/Unix平台是.so文件。
构建可扩展的Node.js应用
最新发布
2301_79507619的博客
05-15 350
例如，使用控制器（controllers）处理请求逻辑，使用服务（services）处理业务逻辑，使用模型（models）与数据库交互。使用`.env`文件和`dotenv`库来管理环境变量，以便在不同环境（开发、测试、生产）中配置不同的设置。将路由定义在单独的文件中，并使用Express的路由器（Router）来管理不同的路由。中间件可以帮助你处理请求和响应的逻辑。- **集群模式**：使用Node.js的`cluster`模块来利用多核CPU。- **使用缓存**：如Redis来缓存频繁访问的数据。
node 之 ... 扩展运算符报错
weixin_30872671的博客
07-22 1044
使用pm2的遇到的问题：（实际上是 node 版本不一致导致的问题） 　　　　描述：sudo 下的node版本和 全局下的node版本不一致导致...扩展运算符报错。 　　　　实例： { 　　　　　　　　　　"apps":[ 　　　　　　　　　　　　　　{ 　　　　　　　　　　　　　　　　"name":"*****", 　　　　　　　　　　　　　　　　"script":"ap...
node 6.10.2与node 7.9.0的一些差异
过客2019
04-27 2983
node进步很快，一年前，我用的还是node 4.x LTS,现在都 node 6.x LTS了，而node 7.x也在开发中，node 8.x已经也展开了。 node 6.x已经到了node 6.10.2了，则7.x也到了7.9.0了 对比后，这里把发现的差异列一下n次方运算符 **例如 let a = 2 ** 3; console.log(a); //显示为8 let b = 3; b *
ES2017 中新的字符串方法：padStart 和 padEnd
htong521的博客
06-05 669
本文为 《JavaScript 新书：探索 ES2016 与 ES2017》的内容章节，你可以点击链接查看完整目录。 概述: ECMAScript 2017 有两个新的字符串方法： JavaScript 代码: > 'x'.padStart(5, 'ab') // 'ababx' > 'x'.padEnd(5, 'ab') //'xabab' 为...
padStart()与padEnd()方法
weixin_42780730的博客
05-23 406
如果某个字符串不够指定长度，会在头部或尾部补全。 padStart()：用于头部补全。 padEnd()用于尾部补全。 一共接受两个参数， 第一个参数用来指定字符串的最小长度， 第二个参数是用来补全的字符串。 ...
再写Node基础（读《Node.js 来一打C++扩展》）
weixin_34088583的博客
08-24 240
NPM的作用： Node.js程序依赖包的发布、管理和安装。 CommonJS规范 require require是一个函数，参数是模块标识符，返回值是所引用模块暴露给外部使用者的内容。 直白一点讲： 一个模块定义文件module1.js module.exports={ a:1, f: function(){ ...
nodejs­-websocket安装
08-05
要安装nodejs-websocket模块，您可以使用npm进行安装。请按照以下步骤操作： 1. 打开终端或命令提示符，并导航到您的项目目录。 2. 运行以下命令安装nodejs-websocket： ``` npm install nodejs-websocket``` 3. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值