ES6 日常使用

1、新的声明方式
2、变量的解构赋值
3、扩展运算符和rest运算符
5、新增的数组知识
6、箭头函数和扩展
7、对象
8、Set 和 WeakSet 数据结构
8、promise 对象的使用
9、模块化操作

1、新的声明方式

var：variable的简写，理解为全局变量
let：英文 “让”，的意思，理解为局部变量
const：声明不变的意思，理解为常量

2、变量的解构赋值

数组的解构赋值

传统的变量赋值方式，如下代码

let a=0;
let b=1;
let c=2;

而现在我们使用数组的解构方式来进行赋值。

let [a,b,c] = [1,2,3];

let [a,[b,c],d] = [1,[2,3],4];

注意：undefinded 和 null 的区别

let [a,b] = ['注意',undefinded]
console.log(a + b); // 控制台显示 “注意”

let [a,b] = ['注意',null]
console.log(a + b); // 控制台显示 “注意null”

对象的解构赋值
```
let {foo, bar} = {foo:'我是', bar:"你爸爸"};
console.log(foo + bar); // 控制显示 “我是你爸爸”
```
注意：数组与对象的解构不同的是，数组的元素是按次序排序的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。
- 圆括号的使用

如果在解构前就定义了变量，这时候解构就会出现问题，编译会报错。

let foo ;
{foo} ={foo:'圆括号使用'};
cosnole.log(foo);

要解决报错，使程序正常，在解构的语句外面加一个圆括号就可以了。

let foo ;
({foo} ={foo:'圆括号使用'});
cosnole.log(foo);

字符串的解构
```
const [a,b,c,d,e,f]="字符串的解构";
console.log(a);
console.log(b);
console.log(c);
console.log(d);
console.log(e);
console.log(f);
```
3、扩展运算符和rest运算符
扩展运算符和rest运算符都是…(三个点)，他们一般用于解决内存堆栈的引用问题，代码如下： ```jsx let arr1 = [‘r1’,’r2’,’r3’]; let arr2 = arr1; console.log(arr2);// 控制台输出 [‘r1’,’r2’,’r3’] arr2.push(‘r4’); console.log(arr1); // 控制台输出 [‘r1’,’r2’,’r3’,’r4’]

这是我们不想看到的，我们可以利用扩展运算符解决这个问题。
```jsx
let arr1 = ['r1','r2','r3'];
let arr2 = [...arr1];
console.log(arr2);// 控制台输出  ['r1','r2','r3']
arr2.push('r4');
console.log(arr1); // 控制台输出  ['r1','r2','r3']

注意：如果为对象则：let obj2 = { …obj1 };

rest运算符 ```jsx function func(fisrt,…arg){ console.log(arg);// 控制台输出 1,2,3, }; func(0,1,2,3);

<a name="h3IUZ"></a>
#### 4、字符串模板
```jsx
let name = '字符串模板'
let str = `${name}的使用方法`

字符串查找方法 includes

let str = `这是个name,coce`;
if(str.includes('name')){
console.log('存在 name')
}

判断开头结尾是否存在

str.startsWith('name'); //判断开头
str.endsWith('name'); //判断结尾

5、新增的数组知识

Array.form() 方法

将一个标准的json数组格式，转换成数组

let json = {
    j:'json',
  s:'技术', 
  length:2
}
let arr = Array.from(json);
console.log(arr); //控制台输出 ["json","技术"]

注意：标准的json数组格式，跟普通的json 对比在最后多了一个 length属性

Array.of() 方法

它负责把一堆文本和变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要用eval来进行转换，如果你是一个老手程序员都知道eval 的侠效率是很低的，它会拖慢我们的程序。

let arr = Array.of('js','技术');
console.log(arr); // ['js', "技术"]

Array.find() 实例方法

找到第一个元素，并停止查找，如果找不到会返回 undefined

let arr=[1,2,3,4,5,6,7,8,9];
console.log(arr.find(function(value,index,arr){
    return value > 5;
}))

Array.fill () 实例方法

接受三个参数，第一个是需要填充的值，第二个是开始位置，第三个是结束位置（不包括结束位置）

let arr=[0,1,2,3,4,5,6,7,8,9];
arr.fill('js',2,5);
console.log(arr); // 控制台输出 [0, 1, "jspang", "jspang", "jspang", 5, 6, 7, 8, 9]

6、箭头函数和扩展

箭头函数

const f1 = (a,b)=>{...}
const f2 = a =>{...}; // 简写
const f2 = a => let b = a; ; // 简写

抛出错误

function f1(a){
  if(a === 0){
    throw new Error('this is error')
}
}

in 的用法

in 是用来判断对象或者数组中是否存在某个值的

对象的判断 ```jsx let obj = { a:’js’, b:’技术’ }

console.log(‘a’ in obj); // true


   - 数组的判断
```jsx
let arr=[,,,,,];
console.log(0 in arr); //false

let arr1=['js','技术'];
console.log(0 in arr1);  // true

注意：这里的0指的是数组下标位置是否为空。

7、对象

对象 key 值构建 ```jsx let key = ‘skill’; let obj = {

[key]:'web'

}; console.log(obj); // 控制台输出 {skill:’web’}


- Object.is() 对象比较
```jsx
let obj1 = {
    name:'js'
};
let obj2 = {
    name:'js'
};

console.log(Object.js(obj1.name,obj2.name));// 控制台输出 true

Object.assign() 合并对象

操作数组时我们经常使用数组合并，那对象也有合并方法，那就是assign()

let a = {a:'js'};
let b = {b:'技术'};
let c = {c:'web'};

let d = Object.assign(a,b,c);
console.log(d); // 控制台输出 {a:'js, b:'技术', c:'web'}

8、Set 和 WeakSet 数据结构

Set 的声明

let setArr = new Set(['js', '技术' , 'web'， 'js']);
console.log(setArr); // Set {'js', '技术', 'web'}

Set 和 Array 的区别是 Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set 很像数组，但是它不是数组。

Set 的增删查

追加 add

setArr.add('前端');
console.log(setArr); // Set {'js', '技术', 'web', '前端'}

删除 delete

setArr.delet('js'); // Set {'技术', 'web'}

查找 has

let isH = setArr.has('js');
console.log(isH); // true

删除 clear

setArr.clear();
console.log(setArr); // true;

size 属性

size 属性可以获取Set的数量

let setArr = new Set(['js','技术','web','js']);
for (let item of setArr){
    console.log(item);
}

console.log(setArr.size);

8、promise 对象的使用

promise 执行多步操作非常好用，一般用于同步任务。

let state=1;

function step1(resolve,reject){
    console.log('1.开始-洗菜做饭');
    if(state==1){
        resolve('洗菜做饭--完成');
    }else{
        reject('洗菜做饭--出错');
    }
}


function step2(resolve,reject){
    console.log('2.开始-坐下来吃饭');
    if(state==1){
        resolve('坐下来吃饭--完成');
    }else{
        reject('坐下来吃饭--出错');
    }
}


function step3(resolve,reject){
    console.log('3.开始-收拾桌子洗完');
     if(state==1){
        resolve('收拾桌子洗完--完成');
    }else{
        reject('收拾桌子洗完--出错');
    }
}

new Promise(step1).then(function(val){
    console.log(val);
    return new Promise(step2);

}).then(function(val){
     console.log(val);
    return new Promise(step3);
}).then(function(val){
    console.log(val);
    return val;
});

9、模块化操作

export：负责进行模块化，也是模块的输出
import：负责把模块引，也是模块的引入

export 的用法：

// 导出变量
export const m1 = 'js';

// 导出函数
export function add(a,b){
    return a + b;
};

let a = 'js';
let b = '技术';
// 不想暴露变量名称，使用 as 给模块起一个更语义化的名称
export {
    a,
  x as a,
}

// 使用 default 导出默认值
export default let c = '默认值'

注意：export 和 export default 的区别在引入的时候前者需要指定导出名称进行引入，后者这不需要

import 的用法

// 引入默认值 c，其他使用对象解构方式引入

import c, {a, b} from "./temp"