ES6学习-CSDN博客

本文链接：https://blog.csdn.net/linglingpractice/article/details/128765694

ES6介绍

ES全称ECMAScript，是脚本语言的规范，而平时经常编写的javaScript是ECMAScript的一种实现，所以ES新特性其实指的就是javaScript的新特性。

ES6是其中的一个重要版本，变动内容最多，具有里程碑意义，加入许多新的语法特性，就业必备。

let变量

语法：

 let a = 100

与var的不同之处：
1.需先定义
2.可检查变量重名，不允许重复声明
3.块级作用域，不影响作用域链，避免和外面变量互相打扰
4.不存在变量提升

const常量

声明必须赋初始值
标识符一般为大写
不允许重复声明
值不允许修改
块儿级作用域（局部变量）

const obj = {
name:"kerwin"
}
//同一把钥匙，门里内容变了
obj.name = "mm"
//钥匙变了
obj = {name:"mm"}

let块级作用域案例

//这里定义的i只在大括号中生效
for(let i=0;i<5;i++){
console.log(i)
}

变量的结构赋值

可以：
交换变量的值
从函数返回多个值
函数参数的定义
提取 JSON 数据
函数参数的默认值
遍历 Map 结构
输入模块的指定方法

数组的结构赋值

语法：

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

例“

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [foo] = [];
foo // undefined

如果解构不成功，变量的值就等于undefined

对象的结构赋值

对象的属性没有次序，变量必须与属性同名，才能取到正确的值
如果解构失败，变量的值等于undefined
可以指定默认值

例：

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

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

var {x = 3} = {};
x // 3

//如果变量名与属性名不一致，必须写成下面这样
let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f // 'hello'
l // 'world'

字符串的结构赋值

此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

模板字符串

增强版的字符串，用反引号（ ` ）标识

字符串中可以出现换行符；

可以使用 ${xxx} 形式引用变量；

对象简化

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法

// ES6允许在对象的大括号内直接写入变量和函数作为对象的属性和方法
let birth = '2000/01/01';
const Person = {
  name: '张三',
  //等同于birth: birth
  birth,
  // 等同于hello: function ()...
  hello() { console.log('我的名字是', this.name); }
};

这种写法用于函数的返回值，将会非常方便

function getPoint() {
  const x = 1;
  const y = 10;
  return {x, y};
}

getPoint()
// {x:1, y:10}

箭头函数

语法：

 var test = () =>{
 console.log()
 }

1.小括号可以省略：只有一个行参时
2.大括号省略：只有一句代码或只有返回值时
3.没有arguements（arguments是保存着所有实参的伪数组，所以不用写形参也可以。）
4.没有this，箭头函数this是父级作用域的
解决方法：

临时将this赋值给that

解构赋值

快速从对象和数组中获得里面的成员
(多维数组同理）

var arr =["chris","becky"]
//arr[arr.lengh-1]
let[x,y] = arr
console.log(x,y)

交换位子

var a = 10
var b = 20

var[b,a] = [a,b]

对象

var obj = {
name:" ",
age:100
}
Let {name,age}=obj
document.write(name)

对象简写
对象前面的key值和后面的一样则可以省略

展开运算符

...

把数组展开
复制
-
实参
-
行参
伪数组

模块化语法

1.默认导出语法 export default 默认导出的成员：

// 当前模块 为 export1.js
//定义私有成员 a 和 c
let a = 10
let c = 20 

// 外界访问不到 变量 d 因为其没有被 暴露出去
let d = 30
function show(){}

// 将 本模块中的私有成员 暴露出去，供其他模块使用
export default  {
    a,
    c,
    show
}

2.默认导入语法 import 接收名称 from ‘模块接收符’：

<script type="module">
// 导入模块成员
import export1 from './export1.js'

console.log(export1)

//打印输出结果为 
// { a: 10, c: 20, show: [function show] }

注意：

在每一个模块中只允许使用唯一的一次 export default ，否则会报错在一个模块中如果没有向外 export
default，则导入该模块时默认输出 {}

面向对象–>自定义构造函数

典型的面向对象编程语言（比如 C++ 和 Java），都有“类”（class）这个概念。
但是，JavaScript 语言的对象体系，不是基于“类”的，而是基于构造函数（constructor）和原型链（prototype）。

JavaScript 语言使用构造函数（constructor）作为对象的模板。所谓”构造函数”，就是专门用来生成实例对象的函数。它就是对象的模板，描述实例对象的基本结构。一个构造函数，可以生成多个实例对象，这些实例对象都有相同的结构。

function creatObj(name){
  this.name = name
  this.material = []
  this.cook = function(){
}}
var obj1 = new createObj("")

注意：

为了与普通函数区别，构造函数名字的第一个字母通常大写。
构造函数不写return
new过程==实例化这个过程，此时实例对象已经生成，此时this指向实例化后的对象

rest参数

ES6 引入 rest 参数（形式为…变量名），用于获取函数的多余参数，这样就不需要使用arguments对象了
rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(2, 5, 3) // 10

注意，rest 参数之后不能再有其他参数，否则会报错

function f(a, ...b, c) {
  // ...
}

函数的length属性，不包括 rest 参数

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

symbol

es6引入了一种新的原始数据类型symbol，独一无二的值，他是javascript语言的第七种数据类型，是一种类似于字符串的数组类型。
特点：
一、 symbol的值是唯一的，用来解决命名冲突问题。
二、symbol的值不能与其他数据进行运算。
三、symbol定义的对象属性不能使用for…in循环遍历，但是可以使用Reflect.ownKeys来获取对象的所有键名

 <script>
        // 创建Symbol
        let s=Symbol();
        // console.log(s,typeof s);
        
        let s2=Symbol('kaven');     //Symbol()返回的值都是唯一的
        let s3=Symbol('kaven');
        console.log(s2==s3);        // false s2和s3不相同
 
        // Symbol.for创建
        let s4=Symbol.for('kaven'); //Symbol.for(key) 通过key来查找Symbol，找到的话，则返回 
                                                   // Symbol，否则创建一个新的Symbol
        let s5=Symbol.for('kaven');
        console.log(s4==s5);        //true s4和s5相同
       
        </script>

symbol的内置属性

<script>
         class Person{
            static[Symbol.hasInstance](param){
                return true;
            }
         }
         let o={};
         console.log(o instanceof Person);//true
        //  特定场景下 改变对象的属性 来改变对象的表现
        </script>

 
        // 不能与其他数据进行运算
        let result=s+s;
        //七大类型 USONB you are so niubility
        //u underfined
        //s symbol string
        //o object
        //n null number
        //b boolean

迭代器

一种接口，为各种不同的数据结构提供统一的访问机制。任何数据解构只要部署iterator接口，就可以完成遍历操作。

es6创造了一种新的遍历命令for … of循环，lterator接口主要供for…or消费
原生具备iterator接口的数据可用for of遍历，Array,Arguments,Set,map,string,typeArray,NodeList

     const xiyou = ["唐僧", "孙悟空", "猪八戒", "沙僧"];
     
      // 使用for of来遍历数组
      for (let v of xiyou) {
        console.log(v);
      }

 //迭代器方法
 //(1)创建一个指针对象，指向当前数据结构的起始位置
      let iterator=xiyou[Symbol.iterator]();
    
 //(2)调用对象的next的方法
    // 第一次调用对象的next方法，指针自动指向数据结构的第一个成员
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    console.log(iterator.next());
    </script>

Map

es6提供了map数据结构，它类似于对象，也是键值对的集合，但是"键"的范围不限于字符串，各种类型的值(包括对象)都可以当做键，map也实现了iterator接口，所以可以使用【扩展运算符】和【for…of…】进行遍历，map的属性和方法：

size 返回map的元素个数
size 正价一个新元素，返回当前的
map get 返回键名对象的键值
has检测map中是否包含某个元素，返回bollean值
clear 清空集合，返回undefined

Promise介绍与基本使用

promise是ES6引入的异步编程的新解决方案，语法上市promise是一个构造函数，用来封装异步操作并可以获取奇成功或失败的结果【解决回调地狱问题】

<script>
      // 实例化Promise对象
      // resolve ：异步操作执行成功后的回调函数
      // reject：异步操作执行失败后的回调函数
      const p = new Promise(function (resolve, reject) {
        //做一些异步操作
        setTimeout(function () {
          console.log("执行成功!");
          resolve("我是成功！！");
        }, 1000);
      });
  
      //  .then() 方法需要两个参数，第一个参数作为处理已兑现状态的回调函数，而第二个参数则作为处理已拒绝状态的回调函数。
      p.then(
        function (value) {
            console.log(value);
        },
        function (reason) {
            console.log(reason);
        }
      );
    </script>

Promise封装读取文件

// 1、引入fs模块
const fs=require('fs');
// // 2、调用方法读取文件
// fs.readFile('./resource/为学.md',(err,data)=>{
//     // 如果失败，则抛出错误
//     if(err) throw err;
//     // 如果没有出错，则输出内容
//     console.log(data.toString());
// });
    // 使用Promise封装
    const p=new Promise(function(resolve,reject){
        fs.readFile('./resource/为学.md',(err,data)=>{
            if(err)reject(err);
            resolve(data);
        });
    });
    p.then(function(value){
    console.log(value.toString());
    },function(reason){
    console.log(reason);
    });

class

语法：

//构造器函数
class CreateObj{
constructor(name){
this.name = name
}say（）{
console.log(this.name,"hello")
}}

例：

// class
    class Phone{
        //构造方法，名字不能修改，当实例化的时候会自动执行
        constructor(brand,price){
            this.brand = brand;
            this.price = price;
        }

        //方法必须使用该语法，不能使用es5的对象完整形式
        call(){
            console.log("我可以打电话");
        }
    }
    let onePlus = new Phone("huawei",4999);
    console.log(onePlus);

nodejs中的模块化

是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
export命令用于规定模块的对外接口

多行暴露

//在t1.js这个文件下
export let name='问问';
export let teach=function(){
    console.log("teaching");
}

统一暴露

//在t2.js这个文件下
let name='问问';
let teach=function(){
    console.log("teaching");
}
export{name,teach};

默认暴露

//在t3.js这个文件下
export default{
    school:'问问',
    sing:function(){
        console.log("teaching");
    }
}