最新消息:阿里云双12优惠,史上最低折扣。

es6是什么?与JavaScript的关系以及重点语法应用

服务器租用 aliyun 114浏览

云主机云服务器搭建谷歌镜像

ASCII,Unicode和UTF-8这些词汇,但可能还是不清楚其中的具体含义。世界上所有的计算机都用同样的ASCII方案来保存英文文字。

ES6就是ECMAScript6是新版本JavaScript语言的标准。虽然目前已经更新到ES7,但是很多浏览器还不知处ES7语法,该标准仍在更新中,但目前部门网站都指出ES6的语法。目前ES6也是使用最多的最新的javaScript语言标准。

 

ES6与JS

一、ECMAScript 和 JavaScript 到底是什么关系?

1996 年 11 月,JavaScript 的创造者 Netscape 公司,决定将 JavaScript 提交给标准化组织 ECMA,希望这种语言能够成为国际标准。次年,ECMA 发布 262 号标准文件(ECMA-262)的第一版,规定了浏览器脚本语言的标准,并将这种语言称为 ECMAScript,这个版本就是 1.0 版。

该标准从一开始就是针对 JavaScript 语言制定的,但是之所以不叫 JavaScript,有两个原因。一是商标,Java 是 Sun 公司的商标,根据授权协议,只有 Netscape 公司可以合法地使用 JavaScript 这个名字,且 JavaScript 本身也已经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA,不是 Netscape,这样有利于保证这门语言的开放性和中立性。

因此,ECMAScript 和 JavaScript 的关系是,前者是后者的规格,后者是前者的一种实现(另外的 ECMAScript 方言还有 JScript 和 ActionScript)。日常场合,这两个词是可以互换的。

二、ES6常用语法举例

声明变量:

新增let/const关键字,用于变量声明,在var的基础上,新增块级作用域概念。 (原来的var定义变量,只有全局作用域与函数内部局部作用域之分)

使用let定义变量时,有以下优点:

1.没有预解析,不存在变量提升,必须先定义,再使用;

2.同一作用域内不能重复定义变量;

(个人认为语法更加严谨,不会造成变量污染)

const特性和let相似,不过用于定义常量。

解构赋值:

数组解构赋值:

let [a,[b,c]] = [2,[3,4]];//注意解构赋值时,左右两边格式必须保持相同

console.log(a,b,c);

对象解构赋值:

let json={

    name:”李浩”,

    age:21,

    job:”前端”

};

let{name:a,age,job}=json;//可以用”:”给解构赋值变量一个别称,方便使用

console.log(a,age,job);

赋值时还可以给默认值

let[a,b,c=”暂无数据”] = [12,10];

除此之外,解构赋值还可以用于函数中,比如函数返回值解构和函数传参解构,在实际应用中非常实用。

字符串模板

1.字符串连接

ES6中字符串连接可以使用“引用字符串,并且引用变量的方式也发生了改变,且允许字符串随意换行

`xxxxxxx${a}xxxxxxxxx`

2.字符串查找

str.includes(),返回true/false

str.indexOf(),返回索引,没有则返回-1

3.检测是否以xx开头、结尾

str.startsWith(),(检测协议http)

str.endsWith(),(检测文件格式)

4.重复

str.repeat(),(字符串重复)

函数

1.函数默认参数

fn(a=12,b=15){  //在形参中给默认值,并不影响后续运算,a和b还可以赋值

}

2.函数的参数是默认被定义过的,不可以再使用let/const定义

fn(a,b){

    let a=12;  //错误示范:重复定义

}

3.扩展运算符…

常用于数组操作:

…1,2,3,4,5=>[1,2,3,4,5]

…[1,2,3,4,5]=>1,2,3,4,5

[1,2,3,4,5]=>[a,b,…c] //剩余运算

箭头函数

fn()=>{

    

};

箭头函数的好处:

1.箭头函数中的this指的就是定义函数时所在的对象,而不再是运行函数时的对象;

2.箭头函数里不能使用arguments,作为替代可以使用扩展运算符…

3.箭头函数不能作为构造函数使用;

数组

1.循环

先列举一些ES5中就存在的数组循环函数:

arr.forEach(function(value,index,arr){

    

});

arr.forEach()函数可用于数组循环,以一个回调函数作为参数,回调函数参数为数组每一项的值、索引、整个数组,下面几个函数也是如此;

arr.map()函数,参数同上,该函数非常常用,可以用于数据交互、映射,不同于arr.forEach()函数的是它有返回值,返回一个新数组。可以用于整理数据;

arr.filter()函数,参数同上,有返回值,用于筛选过滤,如果回调函数返回true,则留下;

arr.some()函数,参数同上,查找有无符合条件的项;

arr.every()函数,参数同上,判断是否全部符合条件;

下面这个是ES6新增:for…of循环

for(let val of arr){

    

}

for(let index of arr.keys()){

    

}

for(let item of arr.entries()){

    

}

2.数组的其余函数

arr.from():用于把类数组(一组元素、arguments)对象转化成数组;

arr.of():用于把一组元素转成数组;

arr.find():找出第一个符合条件的成员;

arr.findIndex():返回第一个符合条件成员的索引;

arr.includes():判断是否包含某元素;

三、ES6学习建议

就 ES6 本身来说,有很多内容是借鉴自其他语言。使用起来相对 ES5 会方便一些,而你在知乎看到的 demo 通常都是几个框架为主的,既然已经使用了新的框架知识,在这些 demo 中使用 ES6 也就很好解释了。

只看概念不实际应用的效果一般均不佳,所以最好是一边看这些资源,一边动手尝试,这样理解也会更快。浏览器不支持的部分先跳过,优先尝试直接支持的。后续再考虑配置 babel 并且补上不支持的部分。

您可能感兴趣的内容:

《Spring Cloud?小意思,读后面试官都不如你知道多》

转载请注明:小猪云服务器租用推荐 » es6是什么?与JavaScript的关系以及重点语法应用