关于ES6
ES6是 JavaScript 语言的下一代标准，提供了有利于开发的新特性
1.变量与常量声明:
let 和 const 命令差别:let定义变量，可以被重新赋值;const定义常量，不能被重新赋值。
| let | const |
|---|---|
| 不会变量提升 | 不会变量提升 |
| 有块级作用域(大括号内的变量/常量无法被外部访问) | 有块级作用域 |
| 不能在同一作用域内重复声明，可以重新赋值 | 不能在同一作用域内重复声明，无法修改值（成为常量） |
2.对象快速赋值
<script>
let name = "jack";
let skill = "跳海";
let sayHi = function(){
console.log("rose,byebye");
};
let person = {
name,//等同于name:name
skill,//等同于skill:skill
sayHi,//等同于sayHi:sayHi
//方法的简写方式,等同于jump:function(){console.log("rose也一起跳了")}
jump(){
console.log("rose也一起跳了");
}
};
console.log(person.name);//jack
console.log(person.skill);//跳海
person.sayHi();//rose,byebye
person.jump();//rose也一起跳了
</script>
3.箭头函数(Arrow Function):
Ⅰ.常规函数的定义:
方式1:函数表达式
var fn1 = function(a, b) {
return a * b
}
方式2:函数式声明
function fn2(a, b) {
return a * b
}
Ⅱ.ES6箭头函数语法
| NO. | 语法 |
|---|---|
| 1. | 将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体 |
| 2. | 函数体只有只包含一个表达式，连{ ... }和return都可以省略掉 |
| 3. | 参数只有一个可以省略() |
如:
var fn = function(a,b){
return a*b;
}
console.log( fn(3,4) );//12
可以简写为:
var fn = (a,b)=>a*b;
console.log( fn(3,4) );//12
若是参数只有一个可以省略():
var fn = a=>a*4;
console.log( fn(3) );//12
注意:
如果要返回一个对象，这么写的话会报错：
// SyntaxError:
x => { foo: x }
应该要改成:
x => ({ foo: x })
箭头函数的作用:
| NO. | 语法 |
|---|---|
| 1. | 箭头函数this指向，由上下文确定 |
| 2. | 函数体只有一个表达式，连{ ... }和return都可以省略掉 |
| 3. | 参数只有一个可以省略() |
4.ES6模板字符串
模板字符串用于字符串拼接，用反引号标识
<script>
//模板字符串的应用:拼接字符串
let writer = "baojun";
//ES5
let point1 = "前端码农"+writer;
console.log(point1);//前端码农baojun
//ES6
let point2 = `编程菜鸡${writer}`;
console.log(point2);//编程菜鸡baojun
</script>
5.扩展运算符:
Ⅰ.从rest参数说起
rest参数就是用'...变量名'的形式替代了函数参数中的arguments对象,它是一个数组
<script>
function study (fist, ...rest) {
console.log(fist); //欢迎
console.log(rest); //["学习", "E", "S", "6"]
}
study("欢迎","学习","E","S","6");
//如果在参数中只传入rest参数的话,它代表的就是将所有arguments对象当成元素的数组
</script>
Ⅱ.扩展运算符:
其实就是rest参数的逆运算，用'...数组名'将一个数组转为用逗号分隔的参数序列
<script>
//扩展运算符的运用
//1.替代数组中的apply方法
let arr = [1,2,3];
function test (a,b,c) {
console.log(a);
}
//ES5写法
test.apply(null,arr);//1
//ES6写法
test(...arr)//1
//2.合并数组
let arr1 = [1,2];
let arr2 = [3,4];
let arr3 = [5,6]
//ES5写法
var arr4 = arr1.concat(arr2,arr3);
console.log(arr4);//[1, 2, 3, 4, 5, 6]
var arr5 = [...arr1,...arr2,...arr3]
console.log(arr5);//[1, 2, 3, 4, 5, 6]
</script>
6.解构赋值:
可以快速取得数组或对象当中的元素或属性，而无需使用arr[x]或者obj[key]等传统方式进行赋值
<script>
//解构赋值的应用
//1.数组的解构赋值
let [h,i,j] = [1,2,3];
console.log(h);//1
//2对象的解构赋值
let {name,age} = {name:"baojun",age:18};
console.log(name);//"baojun"
//字符串的解构赋值
let [a,b,c,d,e] = "hello";
console.log(a);//"h"
</script>
7.ES6数组新方法:
Ⅰ.es6 arr.filter() 数组过滤
| NO. | 运行步骤 |
|---|---|
| 1 | 创建新数组，不改变原数组 |
| 2 | 输出的是判断为true的数组元素形成的新数组 |
| 3 | 回调函数参数，item(数组元素，必选)、index(元素对应的序列号，可选)、arr(数组本身可选) |
| 4 | 使用return操作输出，会循环数组每一项，并在回调函数中操作 |
<script>
//es6 filter() 数组过滤
var arr = [1, 2, 3, 4, 5];
var newArr = arr.filter(function (item, index) {
return item > 2 && item < 5; //根据判断为true来遍历循环添加进新数组
})
console.log(newArr); //打印新数组: [3, 4]
console.log(arr); //打印原数组: [1, 2, 3, 4, 5]
</script>
Ⅱ.es6 arr.find() 数组查找
| NO. | 运行步骤 |
|---|---|
| 1 | 不创建新数组，不改变原数组 |
| 2 | 输出的是一旦判断为true则跳出循环，输出符合条件的数组元素 |
| 3 | 回调函数参数，item(数组元素，必选)、index(元素对应的序列号，可选)、arr(数组本身可选) |
| 4 | 使用return操作输出，会循环数组每一项，并在回调函数中操作 |
<script>
var arr = [1, 2, 3, 4, 5];
var new2 = arr.find(function (item, index) {
return item.toString().indexOf(5) > -1; //把当前数组元素转为字符串，则可index()>-1判断是否含有某字符
})
console.log(new2) //打印符合条件的元素:5
console.log(arr); //打印原数组[1, 2, 3, 4, 5]
</script>
本文同步发表在我的个人博客：https://www.lubaojun.com/
网友评论