ECMScript 6 （ES6）学习笔记

最新推荐文章于 2025-05-04 15:20:14 发布

7k&7k

最新推荐文章于 2025-05-04 15:20:14 发布

阅读量1.4k

点赞数 44

CC 4.0 BY-SA版权

文章标签： es6 学习笔记前端

本文链接：https://blog.csdn.net/QnLupoo/article/details/143920845

一、Nodejs环境安装

1、Nodejs安装资源

Nodejs官网

Node.js — Run JavaScript Everywhere

Nodejs中文网

Node.js 中文网

按需要下载，我下载的是x64安装包，安装教程可以参考以下链接，默认安装路径，以防后续出现问题。

2、npm简介及镜像

在安装Nodejs的同时会附带一个npm命令，npm是Node的包管理工具，现在npm仓库托管了很多可以用自由使用的资源包以便后续使用。

npm镜像

npm的服务器在国外下载速度慢，可以使用国内镜像

阿里云镜像地址

npmmirror 镜像站

在命令行运行

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

看到如下信息，代表安装成功

二、Babel转码器

1、Babel简介

Babel是一个广泛使用的ES6转码器，实现ES6代码转为ES5代码的操作，从而在老板浏览器运行。

浏览器支持性查看网址

https://caniuse.com/

Babel官网

Babel · Babel

转码示例

原始代码使用了箭头函数，Babel将其转化为普通函数，就不能支持箭头函数的JavaScript环境执行力

//转码前

input.map(item => item + 1);

//转码后

input.map(function(item){

return item + 1;

});

2、Babel 安装教程

（1）安装Babel

在项目的根目录下，按如下操作进行

在终端输入以下代码

cnpm install --save-dev @babel/core

出现报错参考

解决：“cnpm : 无法加载文件 C:\Users\lulei\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本”的问题_所在位置行:1 字符: 1 + cnpm install + ~~~~ + categoryinf-CSDN博客

报错解决后运行成功后截图如下：

（2）配置文件.babelrc

Babel的配置文件是.babelrc（旧版本），或者babel.config.js（新版本），存放于项目的根目录下。使用Babel前，要配置号这个文件。这个文件用来设置转码规则和插件，基本格式如下：

{

"presets":[],

"plugins":[]

}

（3）转码规则

presets字段设定转码规则，官方提供以下规则集，按需安装

cnpm install --save-dev @babel/preset-env

（4）将规则加入.babelrc文件

{

"presets":[

"@babel/env"

],

"plugins":[]

}

（5）Babel命令行转码

Babel提供命令行工具@babel/cli，用于命令行转码

cnpm install --save-dev @babel/cli

基本用法如下：

# 转码结果输出到标准输出（控制台输出）
npx babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
npx babel example.js --out-file compiled.js
# 或者
npx babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
npx babel src --out-dir lib
# 或者
npx babel src -d lib

其他用法可以参考Babel —— 使用方法总结_babel用法-CSDN博客

（6）转码测试示例

在根目录下新建js文件，输入上文中转码前示例代码

input.map(item => item + 1);

转码输出到标准输出后得到：

转码后输出到新文件

三、Let命令

ES6新增了let命令，用来声明变量，用法类似于var，但是所声明的变量在代码块内有效，可理解为let块级作用域{局部变量花括号级别作用域}，var函数级作用域（funcation）。

for循环里用let声名变量

     var a =[];
     for(let i=0;i<10;i++){     //相当于生成了多个不同值的i
          a[i]=function(){
               console.log(i);
          }
     }
     a[6]();                    //6

     var a =[];
     for(var i=0;i<10;i++){     //相当于生成了一个i，为它不断赋值
          a[i]=function(){
               console.log(i);
          }
     }
     a[6]();                    //10

let不存在变量提升，而且let不能重复声名

console.log(i)        //运行结果：undefinde 存在变量提升
var i = 10；

/*           */
console.log(i)        //运行结果：直接报错
let i = 10；

/*           */

let i = 10;
let i = 20;  //  不可以这样声明，同一个班级里有两个李明，不知道叫哪一个

四、Const命令

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

1、const不允许重新赋值

2、必须声明的时候初始化

3、const块级作用域，出了{}就不能用了

4、const不存在变量提升，必须先声明后使用，先使用后声明会报错

5、const的声明的常量，不能重复声明 const i =10; var i = 20会报错

五、对象解构赋值

变量的解构赋值包含数组、字符串一系列的解构赋值，但是这些使用率较低，所以着重学习对象解构赋值。对象的属性没有次序，变量必须与属性同名，才能取到正确的值

     var user ={
          name:"lily",
          age:20
     }
     console.log(user.name);
     console.log(user.age);
     //利用解构赋值 简化数据读取
     const{name,age }=user;

     console.log(name,age); // lily 20
     
     //对象的属性没有次序，变量必须与属性同名，才能取到正确的值
     let {age,name} = {name:"lily",age:10};

     console.log(age); //10

     let {sex,age,name} = {name:"lily",age:10};

     console.log(sex); //undefinde

对象解构赋值，可以很方便的将现有对象的方法，复制到某个变量

     var user ={
          name:"lily",
          age:20
     }
  // //利用解构赋值 不需要再用对象名.变量
     const{ name,age } = user;
     const { log } = console; // 不需要再 console.log
     log(name,age);           // lily 20
   
  //不需要用Math.random(),可以直接使用random()
     const { abs,ceil,floor,random} =Math;
     log(random())           //随机数据

六、字符串扩展

1、字符串Unicode表示法

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

Unicode

统一码（Unicode），也叫万国码、单一码，由统一码联盟开发，是计算机科学领域里的一项业界标准，包括字符集、编码方案等。统一码是为了解决传统的字符编码方案的局限而产生的，它为每种语言中的每个字符设定了统一并且唯一的二进制编码，以满足跨语言、跨平台进行文本转换、处理的要求。

"\u0061"

// "a"

2、字符串遍历接口

     var str = "hello"
     for(var i of str){
          console.log(i);
     }
     //上述方法等价于
     for(let i = 0;i<str.length;i++){
          console.log(str[i]);
     }

3、模板字符串

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

单双引号嵌套复杂问题

3、字符串新增方法

includes(),startsWith(),endsWith()
传统上，JavaScript 只有 indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

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

let s = ' Hello world! ' ;

s.startWith('Hello') // true

s.endWith('!') // true

s.includes('o') // true

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

let s = 'Hello world !;

s.startWith('world', 6) // true

s.endWith('Hello', 5) // true

s.includes('Hello', 6) //false

repeat()

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

'x'.repeat(3) //"xxx"

'hello'.repeat(2) // "hellohello'

'na'.repeat(0) //""

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

trimStart(),trimEnd()

ES2019对字符串实例新增了 trimStar()和 trimEnd() 这两个方法。它们的行为与 trim() 一致， trimStar() 消除字符串头部的空格， trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s=' helloworld ';

s.trim() // "helloworld"
s.trimStart() // "helloworld "
s.trimEnd() // " helloworld"

at()

a()方法接受一个整数作为参数，返回参数指定位置的字符，支持负索引(即倒数的位置)

const str = 'hello';
str.at(1) // “e”
str.at(-1) // "o"

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

七、数组扩展

1、扩展运算符

扩展运算符(spread)是三个点(…)。将一个数组转为用逗号分隔的参数序列

console.log(...[1，2，3]) // 1 2 3
console.log(1，...[2，3，4]，5)//1 2 3 4 5

（1）替代函数的 apply 方法

由于扩展运算符可以展开数组，所以不再需要 apply 方法，将数组转为函数的参数了

// ES5 的写法
Math.max.apply(null，[14，3，77]) // 77
// ES6 的写法
Math.max(...[14，3，77]) //77

//等同于

Math.max(14，3，77)

（2）合并数组

var ar1 = [10, 20, 30, 40];

var ar2 = [50, 60, 70, 80] ;

console.log(ar1.concat(ar2)); //[10, 20, 30, 40, 50, 60, 70, 80]

console.log([...ar1,...ar2]); //[10, 20, 30, 40, 50, 60, 70, 80]