ES6

变量/常量的声明

let

声明变量：指定值和数据类型，但可以变化

let a;
let b,c,d;
let e = 100;
let f = 20, g = 'hello', h = [];

1. 变量不能重复声明

let player = 'yaoming’;
let player = 'basketball'; // 报错

2. 块级作用域（函数、全局）

{ let girl = ‘gaoyuanyuan’ }
console.log(girl)   // 报错

3. 不存在变量提升

不允许在变量声明之前去使用：

console.log(song)   // 报错
let song = ‘beyond’；

4. 不影响作用域链

{ 
  let school = ‘jirengu’ 
  function fn(){
    console.log(school)   
  }
  fn();    // 输出 jirengu
}

5. 条件语句

let items = document.getElementsByClassName('item');

for(let i=0; i<items.length; i++){
    items[i].onclick = function(){
        items[i].style.background = 'black'
    }
}

const

声明常量：一定要赋初始值，值不能修改的

对于数组和对象的元素修改，不算做对常量的修改

const Team = ['china','korea','japan'];
Team.push('australia')

变量的解构赋值

按照一定模式从数组和对象中提取值，对变量进行赋值。

数组的解构

const F4 = ['xiaoshenyang','liuneng','zhaosi'];
let [xiao,liu,zhao] = F4;
console.log(xiao);  // xiaoshenyang
console.log(liu);   // liuneng
console.log(zhao);   // zhaosi

对象的解构

const biao = {
    name:'范德彪'，
    age:'29',
    wugong:function(){
        console.log('黑虎掏心');
    }
}

let {wugong} = biao;
wugong();  // 黑虎掏心

模板字符串

用反引号``，声明字符串

let str = `我是一个字符串`;
console.log(str, typeof str);  // 我是一个字符串 string

变量拼接

let actor = '彪哥';
let out = `${actor}是我心中的神`;
console.log(out)   //  彪哥是我心中的神

简化对象写法

let name = '彪哥';
let change(){
    console.log('我们值得信任的男人');
}

const hero = {
    name,
    change
}

箭头函数

// 声明
let fn = function(){};

let fn = () => { };
// 形参 a，b
let fn = (a,b) => {
    return a + b;
}
// 调用函数，实参 1,2
let result = fn(1, 2);
console.log(result);

// 省略小括号,形参仅有一个时
let add = n =>{
    return n+n;
}
console.log(add(9));  // 18

// 省略花括号,代码体仅有一条语句时，return也要省略
// 语句的执行结构就是函数的返回值
let pow = n => n*n;
console.log(pow(9));  // 18

rest参数

用于获取函数的实参，代替arguments，rest参数必须放在形参最后

function fn(a, b, ...args){
    console.log(a);
    console.log(b);
    console.log(args);
}
fn(1,2,3,4,5,6);  // 1 2 [3, 4, 5, 6]

扩展运算符

能将数组转换为逗号分隔的参数序列，放在实参里

const tfboys = ['yiyang', 'yuan', 'junkai'];

function chunwan(){
    console.log(arguments);
}
chunwan(...tfboys);
// chunwan('yiyang', 'yuan', 'junkai')

数组的克隆

const sanzhihua = ['E', 'G', 'M'];
const sanyecao = [...sanzhihua]; // ['E', 'G', 'M']

将伪数组转为真正的数组

const divs = document.querySelectorAll('div');
const divArr = [...divs];
console.log(divArr); // [div, div, div]

对象方法扩展

Object.is

判断两个值是否完全相等

console.log(Object.is(120, 120))  // true

console.log(Object.is(NaN, NaN))  // true

console.log(NaN === NaN)  // false

Object.assign

对象的合并

const config1 = {
    host:'localhost',
    port: 3306,
    name: 'root',
    test: 'test'
}
const config2 = {
    host:'http://bilibili.com',
    port: 33060,
    name: 'bilibili.com',
}
console.log(Object.assign(config1, config2);
// { host:'http://bilibili.com', port: 33060, name: 
// 'bilibili.com', test: 'test' }

Object.setPrototypeOf和Object.getPrototypeOf

模块化

export

用于规定模块的对外接口，即导出模块

// m1.js 分别暴露
export const school = 'jirengu';
export function teach(){
    console.log('liumaishenjian')
}

// m2.js 统一暴露
const school = 'jirengu';
function teach(){
    console.log('liumaishenjian')
}

export {school, teach}

// m3.js 默认暴露
export default {
  school = 'jirengu';
  teach(){
    console.log('liumaishenjian')
  }
}

import

用于导入其他模块提供的功能

通用的导入方式

// index.html 引入 m1.js 模块内容
<script type="module">
    import * as m1 from './src/js/m1.js'
</script>

// index.html 引入 m2.js 模块内容
<script type="module">
    import * as m2 from './src/js/m1.js'
</script>

// index.html 引入 m3.js 模块内容
<script type="module">
    import * as m3 from './src/js/m1.js'
    m3.default.teach()
</script>

解构赋值的形式

import {school, teach} from './src/js/m1.js';
import {school as jiren, teach} from './src/js/m2.js';
import {default as m3} from './src/js/m2.js';

console.log(jiren, teach)

简便形式(常用)

import m3 from './src/js/m3.js';