ES6常用知识点总结

1.const和let

1.1 函数变量提升

用var声明变量时，无论声明在何处，都会被视为声明在函数的最顶部（不在函数内即在全局作用域的最顶部）。例：

1
2
3
4
5
6
7
function a() {
  if (...) {
    var test = 'hello';
  } else {
    console.log(test);
  }
}

相当于：

1
2
3
4
5
6
7
8
9
10
function a() {
  var test; //变量提升
  if (...) {
    test = 'hello';
  } else {
    //此处访问test，值为undefined
    console.log(test);
  }
  //此处访问test，值为undefined
}

即无论有没有执行if语句，test这个变量都会被创建。

1.2 let和const

若用let和const声明，let表示变量，const表示常量。let和const都是块级作用域，即在{}大括号内起作用。

（1）let

1
2
3
4
5
6
7
8
function a() {
  if (...) {
    let test = 'hello';
  } else {
    //test在此处访问不到
    console.log(test);
  }
}

test的作用域只在if条件语句中。

（2）const

1
2
const name = 'lux';
name = 'joe';//再次赋值此时会报错

2.字符串模板

（1） 字符串拼接

1
2
const name = 'lux'
console.log(`hello ${name}`); //hello lux

（2）用反引号进行多行字符串拼接：

1
2
3
const template = `<div>
        <span>hello world</span>
    </div>`;

（3）字符串常用方法

1
2
3
4
5
6
7
// 1.includes：判断是否包含然后直接返回布尔值
    let str = 'hahay'
    console.log(str.includes('y')) // true
    // 2.repeat: 获取字符串重复n次
    let s = 'he'
    console.log(s.repeat(3)); // 'hehehe'
    //如果你带入小数, Math.floor(num) 来处理

3.函数

（1）为函数参数提供默认值

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

1
2
3
4
5
function action(num = 200) {
    console.log(num)
  }
action() //200
action(300); //300

（2）箭头函数

箭头函数特点：

  • 不需要function关键字来创建函数

  • 省略return关键字

  • 继承当前上下文的 this 关键字

1
2
3
4
5
6
7
//例如：
    [1,2,3].map( x => x + 1 )
    
//等同于：
    [1,2,3].map((function(x){
        return x + 1
    }).bind(this));

当函数有且仅有一个参数的时候，可以省略掉括号。当函数返回有且仅有一个表达式的时候可以省略{}；例如:

1
2
var people = name => 'hello' + name
//参数name就没有括号
1
2
3
4
5
var people = (name, age) => {
  const fullName = 'h' + name
  return fullName
 //如果缺少()或者{}就报错 
};

4.拓展的对象功能

4.1 对象的初始化简写

（1）键值对重名

1
2
3
4
5
6
function people(name,age) {
  return {
    name, //相当于name:name,
    ger //相当于age:age
  };
}

（2）为对象添加方法

1
2
3
4
5
6
const people = {
  name:'lux',
  getName() {
    console.log(this.name)
  }
};

相当于

1
2
3
4
5
6
const people = {
  name:'lux',
  getName:function() {
    console.log(this.name)
  }
};

4.2 Object.assign()

const obj = Object.assign(target,...source)

target:目标对象，source:源对象

用于把一个或多个源对象的可枚举属性复制到目标对象中（浅复制），返回值为目标对象。

在实际项目中，我们为了不改变源对象，一般会把目标对象传为{}。即：const obj = Object.assign({},...source)

5.解构

将一个数据结构分解为更小的部分的过程。

1
2
3
4
5
6
7
var [first, second, third] = someArray;

//相当于

var first = someArray[0];
var second = someArray[1];
var third = someArray[2];
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//对象
const people = {
  name: 'lux',
  age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)

//相当于

const people = {
  name: 'lux',
  age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age);

6.Spread Operator展开运算符

展开运算符（spread)是三个点（…)，可以将数组转为用逗号分隔的参数序列。

6.1组装数组或对象

1
2
3
4
5
6
7
8
9
//数组
    const color = ['red', 'yellow']
    const colorful = [...color, 'green', 'pink']
    console.log(colorful) //[red, yellow, green, pink]
    
    //对象
    const alp = { fist: 'a', second: 'b'}
    const alphabets = { ...alp, third: 'c' }
    console.log(alphabets); //{ "fist": "a", "second": "b", "third": "c"

6.2获取数组或对象的某几项

1
2
3
4
5
6
7
8
9
10
11
12
13
//数组
    const number = [1,2,3,4,5]
    const [first, ...rest] = number
    console.log(rest) //2,3,4,5
    //对象
    const user = {
        username: 'lux',
        gender: 'female',
        age: 19,
        address: 'peking'
    }
    const { username, ...rest } = user
    console.log(rest); //{"address": "peking", "age": 19, "gender": "female"

6.3组成新的Object

1
2
3
4
5
6
7
8
9
10
11
const first = {
        a: 1,
        b: 2,
        c: 6,
    }
    const second = {
        c: 3,
        d: 4
    }
    const total = { ...first, ...second }
    console.log(total);// { a: 1, b: 2, c: 3, d: 4 }

7.import/export

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//全部导入
import people from './example'

//有一种特殊情况，即允许你将整个模块当作单一对象进行导入
//该模块的所有导出都会作为对象的属性存在
import * as example from "./example.js"
console.log(example.name)
console.log(example.age)
console.log(example.getName())

//导入部分
import {name, age} from './example'

// 导出默认, 有且只有一个默认
export default App

// 部分导出
export class App extend Component {};

1.当用export default people导出时，就用 import people 导入（不带大括号）

2.一个文件里，有且只能有一个export default。但可以有多个export。

3.当用export name 时，就用import { name }导入（记得带上大括号）

4.当一个文件里，既有一个export default people, 又有多个export name 或者 export age时，导入就用 import people, { name, age }

5.当一个文件里出现n多个 export 导出很多模块，导入时除了一个一个导入，也可以用import * as example

参考文章