ES6 学习笔记

最新推荐文章于 2025-12-19 15:51:19 发布

转载最新推荐文章于 2025-12-19 15:51:19 发布 · 191 阅读

文章标签：

#es6 #学习笔记

学习笔记专栏收录该内容

14 篇文章

订阅专栏

本文详细介绍了从ES6到ESNext的JavaScript语言发展过程，包括每年的标准更新、提案流程及不同版本的重要特性，如let和const变量声明、解构赋值、字符串模板、函数改进等。

ES6 -> ECMA 标准

ES7 ES8.....

ES5.x

ECMA-262 -> ES1.0
--------------------------------------------
ES2015

ES6 -> 2015年6月 ES6.0

每年6月份，发布一个版本

2016年6月 ES6.1 ES7 ES2016
2017年6月 ES6.2(async await) ES8 ES2017

ESnext
---------------------------------------------
ESnext '下一代 js'语言
----------------------------------------------
任何人都可以向标准委员会 (TC39), 要求更改语言标准

提案变成标准，经历5个阶段
   Stage 0   展示阶段
   Stage 1   征求意见阶段
   Stage 2   草案阶段
   Stage 3   候选阶段
   Stage 4   定案阶段(标准)

babel
----------------------------------------------
https://github.com/tc39/ecma262

----------------------------------------------

react， vue, angularJs， angular

chrome, 对新的语法支持，速度还挺猛
----------------------------------------------
ES6环境:
webpack3.x

   Traceur
----------------------------------------------
关于定义(声明)变量:
   之前: var a=12;
       let a=12

   作用域:
       全局
       函数作用域

let 相当于之前的 var
const 常量，定义好了不能改变

   let注意:
       1. 没有预解析，不存在变量提升
           在代码块内，只要let定义变量，在之前使用，都是报错
           先定义完，在使用
       2. 同一个作用域里，不能重复定义变量
       3. for循环，for循环里面是父级作用域，里面又一个

   块级作用域:
       {
           //块级作用域
       }

       {{{{let a = 12}}}}

       if(){xx}
       for(){}
       while(){}

const: 特性和let一样
const定义变量不能修改

const定义完变量，必须有值，不能后赋值，不能修改

Object.freeze(对象)

       const config={
           host:
           username:
           password:
           version:
       }

   {
       //TODO
   }

   IIFE
   (function(){
       //TODO
   })()

   建议:
       以后就用 let 不要在使用var

       const http = require('http');
======================================
解构赋值:
   * 非常有用，特别在做数据交互 ajax

let [a,b,c] =[12,5, 6];

注意: 左右两边，结构格式要保持一致

   json:
       let {name,age, job} = {
       name:'Strive',
       age:18,
       job:'码畜'
       };

let {name:n,age:g, job:a} = json;

解构时候可以给默认值：
let [a,b, c="默认值"] = ['aaa','bbb'];

let a = 12;
let b = 5;

   import {a,b,c} from './mod'
======================================
字符串模板:
   `` 字符串模板：
       优点: 可以随意换行
       ` ${变量名字}`
   字符串连接，要死人的。

   let name ='Strive';
   let age = 18;
   let str = `这个人叫${name}, 年龄是 ${age}岁`;

   关于字符串一些东西:
       字符串查找:
           str.indexOf(要找的东西) 返回索引(位置) ，没找到返回-1
           str.includes(要找的东西) 返回值 true/false

判断浏览器: includes

http://www.xxx.xx

字符串是否以谁开头:
str.startsWith(检测东西)

           检测地址
       字符串是否以谁结尾:
           str.endsWith(检测东西)

.png

重复字符串:
str.repeat(次数);

   填充字符串:
       str.padStart(整个字符串长度, 填充东西) 往前填充
       str.padEnd(整个字符串长度, 填充东西) 往后填充

       str.padStart(str.length+padStr.length, padStr)
============================================
函数变化:
   1. 函数默认参数
       function show({x=0,y=0}={}){
       console.log(x,y);
       }
       show()
   2. 函数参数默认已经定义了，不能再使用let，const声明
       function show(a=18){
       let a = 101; //错误
       console.log(a);
       }
       show()

扩展运算符、Rest运算符:
...

展开数组

   ... :
       [1,2,3,4] -> ... [1,2,3,4] -> 1,2,3,4,5
   ...:
       1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]

剩余参数: 必须放到最后

箭头函数:
=>

let show = () => 1;

() => return东西

   () =>{
       语句
       return
   }

   注意:
       1. this问题, 定义函数所在的对象，不在是运行时所在的对象
       2. 箭头函数里面没有arguments, 用 ‘...’
       3. 箭头函数不能当构造函数