-
es6 this定义时的this指向，解决es5 this不明确问题。 Es5谁调用this就指向的到谁。查看全部
-
安装流程顺序
查看全部 -
立即提升函数
ES6-花括号实现的作用域隔离
查看全部 -
ES6进阶知识
查看全部 -
es6合并数组
查看全部 -
可变参数获取与运算
function(...a){
}
查看全部 -
抛出异常写法
查看全部 -
es6参数默认值
查看全部 -
es6进阶指导
（1）解构赋值
（2）模版字符串
（3）正则扩展
（4）数字扩展
（5）Iterator
（6）Generator
（7）Set和Map
（8）函数拓展
（9）Class
（10）Module
（11）Symbol
（12）对象拓展
查看全部 -
对象代理
// 数据保护
// es3
{
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-cname');
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
{
var Person = {
name : 'es5',
age : 15
};
Object.defineProperty(Person,'sex',{
writable : false,
value : 'male'
});
//读取
console.table({name : person.name,sex : person.sex,age : person.age});
person.name = 'es5-cname';
console.table({name : person.name,sex : person.sex,age : person.age});
// 报错
person.sex = 'female';
console.table({name : person.name,sex : person.sex,age : person.age});
}
// es6
{
let Person = {
name : 'es6',
sex : 'male',
age : 18
};
let person = new Proxy(Person,{
get(target,key){
return target[key];
},
set(target,key,value){
if(key != 'sex')
target[key] = value;
}
});
// 读取
console.table({name : person.name,sex : person.sex,age : person.age});
// 修改
try{
person.sex = 'female';
}catch(e){
console.log(e);
}finally{
}
}
查看全部 -
默认参数
(1)es3、es5
{
function f(x, y, z){
if(y === undefined){
y = 7;
}
if(z === undefined){
z = 42;
}
return x + y + z;
}
console.log(f(1));
console.log(f(1, 3));
}
(2)es6
{
function f(x, y = 7, z = 42){
return x + y + z;
}
console.log(f(1));
}
// 可变参数,求和例子
// es3、es5
{
function f(){
var a = Array.prototype.slice.call(arguments);
var sum = 0;
a.forEach(function (item){
sum += item * 1;
});
return sum;
}
console.log(f(1,2,3));
}
// es6
{
function f(...a){
var sum = 0;
a.forEach(item => {
sum += item * 1;
});
return sum;
}
console.log(f(1,2,3));
}
// 合并数组
// es5
{
var params = ['hello', true, 7];
var other = [1, 2].concat(params);
}
// es6
{
var params = ['hello', true, 7];
var other = [1, 2,...params];
console.log(other);
}
查看全部 -
箭头函数
(1)es3、es5
function a(){
}
(2)es6
() =>{
}
好处：
(1)减少书写
(2)消除this指向不明确
例子
(1)es3、es5
{
// es3、es5
var evens = [1,2,3,4,5];
var odds = evens.map(function(v){
return v + 1;
});
console.log(evens,odds);
}
(2)es6
{
let evens = [1,2,3,4,5];
let odds = evens.map(v => v + 1);
console.log(evens,odds);
}
// 需要注意，在es6中
// ()是用来声明参数的，如果参数只有一个的时候，
// 小括号可以省略;如果花括号中的表达式可以直接
// 作为返回时可以省略。
// 消除this指针问题
// es3、es5
{
var factory = function(){
this.a = 'a';
this.b = 'b';
this.c = {
a :'a+',
b: function(){
return this.a;
}
}
}
console.log(new factory().c.b());
// 输出 a+
// this指向是该函数的对象
}
// es6
{
let factory = function(){
this.a = 'a';
this.b = 'b';
this.c = {
a :'a+',
b: () =>{
return this.a;
}
}
}
console.log(new factory().c.b());
// 输出a
}
查看全部 -
作用域
（1）es5
var callbacks =[];
for(var i = 0; i <= 2; i++){
callbacks[i] = function(){
return i * 2;
}
}
console.table({
callbacks[0](),
callbacks[1](),
callbacks[2](),
});
// 输出 6 6 6
// 其中callbacks[i] 中的i和循环中i是同一个i，
// 而return i * 2是另外一个，因为i没定义，此时仅保存i * 2的表达式
// 当使用callback时才执行，此时i=3了，所以都是3 * 2= 6
（2）es6
const callback2=[]
for(let j = 0 ; j <= 2; j++){
callbacks[j] = function(){
return j * 2;
}
}
console.table({
callbacks2[0](),
callbacks2[1](),
callbacks2[2](),
});
形成块的方法：
（1）es5
// 立即执行函数内形成一个块，形成块
(function(){
})
(function(){
var foo = function(){
return 1;
}
console.log('foo() === 1',foo() === 1);
(function(){
var foo = function(){
return 2;
}
console.log('foo() === 2',foo() === 1);
})
})
// 都是返回 true
（2）es6
// 使用{}可以形成域
{
foo = function(){
return 1;
}
console.log('foo() === 1',foo() === 1);
{
foo = function(){
return 2;
}
console.log('foo() === 2',foo() === 2);
}
}
查看全部 -
常量
es5和es6的写法
（1）es5
// writable:false表示不能写
Object.defineProperty(window,"PI2",{
value:3.1415926,
writable:false,
});
console.log(window.PI2);
// 可以重新赋值，但是无效
（2）es6
const PI = 3.1415926
console.log(PI);
// 不能重新赋值，会报错
查看全部 -
jquery是es3
angular 、vue、react是es6
整个课程的学习方式：对比学习
es6的学习内容：
常量、作用域、箭头函数、默认函数、对象代理查看全部
举报