xiaomibaobao

ES6 常见的用法

最近被一个自学前端妹子烦的要死,看阮老师的ES6教程看的眼睛花,说实话,我也看的眼睛花,还是决定来一篇ES6的快速入门,能最快速度的在开发中使用一些新特性,有了兴趣在挖掘。

ES6 常见的用法

1 let 和 const

  • 在通常的JS中,变量默认是全局的。只有所谓的闭包(函数作用域下)才有局部变量。声明函数曾经是创造作用域的唯一方法。以前的常见错误:
1
2
3
4
5
6
7
8
9
10
//假设有一排button,我们要给他绑定事件,让每一个button在点击的时候弹出1。
var bottons = document.getElementsByTagName('button');
for (var i = 0; i++; i < buttons.length) {
bottons[i].onclick = function () {
alert(1);
}
}
//这样的代码读起来感觉毫无问题,但是运行的时候会发现,根本无法运行。
//就是因为在for的循环体中,只能拿到循环后的i,所以无法实现我们的效果.
//现在有了es6,上面的问题就变得很好解决了,使用let 替换 var 即可。

补充 :1 重复由let定义变量会报错,在同一块儿级作用域中。2 由let定义的变量不再有预解释机制

  • const关键字可以声明或定义一个常量,这个常量无法被改变类型。但是如果是引用类型的常量,我们可以改变他的值。
1
2
3
4
5
const a =2 ; a = 3 / a =null;
const b = {a:2,b:1} ; const b = {}/const b = ''
//报错说无法改变常量:Uncaught TypeError: Assignment to constant variable.(…)
const c = {a:1} ; c.a =2; console.log(c)
// c:Object {a: 2}

2 永远匿名的箭头函数

  • 工作中尺寸遇到匿名函数的this问题,由于this的机制,在匿名函数中的this会永远指向window.通常会使用bind或者临时保存一下this来解决。但是箭头函数美好的解决了这一点。

3 函数默认参数

  • ES6之前,所有函数对于默认参数的配置都是arguments[i] = arguments[i] || default.ES6的写法是:
1
2
3
4
function myFn (a=4,b =3) {
console.log(a,b)
}
myFn();// 4 ,3
  • 此外还有REST参数,类似于解构赋值、展开操作。 规则: 当函数的最后一个参数有...前缀,它就会变成一个参数的数组
  • REST参数和arguments的区别有:
    1. REST参数可以做参数一部分,它只是没有指定变量名称的数组,而arguments就是全部参数。
    2. arguments对象不是真正的数组,而REST就是真正的数组,可以使用数组的各种花式操作。
1
2
3
4
5
function fn(...args){
console.log(args);
console.log({}.toString.call(args));
}
fn([1,2.3]) //[1,2.3] ,[object Array]

4 展开操作符

  • 刚刚使用了...操作符来实现REST参数,本质上这个操作符被称作展开操作符,允许在存在多个参数、多个元素、多个变量等地方来展开他们。
1
2
3
4
5
6
7
8
9
10
11
//函数
function test (a,b,c){};
let args = [1,2,3];
test(...args);
//数组
let arr1=[1,2],arr2=[3,4];
console.log(...arr1,...arr2) // [1,2,3,4];
//对象
let person = { name :'xiaomi',age : 23 };
let newPerson = {...person,sex:'male'};
console.log(newPerson) //{name:'xiaomi',age :23,sex:'male'};

ps:对象只能展开可枚举的属性。而且是ES7的新特性。coming soon!

5 模板字符串

  • 太简单了,不说了。

6 解构赋值

  • ES6的解构赋值受python启发,可以快速从数组或者对象中提取变量,用一个表达式读取整个结构。
1
2
3
4
5
6
7
8
//对象
let person = {name:'xiaomi' , age :'20'};
let {name , age } = person ;
console.log(name,age);//'xiaomi','20'
//数组
let foo = ['one','two','three'];
let [a,,c] = foo; //注意数组中的空位
console.log(a,c);//'one','three'

7 常用方法

ES6分别给字符串,数组,对象等带来了一些常用的方法;

  • 字符串
1
2
3
4
console.log(strs.startsWith('a',2));//如果是一个参数,则表示是否是以此参数开始。两个参数则表示从这个参数开始的后半段中是否。。。
console.log(strs.endsWith('o',4));//同上
console.log(strs.includes('o',3));//一个参数相当于indexOf>-1。两个参数同上。
  • 数组
1
2
3
4
5
6
7
8
9
10
11
12
13
//from
let newArr = Array.from(oldArr); //from将一个数组或者类数组变成数组,会复制一份.
//of
console.log(length,Array.of(3, 4), Array.of(3, 4).length);//of是为了将一组数值,转换为数组
//copyWithin
console.log([1,2,3,4,5].copyWithin(1,3,4));//copyWithin从特定部分拷贝,参数一开始的位置,参数二开始的下标,参数三,结束的下标,包前不包后
//findindex、find
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10,find和filter的区别在于find只找一个,找到就结束,filter会全部找到。findindex和find一样,但是返回其索引。
//fill
['a', 'b', 'c'].fill(7)// [7, 7, 7],如果有原数组,会更改原数组。
new Array(3).fill(7)// [7, 7, 7]
  • 对象
1
2
3
4
5
6
7
8
9
//Object.is
console.log(Object.is(NaN,NaN));//true ,特殊情况。正常情况是判断两个对象是否是同一地址。
// Object.assign
var nameObj = {name:'xiaomi'};
var ageObj = {age:8};
var obj = {};
Object.assign(obj,nameObj,ageObj);
console.log(obj);//Object {name: "xiaomi", age: 8}
//The Object.assign() method is used to copy the values of all enumerable own properties from one or more source objects to a target object. It will return the target object.

8 类 class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Vehicle {
constructor(make, year) {
this.make = 'make';
this.year = 'year'
}
}
// 迅速继承
class Motorcycle extends Vehicle {
constructor(make, year) {
super(make, year); //使用super关键字可以迅速继承父级方法。
}
toString() {//非构造函数中不能直接使用super方法,但是可以通过super.xxx()调用父级方法。
return `Motorcycle ${this.make} ${this.year}`;
}
}

模块化。这个部分用的太多了。晚点聊。

如果我实实在在的帮到您,可以点击打赏,请我喝一杯。