ES6 是 JavaScript 语言的下一代标准,使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。

一、const 定义常量

ES6之前并没有定义声明常量的方式,ES6标准中引入了新的关键字const来定义常量(常量不能被覆盖)。

const a=123;
a=456;  //会报错,常量无法覆盖
console.log(a);

二、let块级变量

用let定义的变量只在块当中起作用,离开变量外界的块(括号)就会被销毁。但是var不管在函数内部还是在函数外部声明的变量都可以访问到。

if(true){
    var a=123;
    let b=456
}
console.log(a);
console.log(b); //报错,访问不到变量


let a=123;
let a=456;
console.log(a);  //无法覆盖重复变量

三、模板字面量

用于字符串拼接和写模板,使用 (反引号,左上角波浪线),变量使用${}` (类似于python中的format格式)

var user="张三";
var age =22;
var sex ="男";
console.log(`大家好,我的名字是"${user}",今年${age}岁,我是${sex}生`);
console.log("大家好,我的名字是"+user+",今年"+age+"岁,我是"+sex+"生");//传统的写法

优点

  • 不用频繁的使用+ 来连接字符串
  • 使用'时,内部的html标签可以进行换行和缩进,提高可阅读性。(双引号内不能使用回车键换行)

    四、解构赋值

    交换值

    var a=1;
    var b=2;
    [a,b]=[b,a];
    console.log(a,b);  // 2 1

从数组里获得元素

var array=[1,2,3,4];
var [a, ,b]=array;
console.log(a,b);  // 1 3

从对象中获取值

var obj={user:"张三",age:"22岁",sex:"男",job:"前端开发"}
var {user,job}=obj;
console.log(user,job)

返回值解构

function arr(){
    var a=1,b=2,c=3,d=4;
    return {a,b,c,d}
 }
 var {a,c}=arr();
 console.log(a,c);   // 1 3

五、箭头函数

箭头函数相当于匿名函数,并且简化了函数定义。()中放参数,没有参数就省略,箭头后面是函数体。

var obj={
    name:"张三",
    fun(){
        setTimeout(()=>{
            document.write(this.name)
            },1000
        )
    }
}
obj.fun() //张三01

ES6之前访问函数外面的this比较麻烦,箭头函数可以直接访问到最外层的this,不需要转换。

六、对象中函数的声明

var obj={
    user:"张三",
    job(){
        return "web前端开发"
    }
}
console.log(obj.job())

七、循环遍历

传统循环

var arr=["aaaa","bbbb","cccc","ddddd"];
for(var i=0; i<arr.length; i++){
    arr[i]=arr[i]+"2222"
}
console.log(arr)


forEach

var arr=["aaaa","bbbb","cccc","ddddd"];
arr.forEach(
    (item, idx)=>{
    arr[idx] = item+"1111"
})
console.log(arr)



for-of

var arr=["aaaa","bbbb","cccc","ddddd"];
arr.map(
    (item,idx)=>{arr[idx] = item+"3333"}
)
console.log(arr)

八、默认参数

function fun(x=0,y=2,z=true){
    console.log(x,y,z);
}         
fun();  // 0 2 true
fun(4,0,false); // 4 0 false

九、展开运算符 ...

arr1=[1,2,3,4,5];
arr2=["a","b","c","d"];
// 现在将两个数组的元素合并
arr3=arr1.concat(arr2);  // 传统方法
arr4=[...arr1,...arr2];  //使用...方法
console.log( arr3 );   //[1, 2, 3, 4, 5, "a", "b", "c", "d"]
console.log( arr4 );   //[1, 2, 3, 4, 5, "a", "b", "c", "d"]
最后修改:2024 年 03 月 14 日
如果觉得我的文章对你有用,请随意赞赏