ES6常用知识点

Feb 2, 2018 • By momeakl


ES6学习总结 吐槽:github pages貌似在国内的三大运营商中只有电信可以正常访问,移动、联通经常访问不了,偶尔多次刷新可以访问,但有的时候还不能正常加载样式…

块级作用域变量let,const

let 的特性:

  • 只在 let 所在代码块有效

  • 创建块级作用域,并只在块级作用域内有效

  • 没有变量提升

  • 不允许在相同作用域重复声明

const 的特性:

  • 声明一个只读常量,声明后就初始化,无法更改,以后也无法赋值

  • 创建块级作用域,并只在块级作用域内有效

  • 声明的常量不提升

  • 不允许在相同作用域重复声明

const 实际保证的是声明的变量的内存地址不可改变。

模板字符串

插入大段的 html 内容时使用:

$(‘#app’).append( There are ${basket.count} items in your basket, ${basket.onSale} are on sale!);

用反引号 ( ) 来标识起始,用 ${} 来引用变量,并且所有空格和输出都会保存在爱输出之中。

箭头函数

箭头函数的三个直观特点

  • 不需要function关键字来创建函数
  • 省略return关键字
  • 继承当前上下文的this关键字

eg:

let array = [1,2,3];

array.map(function(item){
    return item * item;
})

array.map(item => item * item)

function computeA(a,b){
    let a = a + b;
    return a;
}

computeA(a,b)=>{
    let a = a +b;
    return a;
}

解构赋值

1.数组的解构赋值

  • 完全解构

let[a, b,c] = [1,2,3]; // a = 1; b = 2; c = 3;

解构不成功

let[x, y] = [1]; // x = 1; y = undefined;

  • 不完全解构

let[a, [b],c] = [1, [2,3],4]; // a = 1; b = 2; c = 4;

2.对象的解构赋值

对象的解构不同于数组的解构,对象的解构赋值是先找到同名变量,然后赋值给对应的变量。赋值的是后者,前者用于匹配。

let { bar, foo } = {foo:"aaa",bar:"bbb"};

foo  // "aaa"

bar  // "bbb"

let { baz } = {foo:"aaa",bar:"bbb"};

baz  // undefined

default、rest、扩展运算符

  • default是默认值,在 ES6 之中可以指定默认值,可以在解构、函数参数之中传入默认值。

function animal(type=’cat’) { console.log(type);}

ES6 引入 rest 参数(形式为“…变量名”),用于获取函数的多余参数,这样就不需要使用arguments对象了。rest 参数搭配的变量是一个数组,该变量将多余的参数放入数组中

function add(...values){letsum =0;

fot (var val of values) {

sum += val;

}

return sum;

}

add(2,3,5)   // 10

rest 注意点:

  • rest 参数后不能有其他参数,只能是最后一个参数

  • 函数的 length 属性,不包括 rest 参数

扩展运算符(spread)是三个点(…)。它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列。

console.log(...[1,2,3])// 1 2 3

console.log(1, ...[2,3,4],4)// 1 2 3 4 5

下一篇 续更