ES6(ECMAScript 6.0)

ES6核心常用知识

变量定义变化let/const

let：let可以在循环中异步代码能够访问let定义的同步代码

1. 不允许重复定义变量；

2. 不存在变量提升；

3. 块级作用域

const：用于定义常量，应用场景一般为

1. 不能被修改；

2. 需要赋初始值；

经典面试题：

var arr = [];
for (var i = 0; i < 2; i++) {
    arr[i] = function () {
        console.log(i);
    }
}
// 打印出最后结果 arr[0] = 2 arr[1] = 2;
arr[0]();
arr[1]();

var	let	const
函数作用域	块级作用域	块级作用域
变量提升	不存在变量提升	不存在变量提升
值可以改变	值可以改变	值不能改变

解构赋值

// 右边什么样子 左边也什么样子
var  [a, b, c] = [10, 20, 30];

对象解构

let {name, age} = {name: 'along', age: 33};

重命名：oldName: newName

let {name: name2} = {name: 'along', age: 33};
console.log(name2);

省略解构

let [, , c] = [10, 20, 30];
console.log(c); // c = 30;

默认解构

// 右边没有的可以设置默认值
let {name, age = 8} = {name: 'zs'};
// 右边有的数据以右边为准
let {name, age = 9} = {name: 'zs', age = 12}
console.log(age); // age = 12

字符串变化

模板字符串

let name = 'along';
let age = 33;
let str = `My name is ${name}`;
console.log(str);

模板字符串换行

let ul = `
<ul>
    <li>${name}</li>
    <li>${age}</li>
</ul>
`

模板标签

let name = 'along';
let age = 33;
function tag() {
    
}
let str = tag `My name is ${name}, I am ${age}`;

函数

函数新变化

默认参数

function fn(a, b, c = 20) {
    console.log(c);
}
fn(1, 2, 3); // c = 3
fn(1, 2); // c = 20

展开运算符（...），剩余运算符

let print = function(a, b, c) {
    console.log(a, b, c);
}
print([1, 2, 3]); // [1, 2, 3] undefined undefined
print(...[1, 2, 3]) // 1, 2, 3

// 获取用户传入n个值求最大值
function max() {
    return Math.max(...arguments);
}

// 剩余运算符 ...
function rest(a, ...b) {
    console.log(a);
    console.log(b);
}
rest(1, 2, 3, 4);
// a ===> 1
// b ===> [2, 3, 4]

函数多了一个属性name

let fn = function() {
    
}
console.log(fn.name); // fn

箭头函数 简化函数的书写

// 传统函数
[2, 4, 6].forEach(function(item, index, arr) {
    // something
})

// 箭头函数
[2, 4, 6].forEach(item => {
    console.log(item);
})

箭头函数根本没有this。导致箭头函数this是外层代码块的this

数组新增api

find/map/reduce/filter/forEach/findIndex/some/every

Array.from()：把一个数组或者类数组转成数组并复制一份

Array.of()：

copyWithin()：三个参数：第一个覆盖目标的下标，拿来覆盖的值开始的下标，拿来覆盖的值结束的下标

fill()

let arr = [1, 2, 3, 4, 5];
arr.fill('a', 1, 2);
coansole.log(arr); // [1, 'a', 3, 4, 5]

find()：存在则返回找到元素的值，若不存在则返回undefined

findIndex()：存在则返回数组的下标，若不存在则返回undefined

对象新变化

对象属性简写

let name = 'along';
let age = 33;
let person = {
    name,
    age,
    /*
        传统函数
        work: function() {
            something
        }
    */
    work() {
        console.log('working hard');
    }
}
console.log(person.name, person.age);

Object.is()：判断两个值是否相等

Object.assign()：多个对象的属性复制到一个对象中

let nameObj = {name: 'along'};
let ageObj = {age: 33};
let newObj = {};
Object.assign(newObj, nameObj, ageObj);

Object.setPrototypeOf()：设置对象的原型对象

let nameObj1 = {name: 'along'};
let nameObj2 = {name: 'along2'};
let obj3 = {};
Object.setProtorypeOf(obj3, nameObj1);

Object.getPrototypeOf()：获取对象的原型对象

__proto__：设置原型

super

新增api

startsWith：判断是否以xxx开头

'https://www.baidu.com'.startsWith('https');

endsWith：判断是否以xxx结尾

'1.jpg'.endsWith('jpg');

includes：判断是否包含xxx

'welcome to beijing',includes('to');

repeat：重复次数

'hi'.repeat(10);