ECMAScript6必看基础（一）

var和let以及const的区别

var：

1、var 可以重复定义

2、作用域：全局作用域 和 函数作用域

3、可以进行预解析

let：

1、同一个作用域内 let 不可以重复定义

2、作用域：全局作用域 和 块级作用域

3、不能进行预解析

const常量：

1、不可以重新赋值

2、不能重新声明

3、作用域：全局作用域 和 块级作用域

4、不能预解析

块作用域

块级作用域 可以当作 立即执行函数 使用

{
    let i = 0;
    console.log(i);
}
(function() {
    let i = 0;
    console.log(i);
})()

解构赋值

对象的解构赋值 变量名与属性名一致

数组对象的解构赋值 变量名按数组的顺序表示

let obj = {
    a:1,
    b:2,
    c:3
}
let {a,b,d} = obj; // 对象的解构赋值 变量名与属性名一致
console.log(a,b,d); // 1 2 undefined
let {a:aa, b:bb, c:cc} = obj;
console.log(aa, bb, dd); // 1 2 undefined

let arr = [1, "g", "c"];
let [e, f, g, h] = arr; // 数组对象的解构赋值 变量名按数组的顺序表示
console.log(e, f, g, h); // 1 "g" "c" undefined

let str = "abc";
let [e, f] = str;
console.log(e, f); // a b

问：如何快速交换两个数的值

let a = 0;
let b = 1;
[a, b] = [b, a];
console.log(a, b); // 1 0

展开运算符

let arr1 = [1, 2, 3, 4];
let arr2 = ["a", "b", ...arr1,"c"];
console.log(arr2); // ["a", "b", 1, 2, 3, 4, "c"]

let obj = {
    a:1,
    b:2
}
let obj2 = {
    ...obj,
    c:3,
    d:4
}
let {a, b,...c} = obj2;
console.log(a, b, c); // 1 2 3 4 

let obj = {
    a:1,
    b:2
}
let obj2 = {...obj}; // 深拷贝 两个对象独立
obj2.a = 10;
console.log(obj); // {a:1, b:2}

Set 对象

自动去除重复元素

let arr = [1,2,2,3];
let s = new Set(arr);
console.log(s); //  Set(3) {1,2,3}
arr = [...s];
console.log(arr); // [1,2,3]

属性	解释	返回值
size	长度	对象长度

方法	解释	返回值
clear()	清空所有值	undefined
delete(val)	删除某一项	true || false
has(val)	是否包含某一项	true || false
add(val)	添加一项 可以链式操作 .add(val).add(val)	对象本身

Map 对象

[key,value]键值对进行存储

重复的key值会被覆盖

let arr = [
    ["a",1],
    ["b",2],
    ["c",3],
    ["b",4]
];
let s = new Map(arr);
console.log(s); //  Map(3) {"a" => 1,"b" => 4,"c" => 3}
 

属性	解释	返回值
size	长度	对象长度

方法	解释	返回值
clear()	清空所有值	undefined
delete(key)	删除某一项 （key值）	true || false 没有值则删除不成功
get(key)	获取某一项的值	key值对应的value值
has(key)	是否包含这个key值	true || false
set(key,val)	设置一个键值对	对象本身

函数新增扩展

箭头函数

/*
箭头函数：
形参=>返回值
(形参，形参)=>返回值
()=>返回值
()=>{
	执行语句
}
()=>{
	执行语句
	return 返回值
}
(形参)=>{
	执行语句
	return 返回值
}
*/
// 注意let不能省略
let fn = (num,num1)=>num*num1;
console.log(fn(1,2));
let fn1 = ()=>"返回值";
console.log(fn1());
let fn2 = ()=>{
    console.log("天气不错");
    return "返回值"
}
console.log(fn2());

箭头函数 与 function函数 在不定参情况下的区别

/*
function fn() {
    console.log(arguments);
}
fn(1,2,3,4);
*/
// 无法使用arguments
let fn = ()=>{
    console.log(arguments);
}
fn(1,2,3,4); // not found

// 接收rest（剩余）参数
let fn = (a,b,...arg)=>{
    console.log(a,b,arg); // 用一个数组存放接收的不定参
}
fn(1,2,3,4); //

箭头函数中的 this 问题：

箭头函数本身没有this 调用箭头函数的this时 指向的是其声明时 所在作用域的this
注意：对象是没有作用域的

let fn;
let fn2 = function() {
    console.log(this); // window
    fn = ()=>{
        console.log(this);
    }
}
fn2 = fn2.bind(document.body); // 将fn2的this指向body
fn2(); // body
fn(); // body

参数默认值设置

let fn = (a = 2, b = 10)=>{
	console.log(a * b)
}
fn(); // 20
fn(3, 10); // 30