ES6(入门)

目录

es6新特性:

let和const

字符串

第一种用途${}

第二种用途``

es6字符串新特性方法

函数function

函数默认参数

函数不定参数

箭头参数

扩展对象功能

方法赋值

更便捷的数据访问--解构

Spread Operator展开运算符

for of值遍历

for in

for of

类的引入

iterable类型


ECMAScript是一种由Ecma国际通过ECMA-262标准化脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是javascript的一个标准。

es6新特性:

let和const

在es6前,都使用var声明变量,在es6层面 let用于声明变量,const用于声明常量

例: let name = "姓名"; const PI = 3.14;

字符串

第一种用途${}

基本的字符串格式化,将表达式嵌入字符串中进行拼接。使用${}

例:const name = "es6"; console.log(`hello ${name}`);

注:(字符串拼接符号为反引号`而不是'或")

第二种用途``

在es5使用\或者双引号搭配+号来实现跨行拼接,在es6层面新加入使用反引号`跨行拼接

例:var data = `<div><span>

testData</span>

</div>`;

es6字符串新特性方法

const str = 'haha';

//includes是否包含字符h
console.log(str.includes('h'));//true

//repeat重复字符串haha三遍
console.log(str.repeat(3));//hahahahahaha

//startsWith判断字符串是否以ha开头
console.log(str.startsWith('ha'));//true

//endsWith判断字符串是否以a结尾
console.log(str.endsWith('a'));//true


函数function

函数默认参数

在形参上可以直接定义默认的参数

格式:参数名=默认值

function testMethod(num=100){return num+50;}  //第一种定义方法的方式

var testMethod2=function(num=100){return num+100;} //第二种定义方法的参数

console.log(testMethod()+"    "+testMethod2());

//控制台结果:150    200;

函数不定参数

不定参数是在函数中不确定具体个数的参数

格式:...参数名

var testMethod3=function(...num){

        for(let item of num){

                console.log(item);        

        }

}

testMethod3(200,100,400,2000,400,700);

箭头参数

当函数有且仅有一个参数的时候,是可以省略function的

格式:=>

var testMethod4=(...num) => {

        for(let item of num){

                console.log(item);        

        }

}

testMethod4(200,100,400,2000,400,700);

扩展对象功能

在es5存储对象我们都是使用key-value存储。

例:var testMethod5 = (name,age) => {

               return {

                       name: name,

                       age: age

                };

        }

console.log(testMethod5('es6',1));

如果键值对重名的情况下,es6提供了简写功能

例:var testMethod6 = (name,age) => {

               return {

                       name,

                       age

                };

        }

console.log(testMethod6('es6',1));

方法赋值

在es5时:

let obj = {

        name:'es6';

        getName:function(){

               console.log(obj.name);

        }

};

obj.getName();

在es6新特性时:

let obj = {

        name:'es6';

        getName(){

               console.log(obj.name);

        }

};

obj.getName();

更便捷的数据访问--解构

es5方式获取访问数据

        let obj = {name:"es6",age:1}

        let name = obj.name; let age = obj.age;

        console.log(name+":"+age);

es5新特性获取访问数据

        let obj = {name:"es6",age:1}

        let {name,age} = obj;

        console.log(name+":"+age);

Spread Operator展开运算符

let students = ["s1","s2","s3"];

let people = ["y1","s4"];

现在要将students数组合并到people中

let people = [...students,"y1","s4"];   //其中...students叫展开运算符

for of值遍历

for遍历 for in和for of的区别

for in

for(let item in people){

        console.log(item);//显示当前元素下标索引

        console.log(people[item]);//显示当前元素

}

for of

for(let item of people){

        console.log(item);//显示当前元素

}

类的引入

格式:

class People(){

        constructor(name,age){
            this.name = name;
            this.age = age;       
        }

        test(){
            console.log("I'm a parent class");
        }

}

class Student extends People{
        //创建构造器
        constructor(name,age){
            super(name,age);   
        }

        //创建方法
        show(){
            console.log(this.name);
            console.log(this.age);
        }
}

let student = new Student("es6",1);

student.show();//调用Student类中的show()方法

student.test();//调用People类中的test()方法

iterable类型

在es6标准引入了新的iterable类型,Array,Map,Set都属于iterable类型,具有iterable类型的集合可以支持for...of...循环来遍历。

var arrayTest = [1,2,3];

var setTest = new Set([1,2,3]);

var mapTest = new Map([[1,'x'],[2,'y'],[3,'z']]);

for(var a of arrayTest){ //遍历Array
    console.log(a);
}

for(var s of setTest){  //遍历Set
    console.log(s);
}

for(var m of mapTest){  //遍历Map
    console.log(m[0] + ":" + m[1]);
}

以上是我整理的ECMAScript 6的新特性

猜你喜欢

转载自blog.csdn.net/qq_51404651/article/details/125164189
今日推荐