ES6笔记总结（1）

关注

原创最新推荐文章于 2025-01-07 00:18:28 发布 260 阅读 AI 写同款· GEO 优化 ›

JavaScript高级——ES6基础入门前言ES6（ECMAScript 6），也被称为ES2015，是JavaScript的第六个版本.它于2015年发布，并在现代JavaScript开发中扮演了重要的角色.学习方法:看千遍，不如自己动手写一遍遇到问题不要怕，微笑着面对它记笔记let 和 constconst和let是在ES6中引入的两个新的变量声明关键字，用于声明变量的作用域。const：const用于声明一个常量，其值在声明后不能被修改。常量必须在声明时进行初始化，而且不能再次赋值。阅读详情

ECMAScript 的历史

ES6 是 ECMAScript 标准十余年来变动最大的一个版本，为其添加了许多新的语法特性。

1997 年 ECMAScript 1.0 诞生。
1998 年 6 月 ECMAScript 2.0 诞生，包含一些小的更改，用于同步独立的 ISO 国际标准。
1999 年 12 月 ECMAScript 3.0诞生，它是一个巨大的成功，在业界得到了广泛的支持，它奠定了 JS 的基本语法，被其后版本完全继承。直到今天，我们一开始学习 JS ，其实就是在学 3.0 版的语法。
2000 年的 ECMAScript 4.0 是当下 ES6 的前身，但由于这个版本太过激烈，对 ES 3 做了彻底升级，所以暂时被"和谐"了。
2009 年 12 月，ECMAScript 5.0 版正式发布。ECMA 专家组预计 ECMAScript 的第五个版本会在 2013 年中期到 2018 年作为主流的开发标准。2011年6月，ES 5.1 版发布，并且成为 ISO 国际标准。
2013 年，ES6 草案冻结，不再添加新的功能，新的功能将被放到 ES7 中；2015年6月， ES6 正式通过，成为国际标准。

PART 01

ES6概述：

ECMAScript 6 目前基本成为业界标准，它的普及速度比 ES5 要快很多，主要原因是现代浏览器对 ES6 的支持相当迅速，尤其是 Chrome 和 Firefox 浏览器，已经支持 ES6 中绝大多数的特性。

PART 02

let与const关键字：

let 允许创建块级作用域，ES6 推荐在函数中使用 let 定义变量，而非 var：

let是块级作用域（在一对大{} 里面起作用）

{

let a = 15;

console.log(a);

}

let声明变量不会变量提升

{

console.log(a);

let a = 15;

}

不能重复声明

{

let c = 22;

let c = 25;

}

const声明变量:

通常用来声明常量的建议大写

const PI = 3.1415926;

console.log(PI);

声明必须赋值

const FREEZON

声明后不能修改*(复杂数据可以修改数组)

const ARR = 15;

ARR = 22; //报错

小结：

（1）let 关键词声明的变量不具备变量提升（hoisting）特性

（2）let 和 const 声明只在最靠近的一个块中（花括号内）有效

（3）当使用常量 const 声明时，请使用大写变量，如：CAPITAL_CASING

（4）const 在声明时必须被赋值

PART 03

解构：解构就是把数组或者对象拆分为单个的变量

交换变量

var a = 15;

var b = 88;

[a, b] = [b, a];

console.log("a:",a);

console.log("b:",b);

不定参（剩余值）与跳过

var arr = [1, 3, 9, 24, 74, 98, 202];

[c, ,d, ...rest] = arr;

console.log("c:",c);

console.log("d:",d);

console.log("rest:",rest);

变量名必须和对象键名一致

let o = {p:42, q:true};

let {p,q} = o;

console.log(p,q);

PART 04

字符串--检测

includes：包含。

startsWith：以...开头。

endWith：以...结尾。

字符串-重复与填充

repeat

let str = "我爱你！";

console.log(str.repeat(3));

padStart / padEnd

console.log('1'.padStart(4,'0'));

console.log('1'.padEnd(2,'0'))

PART 05

函数

1、ES6 中，箭头函数就是函数的一种简写形式，使用括号包裹参数，跟随一个 =>，紧接着是函数体：

var getPrice = function() {

return 4.55;

};

var getPrice = () => 4.55;

=> 前面是函数参数 =>后面是返回值也是执行语句

2. 多个参数或者没有都用括号包起来

var arr3 = ["ganggang","zhangs","张三"];
arr3.forEach(

(item,index,self) => console.log(item,index,self)

)

3 执行语句有多个的时候用{}包括起来

var arr4 = [70,33,52,89,14,80,87];
var arr5 = arr4.filter(

item => {

if(item>=70){return true}

else{return false}

}

)

4 箭头函数this 指的是函数上一层的this

var obj = {

age:16,

grow:function(){

setTimeout(()=>{

this.age++;

console.log("我的年纪是"+this.age)

})

}

obj.grow();

PART 06

对象

对象简写

let color="白色";

let name = "Kitty";

let cat = {color,name};

console.log(cat)

函数简写与动态属性值

var obj = {

name:"木木",

["nick"+"name"]:"小木木",

say(){alert(this.name)}

}

super方法

var parent = {

foo() {

console.log("Hello from the Parent");

}

var child = {

foo() {

super.foo();

console.log("Hello from the Child");

}

Object.setPrototypeOf(child, parent);

child.foo();

总结

var，let，const

const 与let 局部作用域，不能重复声明，不能变量提升，const声明常量

解构与拓展

...rest

字符串

` `字符串模板，includes repeat pad

标签

#javascript #前端 #es6

本内容遵循 CC 4.0 BY-SA 版权协议

基于微信小程序的扫码签到系统源码大等于jdk1.8，大于mysql5.5，idea（eclipse），微信开发者工具。代码注释齐全，没有多余代码，适合学习(毕设)，二次开发，包含论文技术相关文档。签到管理：新增签到，点击查看码展示二维码（有时效性）springboot mybatis 小程序。签到管理：查看用户创建的签到，可删除。用户管理：查看注册用户信息，及删除。签到记录：查看用户签到记录：可删除。个人信息：展示个人信息，可修改。统计分析：查看用户，签到数量。签到记录：查看用户签到记录。登录注册（含授权登录）我的签到：查看签到记录。阅读详情