当前位置:首页>维修大全>综合>

es6新语法(es6软件使用教程)

es6新语法(es6软件使用教程)

更新时间:2025-07-08 12:45:50

es6新语法

ES6(ECMAScript 6),也被称为ES2015,是JavaScript的一种版本,引入了许多新的语法和功能,使得JavaScript更加强大和易用。下面是一些ES6的新语法和特性:

块级作用域(Block Scope):引入了let和const关键字,可以在块级作用域中声明变量和常量,避免了变量提升和全局污染的问题。

箭头函数(Arrow Functions):使用箭头函数可以更简洁地定义函数,并且自动绑定了上下文的this值。

解构赋值(Destructuring Assignment):可以通过解构赋值从数组或对象中提取值,并赋给变量,简化了变量的声明和赋值过程。

模板字符串(Template Strings):使用反引号(`)包裹字符串,可以在字符串中插入变量或表达式,更方便地拼接字符串。

默认参数(Default Parameters):在函数定义时可以为参数设置默认值,简化了函数调用时的参数传递。

扩展运算符(Spread Operator):使用三个点(...)可以将数组或对象展开,方便地进行数组合并、复制和对象属性的拷贝。

类(Classes):引入了类的概念,可以使用class关键字定义类,并通过extends关键字实现继承。

模块化(Modules):使用import和export关键字可以方便地进行模块的导入和导出,实现了更好的代码组织和复用。

这些只是ES6中的一部分新语法和特性,ES6还引入了更多的功能,如箭头函数、Promise、迭代器、生成器等。这些新语法和特性使得JavaScript更加现代化和强大,提升了开发效率和代码质量。希望这些信息对你有所帮助!

ES6将弱类型的js提升为中弱类型。我们也一定要学习ES6.

ES6新增知识点:

1、

定义变量

之前定义变量一直用的是var,但是es6中可以使用let和const

但是let有几个特点:

-不允许声明变量

不存在预解析

在大括号中声明的变量只能在大括号中使用

const的特点:

不允许重复声明

不允许重新赋值(可以给对象中新增属性)

声明的时候必须赋值

不存在预解析

在大括号中声明的变量只能在大括号中使用,如if、for的大括号中声明的变量

2、

箭头函数:箭头函数是用来简写函数的

注意:如果只有一个小形参时,小括号可以省略

注意:如果代码块中只有一行代码,箭头函数可以省略大括号,并将这行代码作为返回值

let fn = ()=>{console.log(111);}

1

1

箭头函数使用注意事项:

(1) 箭头函数中的this比较混轮,所以在函数和方法中使用到this的时候,就不要用箭头函数

(2) 箭头函数中没有arguments

函数默认值:

es6中可以定义默认值:

function add(a,b=2){

return a + b;

}

console.log(add(5));

1

2

3

4

1

2

3

4

解构赋值:

解析一个数据结构并赋值,可以快速的从对象或数组中取出需要的内容,对象使用大括号,数组使用中括号

解构对象:

let obj = {

name:"张三",

age:12,

sex:"男",

}

let {name} = obj;

/*

表示从obj中获取name属性,并赋值给声明的name变量

*/

1

2

3

4

5

6

7

8

9

1

2

3

4

5

6

7

8

9

注意:obj必须是一个对象。obj中必须有name属性

3、

this 关键字

每个函数内容都有一个关键字叫做this。不同的情况下,this代表的内容也是不一样的。

(1)普通函数中的this代表window对象

function fn(){

console.log(this);

}

fn(); // window

1

2

3

4

1

2

3

4

(2)定时器中的this代表window

var obj = {

eat:function(){

setTimeout(function(){

console.log(this);

});

}

};

obj.eat(); // window

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

(3)自调用函数中的this代表window

document.querySelector("button").onclick=function(){

(function(){

console.log(this);

})()

}

// window

1

2

3

4

5

6

1

2

3

4

5

6

(4)对象方法中的this代表调用这个方法的对象

document.querySelector("button").onclick=function(){

(function(){

console.log(this);

})()

}

// window

1

2

3

4

5

6

1

2

3

4

5

6

(5)事件函数中的this代表当前事件的事件源

document.querySelector("button").onclick=function(){

console.log(this);

}

// <button>按钮</button>

1

2

3

4

1

2

3

4

(6)箭头函数的this在定义箭头函数的时候就知道了,代表上一行代码的this

document.querySelector("button").onclick=function(){

// 这里的this代表button按钮,所以箭头函数的this也是button按钮

setTimeout(()=>{console.log(this);});

}

// <button>按钮</button>

1

2

3

4

5

1

2

3

4

5

4、 上下文调用模式

也叫作方法借用模式。任何函数都能调用call、apply、bind这三个方法。这三个方法主要用于改变函数中this的指向。

call:call方法不仅可以用来调用函数,还可以指定调用函数的this指向

更多栏目