ES6语法

ES6语法

let const

let const var的区别

var	let	const
全局作用域	块作用域	块作用域
存在变量提升	不存在变量提升	不存在变量提升
值可变	值可变	值不可变

解构赋值

按照数组或对象依次对应的位置赋值

• 数组解构

let ary=[1,2,3];
let [a,b,c]=ary;

• 对象解构

let person={ name:'zhangsan', age:'20' };
let {name,age}=person;

// 使用别名
let person={ name:'zhangsan', age:'20' };
let {name:myName,age:myAge}=person;

箭头函数

()=>{}
// 赋值给一个常量
const fn=()=>{};
fn();
// 如果函数体只有一行代码且代码结果就是返回值，那么可以省去大括号
const sum =(num1,num2)=>num1+num2;
sum(10,20);
// 形参只有一个，那么可以省略小括号
const fn=v=>v*2;
fn(20)

• this
  箭头函数没有自己的this,在使用this的时候只能指向当前的this

function fn(){
	console.log(this);
	return ()=>{
		console.log(this);
	}
}
const obj = {name:'zhangsan'};
// call可以改变fn当前的this到obj
const resfn=fn.call(obj);
resfn();

例题

var age=100;
var obj={
	age:20,
	say:()=>{
		alert(this.age);
	}
}
// 此题目在说明对象不能产生作用域，对象里的this指向window中的变量
obj.say()

模板字符串

反引号之间的字符
变量使用${}调用

• 可以解析变量
• 可以不加任何东西换行
• 可以调用函数

string扩展方法

//判断是否以***开头
startsWith();
//判断是否以***结尾
endsWith();
//将原字符串重复n次
repeat();

Set数据结构

Set数据结构类似于数组，但成员唯一，没有重复

const s1=new Set([1,2,3,4,5,6,6]);
s1.size

• 利用Set数组去重

const s2=new Set(['a','b','a']);
// 扩展运算符加上中括号便数组
const ary=[...s3];

• 利用Set存储搜索关键词

Set实例方法

const s=new Set();
// 添加值，返回Set本身
s.add(1).add(2);
//删除值，返回bool
s.delete(2);
//判断是否拥有值，返回bool
s.has(1);
//清空，无返回值
s.clear()

遍历Set

const s3=new Set(['a','b','a']);
s3.forEach(value=>{
	console.log(value)
})

Array扩展方法

• Array.from()

// 将类数组或可遍历的对象转换为真正的数组
// obj为类数组或对象
// fun可对该对象进行进一步加工
Array.from(obj,fun);

• Array.find()
  找出第一个符合条件的数组，没找到则返回undefined
• Array.findIndex()
  找出第一个符合条件的位置，没找到则返回-1
• Array.includes()
  表示某个数组是否包含给定的值

扩展运算符
去掉数组的中括号

// 合并数组
// 法一
let ary1=[1,2,3]
let ary2=[4,5,6]
let ary3=[...ary1,...ary2]
// 法二
ary1.push(...ary2)
console.log(ary3)

将扩展运算符+中括号可以将伪数组转换为真正的数组

剩余参数

// 接受所有实参，保存在数组
const sum=(...args)=>{
  let total=0;
  args.forEach(item=>total+=item)
  return total
}
console.log(sum(10,20))
console.log(sum(10,20,30));

• 与解构配合使用

let ary=['张三','李四','王五']
let [s1,...s2]=ary
console.log(s1)
console.log(s2)