笔记：vue.js基础知识之ES6-原创手记-慕课网

主要包括let，const，解构赋值，箭头函数，函数的扩展等

let:

避免变量的重复声明，用var声明变量时只会覆盖旧值而非报错

var ts = 123;
var ts = 456;
console.log(ts)；
//输出456
let ts = 123;
let ts = 456
console.log(ts):
//报错

不存在变量提升，即调用代码应在声明之后
块级作用域，暂存死区（从块的开始到声明的这段的区域）。可用于for循环中的i的声明。

if (false) {
    var ts = 'molly';
}
console.log(ts)
//预处理可以访问到ts，console输出为undefined

if (false) {
    let ts = 'molly';
}
console.log(ts)
//预处理访问不到ts，报错

for (var i = 0; i < 3; i++) {
    document.addEventListener('click', funtion(){
        alert(i);
    })
}//一直alert 3，因为此时i已经为3

for (let i = 0; i < 3; i++) {
    document.addEventListener('click', funtion(){
        alert(i);
    })
}//alert 0 1 2

常量 const
const声明的为常量，不能更改

================================================
解构赋值
ES6允许按照一定的模式，从数组和对象中提取值，对变量进行赋值。将右边赋值给左边的变量。

//数组的解构赋值
var [a,b,c,d,e='默认值'] = [1,2,3];
//a=1, b=2, c=3, d=undefined, c=默认值

//对象的解构
var molly = {
    fn:funtion(){},
    add:funtion(){alert(1)},
    isFunction:funtion(){}
}
let {add} = molly;
//add = funtion(){alert(1)},可以直接调用add这个函数

//函数参数的解构
funtion fn({a,b,c='get'}){
    console.log(a);
    console.log(d);
    console.log(c);
}
fn({
    a:1,
    b:2,
    c:'post'
})
//输出1，2，post

================================================
模板字符串，用反引号(`)标识
用占位符${}写入表达式（能求出值的都能被写入，不能放if等语句）

let str = `
<ul>
    <li></li>
    <li>${ts}</li>
    <li>${1+1}</li>
    <li>${ true ? 1 : 2}</li>
    <li>${[1,2,3].push(10)}</li>
</ul>
`
//无需使用加号或者转义符等其他操作，能完整的存入原本的结构

================================================

箭头函数

//语法： () => {}
var f = () => {
    alert(1);
}
//有函数体时，需要加return进行手动返回
var add = () => 2;
//不传参，箭头后面就是返回值
var add = a => a+2;
//传参，返回值为a+2
var add = (a,b) => a+b;
var add = (a,b) => ({num:a+b});
//返回一个对象

函数特性：

函数体内的this值绑定的是定义时所在的作用域的this
不可以当构造函数
不能使用arguments对象

document. = funtion(){
    setTimeout(() => {
        console.log(this);
    }, 1000)
    console.log(this);
}
//两个输出都为document
document. = () => {
    setTimeout(() => {
        console.log(this);
    }, 1000)
    console.log(this);
}
//两个输出都为window

================================================
函数的扩展
函数参数默认值：给形参直接赋值
rest参数：用于获取函数的多余参数，放在数组中可代替arguments

//函数的默认值
function fn(a=10){
    //a的默认值为10
}
function fn(){
    console.log(arguments);
}
fn(1,2,3,4)
//以类数组形式输出所有实参，不可进行数组操作
function fn(...arr){
    console.log(arr);
}
fn(1,2,3,4)
//以真实数组的形式来存入实参，可进行数组操作
function fn(a,...arr){
    console.log(a);
    console.log(arr);
}
fn(1,2,3,4)
//输出1 [2,3,4]，先输出a，然后以数组形式输出剩下的实参

================================================
对象的扩展
简洁表示法：变量名和函数名相同，可直接写入变量名；函数可省略function关键字

var a = 10;
var obj = {
    a
    //a:10
    fn(){}
    //相当于fn:function(){}
}

object.assign()
用户合并对象，将源对象的所有可枚举属性复制到目标对象

//Object.assign(target,[要合并的对象1， 要合并的对象2，……] )
var obj = {a:1}
var obj2 = {b:2}
var obj3 = {c:3}
Object.assign(obj,obj2,obj3);
//obj = {a:1, b:2, c:3}

//应用
function fn(option){
    let defaults = {
        a:'默认1'，
        b:'默认2',
        c:'默认3'
    }
    Object.assign(defaults, option);
}
//将传入的参数都加入到defaults里

================================================

扩展运算符

var arr = [1,2,3];
var arr1 = [4,5,6];
var arr2 = [...arr,...arr1];
//arr2 = [1,2,3,4,5,6]

var obj = {a:1};
var obj1 = {b:2};
var o = {...a, ...b};
//o = {a:1,b:2}

================================================
数组的方法

map()

var arr[1,2,3]
var newarr = arr.map(function(item, index){
    //console.log(item, index);
    return item*2;
})
//每一项*2，返回新数组

filter()

var filterNewArr = arr.filter(function(item,index){
    //console.log(item,index);
    return item % 2 === 0
    //return后面写条件，返回符合条件的item
})
//返回由偶数构成的新数组

find()

var arr = [1,2,3,4,5,6,7,8,9];
var item = arr.find(function(itemm,index){
    return item > 5
})
//item = 5
//find找到符合条件的第一项

笔记：vue.js基础知识之ES6原创