ES6新手必掌握新特性

---

前言

随着用户需求的愈来愈多，计算机语言、标准也都在不断更迭。本篇主要讲解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标准提供了大量能使我们快速便捷地处理数据的函数和方法。