ES6新特性详解

Posted 2022-09-07 敲代码的小小酥

let 声明变量与var区别

1.作用域

var 声明的变量往往会越域，而let 声明的变量有严格局部作用域:

 
var a = 1; 
let b = 2; 

console.log(a); // 1 
console.log(b); // ReferenceError: b is not defined

2.声明次数

var 可以声明多次，let 只能声明一次:

var m = 1 
var m = 2 
let n = 3 
// let n = 4 
console.log(m) // 2 
console.log(n) // Identifier 'n' has already been declared

const声明常量(只读变量)

// 1. 声明之后不允许改变 
// 2. 一但声明必须初始化，否则会报错 
const a = 1; 
a = 3; //Uncaught TypeError: Assignment to constant variable.

解构表达式

1.数组解构

let arr = [1,2,3]; //以前我们想获取其中的值，只能通过角标。ES6 可以这样： 
const [x,y,z] = arr;// x，y，z 将与 arr 中的每个位置对应来取值 
// 然后打印 
console.log(x,y,z);

2.对象解构

const person =  
name: "jack", 
age: 21, 
language: ['java', 'js', 'css'] // 解构表达式获取值，将 person 里面每一个属性和左边对应赋值 
const  name, age, language  = person; // 等价于下面 
// const name = person.name; 
// const age = person.age; 
// const language = person.language; 
// 可以分别打印 
console.log(name); 
console.log(age); 
console.log(language); 
//扩展：如果想要将 name 的值赋值给其他变量，可以如下,nn 是新的变量名 
const  name: nn, age, language  = person; 
console.log(nn); 
console.log(age); 
console.log(language);

字符串模板

模板字符串相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行 字符串，还可以在字符串中加入变量和表达式

// 1、多行字符串 
let ss = `<div>
<span>hello world<span> 
</div> ` 
console.log(ss)

// 2、字符串插入变量和表达式。变量名写在 $ 中，$ 中可以放 入 javascript 表达式。 
let name = "张三"; 
let age = 18; 
let info = `我是$name，今年$age了`; 
console.log(info)

// 3、字符串中调用函数 
function fun()  return "这是一个函数" 
let sss = `O(∩_∩)O 哈哈~，$fun()`; 
console.log(sss); // O(∩_∩)O 哈哈~，这是一个函数

函数

参数默认值

//直接给参数写上默认值，没传就会自动使用默认值
function add2(a , b = 1) 
 
return a + b; 

// 传一个参数 
console.log(add2(10));

不定参数

不定参数用来表示不确定参数个数，形如，…变量名，由…加上一个具名参数标识符组成。 具名参数只能放在参数列表的最后，并且有且只有一个不定参数

function fun(...values) 
 
console.log(values.length) 

fun(1, 2) //2 
fun(1, 2, 3, 4) //4

箭头函数

• 一个参数时：

//以前声明一个方法 
// var print = function (obj)  
// console.log(obj); 
//  
// 可以简写为：
 var print = obj => console.log(obj); 
 // 测试调用 print(100);

• 多个参数：

// 两个参数的情况：
var sum = function (a, b)  return a + b; 
// 简写为：
//当只有一行语句，并且需要返回结果时，可以省略  , 结果会自动返回。
var sum2 = (a, b) => a + b;
//测试调用
console.log(sum2(10, 10));//20

// 代码不止一行，可以用``括起来
var sum3 = (a, b) =>  c = a + b; return c; ;
//测试调用 
console.log(sum3(10, 20));//30

举例：

var hello2 = ( name ) =>  console.log("hello," + name) ; 
hello2(person);

上述是解构+箭头函数的应用。hello2用箭头函数定义，参数为结构一个对象的name属性。调用hello2函数，参数为person时，会输出person的name属性值。

对象特性

1.声明对象简写

const age = 23 
const name = "张三"
// 传统 
const person1 =  age: age, name: name 
// ES6：属性名和属性值变量名一样，可以省略
const person2 =  age, name 

2.对象的函数属性简写

let person = 
 name: "jack", 
// 以前： 
eat: function (food)  
console.log(this.name + "在吃" + food); 
,
// 箭头函数版：这里拿不到 this 
eat2: food => console.log(person.name + "在吃" + food), 
// 简写版： 
eat3(food)  console.log(this.name + "在吃" + food);  person.eat("apple");

3.对象拓展运算符

// 1、拷贝对象（深拷贝） 
let person1 =  name: "Amy", age: 15  
let someone =  ...person1  
console.log(someone) //name: "Amy", age: 15

// 2、合并对象 
let age =  age: 15  
let name =  name: "Amy"  
let person2 =  ...age, ...name  //如果两个对象的字段名重复，后面对象字 段值会覆盖前面对象的字段值 
console.log(person2) //age: 15, name: "Amy"

4. map和reduce

数组中新增了 map 和 reduce 方法。

• map:
  接收一个数组，将原数组中的所有元素用这个函数处理后放入新数组返回。

let arr = ['1', '20', '-5', '3']; 
console.log(arr) 
arr = arr.map(s => parseInt(s)); 
console.log(arr)

• reduce:

语法: arr.reduce(callback,[initialValue])

reduce 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元 素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调 用 reduce 的数组。

callback （执行数组中每个值的函数，包含四个参数）
1、previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
2、currentValue （数组中当前被处理的元素）
3、index （当前元素在数组中的索引）
4、array （调用 reduce 的数组） initialValue （作为第一次调用 callback 的第一个参数。）

const arr = [1,20,-5,3]; 
//没有初始值： 
console.log(arr.reduce((a,b)=>a+b));//19 
console.log(arr.reduce((a,b)=>a*b));//-300

//指定初始值： 
console.log(arr.reduce((a,b)=>a+b,1));//20 
console.log(arr.reduce((a,b)=>a*b,0));//-0

可以看出，当没有指定初始值时，第一次执行callback函数时，第一个参数a是数组第一个元素，第二个参数b是数组第二个元素，然后依次执行callback函数。当指定了初始值时，第一次执行callback时，a就是指定的初始参数，b就是数组第一个元素。

应用场景:
map函数用于对数组中单个元素遍历进行处理时使用，reduce函数用于对数组中元素进行叠加交互处理时使用。

EXPORT

一切 JS 变量都可以导出，比如基本类型变量、函数、数组、 对象。

• 导出一个值时:

const util =  sum(a,b) return a + b;  
export util;

或者

export  const util =  sum(a,b) return a + b;  

• 导出多个值时:

var name = "jack" 
var age = 21 
export name,age

• 省略名称:
  上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出 变量名，否则就会出错。 因此 js 提供了default关键字，可以对导出的变量名进行省略

// 无需声明对象的名字 
export default  sum(a,b) return a + b;  

这样，当使用者导入时，可以任意起名字

IMPORT

使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这 个模块。

import util from 'hello.js' 
// 调用 util 中的属性 
util.sum(1,2)

import name, age from 'user.js'
 console.log(name + " , 今年"+ age +"岁了")