快速熟悉ES6语法

本文详细介绍了ES6(ECMAScript 6)的多项核心特性,包括let和const、解构赋值、字符串模板、箭头函数、尾调用优化、Promise、模块化、类和继承等。通过实例解析,帮助开发者快速掌握并运用这些新特性,提升前端开发效率。
摘要由CSDN通过智能技术生成

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值