阅读 110

ES6语法(一)

ES6在ES5标准上新增了一些语法标准,下面取一些常用的列举

1、声明变量:

新增let/const关键字,用于变量声明,在var的基础上,新增块级作用域概念。 (原来的var定义变量,只有全局作用域与函数内部局部作用域之分)

使用let定义变量时,有以下优点:

(1)没有预解析,不存在变量提升,必须先定义,再使用;

(2)同一作用域内不能重复定义变量;

(个人认为语法更加严谨,不会造成变量污染)

const特性和let相似,不过用于定义常量。

2、解构赋值:

数组解构赋值:

let [a,[b,c]] = [2,[3,4]];//注意解构赋值时,左右两边格式必须保持相同
console.log(a,b,c);
复制代码

对象解构赋值:

let json={
    name:"李浩",
    age:21,
    job:"前端"
};
let{name:a,age,job}=json;//可以用":"给解构赋值变量一个别称,方便使用
console.log(a,age,job);
复制代码

赋值时还可以给默认值

let[a,b,c="暂无数据"] = [12,10];
复制代码

除此之外,解构赋值还可以用于函数中,比如函数返回值解构和函数传参解构,在实际应用中非常实用。

3、字符串模板

(1)字符串连接

ES6中字符串连接可以使用``引用字符串,并且引用变量的方式也发生了改变,且允许字符串随意换行

`xxxxxxx${a}xxxxxxxxx`
复制代码

(2)字符串查找

str.includes(),返回true/false

str.indexOf(),返回索引,没有则返回-1

(3)检测是否以xx开头、结尾

str.startsWith(),(检测协议http)

str.endsWith(),(检测文件格式)

(4)重复

str.repeat(),(字符串重复)

4、函数

(1)函数默认参数

fn(a=12,b=15){  //在形参中给默认值,并不影响后续运算,a和b还可以赋值
}
复制代码

(2)函数的参数是默认被定义过的,不可以再使用let/const定义

fn(a,b){
    let a=12;  //错误示范:重复定义
}
复制代码

(3)扩展运算符...

常用于数组操作:

...1,2,3,4,5=>[1,2,3,4,5]

...[1,2,3,4,5]=>1,2,3,4,5

[1,2,3,4,5]=>[a,b,...c] //剩余运算

(4)箭头函数

fn()=>{
    
};
复制代码

箭头函数的好处:

1、箭头函数中的this指的就是定义函数时所在的对象,而不再是运行函数时的对象;

2、箭头函数里不能使用arguments,作为替代可以使用扩展运算符...

3、箭头函数不能作为构造函数使用;

5、数组

(1)循环

先列举一些ES5中就存在的数组循环函数:

arr.forEach(function(value,index,arr){
    
});
复制代码

arr.forEach()函数可用于数组循环,以一个回调函数作为参数,回调函数参数为数组每一项的值、索引、整个数组,下面几个函数也是如此;

arr.map()函数,参数同上,该函数非常常用,可以用于数据交互、映射,不同于arr.forEach()函数的是它有返回值,返回一个新数组。可以用于整理数据;

arr.filter()函数,参数同上,有返回值,用于筛选过滤,如果回调函数返回true,则留下;

arr.some()函数,参数同上,查找有无符合条件的项;

arr.every()函数,参数同上,判断是否全部符合条件;

下面这个是ES6新增:for...of循环

for(let val of arr){
    
}
for(let index of arr.keys()){
    
}
for(let item of arr.entries()){
    
}
复制代码

(2)数组的其余函数

arr.from():用于把类数组(一组元素、arguments)对象转化成数组;

arr.of():用于把一组元素转成数组;

arr.find():找出第一个符合条件的成员;

arr.findIndex():返回第一个符合条件成员的索引;

arr.includes():判断是否包含某元素;


先更到这里,后面会继续补充。。。

关注下面的标签,发现更多相似文章
评论