ECMAScript 6的一些新特性
生活随笔
收集整理的這篇文章主要介紹了
ECMAScript 6的一些新特性
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
?
ES6非常好用，但是不兼容edge以下的瀏覽器
?
先看下let聲明變量的特點
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>/*1 必須在嚴格模式下執行2 let不能重復聲明同一個變量3 let沒有預解析 不能在賦值前console出來*/'use strict'; // 如果不加會報錯// console.log( b ); let不會預解析 會報錯// let b = 2; 重復聲明 會報錯 let b = 1;console.log(b);</script> </body> </html>?
再看下let在實際應用中的好處， 比如在定時器中
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';for (var i = 0; i < 10; i++) {setTimeout(function(){console.log( i ); // 每次都是10 });};</script> </body> </html>?
原因就不說了，很基礎的東西，如果我想顯示0-9 ，只要把var換成let即可
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';for (let i = 0; i < 10; i++) {setTimeout(function(){console.log( i ); // 0 - 9 });};</script> </body> </html>?
跟變量對應的還有常量 ， 在ES6中定義常量用const ， 常量無法更改 ， 但是如果常量的值是對象，對象的值是可以更改的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';const a = 1;const b = {a : 2,b : 3};</script> </body> </html>?
解構賦值，說人話就是拿變量中轉一下， 然后把變量賦給一個值
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';var arr = [1, 2, 3];var [a, b, c] = arr;console.log( [a, b, c] );</script> </body> </html>?
不過解構賦值并不是按順序賦值的， 而是按名稱賦值的
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';var obj = {foo : function () {},num : 12,arr : [],str : 'abc'};var {foo, arr, str, o } = obj;console.log( foo, arr, str, o );</script> </body> </html>?
關于字符串的一些小方法， 更多方法請自行百度
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';var s = '你好';console.log(s.repeat(3));console.log( `我想說 ${s}` ); // 注意這里不是單引號， 是反引號</script> </body> </html>
?
看一些ES6里一些數字的擴展， 更多方法請自行百度
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title> </head> <body><script>'use strict';var num = '1.234';console.log( Math.trunc(num) ); // 干掉小數點和小數點后的數 有點類似parseInt() -> 1 console.log( Math.sign(10) ); // 判斷正負數 1 console.log( Math.hypot(3, 4) ); // 勾股定理 -> 5</script> </body> </html>?
轉載于:https://www.cnblogs.com/carol1987/p/5512562.html
總結
以上是生活随笔為你收集整理的ECMAScript 6的一些新特性的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 垂直居中相关知识总结
- 下一篇： Hash Length Extensio