js-ES6基本知识

一、ES6的概念

1.JavaScript和ECMAScript的关系

Netscape 公司看把 JavaScript 提交给一个标准化组织ECMA，希望可以成为国际标准，因为授权关系不能叫JavaScript,所以叫ECMAScript，这两个通常可以互换，广义理解是都是ECMAScript

ES6说白了就是 ECMAScript2015（ES5）的下一个版本，ES6 既是一个历史名词，也是一个泛指，含义是 5.1 版以后的 JavaScript 的下一代标准，涵盖了 ES2015、ES2016、ES2017 等等

 2.为什么使用ES6

ES6有很多新的特性，并且补充了ES5很多不足，比如ES5以下两个缺点

• 变量提升特性增加了程序运行时的不可预测性
• 语法过于松散，实现相同的功能，不同的人可能会写出不同的代码

二、ES6部分常用的特性

1.let和const

 let和const都是用来声明变量 只在当前的{}作用域内有效

{
  let a = 10;
  var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

let const不存在变量提升 

abc
var abc
// 不报错，因为var会变量提升

ccc
let ccc 
// 报错 ccc is not defined

• 使用let声明的变量可以重新赋值,但是不能在同一作用域内重新声明
• 使用const声明的变量必须赋值初始化,但是不能在同一作用域类重新声明也无法重新赋值
• for循环，就很合适使用let命令,for循环条件( ) 和循环体{ }内部是单独的作用域

2.模板字符串 `${}`

在ES6之前,将字符串连接到一起的方法是+或者concat()方法,如

let age=18

console.log('我今年'+age)

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量`xxx${变量}`和函数

// 普通字符串
`In JavaScript '\n' is a line-feed.`

// 多行字符串,保持字符串中的换行和空格
`In JavaScript this is
 not legal.`

console.log(`string text line 1
string text line 2`);

// 字符串中嵌入变量
let name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

//如果在模板字符串中需要使用反引号，则前面要用反斜杠转义。
console.log(`\``)

//模板字符串之中还能调用函数。
function fn() {
  return "Hello World";
}

`foo ${fn()} bar`
// foo Hello World bar

3.解构

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

3.1数组解构(规则是变量取值是按位置决定)

let arr= [1, 2, 3];
let [x,y,z] = arr
//结果 1 2 3

//可以忽略值,这里省略y值
let [x,,z]=arr
//结果 1 3

3.2对象解构 (规则是变量必须与属性名同名)

let { foo, bar } = { foo: 'aaa', bar: 'bbb' };
//foo ='aaa', bar ='bbb'

//重新命名
let { foo:foo2, bar:bar2 } = { foo: 'aaa', bar: 'bbb' };
//foo2='aaa', bar2='bbb'

示例，这里做个数组重构

let a = [{name:'张三',age:11},{name:'赵四',age:13}]
for(let i of a){
let {boyA,boyB}={boyA:{names:'连长',ages:18},boyB:{names:'顺溜',ages:18}}
i.newBoy = [boyA,boyB]

 

 

4.箭头函数

普通函数可以是函数声明或者函数表达式, 但是箭头函数始终都是表达式, 全程是箭头函数表达式,

    // 函数声明
    function funDeclaration(type){
        return type==="Declaration";
    }

    // 函数表达式
    var funExpression = function(type){
        return type==="Expression";
    }

因此仅在表达式有效时才能使用，包括：

• 存储在变量中
• 当做参数传递给函数
• 存储在对象的属性中

// 一个参数可省略（），如果无参数或者多个参数需要带（）
var f = v => v;
// 等同于
var f = function (v) {
  return v;
};

// 如果箭头函数的代码块部分只有一句可以省略{}，多于一条语句，就要使用{}将它们括起来，并且使用return语句返回。
// 一条语句
var sum = (num1, num2) =>  num1 + num2

// 多条语句
var sum = (num1,num2) =>{
  //做个互换
  [num2,num1] = [num1,num2]
  return num2 -num1
}

使用箭头函数时，this代表箭头函数外面的this，当你要使用外面的this时，建议用箭头函数

5.扩展运算符...

扩展运算符就是把数组和对象，展开

复制

数组的复制

如果数组直接赋值指针就会指向同样的地址

let arr1 = [1,2,3]
let arr2 = arr1
arr2[0]=4

// arr2=[4,2,3], arr1=[4,2,3]  因为arr2和arr1的指向地址相同，所以改变arr2 ，arr1也会跟着改变

在es5中，我们用concact方法来克隆/复制数组，这样当改变arr2时,arr1并不会改变。

let arr2 = a1.concat()

在es6中，有了...运算符，我们可以这样写,相当于.concat()

let arr2 = [...arr1]

对象的复制,原理和数组的复制一样

let obj ={name:'张三',age:18}
let obj= {...arr1}

合并

数组合并

// es5 的合并数组
arr1.concat(arr2)

// es6 的合并数组
let newArr =[...arr1, ...arr2, ...arr3]

不过，这两种方法都是浅拷贝，使用的时候需要注意。如果修改了原数组的成员，会同步反映到新数组。

对象合并

let obj1 ={name:'张三'}
let obj2 ={name:'赵四'}
let newObj= {...obj1,...obj2}

字符串传换成数组

var arr1 = [...'hello']
// ['h','e','l','l','o']

 

6.Set和Map

Set和Map主要的应用场景在于数组去重和数据存储，Set是一种叫做集合的数据结构，Map是一种叫做字典的数据结构

Set

Set和Map类似，也是一组key的集合，但不存储value。由于key不能重复，所以，在Set中，没有重复的key。

const s = new Set();
 
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));
 
for (let i of s) {
  console.log(i);
}
// 2 3 5 4

Set的方法：

• 操作方法
  • add(value)：向集合添加一个新的项
  • delete(value)：从集合中移除一个值
  • has(value)：如果值在集合中存在，返回true,否则false
  • clear(): 移除集合里所有的项

Map：

Map是一组键值对的结构，具有极快的查找速度。

举个例子，假设要根据同学的名字查找对应的成绩，如果用Array实现，需要两个Array

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

给定一个名字，要查找对应的成绩，就先要在names中找到对应的位置，再从scores取出对应的成绩，Array越长，耗时越长。

如果用Map实现，只需要一个“名字”-“成绩”的对照表，直接根据名字查找成绩，无论这个表有多大，查找速度都不会变慢。用JavaScript写一个Map如下：

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一个二维数组，或者直接初始化一个空Map。Map具有以下方法：

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value，所以，多次对一个key放入value，后面的值会把前面的值冲掉：

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88