前端学习第七天

sooRiverling

已于 2024-09-06 16:17:53 修改

阅读量921

点赞数 17

分类专栏：前端文章标签：学习

于 2024-09-06 16:17:44 首次发布

本文链接：https://blog.csdn.net/weixin_74113429/article/details/141926868

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、命令行工具

常用命令行工具有两种

CMD命令行工具
PowerShell命令行工具

CMD命令行

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

PowerShell命令行工具

打开方式
1. 在开始位置搜索PowerShell打开
2. 在对应目录按住shift+右键，打开
其他保持一致

二、ECMAScript

ECMAScript和JavaScript实际是一样的。

Nodejs环境安装

Nodejs主攻服务器方向，使得利用JavaScript也可以完成服务器代码的编写

在node官网可以下载对应版本

下载 | Node.js 中文网

检测是否安装成功

在命令行输入npm -v ，出现对应版本就是成功了。

大量的库

安装Nodejs时，会附带一个npm命令，是Node的包管理工具

npm镜像

阿里镜像地址

npmmirror 镜像站

在命令行输入如下命令即可

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

如果是MacOS系统输入

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

输入cnpm - v不报错就是安装成功了。

三、Babel转码器

Babel是一个广泛使用的ES6转码器，可以将ES6代码转为ES5代码，从而在老版本的浏览器执行。这意味着，可以用ES6的方式编写程序，又不用担心现有环境是否支持。

Babel官网：

Babel · Babel

四、Let命令

ES6新增了let命令，用来声明变量。它的用法类似于var，但所声明的变量，只在let命令所在的代码块内有效。

let块级作用域

{
    let a = 10;
    var b = 1;
}

a    //ReferenceError: a is not defined.
b    // 1

let没有变量提升，不能重复声明

五、Const命令

const声明一个只读的常量，一旦声明，常量的值就不能改变

const PI = 3.1415;
PI //3.1415

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

const声明的变量必须立即初始化，也就是声明时就要赋值。它的作用域与let命令相同，只在声明的块区域起作用，没有提升

六、对象解构赋值

解析可以用于对象

let {name,age} = {name:"iwen",age:20};
age //20


const {log} = console;
log(age); //20

节省了前面的调用，直接进行操作

七、字符串扩展

字符串Unicode表示法

ES6加强了对Unicode的支持，允许用\uxxxx形式表示一个字符，其中xxxx表示字符的Unicode码点。

Unicode

统一码，也叫万国码，单一码，包括字符集、编码方案等。Unicode是为了解决传统的字符编码方案的局限而产生的，它为每种语言的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求

"\u0061"

//"a"

字符串遍历器接口

for…of遍历

for (let I of str){
    console.log(i);
}

//实质上是遍历输出字符串str的内容

模板字符串

模板字符串是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

//动态创建一个a标签，a标签href属性也是动态的
let url = "www.baidu.com";
let text = "baidu";

//href要用单引号，因为前后用的是双引号
let h1 = "<a href='"+ url +"'>+ text +</a>";


//字符串模板
let h2 = `<a href="${url}">${text}</a>`;

八、字符串新增方法

includes(),startsWith(),endsWith()

includes()：返回布尔值，表示是否找到了参数字符串
startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部
endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部

这三个方法都支持第二个参数，表示开始搜索的位置

repeat()

返回一个新字符串，表示将原字符串重复n次

padStart(),padEnd()

如果某个字符串不够指定长度，会在头部或尾部补全。padStart用于头部补全，padEnd用于尾部补全。

'x'.padStart(5,'ab');//'ababx'
'x'.padStart(4,'ab');//'abax'

'x'.padEnd(5,'ab');//'xabab'
'x'.padStart(4,'ab');//'xaba'

trimStart(),trimEnd()

行为与trim一致，trimStart消除字符串头部的空格，trimEnd消除尾部的空格，它们返回的都是新字符串，不会修改原始字符串。

at()

接受一个整数作为参数，返回参数指定位置的字符（从0开始），支持负索引（最后一个字符是-1，然后向前逐一递减）

如果参数位置超出了字符串范围，则返回undefined