ES6快速入门_学习笔记

首页免费课 ES6快速入门笔记

ES6快速入门

最热最新

it轻描淡写 09:40

可变参数的处理

查看全部

0 采集收起来源：默认参数
2019-02-20
it轻描淡写 08:35

ES6默认参数的使用

查看全部

0 采集收起来源：默认参数
2019-02-19
redwave001

作用域，闭包的理解。很重要

查看全部

0 采集收起来源：作用域
2019-02-18
FFF团裁决之键

箭头函数中的this指向的是'定义时this的指向',普通函数的是调用时指向。

查看全部

0 采集收起来源：箭头函数
2019-02-18
玉石兰儿
本门课知识总结（ES6与ES5的对比学习）：
1. 常量：在 ES6 中定义常量时，只需要将 var 变成 const 即可，详情如下：
// ES5 常量写法
Object.defineProperty(window, 'PI2', {
value: 3.1415926,
writable: false,
});
console.log('PI2', window.PI2);

// ES6 常量写法
const PI3 = 3.14;
console.log('PI3', PI3);
// 报错 "PI3" is read-only
// PI3 = 4;

2.作用域：（使用let 定义局部变量）
// ES5 中
var callbacks = [];
for(var i=0;i<=2;i++) {
callbacks[i] = function(){
return i *2;
};
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2]()
]);

// ES6 中的闭包
const callbacks2 = [];
for(let j=0;j<=2;j++) {
callbacks2[j] = function(){
return j *2;
}
};
console.table([
callbacks2[0](),
callbacks2[1](),
callbacks2[2]()
]);

// ES5 作用域
((function(){
const foo = function(){
return 1;
};
console.log('foo()===1', foo()===1);
((function(){
const foo = function(){
return 2;
}
console.log('foo()===2', foo()===2);
})())
})());

// ES6 作用域
{
const foo2 = function(){
return 3;
};
console.log('foo2()===3', foo2()===3);
{
const foo2 = function(){
return 4;
};
console.log('foo2()===4', foo2()===4);
}
console.log('foo2()===3', foo2()===3);
}
3.箭头函数：（箭头函数的 this 指向定义时的对象，ES3, ES5 this 指向该函数被调用的对象）
// ES5 箭头函数
{
var evens = [1, 2, 3, 4, 5];
var odds = evens.map(function(el) {
return el + 1;
});
console.log('evens', evens);
console.log(' odds', odds);
}

// ES6 箭头函数
{
let evens1 = [1, 2, 3, 4, 5];
let odds1 = evens1.map( el => el + 1);
console.log('evens1', evens1);
console.log(' odds1', odds1);
}

{
// ES3, ES5 this 指向该函数被调用的对象
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: function() {
return this.a;
}
};
};
console.log((new factory()).c.b());
}

// ES6 this 指向定义时的对象
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a: 'a+',
b: ()=> this.a
};
};
console.log((new factory()).c.b());
}
4.默认参数：（默认参数设置更加便捷，其中 ... params 表示数组 params 的展开后结果）
// ES3,ES5中默认参数
{
function f(x, y, z) {
if(y === undefined) {
y = 10;
}
if(z === undefined) {
z = 100;
}
return x + y + z;
}
console.log(f(1, 20));
}

// ES6 默认参数
{

function f1(x, y = 10, z = 100) {
return x + y + z;
}
console.log(f1(3, 20));
}

// ES6 使用默认参数抛出异常
{
function checkParameter() {
throw new Error('can\'t be empty');
}
function f3(x = checkParameter(), y= 10, z = 100) {
return x + y + z;
}
// f3();
try{
f3();
} catch(e) {
console.log(e);
}
}
// ES3,ES5可变参数
{
function sum() {
var arr = Array.prototype.slice.call(arguments);
return arr.reduce( function(prev, curr){
return prev + curr;
},0);
}
console.log(sum(10,2,3,4,5));
}

// ES6可变参数
{
function sum1(...arr) {
return arr.reduce((pre, cur) => pre + cur);
}
console.log('sum1', sum1(1000, 200, 30, 4));
}
// ES5 合并数组
{
var params = ['hello', true, 7];
var other = [3, 4].concat(params);
console.log('other', other);
}
// ES6 合并数组
{
var params1 = ['world', false , 8];
var other1 = [10, 20, ... params];
console.log('other1', other1);
}
5.对象代理：（通过 Proxy 代理对象，让对象读取与修改更加快捷）
// ES3,ES5 数据保护
{
var Person = function() {
var data = {
name: 'es3',
sex: 'male',
age: 15
};
this.get = function(key) {
return data[key];
};
this.set = function(key, value) {
if(key !== 'sex') {
data[key] = value;
}
};
};
// 创建实例
var person = new Person();
// 读取数据
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});
// 修改数据
person.set('name', 'es3-1');
// 读取数据
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});
// 修改性别
person.set('sex', 'female');
// 读取数据
console.table({
name: person.get('name'),
sex: person.get('sex'),
age: person.get('age')
});

}

// ES5
{
console.log('\n\nes5');
var Person1 = {
name: 'es5',
age: 16
};
Object.defineProperty(Person1, 'sex', {
writable:false,
value: 'male'
});
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});
Person1.name = 'es5-1';
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});
try{
// 修改只读属性会报错
Person1.sex = 'female';
console.table({
name: Person1.name,
age: Person1.age,
sex: Person1.sex
});

}catch (e) {
console.log(e);
}
}

// ES6
{
let Person2 = {
name: 'es6',
sex: 'male',
age: 17
};
let person2 = new Proxy(Person2, {
get(target, key) {
return target[key];
},
set(target, key, value) {
if(key !== 'sex') {
return (target[key] = value);
}
}
});
console.table({
name: person2.name,
sex: person2.sex,
age: person2.age
});
try{
person2.sex = 'female';
}
catch (e) {
console.log(e);
}
person2.age = 20;
console.table({
name: person2.name,
sex: person2.sex,
age: person2.age
});
}
查看全部

2 采集收起来源：对象代理
2019-02-14
小蜗牛奔跑

https://github.com/cucygh/fe-material

查看全部

4 采集收起来源：环境搭建
2019-02-11
Sandaydi

学前准备
环境准备

查看全部

0 采集收起来源：环境搭建
2019-02-08
小倩14 05:31

//ES5 中的常量，设置常量是只读的

Object.defineProperty(window,"pi1",{
value:3.141592,
writable:false,//不可编辑
})
console.log("pi1:"+pi1);

// ES6 中的常量
const pi2=3.1415926
console.log("pi2:"+pi2);

//pi2=4 加上这句会报 pi2 是只读的错误

查看全部

1 采集收起来源：常量
2019-01-22
Autumn1 18:19

进阶指导，ES6零基础教学

查看全部

0 采集收起来源：对象代理
2019-01-17
Autumn1 18:19

进阶指导，ES6零基础教学-解析彩票项目

查看全部

0 采集收起来源：对象代理
2019-01-17
Autumn1 18:19

进阶指导，ES6零基础教学：“解析彩票项目”

查看全部

0 采集收起来源：对象代理
2019-01-17
Autumn1 18:19

进阶指导，ES6零基础教学：解析彩票项目

查看全部

0 采集收起来源：对象代理
2019-01-17
Autumn1 17:51

ES6进阶指导

查看全部

0 采集收起来源：对象代理
2019-01-17
Autumn1 07:26

下载此课程源码

查看全部

1 采集收起来源：环境搭建
2019-01-17
Autumn1 03:41

ES6安装环境准备

查看全部

1 采集收起来源：环境搭建
2019-01-17
盐的甜js 01:54

git教程

查看全部

0 采集收起来源：环境搭建
2019-01-13
丨带你兜风丨

es6语法模式

查看全部

0 采集收起来源：对象代理
2018-12-25