-
ES5中的作用域：
const callbacks=[]
for (var i=0;i<=2;i++){
callbacks[i]=function(){
return i*2
}
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
])
运行结果：i的值为0 1 2 结果值都是6
注:闭包的作用于是全局
//es6中作用域
const callbacks=[]
for (let j=0;j<=2;j++){
callbacks[j]=function(){
return j*2
}
}
console.table([
callbacks[0](),
callbacks[1](),
callbacks[2](),
])
运行结果：i的值为0 1 2 结果值为0 2 4
注意：用let声明的变量会有一个块作用域的概念，取决于当前的块作用域（是一个花括号里），
将值保存下来，供闭包使用，每循环一次，就重新生成一次新的作用域
块作用域：
//立即执行函数
// ((function(){
})())
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中作用域
{
function foo(){
return 1
}
console.log("foo===2",foo()===2);
{
function foo(){
return 2
}
console.log("foo()===1",foo()===1);
}
console.log("foo()===2",foo ===2);
}
注意：
在es2和es5中，需要通过立即执行函数才能对作用域进行隔离，
而在es6中只需要通过一对花括号,即可对函数进行函数. es6在进行作用域的处理上是非常强大的.
查看全部 -
{
//ES5
var Person = {
name : 'es5',
age: 15
};
Object.defineProperty(Person,'sex',{
writable: false,
value:'male'
});
console.table({
name:Person.name,
age:Person.age,
sex:Person.sex
});
Person.name = "es5-cname";
console.table({
name:Person.name,
age:Person.age,
sex:Person.sex
});
try{
Person.sex = "female";
console.table({
name:Person.name,
age:Person.age,
sex:Person.sex
});
} catch (e) {
console.log(e);
}
}
{
// ES6
let Person = {
name : 'es6',
sex: 'male',
age: 15
};
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 {
}
}
查看全部 -
// ES3,ES5中默认参数写法
{
function f(x,y,z) {
if (y===undefined) {
y = 7;
}
if (z===undefined) {
z = 42;
}
return x+y+z
}
console.log(f(4,3));
}
//ES6中 默认参数
{
function f (x,y = 7,z = 42) {
return x + y + z
}
console.log(f(1,3));
}
{
//检查参数是否为空
function checkParameter() {
throw new Error('can\'t be empty')
}
function f(x = checkParameter(),y=7,z=42) {
return x+y+z;
}
console.log(f(1));
try {
f()
} catch (e) {
console.log(e);
} finally {
}
}
{
//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,6));
}
{
//ES6 可变参数
function f(...a) {
//a表示可变参数的列表,是一个数组
var sum = 0;
a.forEach(item=>{
sum+=item*1;
});
return sum
}
console.log(f(1,2,3,6));
}
{
//ES5 合并数组
var params = ['hello',true,7];
var other = [1,2].concat(params);
console.log(other);
}
{
//ES6 利用扩展运算符合并数组
var params = ['hello',true,7];
var other = [
1,2,...params
];
console.log(other);
}
查看全部 -
在es3和es5中，普通函数:
function a(){
}
在es6中，箭头函数:
()=>{
}
查看全部 -
// es3和es5中的普通函数
{
// ES3,ES5
var evens = [1,2,3,4,5];
var odds = evens.map(function(v) {
return v + 1
})
console.log(evens,odds);
}
// ES6中的箭头函数
{
let evens = [1,2,3,4,5];
let odds = evens.map(v => v + 1);
console.log(evens,odds);
}
//小括号中是用来声明参数的；
{
//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的指向是该函数被调用的对象.
};
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a:'a+',
b: ()=>{
return this.a
}
}
}
console.log(new factory().c.b());
}
//箭头函数的this指向是定义时this的指向;为了解决this指向不明确的问题。
查看全部 -
// es5中作用域
const 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](),
]);
//注：闭包的作用域是块作用域;用let声明的变量，闭包取决于当前的块作用域。
//块作用域
//立即执行函数
// ((function() {
//
// })())
//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中作用域
{
function foo(){
return 1
}
console.log("foo() === 2",foo() === 2);
{
function foo(){
return 2
}
console.log("foo() === 1",foo() === 1);
}
console.log("foo()===2",foo()===2);
}
//注:在es3和es5中,需要通过立即执行函数才可以对作用域进行隔离;而在es6中只需要通过一对花括号,即可对函数进行函数. es6在进行作用域的处理上是非常强大的.
查看全部 -
关于常量：
es5中需要API声明常量，比较繁琐；
注：ES5 中常量的写法
Object.defineProperty(window,"PI2",{
value: 3.1415926,
writable: false,
})
console.log(window.PI2);
es6中可通过const命令，就可以让其变成只读属性；
注：ES6 中的常量写法
const PI = 3.14159267
console.log(PI);
注：该常量只可读取，不可进行修改
查看全部 -
工具的安装：
首先需要安装nodejs，其中会自动安装npm；接着对环境进行配置。https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html (注：环境配置分为两步。第一步修改NPM的缓存目录和全局目录路径，将对应的模块目录改到对应的磁盘nodejs的安装目录，第二步是配置npm和nodejs的环境变量，这样nodejs才能正确的调用对应的模块。)
其次安装Git，我们在windows桌面点击鼠标右键会看到有一个Git Bash. 之后我们所有的命令行都在git bash上完成。
最后通过老师的视频安装es6-webpack，然后进行全局安装，通过改变代码中的值，检查是否正确。(1)npm install； (2)npm install webpack -g；(3)npm install webpack-dev-server -g；(4)npm start 若出现webpack-dev-server --open 表示安装成功。
最后登录页面localhost:9000，进行验证自己的安装是否完成。
查看全部 -
jQuery-->es3；Vue，react-->es6。
es6已经成为前端开发中的主力选型语言。
常量-->作用域-->箭头函数-->默认参数-->对象代理. 箭头函数和默认参数都是es6特有的
查看全部 -
箭头函数中this的指向,是定义时this的指向(this用的是已经声明好的this)
查看全部 -
什么是对象代理？比如我们封装了一组数据，通过访问代理，对数据访问做限制，而用户访问的是代理层，而不是源数据。这样就数据进行保护。
ES6原生语法代理 : let object = new Proxy() ; object 为 用户访问操作的代理对象，而不是原始对象
//ES6
let Person = { //创建一对象
name: 'es6',
sex: 'male',
age: 15
};
let person = new Proxy(Person, { //Person为代理的对象
get(target, key) { //get为读取操作，参数target为代理对象的数据，key是你要读的哪个属性。
return target[key]
},
set(target,key,value){ //set为设置修改操作，value为属性值
if(key!=='sex'){
target[key]=value;
}
}
});
查看全部 -
对象代理：
ES3可用函数闭包get，set实现私有变量
ES5可用对象definePropertype下的writable特性
ES6可用对象，通过proxy代理函数来实现，可函数闭包有点像
查看全部 -
ES6中用let声明的变量有一个块级作用域的概念
查看全部 -
ES6的对象代理解决私有变量问题
查看全部 -
es6的扩展运算符...可以用在可变长参数，数组拼接等，很方便
查看全部
举报