JavaScript学习14-ES6

ES6简介

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

ES6新增语法

let

ES6新增的关键字，用于声明变量的关键字。
let不允许重复声明变量。

let a = 10;
let a = 20;   //不能重复定义

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);  

常量的值不允许修改。

const a = 10;
a = 20;   //报错，不允许给常量赋值

对于数组和对象的修改不算对常量的修改，不会报错。

const arr = [100,200];
arr.push(300);    //不报错，因为没有修改地址

解构赋值

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

let obj ={
	say: function(){
		console.log('sya hi')
	}
}
let {say} = obj;
say();    //不通过对象调用函数

对象写法简化

ES6允许在大括号里直接使用变量和函数名作为对象的属性和方法。

let name = "zs";
let age = 10;
let say = function(){
	console.log('say hi')
}
let obj = {
	name,
	age,
	say
}

对象里声明函数可以省略function关键字。

let obj = {
	say:function(){}
}
//等价于
let obj = {
	say(){}
}

箭头函数

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对象，这里把this指向了obj对象
resFn();   //obj对象

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

箭头函数不能作为构造函数实例化对象。

let Person = (name,age) => {
	this.name = name;
	this.age = age;
}
let obj = new Person('za',10);
console.log(a);  //报错

箭头函数不能使用arguments变量。

let fn = () =>{
	console.log(arguments);     //变量未定义
}
fn(1,2,3);

函数参数初始值

ES6允许给函数参数赋初始值，赋初始值的参数一般放后面。

function add(a,b,c){
	console.log(a);
	console.log(b);
	console.log(c);   
}
function add2(a,b,c=10){
	console.log(a);
	console.log(b);
	console.log(c);   
}
add(1,2);   //1 2 undefined
add2(2,3);   // 2 3 10
add2(2,3,4);   //2 3 4

与解构一起使用。

function add({name="aa",age,sex}){
	console.log(name);
	console.log(age);
	console.log(sex);
}
add({
	age:20,
	sex:"male"
});    // aa 20 male
add({
	name:"zs",
	age:20,
	sex:"male"
});    // zs 20 male

剩余参数(rest参数)

ES5获取参数，得到的是对象

function func(){
	console.log(arguments);
}
func('a','b','c');   //{a,b,c}   这里是对象

ES6获取参数，得到的是数组，可以使用数组的方法如filter,some,every,map…

const sum= (...args) => {
	console.log(args);   //[10,20,30]   这里是数组
	let total=0;
	args.forEach(item => total += item);
	return total;
}
sum(10,20,30);

rest参数必须放在最后。

function func(a,b,...args){
	console.los(a);
	console.log(b);
	console.log(args);
}
function func2(a,...args,b){
	console.los(a);
	console.log(b);
	console.log(args);
}
func(1,2,3,4,5);   //1 2 [3,4,5]
func2(1,2,3,4,5);   //报错

剩余参数和解构配合使用

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 2 3

function func(){
	console.log(arguments);
}
func(...arr);   //[1,'pink',3]    相当于 func(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 arr1 = [1,2,3];
let arr2 = [...arr1];
console.log(arr2);   //1 2 3

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

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

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>xxx</a>
				</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) );