ECMAScript 笔记

Posted by 陈陈君 on 2021-01-13
Estimated Reading Time 5 Minutes
Words 1.3k In Total
Viewed Times

ECMAScript

ECMAScript 是 ECMA 国际标准化组织推出的 JavaScript 标准化版本。学习 ECMAScript 也是学习 JavaScript。ECMAScript 每年6月份会更新一次版本。

let 和 const

ES6 新增了 let 命令。它的使用类似 var ,但所声明的变量仅在所在代码块内生效,在作用域上这是与 var 不同的地方。

1
2
3
4
5
6
7
8
{
let a = 10;
var b = 20;
}
// 报错
consolo.log(a);
// 运行成功
consolo.log(b);

变量提升

let 的变量不存在变量提升,并且对于已经定义的变量不能再二次定义。

1
2
3
4
5
6
7
//输出 undefined
consolo.log(a);
var a = 10;

//报错
consolo.log(b);
let b = 20;
1
2
3
let a = 10;
// 二次定义,报错
let a = 20;

暂时性死区

这里内部声明的 let 变量不受外界影响。与 Java 中的局部变量非常相似。

1
2
3
4
5
6
var tmp = 123;
if(true){
let tmp = 'abc';
}
// 123
console.log(tmp);

常量

const 代表不变的量,声明 const 常量必须经过初始化,否则会报错。其次 const 修饰的常量本质上并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改变。

1
2
3
4
5
6
7
8
const a = ['小陈'];
// 报错
// a = 20;

// 允许
a.push('小明');
// 打印结果:a=['小陈','小明']
console.log(a);

解构赋值

ES6 中引入了一种特殊的赋值方式 : '解构赋值'。它允许批量声明取值,然后对变量批量进行赋值、或者是交换变量的值、甚者通过函数传递多个形参,返回多个值等等。都非常方便。

完全解构

1
2
let [a,b,c] = [1,2,3];
// 结果:a=1 b=2 c=3
1
2
let [a,[b],c] = [1,[2],3];
// a=1 b=2 c=3
1
2
let [name,age,sex] = ['陈陈菌',20,'男'];
// name='陈陈菌' age=20 sex='男'

剩余解构

1
2
let [a,...b] = [1,2,3,4];
// a=1 b=[2,3,4]

不完全解构

1
2
let [x,y] = [1,2,3];
// x=1 y=2
1
2
let [x,,y] = [1,2,3];
// x=1 y=3
1
2
let [,,c] = ["a","b","c"];
// c="c"

通过解构赋值交换变量的值

1
2
3
4
let x = 1;
let y = 2;
[x,y] = [y,x];
// x=2 y=1

返回多个值

1
2
3
4
5
function example(){
return [1,2,3];
}
// 打印一个数组 [1,2,3]
consolo.log(example());

作为函数参数

1
2
3
4
5
function a([x,y,z]){
console.log(x,y,z);
}
a([1,2,3]);
// 结果 打印 1,2,3

取 json 对象数据

1
2
3
4
5
6
7
8
let jsonData = {
id: 01,
name: "陈陈菌",
sex: "男"
}
let {id,name,sex} = jsonData;
console.log(id,name,sex)
// 01 陈陈菌 男

对象的解构

当我们需要调用一个对象函数的时候需要 对象.方法名 但频繁调用会出行很多重复的字段增加代码量。此时可以通过解构对象来实现。(博主这里使用了中文来编程,只是为了程序更加易读。建议在实际项目开发中使用英文编写)

1
2
3
4
5
6
7
8
9
10
11
12
13
const 陈陈菌 = {
姓名: '陈陈菌',
年龄 : 20,
行为 : function(){
console.log(陈陈菌.姓名,"正在工作");
}
};
陈陈菌.行为();
陈陈菌.行为();
陈陈菌.行为();
陈陈菌.行为();
陈陈菌.行为();
陈陈菌.行为();
1
2
3
4
5
6
7
8
9
10
11
12
const 陈陈菌 = {
姓名: '陈陈菌',
年龄 : 20,
行为 : function(){
console.log(陈陈菌.姓名,"正在工作");
}
};
//解构对象
let {行为} = 陈陈菌;
行为();行为();
行为();行为();
行为();行为();

字符串的扩展

ES6中引入了一种可以换行的字符串` `。在引入较多的内容时,对比 ''"" 使用更加方便且阅读,换行不需要使用 + 来连接字符串。

1
2
3
4
5
6
7
8
let str = `
<ul>
<li>小陈</li>
<li>小红</li>
<li>小白</li>
<li>小明</li>
</ul>
`;
1
2
3
4
5
6
let str = '<ul>'
+'<li>小陈</li>'
+'<li>小红</li>'
+'<li>小白</li>'
+'<li>小明</li>'
+'</ul>';
1
2
3
4
5
6
let str = "<ul>"
+"<li>小陈</li>"
+"<li>小红</li>"
+"<li>小白</li>"
+"<li>小明</li>"
+"</ul>";

除此之外,还可以很好的进行变量与字符串的拼接,增加字符串的阅读性。使用 ${} 表示变量。

1
2
let chen = '小陈';
let off = `${chen}正在工作`;

对象的简写

在定义对象的时候可以部分进行简写。

1
2
3
4
5
6
7
8
9
10
11
12
let name = '陈陈菌';
let change = function(){
console.log('改变!!');
}
const office = {
name,
change,
Ctrl(){
console.log('提高水平');
}
}
console.log(office);
1
2
3
4
5
6
7
8
9
10
11
12
let name = '陈陈菌';
let change = function(){
console.log('改变!!');
}
const office = {
name:name,
change:change,
Ctrl : function(){
console.log('提高水平');
}
}
console.log(office);

箭头函数

ES6 中新增了一种函数 , 它与普通函数的区别是 , 一个是动态的 , 一个静态的。

普通函数 function 的指向可以改变,而箭头函数的指向是始终的。

普通函数可以被实例化对象。
箭头函数无法被实例化对象。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//普通函数
Person = function(name,age){
this.name = name;
this.age = age;
}
//允许
me = new Person('小陈',20);


//箭头函数
Person = (name,age) =>{
this.name = name;
this.age = age;
}
//报错
me = new Person('小陈',20);

书写简化

箭头函数可以进行简写,减少代码量。但随之而来的代价是阅读性变差。

1
2
3
4
5
6
let test = (n) => { return n*n };
let test2 = (n) => n*n;
let test3 = n => n*n;
console.log(`test:${test(9)}`);
console.log(`test2:${test2(9)}`);
console.log(`test3:${test3(9)}`);