js 在 2015年發(fā)布了新版本，被稱為 es6，之后每年更新一個版本。自 es7 之后，就直接用年份命名了。
| 版本 | 年份 |
|---|---|
| es6 | 2015 |
| es7 | 2016 |
| es2017 | 2017 |
| es2018 | 2018 |
1，let 和 const
1，會產(chǎn)生塊級作用域。
if (true) {
const a = 1
}
console.log(a) // ReferenceError: a is not defined
下面如果用 var 會打印3個2。
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i)
}, 1000)
}
2，如何理解 const 定義的變量不可被修改?
指這個變量不能被修改
- 重新賦值，和修改這個對象的屬性值是沒有關系的。
const obj = {}
obj = 1 // TypeError: Assignment to constant variable.
obj.a = 1 // ok
- 自增
const a = 1
a++ // TypeError: Assignment to constant variable.
2，數(shù)組
1，for…of 用于遍歷可迭代對象，也包括偽數(shù)組，比如 arguments，NodeList（querySelectAll 獲取的）
2，判斷是不是數(shù)組，Array.isArray()
3，解構數(shù)組
const arr = [1, 2, 3, 4, 5];
const [a, b] = arr; // 1 2
const [, , a, b] = arr; // 3 4
const [a, , b, c] = arr; // 1 3 4
const [a, b, ...c] = arr; // 1 2 [ 3, 4, 5 ]
4，數(shù)組去重
const arr = [1, 3, 4, 3, 6];
const newArr = [...new Set(arr)]; // [ 1, 3, 4, 6 ]
5，打平數(shù)組
參數(shù)為遍歷的層級。
const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]
const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]
const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]
const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
6，創(chuàng)建指定 length 的數(shù)組
Array(10).fill(0)
3，對象
1，Object.is()
MDN - Object.is()，判斷2個值是否相同，和 === 唯一的區(qū)別是：
Object.is(-0, +0) // false
Object.is(NaN, NaN) // true
-0 === +0 // true
NaN === NaN // false
Array.prototype.includes()使用的就是Object.is()的規(guī)則。
2，屬性描述符
js 使用屬性描述符，來描述對象中的每個成員。vue2 通過此特性實現(xiàn)響應式核心原理。
const obj = {
name: '下雪天的夏風',
age: 18
};
在 js 內部被描述為
{
// 屬性 name 的描述符
name: {
value: '下雪天的夏風',
configurable: true, // 該屬性的描述符是否可以被重新定義
enumerable: true, // 該屬性是否允許被遍歷，會影響for-in循環(huán)
writable: true // 該屬性是否允許被修改
},
// 屬性 age 的描述符，同理。
age: {
value: '18',
configurable: true,
enumerable: true,
writable: true
},
}
有 API 可以操作屬性描述符
const obj = {
name: '下雪天的夏風',
age: 18
};
// 修改屬性描述符
Object.defineProperty(obj, "name", {
value: "新值",
writable: false,
enumerable: false,
configurable: true,
});
// 獲取屬性描述符
Object.getOwnPropertyDescriptor(obj, "name");
// 輸出
{
value: '下雪天的夏風',
writable: false,
enumerable: false,
configurable: true
}
1，屬性描述符 writable: false 時，修改無效，但不報錯。
2，當通過 Object.defineProperty 設置 configurable: false 后，就不能再次修改屬性描述符了，會報錯。
getter 和 setter
const obj = {};
let init;
Object.defineProperty(obj, "a", {
get() { // 讀取屬性 a 時，得到的是該方法的返回值
return init;
},
set(val) { // 設置屬性 a 時，會把值傳入 val，調用該方法
init = val
}
});
3，常用API
const obj = { name: "名字", age: "年齡" };
console.log(Object.keys(obj)); // [ 'name', 'age' ]
console.log(Object.values(obj)); // [ '名字', '年齡' ]
console.log(Object.entries(obj)); // [ [ 'name', '名字' ], [ 'age', '年齡' ] ]
還有一個，正好和 Object.entries() 相反。
const obj = Object.fromEntries([
["name", "名字"],
["age", "年齡"],
]); // { name: '名字', age: '年齡' }
4，得到除某個屬性之外的新對象。
const obj = {
a: 1,
b: 2,
c: 3,
};
const { a, ...newObj } = obj; // newObj { b: 2, c: 3 }
//或
const newObj = {...obj}
delete newObj.a
·
4，函數(shù)
1，箭頭函數(shù)
特點
- 不能使用
new調用 - 沒有原型，即沒有
prototype屬性 - 沒有
arugments - 沒有
this
關于原型：
普通函數(shù)：
箭頭函數(shù)：
關于 arugments :
function fun() {
const fun2 = () => {
console.log(arguments);
};
fun2(1, 2);
}
fun(3, 4); // [Arguments] { '0': 3, '1': 4 }
在箭頭函數(shù)中，可以使用剩余參數(shù)代替 arguments
const fun = (a, ...args) => {
console.log(a, args); // 1 [ 2, 3, 4 ]
console.log(Array.isArray(args)); // true
};
fun(1, 2, 3, 4);
2，默認參數(shù)
const fun = (a, b = 1) => {
console.log(a, b);
};
fun(1, undefined); // 1 1
3，解構傳參
const fun = (config = { page: 1, limit: 10 }) => {
console.log(config); // { page: 1 } { page: 2, limit: 10 }
};
// 這樣才能使用默認值
const fun = ({ page = 1, limit = 10 } = {}) => {
console.log(page, limit); // 1 10 和 2 10
};
fun({ page: 1 });
fun({
page: 2,
limit: 10,
});
4，類語法
基礎寫法：
// 舊的寫法
function User(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
this.fullName = `${firstName} ${lastName}`;
}
User.isUser = function(u){
return u && u.fullName
}
User.prototype.sayHello = function(){
console.log(`姓名：${this.fullName}`);
}
// es6 等效寫法
class User{
constructor(firstName, lastName){
this.firstName = firstName;
this.lastName = lastName;
this.fullName = `${firstName} ${lastName}`;
}
static isUser(u){
return u && u.fullName
}
sayHello(){
console.log(`姓名：${this.fullName}`);
}
}
繼承關系文章來源：http://www.zghlxwxcb.cn/news/detail-705596.html
function Animal(type, name){
this.type = type;
this.name = name;
}
Animal.prototype.intro = function(){
console.log(`I am ${this.type}, my name is ${this.name}`)
}
function Dog(name){
Animal.call(this, '狗', name);
}
Dog.prototype = Object.create(Animal.prototype); // 設置繼承關系
// 新的方式
class Animal{
constructor(type, name){
this.type = type;
this.name = name;
}
intro(){
console.log(`I am ${this.type}, my name is ${this.name}`)
}
}
class Dog extends Animal{
constructor(name){
super('狗', name); // 調用父級構造函數(shù)
}
}
以上。文章來源地址http://www.zghlxwxcb.cn/news/detail-705596.html
到了這里，關于查漏補缺 - ES6的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
