ES6(ECMAScript6 )入门

文章目录

    • 代码块
    • 变量声明
    • 变量的解构赋值
      • 用途
      • 扩展符...
      • 字符串解构赋值
      • 对象的解构赋值
    • 字符串的扩展
      • 字符串遍历器for ... of
    • 模板字符串
    • 函数的扩展
    • 箭头函数 =>
    • 数组方法的扩展
    • 对象方法 扩展
    • 关键字
    • 新数据结构
    • Promise对象 异步编程:
      • 三种状态与链式调用
    • async 函数
    • Genertaor 函数
    • Class
    • class继承
    • Module 的语法

代码块

{}内 一个代码块

变量声明

let 声明变量(可解决闭包)
const声明只读变量 (常量)
代码块内有效,不能提前生成,不能重复声明

变量的解构赋值

按照对应的结构进行赋值
let [a,b]=[1,["a", "b"], 2, 3, 4, 5];// a=1 ,b=["a", "b"]
结构统一,按照位置取值
let [a,[b],[[c]]]=[1, [2], [[3]]];//a=1 ,b=2 ,c=3
设置默认值
let [a=10,b]=[,2];a不设置默认=2

用途

  1. 交换值 [x,y]=[y,x]
  2. 函数返回多个值 return[a,b,c] let[x,y,z]= fn()
  3. 函数参数的定义:将参数与变量名对应起来 fn([a,b,c]) fn({x:1,y:2,z:3})
  4. 提取 JSON 数据:
 let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

扩展符…

在解构赋值里面 放在最后一位
let [a,...b]=[1,["a", "b"], 2, 3, 4, 5];// a=1 ,b=[["a", "b"], 2, 3, 4, 5]

字符串解构赋值

let [a,b,c,d]="save";// a="s",b="a"···

对象的解构赋值

let {name,sex}={name: "张三", sex: "男"};

  • String对象的解构赋值
    let {length : len}="save";//log(len)=4
  • 举例对象的解构赋值 Math,console
    let {abs,floor,random}=Math; abs(-1);
    let {log}=console; log("abc")

字符串的扩展

字符串遍历器for … of

具有iterable类型的集合可以通过新的for … of循环来遍历。
for … in遍历的实际上是对象的属性名称
for … of遍历的实际上是元素本身

模板字符串

模板字符串: ${} 字符串拼接变量
反转符(`):将字符串 修改为 单反引号 里面写模板字符串

let [a,b,obj]=["abcd", "efgh", {name: "毛豆"}];
let c = `我是第一个字符串:${a},我是第二个字符串:${b},我的名字叫:${obj.name}`
// c = 我是第一个字符串:abcd,我是第二个字符串:efgh,我的名字叫:毛豆。

模板字符串里面放置 javascript表达式:<%…%>

let obj = [  {"name": "张三"},
             {"name": "李四"},
             {"name": "王伟"},
             {"name": "马六"}];
 //下面的这种格式在ejs 模板语法中在  node 中编译
             let complete = `
    <% for(let i=0;i<${obj.length};i++){%>
  • <%= ${obj[i].name}%>
  • <%}%>
`
;

函数的扩展

  1. 函数默认值
    function method(a="a", b=2) {}; method();
  2. 函数传参 解构赋值
    function method({a,b=2}) {}; method({}); method({a: 1, b: 3});
  3. 扩展符合函数
    function method([a,...b]){}; method([1,2,3,4,5,6]);

箭头函数 =>

  1. 返回数值
 //es5 的函数
            var method=function (val){
                return val;
            }
//es6  箭头函数
            let method=(val)=>val;
  1. map映射 返回对象({})
    let b=a.map((val,index)=>({ index, name: val })
  2. 上下文this 一致
    箭头函数 this总是指向函数定义生效时所在的对象

数组方法的扩展

  1. 拆开数组
    […a] 替换apply args数组型
  2. 复制数组
    let b=a修改一个,另一个也会改变
    let a=[1,2,3];let b= [...a];修改其中一个,另一个不会发生变化
  3. 合并数组
    let c=[...a,...b]
  4. 类数组对象 转化为正真的数组
    let a={ 0:"a", 1:"b", length:2 };Array.from(a)
  5. 将一组值转化为数组
    Array.of(1,12,2,3)
  6. findIndex返回 数组里面满足条件的第一个成员
    a.findIndex((value,index,arr)=>{ return value%6==0; })
  7. arr.find() arr.findIndex(val,ind,arr) 满足条件的第一个成员

对象方法 扩展

  1. 允许直接在对象内部声明属性和方法
let obj={
         name:"",
         sleep(){
         console.log("我在睡觉");}
         };
  1. 字面量定义对象的属性
		let _sex="Sex";
         let a="age";
         let b="Now";
 let obj={
         name:"毛豆",
         [_sex]:"男",
         [a+b]:20
         };
  1. 属性的遍历 Object.defineProerty()
Object.defineProperty(obj, "sex", {
        configurable: true,
        enumerable: false,
        value: "张三",
        writable: true
        });

修改下面对象的配置

  •  configurable: true   可配置
    
  • enumerable: true      可枚举
    
Object.keys  //获取对象的所有的键
Object.values //获取的对象的所有键值
Object.entries  //获取对象的键+键值   返回是一个数组

Object.assign(目标对象,原对象) 合并对象
Object.assign 可以复制对象;注意 对象属性上的引用

  •    value: "张三"     数据值
    
  •     writable: true    可读写性
    

关键字

  1. super 关键字
    扩展的super 指向当前对象的原型对象 this 指向当前对象 ; 只能写在对象的方法内部 不能直接写在属相上 和 方法 的返回值上
    只能写在内部
//设置对象的原型对象
    Object.setPrototypeOf(obj, ob);
//获取对象的原型对象的
    console.log(Object.getPrototypeOf(obj));
  1. Object.assign(目标对象,原对象) 合并对象
    Object.assign 可以复制对象;注意 对象属性上的引用
  2. Object.is 严格判断两个对象相等 类似===

新数据结构

  1. Set
    唯一的,不重复
  2. Weakset
  3. Map

Promise对象 异步编程:

Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。
all方法
Promise.resolve() 转换成 Promise对象

var promise = new Promise(function(resolve, reject) {
  if (/* 异步操作成功 */){
    resolve(value); //返回数据
  } else {
    reject(error);//返回错误
  }
});
promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

三种状态与链式调用

作用
  1. 处理JavaScript里的异步

  2. 避免回调地狱。

     状态
    

pending、fulfilled、rejected(未决定,履行,拒绝),同一时间只能存在一种状态,且状态一旦改变就不能再变

  1. 初始化,状态:pending

  2. 当调用resolve(成功),状态:pengding=>fulfilled​

  3. 当调用reject(失败),状态:pending=>rejected

     promise的then方法传参
    
let promiseDemo = new Promise((resolve, reject) => {
  // code
  resolve('success')
  // code 
  reject('failed') 
})

promiseDemo.then((result) => {  //成功调用传参('success')
  console.log(result)
}, (result) => {
  console.log(result) //失败调用传参('failed') 
});
//------------把reject函数拿出来做为catch
promiseDemo.then((result) => {
  console.log(result) 成功调用传参('success')
}).catch((result) => {
  console.log(result)
})
使用Promise.resolve()快速获取一个成功状态的promise对象
使用Promise.reject()快速获取一个拒绝状态的promise对象

可以通过Promise.resolve()将一个字符串、数字或者对象等转换成一个成功状态的Promise对象。

let b = Promise.resolve({name:'xiaoming', age:18})
b.then((result) => {
    console.log(result)   // {name:'xiaoming', age:18}
})

async 函数

async函数返回一个 Promise 对象,可以使用then方法添加回调函数。当函数执行的时候,一旦遇到await就会先返回,等到异步操作完成,再接着执行函数体内后面的语句。

function timeout(ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms);
  });
}
//上面代码指定 50 毫秒以后,输出hello world。
async function asyncPrint(value, ms) {
  await timeout(ms);
  console.log(value);
}

asyncPrint('hello world', 50);

Genertaor 函数

  •    (1)遇到yield表达式,就暂停执行后面的操作,并将紧跟在yield后面的那个表达式的值,作为返回的对象的value属性值。
    
  •    (2)下一次调用next方法时,再继续往下执行,直到遇到下一个yield表达式。
    
  •    (3)如果没有再遇到新的yield表达式,就一直运行到函数结束,直到return语句为止,并将return语句后面的表达式的值,作为返回的对象的value属性值。
    
  •    (4)如果该函数没有return语句,则返回的对象的value属性值为undefined。
    

遍历value。

.next()
next()执行顺序
.next(val)
meth.next().value.then()

Class

类相当于实例的原型,所有在类中定义的方法,都会被实例继承(静态方法除外)
this关键字则代表实例对象
Object.assign方法可以很方便地一次向类添加多个方法。定义在原型.
prototype对象的constructor属性
类的内部所有定义的方法,都是不可枚举的(non-enumerable)。
取值函数(getter)和存值函数(setter)
属性表达式
Class 表达式
静态方法:如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。
如果静态方法包含this关键字,这个this指的是类,而不是实例。
(this)上的属性。父类的静态方法,可以被子类继承。
静态属性:Class 本身的属性,即Class.propName,而不是定义在实例对象。两种写法 Foo.prop = 1;//class Foo { static prop = 1; }
私有方法和私有属性:只能在类的内部访问的方法和属性,外部不能访问。
ES6 不提供,只能通过变通方法模拟实现。

class继承

  •  extend
    
  •  super:子类必须在constructor方法中调用super方法,否则新建实例时会报错。  
    
  • 在子类的构造函数中,只有调用super之后,才可以使用this关键字。
  • super作为对象时,在普通方法中,指向父类的原型对象;在静态方法中,指向父类。
  •  父类的静态方法,也会被子类继承
    

Module 的语法

严格模式
模块导出 引入
export 对外导出,import 引入变量

你可能感兴趣的:(ES6,JavaScript,javascript,node.js,vue.js)