ES6 常用语法
- 新增 let、const 命令 来声明变量，和var 相比，let 声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const 声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。
- 新增解构赋值、rest 语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
- 新增模块化机制，这是 JavaScript 走向规范比较重要的一步，让前端更方便的实现工程化。
- 新增类和继承的概念，配合模块化，JavaScript 也可以实现高复用、高扩展的系统架构。
- 新增模板字符串功能，高效简洁，结束拼接字符串的时代。
- 新增 Promise 机制，解决异步回调多层嵌套的问题。
- 更多学习：点击
一、声明变量const let var
- var，变量提升,是全局作用域或函数作用域，var声明的变量存在覆盖现象
- let，表示变量，是块级作用域，比如一个函数内部，代码块{}内部，let不允许在相同作用域内，重复声明同一个变量。
- const，表示常量,是块级作用域，比如一个函数内部，代码块{}内部，常量一旦声明不可修改
- ES5 只有全局作用域和函数作用域，没有块级作用域
<script> { let x = 10; var y = 20; } console.log (x); // ReferenceError: x is not defined console.log (y); // 20 console.log(a); // undefined，var声明变量之前可以使用该变量 var a = 10; console.log(b); // ReferenceError: b is not defined，let声明变量之前不可以使用该变量 let b = 10; //注意：let不允许在相同的作用域内重复声明同一个变量。 function foo(){ let x = 10; var x = 20; } // 报错 function foo(){ let y = 10; let y = 20; } // 报错 //ES5中只有全局作用域和函数作用域，并没有块级作用域。 var name = 'Tom'; function foo(){ console.log(name); if (false){ var name = 'Bob' } } foo(); // undefined /*出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。 类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。*/ for (var i=0;i<5;i++){ console.log('哈哈'); } console.log(i); // 5 // ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。 var name = 'Tom'; function foo(){ console.log(name); if (false){ let name = 'Bob' } } foo(); // Tom // 此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。 var a = []; for (var i = 0; i < 10; i++) { a[i] = function () { console.log(i) } } a[6](); //10 //=============== var a = []; for (let i = 0; i < 10; i++) { a[i] = function () { console.log(i) } } a[6](); //6 //=============== var a = []; for (let i = 0; i < 4; i++) { console.log(i) // 0,1,2,3 } /* const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。 const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。 ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性； let命令、const命令和class命令声明的全局变量不属于全局对象的属性。 */ const PI = 3.14; var x1 = 10; let y1 = 20; window.x1 // 10 window.y1 // undefined </script>
二、模板字符串
模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量
|
1
2
3
4
5
6
7
8
9
10
|
<script type=
"text/javascript"
>
var
imgSrc =
'./1.jpg'
;
$(
function
() {
$(
'ul'
).append(`<li>
<a href=
"javascript:void(0);"
>
<img src=${imgSrc} alt=
""
>
</a>
</li>`)
});
</script>
|
三、箭头函数
- 如果参数只有一个，可以省略小括号
- 如果不写return，可以不写大括号
- 没有arguments变量
- 不改变this指向
- 其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。
- 箭头函数，this指向外层代码块的this
- 普通函数，this指向调用它的对象，也就是person对象
<script> var person = { name: 'Q1mi', age:18, func:function(){ console.log(this); } }; person.func() // person对象 普通函数，this指向调用它的对象 var person = { name: 'Q1mi', age:18, func:()=>{ console.log(this); } }; person.func() // window对象 箭头函数，this指向外层代码块的this </script>
<script type="text/javascript">
// 普通函数
function add(a,b) {
return a+b;
};
alert(add(1,2));
// 函数对象
var add = function (a,b) {
return a+b;
};
alert(add(3,4))
// 箭头函数
var add = (a,b)=>{
return a+b;
};
alert(add(3,7))
var f = a => a
//等同于
var f = function(a){
return a;
}
//无形参
var f = () => 5;
// 等同于
var f = function () { return 5 };
//多个形参
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};
var person = {
name:"alex",
age: 20,
fav:function () {
// this指的是当前的对象，即使用它的对象 person对象
console.log(this.age);
console.log(arguments[0])
}
};
person.fav();
var person = {
name:"alex",
age: 20,
fav: () => {
// this的指向发生了改变,指向了定义时所在的对象window
console.log(this); //window
console.log(arguments) //报错
}
};
person.fav();
//这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 42
function foo() {
setTimeout(function(){
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({ id: 42 });
// id: 21
</script>
四、对象
1、属性简洁表示法
<script> // 属性简洁表示法 ES6允许直接写入变量和函数作为对象的属性和方法。 function(x,y){ return {x, y} } //上面的写法等同于： function(x,y){ return {x: x, y: y} } //对象的方法也可以使用简洁表示法： var o = { method(){ return "Hello!"; } }; //等同于： var o = { method: function(){ return "Hello!"; } } </script>
2、Object.assign()
- Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是源对象。
- 参数必须都是对象，否则抛出TypeError错误。
- Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。
var x = {name: "Q1mi", age: 18}; var y = x; var z = Object.assign({}, x); x.age = 20; x.age // 20 y.age // 20 z.age // 18
<script type="text/javascript">
// 字面量方式创建对象
var person = {
name:"alex",
age: 20,
fav:function () {
console.log('喜欢AV');
// this指的是当前的对象
console.log(this.age);
}
};
person.fav();
// es6中对象的单体模式,为了解决箭头函数this指向的问题 推出来一种写法
var person = {
name:"alex",
age: 20,
fav(){
// this指的是当前的对象，即使用它的对象 person对象，和普通函数一样的效果
console.log(this);
console.log(arguments);
}
};
person.fav('21312');
// JavaScript 语言中，生成实例对象的传统方法是通过构造函数。
function Person(name,age){
this.name = name;
this.age = age;
}
Person.prototype.showName = function(){
alert(this.name);
};
// 使用new关机字来创建对象
var p = new Person('alex',19);
p.showName()
// ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
class Person{
// 构造器 当你创建实例之后 constructor()方法会立刻调用 通常这个方法初始化对象的属性
// 这就是构造方法，而this关键字则代表实例对象。
constructor(name,age){
this.name = name;
this.age = age;
}
//方法之间不需要逗号分隔，加了会报错。
showName(){
alert(this.name)
}
};
var p2 = new Person('张三',20);
p2.showName();
</script>
<script> //ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。 function Point(x, y){ this.x = x; this.y = y; } // 给父级绑定方法 Point.prototype.toSting = function(){ return '(' + this.x + ',' + this.y + ')'; }; var p = new Point(10, 20); console.log(p.x); //10 p.toSting(); // 继承 function ColorPoint(x, y, color){ Point.call(this, x, y); this.color = color; } // 继承父类的方法 ColorPoint.prototype = Object.create(Point.prototype); // 修复 constructor ColorPoint.prototype.constructor = Point; // 扩展方法 ColorPoint.prototype.showColor = function(){ console.log('My color is ' + this.color); }; var cp = new ColorPoint(10, 20, "red"); console.log(cp.x); // 10 console.log(cp.toSting()); //(10,20) cp.showColor(); //My color is red //ES6 使用Class构造对象的方式： class Point{ constructor(x, y){ this.x = x; this.y = y; } // 不要加逗号 toSting(){ return `(${this.x}, ${this.y})`; } } var p = new Point(10, 20); console.log(p.x); p.toSting(); class ColorPoint extends Point{ constructor(x, y, color){ super(x, y); // 调用父类的constructor(x, y) this.color = color; } // 不要加逗号 showColor(){ console.log('My color is ' + this.color); } } var cp = new ColorPoint(10, 20, "red"); console.log(cp.x); cp.toSting(); cp.showColor() </script>
五、类
ES6 引入了关键字class来定义一个类，constructor是构造方法，this代表实例对象。
类之间通过extends继承，继承父类的所有属性和方法。
super关键字，它代指父类的this对象，子类必须在constructor中调用super()方法，
否则新建实例时会报错，因为子类没有自己的this对象。调用super()得到this，才能进行修改。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
<script type=
"text/javascript"
>
class
Animal{
constructor(){
this
.type =
"animal"
}
says(say){
console.log(
this
.type +
"says"
+ say )
}
}
let
animal =
new
Animal()
animal.says(
"hello"
)
class
Dog
extends
Animal{
constructor(){
super
();
this
.type =
"dog"
;
}
}
let
dog =
new
Dog()
dog.says(
"hi"
)
</script>
|
六、import和export
import 导入模块、export导出模块
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
// main.js
// 导出多个声明
export
var
name =
"alex"
export
var
age =
"18"
export
function
aa() {
return
1
}
// 批量导出
export
{name, age, aa}
// test.js
import
{name, age, aa} from
"./main"
console.log(name)
console.log(age)
console.log(aa())
// 整个模块导入 把模块当做一个对象
// 该模块下所有的导出都会作为对象的属性存在
import
* as obj from
"./main"
console.log(obj.name)
console.log(obj.age)
console.log(obj.aa())
// 一个模块只能有一个默认导出
// 对于默认导出 导入的时候名字可以不一样
// main.js
var
app =
new
Vue({
});
export
default
app
// test.js
// import app from "./main"
import
my_app from
"./main"
|
七、解构赋值
ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
<script type=
"text/javascript"
>
const people = {
name:
"tom"
,
age: 18,
};
const person = [
"rose"
,
"jack"
]
const { name, age } = people
console.log(name)
//tom
console.log(age)
//18
const [name1, name2] = person
console.log(name1)
//rose
console.log(name2)
//jack
</script>
|
八、字符串函数
- 在此之前，JavaScript中只有str.indexOf(char)方法可用来确定一个字符串是否包含在另一个字符串中。
- ES6中又提供了3种新方法：
- includes()：返回布尔值，表示是否找到了参数字符串。
- stratsWith()：返回布尔值，表示参数字符串是否在源字符串的开始位置。
- endsWith()：返回布尔值，表示参数字符串是否在源字符串的结尾位置。
<script> var s = "Hello world!"; s.includes("o"); // true s.startsWith("Hello"); // true s.endsWith("!"); // true //这三个方法都支持第2个参数，表示开始匹配的位置。 s.includes("o", 8); // false s.startsWith("world", 6); // true s.endsWith("Hello", 5); // true </script>
九、Promise
- Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了
Promise对象。 - 使用Promise的优势是有了
Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。 Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。其实Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。
const promiseObj = new Promise(function(resolve, reject) { // ... some code if (/* 异步操作成功 */){ resolve(value); } else { reject(error); } }); <script> promiseObj.then(function(value) { // success }, function(error) { // failure }); //还可以将上面的代码写成下面这种方式： promiseObj .then(function(value) { // success }) .catch(function(error) { // failure }); </script>
扫一扫
79
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
