前言
随着用户需求的愈来愈多,计算机语言、标准也都在不断更迭。本篇主要讲解js中ES6有哪些新特性。
提示:以下是本篇文章正文内容,下面案例可供参考
一、ES6是什么
ECMAScript 6.0(以下简称 ES6)
来自百度:
ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。这种语言在万维网上应用广泛,它往往被称为JavaScript或JScript,所以它可以理解为是JavaScript的一个标准,但实际上后两者是ECMA-262标准的实现和扩展。
ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。
二、基础语法
1.新增语法
代码如下(示例):
1.let ES6中新增了用于声明变量的关键字
let a = 10;
console.log(a)
2.不存在变量提升
console.log(a); // a is not defined
let a = 20;
2.对象解构
代码如下(示例):
1.基本解构
//基本解构
//创建对象
let zz = {
name:"按时",
gender:"男",
age:19
}
//基本解构:重命名属性——如果重命名,原属性将失效。
将对象中每一个属性设置一个相对应的新的键名
let{name:zzName,gender,age}=zz;//:后为name的重命名
2.对象默认值
//对象默认值
let zz = {
name:"按时",
gender:"男",
age:19
}
let{name:zzName,gender,age,salary:monney=8000}=zz;
//使用salary关键字添加新属性,设置默认值为8000
3.方法函数传参
//方法函数传参
let zz = {
name:"按时",
gender:"男",
age:19
}
function fn({name:zzName,gender,age}) {//形参
alert(`他叫${zzName},性别${gender},今年${age}`);
}
fn(zz)// 调用函数,传入实参
3.数组解构
代码如下(示例):
1.解构数组
let arr = ['java','js','jq','Vue'];
//解构数组
let [a,b,c] = arr;
console.log(a,b);//java js
2.那么只想解构数组中的一位呢。
let arr = ['java','js','jq','Vue'];
let [a] = arr;//解构数组的首位
console.log(a);//java
//解构数组的其中一位
let [,,c] = arr;
console.log(c);//jq
//,就代表了数组中的一位
3.合并数据:解构的反向使用
let arr = ['java','js','jq','Vue'];
let arr2 = ['Mysql','PHP','.Net','asp'];
//将两个数组融合成新的数组longArr
let longArr = [...arr,...arr2];
//解构数组的前两个元素,将剩余的组成新数组,注意避免数组名的重复
let [a1,a2,...newArray] = arr;
console.log(newArray[0])//jq
常量,关键字const
//1.常量不可以被更改
const a = 100;
//a = 100;再赋值已无效
//2.定义的时候必须赋值
let str;
str = 'str';
//变量可分两段写
const STR;
STR = 'xyz';
//常量分两段写会报错
//3.命名;如果是一个大自然存在的常量,我们习惯用大写
const PI = 3.14;
二、箭头函数
1.基本语法
代码如下(示例):
1.普通function函数与箭头函数的区别
//使用function定义
function sum(a,b) {
let c = a+b;
console.log(c)
}
sum(1,2)
//使用箭头函数
let sum1 = (a,b) => a+b;
console.log(sum1(1,2));
2.箭头函数语法要求
//箭头函数1:参数多于1个必须用()小括号,省略return,一个语句可以省略{}大括号
let sum1 = (a,b) => a+b;
console.log(sum1(2,3));
//箭头函数2:一个参数可以省略()小括号、return,一个语句可以省略{}大括号
let result = n => n*2;
console.log(result(3))
//箭头函数3:没有参数必须写()小括号,省略return,多个语句必须写{}大括号
let sayHi = () => {//无返回值无需return
console.log("你好");
console.log("吃了吗");
}
sayHi();
//箭头函数4:如果函数有返回值,必须手动return返回结果
let result3 = function(n){
return n*2;
}
console.log(result3(5))
2.forEach数组循环
代码如下(示例):
let arr = [2, 5, 6, 4];
//forEach中的3个值:
//1-循环出的数组内容
//2-数组元素的下标
//3-数组对象本身
arr.forEach(function (item, index, a) {
alert(item+10); //执行使数组所有内容+10
})
3.Set()数据结构
代码如下(示例):
<script>
//Set数据结构 add() delete() has() clear() size()
const s = new Set();
//1-add() 添加某个值,返回Set本身
console.log(s.add(99).add(66));
//delete() 删除某个值,返回布尔值,表成功与否
console.log(s.delete(99));
//has() 数组中是否有这个值,返回布尔值,表成功与否
console.log(s.has(66));
//clear() 清空Set结构内所有值
s.clear();
//size() 返回Set结构内有多少个值
console.log(s.size);
</script>
4.Map()数据结构
代码如下(示例):
//将一个普通对象转换为Map数据解构
let tion = {
'name': '梵蒂冈',
'like': '固特异'
}
//转换Map数据解构
let tionMap = new Map(Object.entries(tion));
//map.size,返回map结构的成员总数
console.log(tionMap.size)
//map.set()添加新的键值对,可采用链式写法let map = new Map().set(1, 'a').set(2, 'b');
tionMap.set("d", "薇恩")
console.log(list.get('d'));
//map.get() 通过键找值
console.log(tionMap.get('like'));
//map.has() 返回一个布尔值,表示某个键是否在当前 Map 对象之中。
console.log(tionMap.has('d'))
//map.delete() 删除某个键,返回布尔类型,代表是否成功
console.log(tionMap.delete("name"));
//map.clear() 清除map中所有的值
tionMap.clear()
总结
以上就是今天要讲的内容,本文仅仅简单介绍了ES6标准的新特性,而ES6标准提供了大量能使我们快速便捷地处理数据的函数和方法。