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
let&const
关于定义(声明)变量:
之前: var a=12;
let a=12
作用域:
全局
函数作用域
let 相当于之前的 var
const 常量, 定义好了不能改变
let注意:
1. 没有预解析,不存在变量提升
在代码块内,只要let定义变量,在之前使用,都是报错
先定义完,在使用
2. 同一个作用域里, 不能重复定义变量,但是在不同作用域内可以重复定义
3. for循环,for循环里面是父级作用域,里面又一个
块级作用域:
{
//块级作用域
}
{
{
{
{let a = 12}}}}
if(){xx}
for(){}
while(){}
const
实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指向实际数据的指针,const
只能保证这个指针是固定的(即总是指向另一个固定的地址),至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。
const: 特性和let一样
const定义变量不能修改
const定义完变量,必须有值,不能后赋值,不能修改
Object.freeze(对象):是此对象不可修改
const config={
host:
username:
password:
version:
}
建议:
以后 就用 let 不要在使用var
const http = require('http');
======================================
解构赋值:
ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构
* 非常有用,特别在做数据交互 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. 箭头函数不能当构造函数
箭头函数有几个使用注意点。
(1)函数体内的this
对象,就是定义时所在的对象,而不是使用时所在的对象。
(2)不可以当作构造函数,也就是说,不可以使用new
命令,否则会抛出一个错误。
(3)不可以使用arguments
对象,该对象在函数体内不存在。如果要用,可以用 rest 参数代替。
(4)不可以使用yield
命令,因此箭头函数不能用作 Generator 函数。
上面四点中,第一点尤其值得注意。this
对象的指向是可变的,但是在箭头函数中,它是固定的。
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo.call({
id: 42 });
// id: 42
上面代码中,setTimeout
的参数是一个箭头函数,这个箭头函数的定义生效是在foo
函数生成时,而它的真正执行要等到 100 毫秒后。如果是普通函数,执行时this
应该指向全局对象window
,这时应该输出21
。但是,箭头函数导致this
总是指向函数定义生效时所在的对象(本例是{id: 42}
),所以输出的是42
。
箭头函数可以让setTimeout
里面的this
,绑定定义时所在的作用域,而不是指向运行时所在的作用域。下面是另一个例子。
function Timer() {
this.s1 = 0;
this.s2 = 0;
// 箭头函数
setInterval(() => this.s1++, 1000);
// 普通函数
setInterval(function () {
this.s2++;
}, 1000);
}
var timer = new Timer();
setTimeout(() => console.log('s1: ', timer.s1), 3100);
setTimeout(() => console.log('s2: ', timer.s2), 3100);
// s1: 3
// s2: 0
上面代码中,Timer
函数内部设置了两个定时器,分别使用了箭头函数和普通函数。前者的this
绑定定义时所在的作用域(即Timer
函数),后者的this
指向运行时所在的作用域(即全局对象)。所以,3100 毫秒之后,timer.s1
被更新了 3 次,而timer.s2
一次都没更新。
尾调用、尾递归
递归非常耗费内存,因为需要同时保存成千上百个调用帧,很容易发生“栈溢出”错误(stack overflow)。但对于尾递归来说,由于只存在一个调用帧,所以永远不会发生“栈溢出”错误。
function factorial(n) {
if (n === 1) return 1