美文网首页JavaScript 进阶营
ES(ECMAScript)6知识点总结(一)

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

作者: 文艺的程序狗 | 来源:发表于2020-03-20 11:05 被阅读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模块

相关文章

  • 变量的解构赋值

    es6的一些知识点,阅读ECMAScript 6 入门心得和总结 数组的解构赋值

  • 函数的扩展

    es6的一些知识点,阅读ECMAScript 6 入门心得和总结 参数默认值 ES6 允许为函数的参数设置默认值,...

  • let 和 const 命令

    es6的一些知识点,阅读ECMAScript 6 入门心得和总结 let let命令所在的代码块内有效 let 不...

  • ES6总结(一) 初识

    es6总结 往期文章 ES5总结 1.es6简介 回顾javascrip组成:核心(ECMAScript)由ECM...

  • ECMAScript 6(1)

    ECMAScript 6 ECMAScript 6也称为ES6和ECMAScript 2015 回顾es5 一:严...

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

    let和constes6出来代码块的概念,let作用域在代码块里,脱离代码块就不存在var 先使用后声明会提示un...

  • 常用ECMAScript6知识点总结

    本文总结了相对常用的ES6知识及语法,参考阮一峰老师《ECMAScript 6 入门》,地址:http://es6...

  • JavaScript进阶

    一、ES6基础 1. ECMAScript 6 简介 ECMAScript(ES6) 是JavaScript语言的...

  • 前端知识-ECMAScript 6

    一、ECMAScript 6 1、什么是 ECMAScript 6 ECMAScript 6.0(简称 ES6)是...

  • ES6(玺哥篇)

    ES6 - ECMAScript 6.0(ES2015) ECMAScript 6.0(以下简称 ES6)是 Ja...

网友评论

    本文标题:ES(ECMAScript)6知识点总结(一)

    本文链接:https://www.haomeiwen.com/subject/cindyhtx.html