什么是ECMAScript关筒?
ECMAScript就是JavaScript中的語法規(guī)范描孟!
關(guān)鍵字 let 的用法
let關(guān)鍵字是用了聲明變量的,類似于var驶睦。let聲明的變量僅僅在自己的塊級作用域起作用,出了這個(gè)塊級作用域就不起作用匿醒。需要先聲明定義再使用场航,同一個(gè)塊級作用域內(nèi),不允許重復(fù)聲明同一個(gè)變量廉羔,函數(shù)內(nèi)不能用let重新聲明函數(shù)的參數(shù)溉痢。
關(guān)鍵字 const 的用法
const和 let一樣,也是用來聲明變量的憋他,但是const是專門用于聲明一個(gè)常量的孩饼,顧名思義,常量的值是不可改變的竹挡。只在塊級作用域起作用,不存在變量提升镀娶,必須先聲明后使用,不可重復(fù)聲明同一個(gè)變量,聲明后必須要賦值揪罕。
快速讓瀏覽器兼容ES6特性
比較通用的工具方案有babel梯码,jsx,traceur好啰,es6-shim等轩娶。
各大轉(zhuǎn)換工具、javascript解析引擎對ES6的支持程度情況框往,可以參查看這個(gè)地址:'http://kangax.github.io/compat-table/es6/'
解構(gòu)賦值
ES6允許按照一定模式鳄抒,從數(shù)組和對象中提取值,對變量進(jìn)行賦值椰弊,這被稱為解構(gòu)嘁酿。
var arr = [1,2,3];//把數(shù)組的值分別賦給下面的變量;(傳統(tǒng))
var a = arr[0];
var b = arr[1];
var [a,b,c] = [1,2,3]; //把數(shù)組的值分別賦給下面的變量男应;(解構(gòu))
console.log(a);//a的值為1
console.log(b);//b的值為2
console.log(c);//c的值為3
var { a,b,c} = {"a":1,"b":2,"c":3};(對象解構(gòu))
console.log(a);//結(jié)果:a的值為1
console.log(b);//結(jié)果:b的值為2
console.log(c);//結(jié)果:c的值為3
var [a,b,c,d,e,f] = "我就是前端君";(字符串解構(gòu))
console.log(a);//我
console.log(b);//就
console.log(c);//是
交換變量的值
var x = 1;
var y = 2;
[x,y] = [y,x];
提取函數(shù)返回的多個(gè)值
function demo(){
return {"name":"張三","age":21}
}
var {name,age} = demo();
console.log(name);//結(jié)果:張三
console.log(age);//結(jié)果:21
ES6為字符串String帶來哪些好玩的特性?
字符串實(shí)現(xiàn)拼接
let name = "Jacky";
let occupation = "doctor";
//傳統(tǒng)字符串拼接
let str = "He is "+ name +",he is a "+ occupation;
//模板字符串拼接
let str = He is ${name},he is a ${occupation}
;
${ }中可以是運(yùn)算表達(dá)式
var str = the result is ${a+b}
;
${ }中可以是對象的屬性
var str = the result is ${obj.a+obj.b}
;
${ }中可以是函數(shù)的調(diào)用
var str = the result is ${ fn() }
;
repeat( )函數(shù):將目標(biāo)字符串重復(fù)N次娱仔,返回一個(gè)新的字符串沐飘,不影響目標(biāo)字符串。
includes( )函數(shù):判斷字符串中是否含有指定的子字符串,返回true表示含有和false表示未含有耐朴。第二個(gè)參數(shù)選填借卧,表示開始搜索的位置。
startsWith( )函數(shù):判斷指定的子字符串是否出現(xiàn)在目標(biāo)字符串的開頭位置筛峭,第二個(gè)參數(shù)選填铐刘,表示開始搜索的位置。
endsWith( )函數(shù):判斷子字符串是否出現(xiàn)在目標(biāo)字符串的尾部位置影晓,第二個(gè)參數(shù)選填镰吵,表示針對前N個(gè)字符。
ES6給我們提供的codePointAt( )函數(shù)挂签,就可以處理這種4個(gè)字節(jié)的字符
var str = "??";
str.codePointAt(); //結(jié)果:134071
String.fromCodePoint( )函數(shù):函數(shù)的參數(shù)是一個(gè)字符對應(yīng)的碼點(diǎn)疤祭,返回的結(jié)果就是對應(yīng)的字符,哪怕這個(gè)字符是一個(gè)4字節(jié)的字符饵婆,也能正確實(shí)現(xiàn)
String.fromCodePoint(134071); //結(jié)果:"??"
String.raw( )勺馆;返回字符串最原始的樣貌,即使字符串中含有轉(zhuǎn)義符侨核,它都視而不見草穆,直接輸出。
ES6為數(shù)值做了哪些擴(kuò)展搓译?
在ES5中悲柱,我們存在幾個(gè)全局函數(shù) isNaN函數(shù),isFinite函數(shù)侥衬,parseInt函數(shù)诗祸,parseFloat函數(shù)等,屬于window對象下的一個(gè)方法轴总。
但是在ES6的標(biāo)準(zhǔn)中直颅,isNaN方法被移植到了Number對象上,也就是原本屬于全局對象window下的函數(shù)怀樟,現(xiàn)在屬于Number對象上了功偿,同樣被處理的函數(shù)還有isFinite函數(shù),parseInt函數(shù)往堡,parseFloat函數(shù)械荷。
Number.isNaN函數(shù):用于判斷傳入的是否是非數(shù)值
Number下面的isNaN都懶得給字符串’abc’做類型轉(zhuǎn)換,直接返回false虑灰。而ES5中的isNaN函數(shù)會對字符串’abc’進(jìn)行類型轉(zhuǎn)換后吨瞎,發(fā)現(xiàn)它是一個(gè)NaN(非數(shù)值),才返回true穆咐。
Number.isFinite函數(shù):用來檢查一個(gè)數(shù)值是否非無窮颤诀。同樣要注意字旭,當(dāng)Number.isFinite函數(shù)返回false的時(shí)候,參數(shù)不一定就是一個(gè)有窮的數(shù)值類型崖叫,也有可能是一個(gè)非數(shù)值類型的參數(shù)遗淳。如:字符串’abc’。
Number.isInteger函數(shù):用來判斷是否是整數(shù)心傀。
Number.EPSILON常量:定義一個(gè)極小的數(shù)值屈暗。
Math.trunc函數(shù):用于去除一個(gè)數(shù)的小數(shù)部分,返回整數(shù)部分脂男。
Math.sign函數(shù):用來判斷一個(gè)數(shù)到底是正數(shù)养叛、負(fù)數(shù)、還是零疆液。
Math.cbrt函數(shù):用于計(jì)算一個(gè)數(shù)的立方根一铅。
ES6為數(shù)組做了哪些擴(kuò)展?
Array.of(1,2,3,4,5); 函數(shù)作用:將一組值堕油,轉(zhuǎn)換成數(shù)組潘飘。
Array.from(ele) instanceof Array; //結(jié)果:true,是數(shù)組
Array.from函數(shù)其中一個(gè)用處就是將字符串轉(zhuǎn)換成數(shù)組掉缺,還有個(gè)是克隆數(shù)組卜录。看下面的案例:let str = 'hello';
Array.from(str); //結(jié)果:["h", "e", "l", "l", "o"]
find( );函數(shù)作用:找出數(shù)組中符合條件的第一個(gè)元素眶明。倘若所有元素都不符合匿名函數(shù)的條件艰毒,find( )函數(shù)就會返回undefind。
let arr = [1,2,3,4,5,6];
arr.find(function(value){
return value > 2;
}); //結(jié)果:value=3
findIndex( ) 函數(shù)作用:返回符合條件的第一個(gè)數(shù)組成員的位置搜囱。
fill( )函數(shù)作用:用指定的值丑瞧,填充到數(shù)組。
let arr = [1,2,3];
arr.fill(4); //結(jié)果:[4,4,4]
arr.fill(4,1,3); //結(jié)果:[1,4,4]
entries( )函數(shù)作用:對數(shù)組的鍵值對進(jìn)行遍歷蜀肘,返回一個(gè)遍歷器绊汹,可以用for..of對其進(jìn)行遍歷。
for(let [i,v] of ['a', 'b'].entries())
{
console.log(i,v);
}
//0 "a"
//1 "b"
keys( )函數(shù)作用:對數(shù)組的索引鍵進(jìn)行遍歷扮宠,返回一個(gè)遍歷器西乖。
for(let index of ['a', 'b'].keys())
{
console.log(index);
}
//0
//1
values( )作用:對數(shù)組的元素進(jìn)行遍歷,返回一個(gè)遍歷器坛增。
for(let value of ['a', 'b'].values())
{
console.log(value);
}
//a
//b
數(shù)組推導(dǎo):用簡潔的寫法获雕,直接通過現(xiàn)有的數(shù)組生成新數(shù)組
假如我們有一個(gè)數(shù)組,我在這個(gè)數(shù)組的基礎(chǔ)上收捣,每個(gè)元素乘以2届案,得到一個(gè)新數(shù)組。
var arr1 = [1, 2, 3, 4];
var arr2 = [for(i of arr1) i * 2];
console.log(arr2);
//結(jié)果: [ 2, 4, 6, 8 ]
在數(shù)組推導(dǎo)中罢艾,for..of后面還可以加上if語句
var array1 = [1, 2, 3, 4];
var array2 = [for(i of array1) if(i>3) i];
console.log(array2);
//結(jié)果: [4]
ES6為對象做了哪些擴(kuò)展楣颠?
ES6給我們帶來了更簡便的表示法嫁乘,我們一起來對比一下:
var name = "Zhangsan";
var age = 12;
//傳統(tǒng)的屬性寫法
var person = {
"name":name,
"age":age
};
console.log(person);
//結(jié)果:{name: "Zhangsan", age: 12}
//ES6的屬性寫法
var person = {name,age};
console.log(person);
//結(jié)果:{name: "Zhangsan", age: 12}
//傳統(tǒng)的表示法
var person = {
say:function(){
alert('這是傳統(tǒng)的表示法');
}
};
//ES6的表示法
var person = {
say(){
alert('這是ES6的表示法');
}
};
在表示法上除了這點(diǎn)改進(jìn)以外,還有另外一個(gè)新特點(diǎn):用字面量定義一個(gè)對象的時(shí)候球碉,可以用表達(dá)式作為對象的屬性名或者方法名。
var f = "first";
var n = "Name";
var s = "say";
var h = "Hello";
var person = {
[ f+n ] : "Zhang",
s+h {
return "你好嗎仓蛆?";
}
};
console.log(person.firstName);
//結(jié)果:Zhang
console.log(person.sayHello());
//結(jié)果:你好嗎睁冬?
Object.is()函數(shù),它的作用也跟嚴(yán)格相等一樣看疙,
var str = '12';
var num = 12;
var num2 = 12;
Object.is(str,num);
//結(jié)果:false
Object.is(num2,num);
//結(jié)果:true
Object.assign()函數(shù)作用:將源對象的屬性賦值到目標(biāo)對象上豆拨。
//這個(gè)充當(dāng)目標(biāo)對象
let target = {"a":1};
//這個(gè)充當(dāng)源對象
let origin = {"b":2,"c":3};
Object.assign(target,origin);
//打印target對象出來看一下
console.log(target);
//結(jié)果 {a: 1, b: 2, c: 3}
巧妙利用Object.assign( )函數(shù)的功能,我們可以完成很多效果能庆,比如:給對象添加屬性和方法施禾,克隆對象,合并多個(gè)對象搁胆,為對象的屬性指定默認(rèn)值弥搞。
ES6為函數(shù)做了哪些擴(kuò)展?
設(shè)定默認(rèn)值渠旁,有默認(rèn)值的參數(shù)后面不能再跟不需默認(rèn)值的參數(shù)了攀例。
function person(name = 'Zhangsan',age = 25){
console.log(name,age);
}
person();//結(jié)果:Zhangsan 25
person('Lisi',18);//結(jié)果:Lisi 18
rest參數(shù),這是一個(gè)新的概念顾腊,rest的中文意思是:剩下的部分粤铭。
//求和函數(shù),得到的結(jié)果賦值到result
function sum(result,...values){
//打印values看看是什么
console.log(values);
//結(jié)果:[1,2,3,4]
//進(jìn)行求和
values.forEach(function (v,i) {
//求和得到的結(jié)果存到result
result += v;
});
//打印出求和的結(jié)果看看
console.log(result);
//結(jié)果:10
}
//存儲求和結(jié)果的變量res
var res = 0;
//調(diào)用sum函數(shù)
sum(res,1,2,3,4);
箭頭函數(shù)杂靶,這又是一個(gè)新概念梆惯,ES6給我們介紹一種全新的定義函數(shù)的方式,就是用箭頭符號(=>)吗垮,故得名為箭頭函數(shù)垛吗。
var sum = function(a) {
return a ;
};
//箭頭函數(shù)寫法
var sum = a => a;
/ /箭頭函數(shù)寫法
var sum = (a,b) => {return a+b}
sum(1,2);//結(jié)果:3
箭頭函數(shù)中的this指向的是定義時(shí)的this,而不是執(zhí)行時(shí)的this抱既。
JavaScript有了一種全新的數(shù)據(jù)類型:Symbol
ES6設(shè)計(jì)出一個(gè)Symbol的初衷:解決對象的屬性名沖突职烧。
let name = Symbol();
let person = {
[name]:"張三"
};
console.log(person[name]);
//結(jié)果:張三
console.log(person.name);
//結(jié)果:undefined
當(dāng)symbol值作為對象的屬性名的時(shí)候,不能用點(diǎn)運(yùn)算符獲取對應(yīng)的值防泵。
當(dāng)symbol類型的值作為屬性名的時(shí)候蚀之,該屬性是不會出現(xiàn)在for...in和for...of中的,也不會被Object.keys( )獲取到捷泞。
ES:給開發(fā)者提供了一個(gè)新特性:Proxy足删,就是代理的意思。
待補(bǔ)充锁右!
for...of 一種用于遍歷數(shù)據(jù)結(jié)構(gòu)的方法失受。它可遍歷的對象包括數(shù)組讶泰,對象,字符串拂到,set和map結(jié)構(gòu)等具有iterator 接口的數(shù)據(jù)結(jié)構(gòu)痪署。
for(let i = 0;i<arr.length;i++){ }(代碼不夠簡潔)
arr.forEach(function (value,index) { });(無法中斷停止整個(gè)循環(huán))
for(let i in arr){}如果用于數(shù)組的循環(huán),那么就要注意了兄旬,上述代碼中每次循環(huán)中得到的i是字符串類型狼犯,而不是預(yù)料中的數(shù)字類型,要想對它進(jìn)行運(yùn)算领铐,那得先要進(jìn)行類型轉(zhuǎn)換悯森,造成不方便。
for(let value of arr){ }
1.寫法比for循環(huán)簡潔很多绪撵;
2.可以用break來終止整個(gè)循環(huán)瓢姻,或者continute來跳出當(dāng)前循環(huán),繼續(xù)后面的循環(huán)音诈;
3.結(jié)合keys( )獲取到循環(huán)的索引幻碱,并且是數(shù)字類型,而不是字符串類型改艇。
for(let index of arr.keys()){
console.log(index);
}
for...of 支持字符串的遍歷收班。
for...of支持類數(shù)組的遍歷
for...of支持set和map解構(gòu)的遍歷,考慮到set和map我們還沒學(xué)習(xí)
只要一個(gè)數(shù)據(jù)結(jié)構(gòu)擁有一個(gè)叫Symbol.iterator方法的數(shù)據(jù)結(jié)構(gòu)谒兄,就可以被for...of遍歷摔桦,我們稱之為:可遍歷對象。
ES6新增的 Set 和 WeakSet 是什么東西承疲?
Set是ES6給開發(fā)者帶來的一種新的數(shù)據(jù)結(jié)構(gòu)邻耕,它的值不會有重復(fù)項(xiàng)。
var s = new Set([1,2,3]);
console.log(s); //打印結(jié)果:Set {1, 2, 3}
如果你不想用數(shù)組作為參數(shù)來傳值初始化變量s燕鸽,你還可以通過Set 結(jié)構(gòu)提供的add方法來添加方法兄世,也是沒問題的。
var s = new Set();
//使用add方法添加成員
s.add(1);
s.add(2);
s.add(3);
console.log(s);
//打印結(jié)果:Set {1, 2, 3}
size屬性:獲取成員的個(gè)數(shù)啊研。
delete( )方法:用戶刪除Set結(jié)構(gòu)中的指定值御滩,刪除成功返回:true,刪除失敗返回:fasle党远。
clear( )方法:清除所有成員削解。
has( )方法:判斷set結(jié)構(gòu)中是否含有指定的值。如果有沟娱,返回true氛驮;如果沒有,返回fasle济似。
keys( )方法:返回鍵名的遍歷器矫废。
values( )方法:返回鍵值的遍歷器盏缤。
entries( )方法:鍵名+鍵值
WeakSet 是給對象賦值