-
ES5中的作用域：
const callbacks=[]
for (var i=0;i<=2;i++){
? ?callbacks[i]=function(){
? ? ? ?return i*2
? ?}
}
console.table([
? ? callbacks[0](),
? ? callbacks[1](),
? ? callbacks[2](),
])
運行結(jié)果：i的值為0 1 2 ? 結(jié)果值都是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](),
])
運行結(jié)果：i的值為0 1 2 ?結(jié)果值為0 2 4?
注意：用let聲明的變量會有一個塊作用域的概念，取決于當前的塊作用域（是一個花括號里），
將值保存下來，供閉包使用，每循環(huán)一次，就重新生成一次新的作用域
塊作用域：
//立即執(zhí)行函數(shù)
// ?((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中，需要通過立即執(zhí)行函數(shù)才能對作用域進行隔離，
而在es6中只需要通過一對花括號,即可對函數(shù)進行函數(shù). 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中默認參數(shù)寫法
{
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中 默認參數(shù)
{
function f (x,y = 7,z = 42) {
return x + y + z
}
console.log(f(1,3));
}
{
//檢查參數(shù)是否為空
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 可變參數(shù)
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 可變參數(shù)
function f(...a) {
//a表示可變參數(shù)的列表,是一個數(shù)組
var sum = 0;
a.forEach(item=>{
sum+=item*1;
});
return sum
}
console.log(f(1,2,3,6));
}
{
//ES5 合并數(shù)組
var params = ['hello',true,7];
var other = [1,2].concat(params);
console.log(other);
}
{
//ES6 利用擴展運算符合并數(shù)組
var params = ['hello',true,7];
var other = [
1,2,...params
];
console.log(other);
}
查看全部 -
在es3和es5中，普通函數(shù):
function a(){
}
在es6中，箭頭函數(shù):
()=>{
}
查看全部 -
// es3和es5中的普通函數(shù)
{
// ES3,ES5
var evens = [1,2,3,4,5];
var odds = evens.map(function(v) {
return v + 1
})
console.log(evens,odds);
}
// ES6中的箭頭函數(shù)
{
let evens = [1,2,3,4,5];
let odds = evens.map(v => v + 1);
console.log(evens,odds);
}
//小括號中是用來聲明參數(shù)的；
{
//ES3和ES5中的工廠函數(shù)
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的指向是該函數(shù)被調(diào)用的對象.
};
{
var factory = function() {
this.a = 'a';
this.b = 'b';
this.c = {
a:'a+',
b: ()=>{
return this.a
}
}
}
console.log(new factory().c.b());
}
//箭頭函數(shù)的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聲明的變量，閉包取決于當前的塊作用域。
//塊作用域
//立即執(zhí)行函數(shù)
// ((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中,需要通過立即執(zhí)行函數(shù)才可以對作用域進行隔離;而在es6中只需要通過一對花括號,即可對函數(shù)進行函數(shù). es6在進行作用域的處理上是非常強大的.
查看全部 -
關(guān)于常量：
????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；接著對環(huán)境進行配置。https://jingyan.baidu.com/article/48b37f8dd141b41a646488bc.html?(注：環(huán)境配置分為兩步。第一步修改NPM的緩存目錄和全局目錄路徑，將對應的模塊目錄改到對應的磁盤nodejs的安裝目錄，第二步是配置npm和nodejs的環(huán)境變量，這樣nodejs才能正確的調(diào)用對應的模塊。)
????其次安裝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 ? 若出現(xiàn)webpack-dev-server --open ?表示安裝成功。
????最后登錄頁面localhost:9000，進行驗證自己的安裝是否完成。
查看全部 -
jQuery-->es3；Vue，react-->es6。
es6已經(jīng)成為前端開發(fā)中的主力選型語言。
常量-->作用域-->箭頭函數(shù)-->默認參數(shù)-->對象代理. ? 箭頭函數(shù)和默認參數(shù)都是es6特有的
查看全部 -
箭頭函數(shù)中this的指向,是定義時this的指向(this用的是已經(jīng)聲明好的this)
查看全部 -
什么是對象代理？比如我們封裝了一組數(shù)據(jù)，通過訪問代理，對數(shù)據(jù)訪問做限制，而用戶訪問的是代理層，而不是源數(shù)據(jù)。這樣就數(shù)據(jù)進行保護。
ES6原生語法代理 : let ?object = new Proxy() ; ?object 為 用戶訪問操作的代理對象，而不是原始對象
//ES6?
?let Person = { ?//創(chuàng)建一對象
? ? name: 'es6',
? ? sex: 'male',
? ? age: 15
? };
? let person = new Proxy(Person, { ?//Person為代理的對象
? ? get(target, key) { ? //get為讀取操作，參數(shù)target為代理對象的數(shù)據(jù)，key是你要讀的哪個屬性。
? ? ? return target[key]
? ? },
? ? set(target,key,value){ //set為設(shè)置修改操作，value為屬性值
? ? ? if(key!=='sex'){
? ? ? ? target[key]=value;
? ? ? }
? ? }
? });
查看全部 -
對象代理：
ES3可用函數(shù)閉包get，set實現(xiàn)私有變量
ES5可用對象definePropertype下的writable特性
ES6可用對象，通過proxy代理函數(shù)來實現(xiàn)，可函數(shù)閉包有點像
查看全部 -
ES6中用let聲明的變量有一個塊級作用域的概念
查看全部 -
ES6的對象代理解決私有變量問題
查看全部 -
es6的擴展運算符...可以用在可變長參數(shù)，數(shù)組拼接等，很方便
查看全部
舉報