ES6 常用知识点总结

ES6新增的知识点比较多 官方文档地址:http://es6.ruanyifeng.com/

简介:ES6, 全称 ECMAScript 6.0 ,ES6 主要是为了解决 ES5 的先天不足,比如 JavaScript 里并没有类的概念,但是目前浏览器的 JavaScript 是 ES5 版本,大多数高版本的浏览器也支持 ES6,不过只实现了 ES6 的部分特性和功能。
Babel 是一个广泛使用的 ES6 转码器,可以将 ES6 代码转为 ES5 代码,从而在现有环境执行。这意味着,你可以用 ES6 的方式编写程序,又不用担心现有环境是否支持。(官方推荐的)

我自己在项目中用的是 es6-promise

根据目前项目中的一些使用情况以及结合官方文档中的一点知识点来总结一些常用特性! (见仁见智哈)

1. let 和 const
let定义的变量,只能在块作用域里访问,不能跨块访问,也不能跨函数访问。
const用来定义常量,使用时必须初始化(即必须赋值),只能在块作用域里访问,而且不能修改。

let a=10; const aa=10 (简单使用即可)

2.函数的扩展
1)函数参数的默认值

function f(x, y = 5, z) {
return [x, y, z];
}

var f = () => 5;
// 等同于
var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

3.数组的一些扩展方法
1)… 默认用逗号区分 返回数组的每个元素

console.log(…[1, 2, 3]) (结果: 1 2 3)
[…‘hello’]
// [ “h”, “e”, “l”, “l”, “o” ]

const a1 = [1, 2];
// 写法一
const a2 = […a1];
// 写法二
const […a2] = a1; (复制数组)

[…arr1, …arr2, …arr3] (// ES6 的合并数组)

2)数组实例的 find() 和 findIndex() 及对象的一些扩展方法

[1, 4, -5, 10].find((n) => n < 0) //-5

function f(v){
return v > this.age;
}
let person = {name: ‘John’, age: 20};
[10, 12, 26, 15].find(f, person); // 26

[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2 返回第一个目标的下标

const obj1 = {a: {b: 1}};
const obj2 = Object.assign({}, obj1);
obj1.a.b = 2;
obj2.a.b // 2
、、合并对象

3)Set和Map

// 例一
const set = new Set([1, 2, 3, 4, 4]);
[…set]
// [1, 2, 3, 4]

const s = new Set();
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
for (let i of s) {
console.log(i);
}
// 2 3 5 4

const map = new Map([
[‘name’, ‘张三’],
[‘title’, ‘Author’]
]);
map.size // 2
map.has(‘name’) // true
map.get(‘name’) // “张三”
map.has(‘title’) // true
map.get(‘title’) // “Author”

4.Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

5.class java的思想 、、平常用的不多这种形式

class MyClass {
constructor() {
// …
}
get prop() {
return ‘getter’;
}
set prop(value) {
console.log('setter: '+value);
}
}
let inst = new MyClass();
inst.prop = 123;
// setter: 123
inst.prop
// ‘getter’

6.export import VUE-CLI 项目中运用广泛

以上纯属个人总结,肯定有许多没总结到可以细看官方文档哈!

你可能感兴趣的:(es6,前端)