JavaScript学习14-ES6

ES6简介

ES的全称：ECMAScript，由ECMA国际标准化组织制定的一项脚本语言的标准化规范。
ES6泛指ES2015及以后的版本

ES6新增语法

let

ES6新增的关键字，用于声明变量的关键字。
let声明的变量只在所处的块级有效。

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

let可以防止循环变量变成全局变量。

for(let i=0;i<10;i++){}
console.log(i);  //i is not defined

let不存在变量提升。

console.log(a);  //a is not defined
let a=10;

let声明的变量具有暂时性死区特性

var num=10;
if(true){
	console.log(num);   //num is not defined
	let num=20;
}

经典面试题
var声明i是全局变量，循环过后就变成了10，函数执行时输出的是全局变量的值

var arr=[];
for (var i=0;i<10;i++){
	arr[i]=function(){
		console.log(i);
	}
}
arr[0]();   //10
arr[1]();   //10

let每次循环都会生成一个块级作用域，每个块级作用域的变量都是不同的。

var arr=[];
for (let i=0;i<10;i++){
	arr[i]=function(){
		console.log(i);
	}
}
arr[0]();   //0
arr[1]();   //1

const

声明变量，声明时必须赋值，常值就是值（内存地址）不变的量，也是块级作用域，不存在变量提升。

const arr=[100,200];
arr[0]='a';
console.log(arr);   //['a',200]
arr=['a',100];     //到这行报错，不允许修改
console.log(arr);  

解构赋值

ES6允许从数组中提取值，按照对应的位置，对变量赋值，对象也可以解构。
数组解构允许按照一一对应关系从数组提取值赋给变量。
解构不成功变量的值为undefined。

let [a,b,c]=[1,2,3];
console.log(a);    //1

对象解构允许使用变量的名字匹配对象的属性，匹配成功将属性的值赋给变量。

let person={name:'zhangsan',age:18};
let {name,age}=person;
console.log(name);   //zhangsan
console.log(age1);   //undefined

let {name:myName,age:myAge}=person;
console.log(myName);   //zhangsan

箭头函数

ES6新增定义函数方式

() => {}
const fn=() => {}

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

function sum(num1,num2){
	return num1+num2;
}
const sum = (num1,num2) => num1 + num2;

形参只有一个可以省略小括号。

function fn(v){
	return v;
}
const fn = v => v;

箭头函数不绑定this关键字，箭头函数中的this，指向的是函数定义位置上下文this。

const obj={name:'xx'}
function fn(){
	console.log(this);
	return () => {
		console.log(this);
	}
}
const resFn=fn.call(obj);    //obj对象
resFn();   //obj对象

var age=10;
var obj={
	age:20,
	say:()=>{
		console.log(this)   
		console.log(this.age)   
	}
}
obj.say();   //window  10

剩余参数

const sum= (...args) => {
	let total=0;
	args.forEach(item => total += item);
	return total;
}
sum(10,20,30);

剩余参数和解构配合使用

let student={'小明','张三','李四'};
let [s1, ...s2]=student;
console.log(s1);  //小明
console.log(s2);  // ['张三'，'李四']

扩展运算符

可以将数组拆分成以逗号分隔的参数序列。

let arr=[1,'pink',3];
console.log(...arr);   //1 'pink' 3
console.log(1,2,3);    //1 'pink' 3

ES6内置对象扩展

Array的扩展方法

扩展运算符可以应用于合并数组

let arr1=[1,2,3];
let arr2=[4,5,6];
let arr3=[...arr1, ...arr2];
console.log(arr3);  //123456

let arr4=arr1.push(...arr2);
console.log(arr4);   //123456

扩展运算符可以将伪数组遍历转换为真数组

let divs=document.getElementsByTagName('div');
divs=[...divs];

Array.from() 构造函数方法

let arr={
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3	
};
let arr2=Array.from(arr);    //['a','b','c']

Array.from() 构造函数方法接受第二个参数，作用类似map方法，对数组进行操作然后返回操作后的数组

let arr={
	'0': 'a',
	'1': 'b',
	'2': 'c',
	length: 3	
};
let arr2=Array.from(arr, item => item+'x');    //['ax','bx','cx']

find()

用于找出一个符合条件的数组元素，有返回第一个符合条件的，没有返回undefined

let target=arr.find( (item,index) => item.id == 2 );    //找到id等于2的元素

findIndex()

用于找出第一个符合条件的数组元素下标，没有返回-1

let index=arr.findIndex( (value,index) => value > 5);   //找到第一个大于5的数的下标

includes()

数组是否包含给定值，返回布尔值

[1,2,3].includes(2)  //true
[1,2,3].includes(5)  //false

String的扩展方法

模板字符串

ES6新增创建字符串方式

用反引号  `` 定义
let name=`zhangsan`;

模板字符串可以解析变量

let name=`张三`;
let  sayHello=`hello,my name is ${name}`;  //hello,my name is 张三

模板字符串可以换行

let  sayHello=`<div>
					<a>xxxa>
				div>`;

模板字符串可以调用函数

const sayHello=function(){
	return 'hello';
}
let hi=`${sayHello()}`;    //hello

startsWith()和endsWith()

startsWith()：参数是否是字符串的开头，返回布尔值
endsWith()：参数是否是字符串的结尾，返回布尔值

let str='helloworld';
str.startsWith('he');  //true
str.endsWith('a');   //false

repeat()

返回原字符串重复n次后的新字符串

'x'.repeat(3);   //"xxx"

Set数据结构

ES6提供类似数组，但元素都是唯一的数据结构Set。
Set本身是一个构造函数，用来生成Set数据结构

const s=new Set();

Set可以接受一个数组作为参数，用来初始化

const s=new Set([1,2,3,3]);
// s: 123

实例方法

add(value)：添加某个值，返回set结构本身
delete(value)：删除某个值，返回布尔值，表示是否删除成功
has(value)：值是否为Set的元素，返回一个布尔值
clear()：清除所有元素，无返回值

set遍历

s.forEach(value => console.log(value) );