JavaScript 进阶营

ES(ECMAScript)6知识点总结(一)

2020-03-20  本文已影响0人  文艺的程序狗
  1. let和const
    1. es6出来代码块的概念,let作用域在代码块里,脱离代码块就不存在
    2. var 先使用后声明会提示undefined 而let直接报ReferenceError
    3. var和let(在同一作用域)声明变量会报错
    4. const声明一个常量(指定是一个内存块),不可变(变量,比如对象或者是数组,里面的值是可以改变的)
    5. 如果想让一个const声明的变量不可以变 调用 freeze方法 Object.freeze(obj)
    6. 顶层变量
  2. 变量结构赋值
    1. 概念:从数组和对象中提取值,对变量进行赋值,被称为解构
    2. 数组解构赋值
let [a,b,c] = [1,2,3];
//本质上,这属于“模式匹配”,两边模式一样会进行匹配
//扩展,1:模式不一样:右边多,左边少;右边少,左边多 
let [a,b,c] = [1,2];//解构不成功
let [a.b] = [1,2,3];//部分解构
只要数据结构具备Iterator结构,都可以采用数组形式进行解构
//扩展 2:默认值
let [a,b=2] = [1];//当一个成员变量严格等于undefined 则使用默认值
  1. 对象解构赋值
let [a,b] = [b:’nice’,a:’day’] //实际上等效于let[a:a,b:b]=[b:’nice’,a:’day’] 
let[foo:abz]=[foo:’nice’,he:’aa’]//abz=’nice’ 前者赋值给后者
//结构赋值可以,把现有对象某个方法赋值到某个变量
let [log,sin,cos] = Math;//相当于let log = {Math.log}
  1. 字符串解构赋值
const [a,b,c,d,e] = ‘hello’;//a “h” b ”e” 
let {length:len} =“hello” //数组对象属性解构赋值 len = 5
  1. 数值和布尔解构赋值
let {toString:s} = 123;
s === Number.prototype.toString // true
let {toString:s} = true;
s === Boolean.prototype.toString //true

解构赋值的规则是如果等号右边不是数组或者对象就先把它转为对象

  1. 函数参数解构赋值
function add([x,y]){
    return x+y;
}
//参数表面上是个数组,当传入时就被解构成变量需x y
//默认值
function move({x:0,y:0}=>{}){
    return [x,y];
}
//参数是一个对象
move(1,1);//[1,1]
move(1);//[1,0]
move();//[0,0]
move({})//[0,0]
  1. 用途
    1. 变量交换
let x = 1;
let y = 2;
[x,y] = [y,x];
  1. 返回多个值
function test(){
    return [1,2,3];
}
let [x,y,z] = test();
  1. 参数定义(可以方便参数和变量名对应)
function test([x,y,z]){}
//test({x:1,z:2,y:3});
  1. 提取JSON
let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

5.函数参数默认值
6.遍历(任何部署了Iterator都可以 for…of循环遍历)

const map = new Map();
map.set(‘first’,’hello’);
map.set(’second’,’world’);
for(let[key,value] of map){
    console.log(key + " is " + value);
}

7.输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map");

函数的扩展

  1. 函数参数的默认值
function log(x,y = 'world'){
    console.log(x,y);

}
log(hello)//hello world
log(hello,china) //hello china
log(hello,'')//hello world

//参数变量是默认声明的,所以不能用let或const再次声明
//使用函数参数默认值,不能够有同名参数
//参数传值,惰性求值
//函数的length属性,
(1)制定了默认值,length属性将失真
(2)rest参数失真
(3)默认值后面的参数失真
//参数作用域:函数作用域
//应用
(1)利用参数默认值,指定一个参数不能省略
  1. rest参数
 形如(...变量名)
 function add(...values){
    let sum = 0;
    for(var val of values){
        sum += val;
    }
    return sum;
 }
add(1,2,3)//6;
//rest参数后面不能再有其他参数,它只能是最后一个
  1. 严格模式
  ES5开始函数内部可以设定严格模式
  function doSomething(a,b){
    'use strict';
    //code
  }
  //使用了默认值,rest表达式,解构赋值,扩展运算符就不能显式为严格模式,会报错
  1. name属性
    1. 匿名函数赋值给变量 name返回的是变量名
    2. name返回函数名
    3. Function构造函数返回函数实例 返回 anonymous
    4. bind返回的加上前缀 bound
  2. 箭头函数
 ES6允许使用箭头(=>)定义函数
 var f = v => v 
 等效于
 varf = function(v){
     return v;
 }
 //无参数
 ()=> {}
 //单个参数
 (x) => {}
 //多个参数
 (x,y) =>{}
 //解构参数
 ({x,y})=> {}
 //嵌套使用
 
 this指定固定化:并不是因为内部有绑定的this,而是本身有this,导致内部的this就是外部代码块的this
  1. 尾调用调优
  2. 函数参数的尾逗号
  3. Function.prototype.toString()
  4. catch命令的参数省略

Generator函数语法

  1. 介绍
    generator是ES6异步编程解决方案,遍历器,返回多个值、function* ,yield
    function* hello(){
        yield 'hello',
        yield 'world',
        yield 'nice';
    }
    var hw = hello();
    该函数有三个状态
  1. generator异步应用
    • 传统方法:回调函数
    • Promise对象 then
    • thunk函数(传参数,代替传计算结果的值,带有callback的两个参数转换成一个参数,thunk自动流程执行)
    • co模块
上一篇 下一篇

猜你喜欢

热点阅读