前端知识学习笔记-五(ECMAScript 6)

命令行工具

在正式讲解ES6新特性之前,我们需要了解一些命令行工具,在日后的课程中,我们会经常用到命令行

常用命令行工具有两种

CMD 命令行工具
PowerShe门命令行工具

CMD命令行

打开命令行窗口
win: 左下角开始,找到运行,点击,输入cmd,回车
win: win+r 快速打开命令行窗口
mac: command+空格,输入 terminal
选择盘符:盘符名加冒号 E:
查看盘符及目录下文件与文件夹:win:dir mac:ls
清空命令行信息: wn:cls mac:clear
进入文件夹或目录: cd 件名称
返回到上一级目录:cd ./
快速补全目录或文件夹名称: tab
创建文件夹: mkdir 文件夹名称
查看历史输入过的命令:上下按键

PowerShell
打开方式

在开始位智搜索 PowerShell 打开
在对应目录按住 enin +右键,打开

ECMAScript6简介

ECMAScript 和JavaScript 的关系
ECMAScript 和JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现,常场合,这两个词是可以互换的。

名称详解 ECMAScript6(以下简称 ES6)
是JavaScript 语言的标准,在 2015 年6月发布。它的目标,是使得javaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

ES6带来的新特性

let 和 const 命令
变量的解构赋值
字符串扩展
函数扩展
对象扩展
数组扩展
运算符扩展
Promise对象
Class
Class 继承

nodejs环境安装

本节课为前置课程,在接下来的ES6课程中,我们需要先安装Nodejs环境

Nodejs简介
Nodejs诞生于2009年,主攻服务器方向,使得利用JavaScrit 也可以完成服务器代码的编写

Nodejs安装

Nodejs官网 :https://nodejs.org/en/

Nodeis的安装与一般软件一样
检查是否安装成功命令:node -v 出现版本号表示安装成功

大量的库
在安装 Nodeis 的同时,会附带一个pm 命令npm 是Node的包管理工具,这样正是接下来我们要用到的npm 的简单结构有助于 Node.js 生态系统的激增,现在 npm 仓库托管了超过 1,000,000 个可以自由使用的开源库包。
mpm 镜像
由于服务器在国外,所以下载速度比较慢,我们可以用国内的镜像

阿里镜像地址
https://npmmirror.com/

在命令行运行如下命令即可!(cnpm安装)

npm install -g cnpm --registry=https://registry.npmmirror.com

出现以下表示安装成功,也可通过命令查看是否安装成功:cnpm -v 显示版本号表示安装成功

在这里插入图片描述
若安装失败可以再次安装

let命令

ES6 新增了 let 命令,用来声明变量。它的用法类似于 var但是所声明的变量,只在 let 命令所在的代码块内有效。
作用域
var关键字:函数级别作用域
let关键字:块级作用域

<script>
        if(true){
            var i=10;
        }
        console.log(i);//结果为10
        if(true){
            let j=8;
        }
        console.log(j);//结果报错,提示为声明j
    </script>

对比var和let在循环中的应用

 var a=[];
 for(let i = 0;i < 10;i++){
 		a[i] = function(){
        	console.log(i);
    };
}
console.log(a[6]());//结果是6

结果是6

var b=[];
for(var j = 0;j < 10;j++){
     b[j] = function(){
         console.log(j);
     };
}
console.log(b[6]());//10

结果是10

let不存在变量提升
var 命令会发生“变量提升”现象,即变量可以在声明之前使用,值为undefned 。这种现象多多少少是有些奇怪的,按照一般的逻辑,变量应该在声明语句之后才可以使用
为了纠正这种现象,let 命令改变了语法行为,它所声明的变量一定要在声明后使用,否则报错。

// var 的情况
console.1og(foo); // 输出undefined3 
var foo = 2;
// let 的情况
console.log(bar); // 报错ReferenceError6
let bar = 2;

let不允许重复声明

// 报错
function func(){
	let a = 10:
	var a = 1;
	}
// 报错
function func(){
	let a = 10:
	let a = l;
	}

const命令

const 声明一个只读的常量。一旦声明,常量的值就不能改变。
1.const声明之后不允许重新赋值
2.const声明必须声明时直接赋值

const PI = 3.1415:
PI // 3.14152
PI=3;
// TypeError: Assignment to constant variable.

const 声明的变量不得改变值,这意味着,const 一旦声明变量,就必须立即初始化,不能留到以后赋值。

const foo
// SyntaxError: Missing initializer in const declaration

const 的作用域与let命令相同: 只在声明所在的块级作用域内有效

if (true) {
const MAX = 5;
}
MAX // Uncaught ReferenceError: MAX is not defined

const 命令声明的常量也不能提升

if (true) {
console.1og(MAX); // ReferenceError2
const MAX = 5;
}

const 声明的常量,也与 let一样不可重复声明

var message ="Hello!"
let age = 25;
// 以下两行都会报错
const message = "Goodbye!";
const age = 30:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/545712.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

IntelliJ IDEA(WebStorm、PyCharm、DataGrip等)设置中英文等宽字体,英文为中文的一半(包括标点符号)

1.设置前&#xff08;idea默认字体为 JetBrains Mono&#xff09; 2.设置后&#xff08;楷体&#xff09;

HIT The Wiorld,HIT世界官网地址+配置要求+测试时间+加速器分享

HIT The Wiorld&#xff0c;HIT世界官网地址配置要求测试时间加速器分享 NEXON新游《HIT&#xff1a;世界&#xff08;HIT&#xff1a;The World&#xff09;》将在4月17日上线&#xff0c;目前已在官网开启事前预约预创建角色。Hit :the world&#xff08;HIT:世界&#xff…

苹果个人证书管理

根据近日工业和信息化部发布的《工业和信息化部关于开展移动互联网应用程序备案工作的通知》&#xff0c;相信不少要进行IOS平台App备案的朋友遇到了一个问题&#xff0c;就是apple不提供云管理式证书的下载&#xff0c;也就无法获取公钥及证书SHA-1指纹。 已经上架的应用不想重…

如何在浏览器Web前端在线编辑PPT幻灯片?

有时候在项目中我们会遇到需要在网页在线打开并编辑PPT文档保存到本地或者服务器指定位置&#xff0c;猿大师办公助手可以很方便的调用本机Office实现在网页上编辑PPT幻灯片&#xff0c;效果与本机Office打开PPT完全一样。 猿大师办公助手支持完整嵌入模式&#xff0c;也就是本…

React-样式使用

​&#x1f308;个人主页&#xff1a;前端青山 &#x1f525;系列专栏&#xff1a;React篇 &#x1f516;人终将被年少不可得之物困其一生 依旧青山,本期给大家带来React篇专栏内容:React-样式使用 目录 1、行内样式 2、使用className属性 3、css module模块化 4、styled-c…

基于JSP本科生毕业设计选题系统的设计与实现(内附设计LW + PPT+ 源码下载)

基于JSP本科生毕业设计选题系统的设计与实现 项目名称&#xff1a; 基于JSP本科生毕业设计选题系统的设计与实现 项目技术栈 该项目采用了以下核心技术栈&#xff1a; 后端框架/库&#xff1a; SSM框架&#xff08;Spring MVC、Spring、Mybatis&#xff09;数据库&#xff…

OpenHarmony轻量系统开发【3】代码编译和烧录

3.1源码目录 下载完代码后&#xff0c;大家可以进入代码目录&#xff1a; 这里重点介绍几个比较重要的文件夹&#xff1a; 1 vendor文件夹 该文件夹存放的是厂商相关的配置&#xff0c;包括组件配置、HDF相关配置&#xff0c;代码目录如下&#xff1a; 可以看到有hisilicon文…

IDEA pom.xml显示灰色并被划线

在使用 IDEA 进行开发的过程中&#xff0c;有时候会遇到 pom.xml 显示灰色并被划线的情况&#xff0c;如下图&#xff1a; 这一般是因为该文件被 Maven 忽略导致的&#xff0c;可以进行如下操作恢复&#xff1a; 设置保存后&#xff0c;可以看到 pom.xml 恢复了正常&#xff1a…

github,raw.githubusercontent.com 等网址登陆不上不去的设置方法

目录 提示域名解析错误&#xff1a; 出现的现象&#xff1a; 解决办法&#xff1a;修改host host改完不生效 解决方案1&#xff1a; 解决方案2&#xff1a; 提示域名解析错误&#xff1a; 出现的现象&#xff1a; 登陆github&#xff0c;raw.githubusercontent.com 等网…

解读《算者生存:商业分析的方法与实践》:构建企业经营分析框架的必备指南

&#x1f482; 个人网站:【 摸鱼游戏】【神级代码资源网站】【工具大全】&#x1f91f; 一站式轻松构建小程序、Web网站、移动应用&#xff1a;&#x1f449;注册地址&#x1f91f; 基于Web端打造的&#xff1a;&#x1f449;轻量化工具创作平台&#x1f485; 想寻找共同学习交…

LOCK、ACC、ON、START的含义及正确使用

背景 前段时间在开发一个远程锁车的需求时&#xff0c;讨论到了电源状态的场景。由于初次进入汽车电子行业&#xff0c;对很多基础概念不清晰。当时听主机厂商的同事介绍一遍后&#xff0c;并不是很理解。于是趁着空闲&#xff0c;给自己充充电&#xff0c;也希望能够帮到有需…

前端打包webpack vite

起步 | webpack 中文文档 | webpack中文文档 | webpack中文网 npm run build 1webpack: mkdir webpack-demo cd webpack-demo npm init -y npm install webpack webpack-cli --save-dev vite : 快速上手 | Vue.js

Netty学习——实战篇2 NIO 群聊系统(简单版) 备份

需求&#xff1a; 1、编写一个NIO群聊系统&#xff0c;实现服务端和客户端之间数据简单通讯(非阻塞) 2、实现多人群聊 3、服务端&#xff1a;可以监测用户上线、离线、并实现消息转发功能。 4、客户端&#xff1a;通过channel可以无阻塞发送消息给其他所有用户&#xff0c;同时…

【位运算】3097. 或值至少为 K 的最短子数组 II

本文涉及知识点 位运算 LeetCode3097. 或值至少为 K 的最短子数组 II 给你一个 非负 整数数组 nums 和一个整数 k 。 如果一个数组中所有元素的按位或运算 OR 的值 至少 为 k &#xff0c;那么我们称这个数组是 特别的 。 请你返回 nums 中 最短特别非空 子数组 的长度&…

AI大模型语言开源大语言模型完整列表

开源大语言模型完整列表 Large Language Model (LLM) 即大规模语言模型&#xff0c;是一种基于深度学习的自然语言处理模型&#xff0c;它能够学习到自然语言的语法和语义&#xff0c;从而可以生成人类可读的文本。 所谓"语言模型"&#xff0c;就是只用来处理语言文…

游戏开发者必看:Perforce Helix Core 的功能特点及游戏开发中的常用工具、典型用例介绍

「不出海&#xff0c;即出局」随着全球化的加速发展&#xff0c;企业出海已成燎原之势。日前&#xff0c;2024 亚马逊云科技出海全球化论坛在深圳成功举办。龙智携手 Perforce 亮相游戏行业展区&#xff0c;展示了Perforce Helix Core如何与主流游戏开发引擎高效集成&#xff0…

关于《CS创世 SD NAND》的技术学习分享

最近发现一个好玩的东西《CS创世 SD NAND》&#xff0c;带大家一起体验一下。 本文引用了部分厂家产品资料及图像&#xff0c;如有侵权&#xff0c;请及时联系我删除&#xff0c;谢谢。 《CS创世 SD NAND》官方网站&#xff1a;http://www.longsto.com/ 什么是CS创世 SD NAND呢…

c++的学习之路:4、入门(3)

摘要 本章将介绍一下auto、for和指针空值&#xff0c;文章末附上入门的所有代码。 目录 摘要 一、auto 二、for 三、指针空值 四、代码 五、思维导图 一、auto 这个关键字是c提出的&#xff0c;可以自动识别变量的类型&#xff0c;可以看出下方图片&#xff0c;auto自…

【研发日记】Matlab/Simulink软件优化(一)——动态内存负荷压缩

文章目录 背景介绍 初始代码 优化代码 分析和应用 总结 背景介绍 在一个嵌入式软件开发项目中&#xff0c;有一个使用MATLAB Function编写的算法模块&#xff0c;功能是从一个较大的数组中提取一段数据&#xff0c;然后求均值输出&#xff0c;示例如下&#xff1a; 初始代…

OpenHarmony实战开发-如何实现图片缩放效果。

介绍 图片预览在应用开发中是一种常见场景&#xff0c;在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。 使用说明&#xff1a; 双指捏合对图片进行缩放双击图片进行图片的大小切换&#xff0c;在放大状态下&#xff0c;双击可恢复…