前端学习笔记 -- ES6

1、块级作用域
任何一对花括号（｛｝）中的语句集都属于一个块，在块中声明的变量在代码块外都是不可访问的，称之为块级作用域，ES5以前没有块级作用域

2、let 关键字
let用于声明变量（类似于var），其声明的变量只在当前代码块内有效，实际上是创建了块级作用域

1、创建块级作用域
if(true) {
    var str = '一个字符串';
    let num = 15;
    console.log(num);
}

console.log(str);

2、没有变量提升
console.log(typeof str);
var str = 10;
console.log(typeof abc);
let abc = 10;

3、不能重复定义
let a = 16;
let b = 18;
b = 20;
console.log(b);

4、暂时性死区
在块级作用域中使用 let 声明变量时  块级作用域会形成一个封闭的环境  不能访问外部声明的变量
var c = 19;
if(true) {
    console.log(c);
    let c;
}

3、const 关键字
const 用于声明常量，常量于变量不同，变量声明后其值可以任意更改，而常量一旦赋值就不允许被更改

1、常量必须要赋值
// const d; // 错
const d = 20;

2、也会创建块级作用域
if(true) {
    const f = 10;
    console.log(f);
}

3、不能重复声明
const d = 15;

4、暂时性死区
var e = 14;
if(true) {
    console.log(e);

    const e = 19;
}

4、变量结构赋值
按照某种模式，从数组和对象中提取值，对变量进行赋值这被称为解构

a) 数组解构赋值

1、将变量放到一个数组中
    其值也是一个数组，并且“左右”数组结构一致  这样就可将“右侧数组”中值，按着顺序，赋值给“左侧数组”中的变量

var [a, b, c, [d]] = [1, 2, 3, [4]];
console.log(a, b, c, d);//1 2 3 4

2、如果 左侧数组中变量，不能与右侧数组中值作对应  则为 undefined
var [a, b, c, d] = [1, 2, 3];
console.log(a, b, c, d);//1 2 3 undefined

var [a, b, c, d] = [1, , 3, 4];
console.log(a, b, c, d);//1 undefined 3 4

 3、可以为变量初始化值（默认值）
var [a = 10, b, c, d] = [5];
console.log(a, b, c, d);//5 undefined undefined undefined

var [a, b = 12, c, d] = [6, null, 18, 24];
使用默认值的前提是值为 undefined
var [a, b = 12, c, d] = [6, , 18, 24];
console.log(a, b, c, d);//6 12 18 24

b) 对象解构赋值

1、对象的解构赋值
左侧对象里放的是变量的名字  右侧对象里放的是变量的值      左右根据属性名来做对应关系
标准形式
var {name: name, age: age, gender: gender} = {name: '莉莉', gender: '女', age: 12};

简写形式
var {name, age, gender} = {name: '莉莉', age: 12, gender: '女'};
var {arg1: name, arg2: age} = {arg1: '莉莎', arg2: 18};
name = '莉莎' age = 18;

2、支持嵌套
var {name: name, ages: {age1: age1, age2: age2}} = {name: '莎莎', ages: {age1: 16, age2: 18}}
name = '莎莎' age1 = 16 age2 = 18

3、也支持默认值
var {name = '莉莉', age = 16} = {name: '莉莎'};
var {name = '莉莉', age = 16} = {name: '莉莎', age: undefined};

使用 默认值的前提是右侧值为 undefined
var {name = '莉莉', age = 16} = {name: '莉莎', age: null};

5、字符串扩展

a) 对象方法，新增一些用于处理字符串的便捷方法

let str = 'my name is itcas!';

 1、includes 检测是否包含某一字符
    let res = str.includes('s', 7);

 2、startsWith 可以判断是否以某个字符开始
     let res1 = str.startsWith('my', 2);
     let res1 = str.startsWith(' name', 2);

  3、endsWith 可以判断是否以某个字符结尾
     let res2 = str.endsWith('cas!');
     let res2 = str.endsWith('name', 7);

  4、repeat 可以重复某个字符
     console.log('哈'.repeat(10));

   5、padStart  padEnd 可以字符串补全
 console.log('xxxxxxxxx'.padStart(10, '0'));
 console.log('xxxxxxxxx'.padEnd(10, '0'));

b) 模板字符串，可以使用反引号（`）定义字符串

let html = `<ul>
    <li>
        <a href=""><img src="" alt="" /></a>
    </li>
</ul>`;

let [name, age] = ['莉莉', 18];
let p = `<p>我叫${name}，${age}岁。</p>`;

function say() {
    return 'hello: ';
}
let r = `${say()}莉莉!`;

6、数组扩展
http://es6.ruanyifeng.com/ 阮一峰老师《ECMAScript 6 入门》

7、函数扩展

a）默认参数，允许为函数指定默认参数
定义默认参数
在定义函数时，可以为参数设置默认值格式 arg = val
当在调用函数时可以不传实参，这时以参数默认为准备 
当传递了实参以实参为准

function bar(a, b) {
    console.log(a);
    console.log(b);
}
bar(2);// 2 undefined

function fn(a, b=10) {
    return a + b;
}
console.log(fn(20, 5));//25

b）reset参数，用户多余的参数，将多余的参数装到一个数组中
function fn(a, b, ...c) {
    console.log(a);
    console.log(b);
    console.log(c);
}
fn(1, 2, 3, 4, 5);//1   2   [3,4,5]

c）扩展运算符，它好比 rest 参数的逆运算，将一个数组转为逗号分隔的参数序列
function fn(a, b, c, d) {
    console.log(a);
    console.log(b);
    console.log(c);
    console.log(d);
}
var arr = [1, 2, 3, 4];
fn(...arr);//1 2 3 4

d）箭头函数，使用“箭头”（=>）定义函数
ES6 提供了新的定义函数的方式 =>
let foo = () => console.log('你好');
foo();//你好

函数组成部分  a 函数名  b 参数  c 返回值  函数体
() 参数部分  => 返回值  {} 函数体
let foo = (v) => {
    console.log(v);
}

function foo(v) {
    console.log(v);
}

foo(123)

前端学习笔记 -- ES6

猜你喜欢