ES全程ECMAScript,是一项脚本语言的标准化规范
1.ES6新增了用于声明变量的关键字
let
(1)let声明的变量只在所处的块级有效
(2)let声明的变量不存在变量提升,只能先声明再使用
(3)暂时性死区特性,在块级作用域使用let声明的变量,这个变量会和块级区整体绑定,块级区内let变量和块级区外面的变量没有任何关系。
作用:防止循环变量变成全局变量
比如:
if(true){
let a=10;
if(true){
let b=10;
}
console.log(b);//会报错,b is not defined
}
console.log(a); //报错 a is not defined
var tmp='123;
if(true){
console.log(tmp); //会报错,因为let 声明的tmp和这个块整体绑定,声明前使用会报错
tmp='abc';
let tmp;
}
经典面试题:
var arr=[];
for(var i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0](); //输出2
arr[1](); //输出2
let arr=[];
for(let i=0;i<2;i++){
arr[i]=function(){
console.log(i);
}
}
arr[0](); //输出0
arr[1](); //输出1
新增const关键字
作用:声明常量,常量就是内存地址(值)不能变化的量
(1)const声明的变量具有块级作用域
(2)const声明的常量必须赋初始值
(3)const声明的常量,赋值后,值不能更改
例1:
const PI=3.14;
PI=100;//报错
const arr=[1,2];
arr[0]=2;
arr[1]=3;
console.log(arr);//输出【2,3】
arr=['a','b'];//会报错
let、const、var声明的变量的区别:
var声明的变量,作用域在该语句所在的函数内,【函数级作用域】存在变量提升现象。
let声明的变量,作用域在该语句所在的代码内【块级作用域】,不存在变量提升现象。
const声明的变量是常量,不能更改常量的值。【块级作用域】
解构赋值(分解数据结构,为变量赋值)
ES6中允许我们按照一一对应方式从数组或对象中提取值,再将提取来的值赋值给变量。解构赋值能让我们简便地从数组或对象当中提取值。
数组解构
let [a,b,c]=[1,2,3];
console.log(a);
console.log(b);
console.log(c);
如果解构不成功,也就是等号左边的变量数不等于右边的变量数。变量值会变成undefined
对象解构
对象解构允许我们使用变量的名字匹配对象的属性,匹配成功,就将对象属性的值赋值给变量。
写法一:变量名字和对象中属性名字必须一样
let person={ name:'zhangsan‘,age:20};
let {name,age}=person;
console.log(name);
console.log(age);
写法二:支持变量名字和对象中属性名字不一样
let {name:myName,age:myAge}=person;//起别名,匹配:左边的属性,匹配成功就把值赋值给myName
console.log(myName);
console.log(myAge);
箭头函数(作用:简化函数定义语法)
ES6中新增的定义函数的方式
()=>{}
比如:
const fn=()=>{
console.log(123);
}
fn();
注意1:如果函数体中只有一句代码,且代码的执行结果就是返回值,可以省略大括号。
传统方式:
function sum(num1,num2){
return num1+num2;
}
箭头函数方式:
const sum=(num1,num2)=>num1+num2;
注意2:如果形参只有一个,可以省略小括号
传统方式:
function fn(v){
return v;
}
const fn=v=>v;
注意3:箭头函数不绑定this关键字,箭头函数中的this,指向的是函数定义位置的上下文this
const obj={name:'张三'}
function fn(){
console.log(this);
return ()=>{ //箭头函数被定义在了fn函数内部,所以箭头函数的this指向fn内部this
console.log(this);
}
}
const resFn=fn.call(obj);//接收匿名函数
resFn();
案例:
var obj={
age:20,
say:()=>{
alert(this.age);//这里定义在obj对象里,但obj是个对象,不能产生作用域,所以箭头函数实际上是定义在全局作用域下,this //指向window,即undefined
}
}
obj.say();
剩余参数(允许将一个不定数量的参数表示为一个数组)
function sum(first,...args){
console.log(first);
console.log(args);
}
sum(10,20,30);
const sum=(...args)=>{//表示接受所有参数
let total=0;
args.forEach(item=>total+=item)
return total;
};
剩余参数和解构配合使用
let students=['lkq','zyy','250'];
let [s1,...s2]=students;
console.log(s1);
console.log(s2);
扩展运算符(将数组或对象转为用逗号分割的参数序列)
let arr=[1,2,3];
...arr
console.log(..arr); //逗号被当做参数分隔符,所以输出没有逗号 1 2 3
扩展运算符的应用
Array的扩展方法
1.合并数组
方法一:
let arr1=[1,2,3];
let arr2=[2,3,4];
let arr3=[...arr1,...arr2];
方法二:
arr1.push(...arr2);
2.将类数组或可遍历对象转换为真正的数组后,就可以调用数组的那些方法
let o=document.getElementByTagName('div');
o=[...o];
3.Array.from()
意义同2
let arr={
'0':'a',
'1':'b',
'2':'c',
length:3
};
let arr2=Array.from(arr);
注意:还可以加第二个参数,可以对每个元素进行处理,将处理后的值放入返回的数组
let newArr=Array.from(arr,item=>item*2)
4.find()找到第一个符合条件的数组成员,没有返回Undefined
let arr=[ {
id:1,
name:'zs'
},{
id:2,
name:'ls'
}];
let target=arr.find((item,index)=>item.id==2);
5.findIndex():查找第一个符合数组成员的位置,如果没有找到返回-1
let arr=[1,5,10,15];
let index=arr.findIndex((value,index)=>value>9);
console.log(index);
6.includes():表示某个数组是否包含给定的值,参数是想判断的那个数,true代表包含
[1,2,3].includes(2); ---------true
String的扩展方法
1、模板字符串
是ES6中新增的声明字符串的方法,反引号定义
let name=`zhangsan`;
(1)模板字符串中可以解析变量
let name='张三';
let sayHello=`hello,my name is ${name}`;
(2)模板字符串内容可以换行
let str=`第一行
第二行
第三行`;//``这里怎么写就怎么显示
(3)模板字符串中可以调用函数
const sayHello=function(){
return "来啊,客官,里面请";
};
let greet=`${sayHello()} `请`;
console.log(greet);//返回 请来啊,客官,里面请
2.startsWith()和endsWith()
startsWith():表示参数字符串是否在原字符串的头部,返回布尔值
endsWith():表示参数字符串是否在原字符串尾部,返回布尔值
比如:
let str='hello world!';
console.log(startsWith('hello')); -----true
console.log(endsWith('!'));-------true
3.repeat():将原字符串重复n次,返回一个新的字符串
'x'.repeat(2); ------返回'xx'
set数据结构
ES6提供新的数据结构set,它类似于数组,但成员值唯一,没有重复的值。
Set本身是一个构造函数,用来生成Set数据结构
比如:
const s=new Set(["a","b"]);
应用:数组去重
const s=new Set(["a","a","b","b"]);
const arr=[...s];
console.log(arr);
实例方法:
add(value):添加某个值,返回set结构本身
delete(value):删除某个值,返回一个布尔值
has(value):返回一个布尔值,表示该值是否为set成员
clear():清除所有成员,没有返回值
Set的遍历:
const s=new Set(['a','a','b','c']);
s.forEach(value=>console.log(value))