ES6基础入门

ES6是JavaScript的版本标准，目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。ES6的学习是在JS基础学习之后进行的。

推荐用书：《ES6标准入门》

学习目录：

一、let与const

ES6中增加了两个声明的关键字，let和const。

学习这两个命令前要理解两个概念：

块级作用域，即在一对大括号内声明的变量只在大括号内有效

变量提升：JS 代码执行之前，浏览器会默认把带有 var 声明的变量在内存中进行提前声明或者定义

1.let命令

let最突出的特点就是声明的变量只在代码块内有效。

经典例题：

var a = [];
for (var i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };}
a[6](); // 打印10
//变量i是全局的，函数执行时输出的都是全局作用域下的i值
---------------------------------------
let a = [];
for (let i = 0; i < 10; i++) {
  a[i] = function () {
    console.log(i);
  };}
a[6](); // 打印6
//每次循环都会产生一个块级作用域，每个块级作用域中的变量都是不同的，函数执行时输出的是自己上一级（循环产生的块级作用域）作用域下的i值.

　　let还有一个特点就是声明的变量不存在变量提升，所以一定要在声明后使用，否则报错。

// var 的情况
console.log(a); // 输出undefined
var a = 2;
// let 的情况
console.log(b); // 报错ReferenceError
let b = 2;

2.const命令

const关键字用于声明常量，声明时必须初始化（如果声明不赋值会报错），声明后常量的值不可更改。

3.let、const、var区别

var	let	const
函数级作用域	块级作用域	块级作用域
变量提升	变量不提升	变量不提升
可重新赋值和重复定义	同一作用域不可重复声明但可重新赋值	同一不可重复声明且不可重新赋值
声明变量	声明变量	声明常量

二、解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。如果解构不成功，变量的值为undefined。

数组解构：
let [x, , y] = [1, 2, 3];
x // 1
y // 3
对象解构:
let person = { name: 'zhangsan', age: 20 };
let {name: myName, age: myAge} = person; // myName myAge 属于别名
console.log(myName); // 'zhangsan'
console.log(myAge); // 20
字符串解构
const [x,y,z] = 'sea';
x// "s"
y // "e"
z // "a"　

解构赋值的使用：

交换变量值：

[x, y] = [y, x];

函数参数的定义并且从函数返回多个值

//参数
function f([x, y, z]) { ... }
f([1, 2, 3]);
//返回值
function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

　提取json数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]};
let { id, status, data: number } = jsonData;

　解构赋值的好处在于使代码更简洁，语义更清晰，更方便获取数据字段。　

三、字符串扩展

模板字符串：

es6中增强字符串，用反引号表示

模板字符串特点：

• 可以表示多行字符串，所有的空格缩进都保留
• 可以在字符串中嵌入变量
• 可以调用函数

let person={
name:'hl',
age:18,
}
let html=`<div>
<span>${person.name}</span>//空格和换行被保留，变量写在${ }中，变量不声明会报错
<span>${person.sge}</span>
</div>`;

//调用函数

function fn() {
  return "Hello World";
}
let str=`${fn()}`//${ }中对函数调用
console.log(str);

四、数组扩展

扩展运算符：（...),可以将一个数组转为用逗号分隔的参数序列

应用：

• 合并数组

const arr1 = ['a', 'b'];
const arr2 = ['c'];
const arr3 = ['d', 'e'];

// ES5 的合并数组
arr1.concat(arr2, arr3);

// ES6 的合并数组
[...arr1, ...arr2, ...arr3]

• 与解构赋值结合

注：扩展运算符用于数组赋值，只能将其放在参数最后一位，否则报错

 

//数组解构赋值，
const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

• 函数返回值
• 字符串

五、函数扩展

　　1.函数默认值

   ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。在声明函数的时候给参数设定一个默认值，如果函数调用时参数不赋值，参数就等于默认值，赋值则为新的值。非尾部参数函数调用时不可以忽略不复制（会error报错），可以使用undefined代替。

  function fun(x=2,y=5){//x默认值使2，y默认值是5
         let z= x+y;
         console.log(z);
      }

      fun();//打印7，函数参数等于默认值
      fun(1,1);//2 函数参数为传递的值
      fun( ,4);//error 第一个参数不能忽略，报错
      fun(undefined,4)//6 第一个参数为默认值，第二个参数为传递值
      fun(1,);//6 第二个参数未赋值为默认值

　　2.箭头函数

ES6中新增的定义函数的方式。 允许使用“箭头”（=>）定义函数。

函数定义格式：

const fn = () => {}

在箭头函数中 如果函数体中只有一句代码 并且代码的执行结果就是函数的返回值 函数体大括号可以省略.

//ES5函数定义
var sum = function(num1, num2) {
  return num1 + num2;
};

//箭头函数形式
var sum = (num1, num2) => num1 + num2;

如果形参只有一个，可以省略小括号

function fn (v) {
 return v; }
//箭头函数，省略参数括号
const fn = v => v;

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

let fun = (x,y) => {
　　console.log(x,y);
　　return x+y; //必须加return才有返回值
}

如果要返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了，正确写法

let fun = ()=>({ name: hl })