JavaScript高级语言程序设计第一种内容整理--重点ES6-9的特性

ECMAScript版本

ES6新特性

1、新增块级作用域（let、const）

注：const申明的变量被认为是常量，值设置完成后不可进行更改，但如果const的是一个对象，对象内所包含的值是可以修改的，也就是对象所指向的地址没有变就行

const students = {name:'李四'}

students.name = '张三' //不报错

students = {name:'张三'} //报错

2、模板字符串（`${}`）

3、箭头函数 =>
注：继承当前上下文的this关键字

4、函数参数默认值

5、spread/rest 操作符

Spread操作符 ...（用于迭代器中）

function foo(x,y,z) {

        console.log(x,y,z);

}

let arr = [1,2,3];

foo(...arr); // 1 2 3

Rest操作符（用于函数传参）

function foo(...args) {

        console.log(args);

}

foo( 1, 2, 3, 4, 5); // [1, 2, 3, 4, 5]

6、二进制和八进制字面量

7、对象和数组解构

// 对象

const student = { name: 'Sam', age: 22, sex: '男' }

const { name, age, sex } = student;

console.log(name + ' --- ' + age + ' --- ' + sex);

8、对象超类

var parent = {

        foo() {

                console.log("Hello from the Parent");

        }

}

var child = {

        foo() {

                super.foo();

                console.log("Hello from the Child");

        }

}

Object.setPrototypeOf(child, parent);

child.foo(); // Hello from the Parent

// Hello from the Child

9、for...of（遍历一个迭代器、取到的是值） 和 for...in（遍历对象中的属性、取到的是下标）

10、ES6中的class类

//定义类

class Point(){

        constructor(x,y){

                this.x = y;

                this.y = x; //this关键字则代表实例对象

        }

        toString(){

                return '(' + this.x + ',' +this.y + ')';

        }

}

//创建对象

let p = new Point(1,2) //生成类的实例对象的写法，要使用new命令

console.log(p.toString())

ES7新特性

1、Array.prototype.includes（arr，index）

第二个参数index，可以从数组特定的索引开始寻找。

2、Exponentiation Operator(求幂运算符)

ES8新特性

1、async 和 await

async fun1(){

        await this.fun2()

}

fun2(){

        return new promise((resolve,reject) => {

        })

}

2、Object的新方法--entries、values和getOwnPropertyDescriptors

entries用来遍历Object，返回一个数组，存储key-value对

let map =newMap(Object.entries({

        one:1,

        two:2,

}));

console.log(JSON.stringify([...map]));

// [["one",1],["two",2]]

values方法返回的是一个数组，存放的是Object的value

getOwnPropertyDescriptors返回的是Obj中的属性的描述。所谓属性的描述就是指这个属性是否可写，是否可以数之类

3、String的新方法（padStart和padEnd）

'x'.padStart(5, 'ab')
'ababx'
'x'.padEnd(5, 'ab')
'xabab'

4、逗号可以添加到函数的参数列表后面

ES9新特性

1、对象扩展

可以用来拷贝对象（深拷贝），给变量赋值、合并对象等

2、字符串扩展

trimStart()/trimLeft()- - -删除左边空格
trimEnd()/trimRight()- - -删除右边空格
trim()- - -删除左右两边空格

3、数组扩展

flat(n)--将多维数组拍平，可以多个flat()连写,一般来说拍平的层级是多少，n就写多少

flatMap()--将数组的每个元素进行一段处理，并拍平返回结果，等效于map()+flat()

4、Catch(e)捕获异常，不用异常参数的话也可以省略括号和参数

5、JSON 超集、JSON.stringify()

6、Symbol描述属性description

ES9中添加了 Symbol 的描述属性- - -description，改属性是只读的，不能改写值

DOM

文档对象模型是一个应用编程接口，用于在HTML中使用扩展的XML。DOM将整个页面抽象为一组分层节点。

DOM通过创建表示文档的树，让开发者可以随心所欲的控制网页的内容和结构。使用DOM API，可以轻松删除、添加、替换、修改节点。

DOM level 1的目标就是映射文档结构，由DOM Core和DOM HTML组成，前者映射SML文档，方便访问和操作文档任意部分的方式；后者扩展了前者，并增加了特定于HTML的对象和方法。

DOM level 2新增了以后模块

DOM视图、DOM事件、DOM样式、DOM遍历和范围

BOM

即浏览器对象模型，支持访问和操作浏览器的窗口，使用BOM，开发者可以操控浏览器显示页面以外的部分。