JavaScript-ES6

ES6概念

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ES6语法

1.var、let、const关键字

1.1 let局部变量

• 1.局部作用域(用一对{}开启),变量只在所处的块级有效

if (true) { 
  var a = 10; // 使用 var
}
console.log(a) // 10
// 如果是使用 var，即使是在{}外面也能正常访问 a，这显然是不合理的
if (true) { 
  let a = 10; // 使用 let
}
console.log(a) // 报错：a is not defined

• 2.不能变量提升,可以防止循环变量变成全局变量

for (var i = 0; i < 2; i++) {} // 使用 var
console.log(i); // 2  i变成了全局变量

for (let i = 0; i < 2; i++) {} // 使用 let
console.log(i); // 报错：i is not defined

• 3.变量必须先声明再使用

console.log(a);
var a = 20; // 使用 var
// 打印：undefined

console.log(a); // 报错：Cannot access 'a' before initialization
let a = 20; // 使用 let

1.2 const常量

声明常量，常量就是值或者内存地址不能变化的量

• 1.具有块级作用域

if (true) { 
    const a = 10;
}
console.log(a) // a is not defined

• 2.声明常量时必须赋值

const b; // 报错：Missing initializer in const declaration

• 3.常量赋值后，值不能修改

//对于基本数据类型，值不能修改
const PI = 3.14;
PI = 100; // Assignment to constant variable. 

//对于复杂数据类型，指针指向的内容不能修改
const ary = [100, 200];
ary[0] = 'a';
ary[1] = 'b';
console.log(ary); // ['a', 'b']; 
ary = ['a', 'b']; // 报错：Assignment to constant variable.

1.3 var、let、const的区别

var	let	const
全局作用域	局部作用域	局部作用域
变量提示	不能变量提升	不能变量提升
值可更改	值可更改	值不可更改

2.解构

2.1数组解构

允许我们按照一一对应的关系从数组中提取值，然后将值赋值给变量

let [a, b, c, d, e] = [1, 2, 3]; //等号左边不代表数组，代表结构，里面是变量，等号右边是数组
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined
console.log(e) //undefined
// 如果解构不成功，变量的值为undefined
var arr=[1,2,3,4,5]
var [a,b,...rest]=arr
console.log(a,b,rest) //a:1;b:2;rest:[3,4,5]

2.2对象解构

允许我们使用变量的名字匹配对象的属性，如果匹配成功，将对象属性的值赋值给变量。

let [a, b, c, d, e] = [1, 2, 3]; //等号左边不代表数组，代表结构，里面是变量，等号右边是数组
console.log(a) //1
console.log(b) //2
console.log(c) //3
console.log(d) //undefined
console.log(e) //undefined
// 如果解构不成功，变量的值为undefined
var obj={name:"binbin",age:"18",eye:"2",leg:"4"}
var {name,age,leg,...rest}=obj
console.log(name,age,leg,rest) //输出结果:binbin 18 4 {eye:"2"}

3.箭头函数

ES6中新增的快速定义函数的方式，用来简化函数定义语法。

() => {}  // ()代表是函数，=>必须要的符号，指向哪一个代码块，{}函数体
const fn = () => {} // 代表把一个箭头函数赋值给fn

3.1.函数体中只有一句代码，且代码的执行结果就是返回值，可以省略大括号

//传统写法 
function sum(num1, num2) { 
     return num1 + num2; 
 }
//es6写法
const sum = (num1, num2) => num1 + num2; 

3.2.如果形参只有一个，可以省略小括号

//传统写法 
function fn (v) {
     return v;
 } 
//es6写法
const fn = v => v;

3.3.箭头函数的this

调用方式	this指向
普通函数调用	window
构造函数调用	实例对象,原型对象里面的方法也指向实例对象
对象方法调用	该方法所属对象
事件绑定	绑定事件对象
定时器	window
立即执行函数	window

箭头函数不绑定this关键字（也就是箭头函数没有自己的this），箭头函数中的this，指向的是函数上一层作用域的this

4.函数参数

4.1.函数的默认参数

function say(color="黑色"){
	alert("没有你的世界是"+color+"的")
}
say()
say("五彩斑斓")

4.2.函数的拓展实参(调用)

//在函数调用时把数组传入拓展
function meeting(a1,a2,a3){
	console.log(`参加这次聚会的有${a1},${a2},${a3}`)
}
var arr=["沸羊羊","双面龟","黑小虎","你"]
meeting(...arr)
meeting.apply(null,arr)

4.3.函数的不定参数(定义时)

function add(...list){ //把所有单个参数,接收为一个叫list的数组
alert(list.reduce((a,b)=>a+b))
}
add(1,2,3,4)

5.字符串扩展方法

5.1.遍历

var str="yue𠮷口"
for(var i=0;i<str.length;i++){
	console.log(str[i])
}
//es6------for of遍历
for(let k of str){
	console.log(k)
}

5.2.trim去除两端空白

var str="     喜洋洋 美羊羊 懒洋洋 沸羊羊"
console.log(str.trimLeft()) //trimLeft:去除左端空白,trimRight:去除右端空白

5.3.repeat重复

console.log("远\n".repeat(100))//重复执行100次

5.4.includes检测是否包含,返回boolean

var str="四大舔狗:双面龟,黑小虎,沸羊羊,你"
alert(str.includes("你"))//true

5.5.startwidth,endwidth 以…开头/结尾,返回boolean

var str="我爱你"
console.log(str.startsWith("我"))

5.6.padStart(位数,填充字符串),padEnd

var str="1"
console.log(str.padStart(3,"0")) //结果:001
console.log(str.padEnd(5,"1")) //结果:11111

5.7.``字符串模板

ES6新增的模板字符串，使用反引号定义
模板字符串中可以解析变量，格式是：${变量名}

在模板字符串中可以调用函数，格式是：${函数调用}
模板字符串中可以换行

var s="四大舔狗"
var str=`${s.length>4?"噜啦":"呼呼"}:沸羊羊,黑小虎,双面龟,你`
console.log(str)