简介
ECMAScript 6.0(以下简称 ES6)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
文章目录
1、 let和const命令
let、const、var有什么区别?
- let、const不具备变量提升,而var有变量提升效果
<script>
console.log(a);
var a = 'ok'
console.log(b);
let b = 'ok'
</script>
打印结果:
原因分析,var具有变量提升代码等同于
<script>
var a
console.log(a);
a = 'ok'
</script>
补充函数声明提升:
// 函数声明(具有变量提升)
foo()
function foo(){
console.log('函数提升了');
}
// var,function同时赋值
console.log(foo2);
function foo2(){
console.log('函数声明优先级更高');
}
var foo2 = 2
// 函数表达式
foo1()
var foo1 = function(){
console.log('yes');
}
打印结果:
- let、const有块级作用域(通常是由花括号{}包裹的代码段,一个块级的范围(也称为块)是由一对花括号{}定义的代码段。一个块可以包含一条或多条语句。通常,控制语句(如if、for、while等)和函数定义也会创建块级作用域。
// 示例1:if语句中的块级作用域
if (true) {
let x = 10;
console.log(x); // 输出: 10
}
// console.log(x); // 这里会报错,因为x在if块之外不可见
// 示例2:for循环中的块级作用域
for (let i = 0; i < 3; i++) {
console.log(i); // 输出: 0, 1, 2
}
// console.log(i); // 这里会报错,因为i在for循环块之外不可见
// 示例3:函数内部的块级作用域
function test() {
let y = 20;
console.log(y); // 输出: 20
}
test();
// console.log(y); // 这里会报错,因为y在函数块之外不可见
- let、const不能重复声明
var a = 1
var a = 2
console.log(a) //2
let b = 1
let b = 2 //会报错
console.log(b)
- const一旦被赋值,不允许修改
const a = 3
a= 4
报错:
注意,但可以修改对象中的属性值
const c = {name:'姜姜'}
c.name = '鸭'
console.log(c); //{name:'鸭'}
结果:
经典示例:
var arr = []
var arr1 = []
for(var i=0;i<10;i++){
arr[i] = function(){
return i
}
}
for(let j=0;j<10;j++){
arr1[j] = function(){
return j
}
}
console.log(arr[5]()); //10
console.log(arr1[5]()); //5
结果:
2、模版字符串
模版字符串:使用tab键上面的反引号 ··,插入变量的时候用 ${变量名}
var a = '姜姜鸭'
var b = '我的名字是(' + a + ')'
var c = `我的名字是(${a})`
console.log(b);//我的名字是(姜姜鸭)
console.log(c);//我的名字是(姜姜鸭)
打印结果:
3、函数
3.1 默认值
1)带参数默认值的函数
// es5的写法
function add(a,b){
a = a||1
b = b||2
console.log(a+b);//3
}
// es6
function add(a=1,b=2){
console.log(a+b);
}
// add() //3
// 传一个值
function add(a=1,b){
console.log(a,b); //2,undefined
}
function add(a,b=2){
console.log(a,b); //2,2
}
add(2)
2)默认的值也可以是一个表达式
function add(a,b=getVal(5)){
return a+b
}
function getVal(val){
return val+5
}
console.log(add(10)); //20
3.2 剩余参数
剩余参数:由三个点…和一个紧跟着的具名参数指定…keys
function checkArgs(...args){
console.log(args); //['a', 'b', 'c']
}
checkArgs('a','b','c')
3.3 扩展运算符…
剩余参数:把多个独立的参数合并到一个数组中
扩展运算符:将一个数组分割,并将各个项作为分割的参数传给函数
var arr=[10,20,30,40]
console.log(...arr); //10 20 30 40
3.4 箭头函数
使用=>来定义,function(){ }等同于() => {}
// es5
let add = function(a,b){
return a+b
}
//箭头函数
let add1 = (a,b)=>{
return a+b
}
// 只有一个参数,可以去掉括号
let add2 = a=>{
return a
}
//可以省略大括号和return
let add3 = a=>(a+5) //7
console.log(add3(2));
箭头函数:没有this绑定,通过查找作用域链来确定
注意事项:
①使用箭头函数,函数内部没有argumnets
②箭头函数不能使用new关键字实例化对象
3.4 解构赋值
优点:代码书写上更简单易读
相关代码练习:
// 解构赋值
let obj = {
name:'姜',
sex:'女',
age:18
}
// let {name,sex} = obj
// console.log(name,sex); //姜 女
let {name,...res} = obj
console.log(res); //{sex;'女',age:18}
let {a,b=20} = {a:20}
console.log(a,b); //20,20
// 数组解构
let arr =[1,2,3]
let [c,d] = arr
console.log(c,d); //1,2
let [e,f=5] = [4]
console.log(e,f); //4,5
3.5 扩展的对象功能
①属性名和属性值一样,可简写,函数也可以简写
// 属性名和属性值一样,可简写
let a = 1
let b = 2
let obj1 = {
a,
b,
c(){
console.log(obj1.a);
}
}
console.log(obj1.a,obj1.b);//1,2
obj1.c() //1
② 对象的合并,Object.assign(target,obj1,obj2,…)
let newObj = Object.assign({},{a:1},{b:2})
console.log(newObj); //{a:1,b:2}
4、symbol数据类型
原始数据类型Symbol,它表示独一无二的值
// 获取symbol的属性名
let s = Object.getOwnPropertySymbols(obj)
console.log(s[0]); //Symbol(s1)
let m = Reflect.ownKeys(obj)
console.log(m); //
5、set数据类型
集合:表示无重复值的有序列表
let set = new Set()
// 增加元素
set.add(10)
set.add(20)
console.log(set); //Set(2){10,20}
// 删除元素
set.delete(10)
console.log(set); //Set(1){20}
// 添加重复元素
set.add(10)
set.add(20)
console.log(set); //Set(1){10}
// 校验某个值是否在Set中
// 将set装换为数组(去重)
let set2 = new Set([1,2,3,4,4,5])
// 扩展运算符
let arr = [...set2]
console.log(arr); //[1, 2, 3, 4, 5]
6、Map数据类型
map数据类型:键值对的有序列表,键值是任意的
let map = new Map()
map.set('name','姜')
map.set('age',18)
console.log(map);
结果:
let map = new Map()
map.set('name','姜')
map.set('age',18)
// console.log(map);
map.delete('name')
console.log(map);
结果:
let map = new Map()
map.set('name','姜')
map.set('age',18)
// console.log(map);
map.delete('name')
// console.log(map);
let a = map.has('age')
// console.log(a); //true
let age = map.get('age')
// console.log(age);//18
map.clear()
// console.log(map);//Map(0) {size: 0}
map.set(['a',[1,2,3]],'hello')
console.log(map);
结果:
7、数组的扩展方法
7.1 数组的方法
1)from():将伪数组转换为真正的数组,from()还可以接受第二个参数,用来对某个元素进行处理
function add(){
return Array.from(arguments)
}
let arr = add(1,2,3)
console.log(arr); //[1, 2, 3]
let arr1=[1,2,3]
let res = Array.from(arr1,ele=>ele+1)
console.log(res); //[2,3,4]
2)of():将一组值,转换为数组
console.log(Array.of(11,12,'nice',[13,14],{age:18})); // [11, 12, 'nice', Array(2), {…}]
3)find() 、findIndex()
find():找出第一个符合条件的成员
findIndex():找出第一个符合条件的成员的索引值
let num = [1,2,-10,-20,9,2].find((n)=>{
return n < -10
})
console.log(num);//-20
let num1 = [1,2,-10,-20,9,2].findIndex((n)=>{
return n < -10
})
console.log(num1);//3
4)entries()、keys()、values()返回一个遍历器,可以使用for…of…进行遍历
keys:对键名遍历
values:对键值遍历
entries:键值对遍历
for(let index of arr2.keys()){
// console.log(index); //0,1,2
}
for(let value of arr2.values()){
// console.log(value);//1,2,3
}
for(let [index,value] of arr2.entries()){
console.log(index,value);//0 1 1 2 2 3
}
5)includes():返回一个布尔值,表示某个数组是否包含给定的值
console.log([1,2,3].includes(1)); //true
8、Promise
在我的另一篇文章中有详细教程:
链接: promise教程
9、class类的用法
9.1 基本用法
用法:class 类名{}
constructor在实例化的时候立即被调用
class Person{
constructor(name,age,sex){
this.name = name,
this.age = age
this.sex = sex
}
sayName(){
return this.name
}
}
// 可通过Object.assign一次性向类中添加多个方法
Object.assign(Person.prototype,{
sayAge(){
return this.age
},
saySex(){
return this.sex
}
})
let p1 = new Person('姜姜鸭',18,'女')
console.log(p1.name,p1.age,p1.sex); //姜姜鸭 18 女
9.2 类的继承
// 父类
class Animal{
constructor(name,age){
this.name = name
this.age = age
}
sayName(){
return this.name
}
sayAge(){
return this.age
}
}
// 子类
class Dog extends Animal{
constructor(name,age,color){
// 通过super继承属性
super(name,age)
// 添加子类自己的属性
this.color = color
}
//
// 子类自己的方法
sayColor(){
return this.color
}
// 重新修改了父类的方法
sayAge(){
return this.age+1
}
}
let p2 = new Dog('辣条',18,'red')
// 继承了父类的方法
console.log(p2.sayName()); //辣条
console.log(p2.sayAge());//19
let p3 = new Animal('可乐',20)
console.log(p3.age);//20
10、es6的模块化
es6的模块功能主要有两个命令构成:export和import,一个模块就是一个独立的文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>module</title>
</head>
<body>
</body>
<script type='module'>
// 引入es文件
// (与导出的法一法二无对应关系)引入法一:
// import obj,{name,age,add} from './module.js'
// console.log(name); //姜姜鸭
// console.log(obj); //{color:'red'}
// 引入法二:
import * as f from './module.js'
console.log(f);
</script>
</html>
module.js
// 法一:直接导出
// export let name = '姜姜鸭'
// export let age =18
// export function add(a,b){
// return a + b
// }
// 法二:通过对象抛出
let name = '姜姜鸭'
let age =18
function add(a,b){
return a + b
}
export {name,age,add}
let obj = {
color:'red'
}
// export default只能使用一次
export default obj
打印结果:
参考文献:
ES6阮一峰教程: https://es6.ruanyifeng.com/#docs/intro