ES6的新特性

ES6的新特性

(1)变量声明:由var变为let和const;

(2)模板字符串:使用反引号``;在模板字符串里面支持换行,并可以在里面使用${}来包裹一个变量或表达式;

(3)解构:有***数组解构***和***对象解构***;可以快速获取数组和对象的值;

//解构赋值
const foo = [1,2,3,4,5]
const [a,bd,e] = foo //数组解构 按顺序赋值
console.log(a,bd,e); //1,2,3

const foo2 = {
    name:'lululu',
    pass:123
}
const {name,pass} = foo2 //对象解构 一定要名字对应
console.log('name,pass: ', name,pass);

(4) 展开运算符:在ES6中用…来表示展开运算符,它可以将数组或者对象进行展开;可以借此来实现 数组的深拷贝 \ 数组合并 \ 将伪数组或者可遍历对象转换为真正的数组

// 实现拷贝
let arr1 = ['www', 'smyhvae', 'com'];
let arr2 = [...arr1]; //【重要代码】arr2 会重新开辟内存地址 ...arr1相当于手打的arr1数组去掉了中括号, 逗号还是在的
console.log('arr1:' + arr1); // arr1:www,smyhvae,com
console.log('arr2:' + arr2); // arr2:www,smyhvae,com
console.log('---------------------');

arr2.push('你懂得'); //往arr2 里添加一部分内容
console.log('arr1:' + arr1); // arr1:www,smyhvae,com
console.log('arr2:' + arr2); // arr2:www,smyhvae,com,你懂得

//================//
// 合并数组
let arr1 = ['王一', '王二', '王三'];
let arr2 = ['王四', '王五', '王六'];
// ...arr1  // '王一','王二','王三'
// ...arr2  // '王四','王五','王六'

// 方法1
let arr3 = [...arr1, ...arr2];
console.log(arr3); // ["王一", "王二", "王三", "王四", "王五", "王六"]

// 方法2
arr1.push(...arr2);
console.log(arr1); // ["王一", "王二", "王三", "王四", "王五", "王六"]

//================//
// 将伪数组或者可遍历对象转换为真正的数组
const myDivs = document.getElementsByClassName('div');
const divArr = [...myDivs]; // 利用扩展运算符，将伪数组转为真正的数组

(5) 箭头函数

函数的快捷写法,不需要通过function关键字创建函数,并且可以省略return关键字.

但函数体内的this对象指的是定义时所在 作用域 的对象,而不是使用时所在的对象;

化简规则:

• 只有1个参数可以省略小括号;
• 没有参数或者有多个参数不能省略小括号;
• 函数体内只有一行可以省略大括号,如果有返回值return,则return也要省略;
• 函数体内有多行,不能省略大括号;

const foo = a => a;
console.log('foo(1): ', foo(1));// 1

(6) 对象的简化赋值:对象赋值时如果属性名和变量名一致可以简写

(7) 函数的参数默认值:

// 函数的参数默认值 有默认值倒一定要加小括号了
const foo =(a='20') => a;

function foo2 (test = 'default'){
	return test;
}

(8) 类的支持

ES6中添加了对类的支持，引入了class关键字。JS本身就是面向对象，ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建，继承更直观，父类方法的调用，实例化，静态方法和构造函数更加形象化

剩余参数

当函数的参数不确定个数的时候, 利用剩余参数, 把参数整合到一个数组里 .
function a( first , ...args){}
剩余参数后面不能再跟其他参数, 但前面可以跟其他参数 .

// 不使用剩余参数
function fn(a, b, c) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}

fn(1, 2, 3);
// 1
// 2
// 3
// 引用错误

// 使用剩余参数
const fn = (...args) => {
    //当不确定方法的参数时，可以使用剩余参数
    console.log(args[0]);
    console.log(args[1]);
    console.log(args[2]);
    console.log(args[3]);
};

fn(1, 2);
// 1
// 2
// undefined
// undefined

fn(1, 2, 3); //方法的定义中了四个参数，但调用函数时只使用了三个参数，ES6 中并不会报错。
// 1
// 2
// 3
// undefined

参考文章：ES6有哪些新特性

有关箭头函数默认值和this指向的注意点请看这篇文章