這篇文章帶大家深入了解ES6,了解學習ES6新增特性,希望對大家有幫助!
#ECMAScript
,是由網景公司製定的一種腳本語言的標準化規範
;最初命名為Mocha
,後來改名為LiveScript
,最後重新命名為JavaScript
ECMAScript 2015( ES2015),第6 版,最早被稱為ECMAScript 6(ES6
),增加了新的特性。
ES6 區塊層級作用域 let
首先,什麼是作用域?作用域簡單講就是宣告一個變量,這個變數的有效範圍,在 let
沒來之前。 js 只有var
的全域作用域
和函數作用域
,ES6
為js 帶來了區塊級作用域
。 【相關推薦:javascript學習教學】
{ var a = "?"; let b = "⛳"; } console.log(a); console.log(b);
? Uncaught ReferenceError: b is not defined
可以看到,我們使用var 關鍵字在區塊中定義了變數a,其實全域可以存取到,所以說,var宣告的變數是全域的
,但我們想讓變數就在區塊中生效,出了區塊就存取不了,這時就可以使用ES6
新增的區塊級作用域關鍵字let
來聲明這個變數a,當我再次訪問,報錯了,說a is not defined
,a沒有定義
#如下所示,首先定義了一個函數,傳回一個數組,在未使用解構數組前,在呼叫數組並把返回值賦值給temp ,然後列印temp 數組,使用了解構數組
後,直接定義一個數組變量,然後將函數返回值指向該變量,他會自動把第一項的值賦值給第一個數組變量,第二項賦值給第二個數組變量,以此類推,最後打印三個變量,看到沒有問題
function breakfast() { return ['?', '?', '?']; } var temp = breakfast(); console.log(temp[0], temp[1], temp[2]); let [a, b, c] = breakfast(); console.log(a, b, c);
? ? ? ? ? ?
首先breakfast
函數傳回一個物件
,使用解構物件
,定義對象,鍵值對中鍵表示映射的實際對象的鍵名,值就是自訂變量,解構完成,會自動完成賦值,然後調用breakfast 函數,返回對象,隨後打印變量a,b,c ,可以看到沒問題
function breakfast() { return { a: '?', b: '?', c: '?' } } let { a: a, b: b, c: c } = breakfast(); console.log(a, b, c);
? ? ?
在使用模板字串前,我們拼接字串變數使用
使用ES6 提供的模板字串,首先使用`` 把字串包起來,當要使用變數時,使用${變數}
let a = '?', b = '?️'; let c = '今天吃' + a + '吃完看' + b; console.log(c); let d = `今天吃 ${a} 吃完看 ${b}`; console.log(d);
今天吃?吃完看?️ 今天吃 ? 吃完看 ?️
使用這些函數,可以輕鬆的完成是不是以什麼開頭的字串,是不是以什麼結尾的字串,是不是包含了什麼字串等的操作
let str = '你好,我是小周 ❤️'; console.log(str.startsWith('你好')); console.log(str.endsWith('❤️')); console.log(str.endsWith('你好')); console.log(str.includes(" "));
true true false true
ES6裡,可以使用預設參數,當呼叫函數時,沒有給參數進行賦值時,就使用設定的預設參數執行,當給參數賦值時,就會使用新賦的值執行,覆寫預設值,使用如下:
function say(str) { console.log(str); } function say1(str = '嘿嘿') { console.log(str); } say(); say1(); say1('❤️');
undefined 嘿嘿 ❤️
使用...
可以展開元素,方便操作,使用如下:
let arr = ['❤️', '?', '?']; console.log(arr); console.log(...arr); let brr = ['王子', ...arr]; console.log(brr); console.log(...brr);
[ '❤️', '?', '?' ] ❤️ ? ? [ '王子', '❤️', '?', '?' ] 王子 ❤️ ? ?
...
運算子用在函數參數上,接收一個參數數組,使用如下:
function f1(a, b, ...c) { console.log(a, b, c); console.log(a, b, ...c); } f1('?','?','☃️','㊙️');
? ? [ '☃️', '㊙️' ] ? ? ☃️ ㊙️
使用 .name
可以获取函数的名字,具体使用如下:
function f1() { } console.log(f1.name); let f2 = function () { }; console.log(f2.name); let f3 = function f4() { }; console.log(f3.name);
f1 f2 f4
使用箭头函数可以让代码更简洁,但是也要注意箭头函数的局限性,以及箭头函数中自身没有 this,this指向父级
let f1 = a => a; let f2 = (a, b) => { return a + b; } console.log(f1(10)); console.log(f2(10, 10));
10 20
使用es6的对象表达式,如果对象属性和值一样,可以省略值,函数写法可以省去function
,用法如下:
let a = '㊙️'; let b = '☃️'; const obj = { a: a, b: b, say: function () { } } const es6obj = { a, b, say() { } } console.log(obj); console.log(es6obj);
{ a: '㊙️', b: '☃️', say: [Function: say] } { a: '㊙️', b: '☃️', say: [Function: say] }
使用 const
关键字定义衡量,const
限制的是给衡量分配值的动作,并不限制衡量中的值,使用如下:
const app = ['☃️', '?']; console.log(...app); app.push('?'); console.log(...app); app = 10;
可以看到当再次给衡量分配值就报错了
☃️ ? ☃️ ? ? app = 10; ^ TypeError: Assignment to constant variable.
使用点定义对象属性时,如果属性名中含有空格字符,是不合法的,语法通不过的,使用 [属性名]
可以完美解决,并且不仅可以直接写明属性名,还可以使用变量来指定,具体使用如下:
let obj = {}; let a = 'little name'; obj.name = '王子'; // 使用点定义属性中间有空格是不合法的 // obj.little name = '小王子'; obj[a] = '小王子'; console.log(obj);
{ name: '王子', 'little name': '小王子' }
一些特殊值使用 ===
或 ==
进行比较的结果,可能不满足你的需求,这是你可以使用Object.is(第一个值,第二个值)
来进行判断,可能你就开心的笑了
console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0));
false true true false
使用 Object.assign()
可以把一个对象复制到另一个对象,使用如下:
let obj = {}; Object.assign( // 源 obj, // 复制目标对象 { a: '☃️' } ); console.log(obj);
{ a: '☃️' }
使用es6可以设置对象的 prototype,使用如下:
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = Object.create(obj1); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); Object.setPrototypeOf(test, obj2); console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);
1 true 2 true
let obj1 = { get() { return 1; } } let obj2 = { a: 10, get() { return 2; } } let test = { __proto__: obj1 } console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj1); test.__proto__ = obj2; console.log(test.get()); console.log(Object.getPrototypeOf(test) === obj2);
1 true 2 true
let obj1 = { get() { return 1; } } let test = { __proto__: obj1, get() { return super.get() + ' ☃️'; } } console.log(test.get());
1 ☃️
在学习前,先首写一个迭代器
function die(arr) { let i = 0; return { next() { let done = (i >= arr.length); let value = !done ? arr[i++] : undefined; return { value: value, done: done } } } } let arr = ['☃️', '?', '?']; let dieArr = die(arr); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next()); console.log(dieArr.next());
{ value: '☃️', done: false } { value: '?', done: false } { value: '?', done: false } { value: undefined, done: true }
OK,看看简化的生成器
function* die(arr) { for (let i = 0; i <pre class="brush:php;toolbar:false">{ value: '?', done: false } { value: '☃️', done: false } { value: undefined, done: true }
使用es6可以快速方便的构建类,好耶
class stu { constructor(name) { this.name = name; } say() { return this.name + '说奥里给'; } } let xiaoming = new stu("小明"); console.log(xiaoming.say());
小明说奥里给
定义get/set方法,用于获取或者修改类的属性
class stu { constructor(name) { this.name = name; } get() { return this.name; } set(newStr) { this.name = newStr; } } let xiaoming = new stu("小明"); console.log(xiaoming.get()); xiaoming.set("大明") console.log(xiaoming.get());
小明 大明
使用static关键字修饰的方法,不用实例化对象也可以直接使用
class stu { static say(str) { console.log(str); } } stu.say("奥里给 静态方法");
奥里给 静态方法
使用继承,可以减少代码冗余,比如:
class Person { constructor(name, bir) { this.name = name; this.bir = bir; } showInfo() { return '姓名:' + this.name + '生日:' + this.bir; } } class A extends Person { constructor(name, bir) { super(name, bir); } } let zhouql = new A("周棋洛", "2002-06-01"); // 周棋洛本身是没有showInfo方法的,是继承自Person的 console.log(zhouql.showInfo());
姓名:周棋洛生日:2002-06-01
Set 集合,与数组不同,Set 集合中不允许有重复元素
// 创建Set集合 let food = new Set('??'); // 重复添加,只有一个能进去 food.add('?'); food.add('?'); console.log(food); // 当前集合大小 console.log(food.size); // 判断集合中是否存在某一元素 console.log(food.has('?')); // 删除集合中某一元素 food.delete('?'); console.log(food); // 循环遍历集合 food.forEach(f => { console.log(f); }); // 清空集合 food.clear(); console.log(food);
Set(3) { '?', '?', '?' } 3 true Set(2) { '?', '?' } ? ? Set(0) {}
Map结合存储键值对
let food = new Map(); let a = {}, b = function () { }, c = "name"; food.set(a, '?'); food.set(b, '?'); food.set(b, '?'); food.set(c, '米饭'); console.log(food); console.log(food.size); console.log(food.get(a)); food.delete(c); console.log(food); console.log(food.has(a)); food.forEach((v, k) => { console.log(`${k} + ${v}`); }); food.clear(); console.log(food);
Map(3) { {} => '?', [Function: b] => '?', 'name' => '米饭' } 3 ? Map(2) { {} => '?', [Function: b] => '?' } true [object Object] + ? function () { } + ? Map(0) {}
使用模块化开发,es6可以方便的导入和导出一些内容,还有默认导出等等细节
let a = '?'; let f1 = function (str = '你丫的写参数') { console.log(str); } export { a, f1 };
import {a, f1} from './27模块测试.js'; console.log(a); f1(); f1('知道了');
恭喜你,读完了本篇文章,能力 + 100 ,颜值 + 10,欢迎下次再来。先别走,如果觉得文章写的不错,还请点赞,收藏,关注帅气的博主啊,手动狗头,我会继续努力,原创不易,你的支持就是小周的动力
以上是一文帶你快速詳解ES6,認識新增特性!的詳細內容。更多資訊請關注PHP中文網其他相關文章!