ES6部分内容

野性酷女 2021-08-28 18:51 343阅读 0赞

转载：[https://blog.csdn.net/sinat\_36174237/article/details/82378891][https_blog.csdn.net_sinat_36174237_article_details_82378891]

1.es6熟悉吗，说几个es6的新增方法

（1）新增声明命令let和const

在es6中通常用 let 和 const 来声明，let 表示变量、const 表示常量。

特点：

let 和 const 都是块级作用域。以\{\}代码块作为作用域范围 只能在代码块里面使用。  
不存在变量提升，只能先声明再使用，否则会报错。在代码块内，在声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。  
在同一个代码块内，不允许重复声明。  
const声明的是一个只读常量，在声明时就需要赋值。（如果 const 的是一个对象，对象所包含的值是可以被修改的。抽象一点儿说，就是对象所指向的地址不能改变，而变量成员是可以修改的。）  
（2）模板字符串（Template String）

用一对反引号(\`)标识，它可以当作普通字符串使用，也可以用来定义多行字符串，也可以在字符串中嵌入变量，js表达式或函数，变量、js表达式或函数需要写在$\{ \}中。

函数的默认参数  
ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

function A(a,b=1)\{  
    console.log(a+b);  
\}  
A(1);    //2  
A(2+3);  //5  
箭头函数   
在es6中，提供了一种简洁的函数写法，我们称作“箭头函数”。

写法：函数名=(形参)=>\{……\}     当函数体中只有一个表达式时，\{\}和return可以省略，当函数体中形参只有一个时，()可以省略。

特点：箭头函数中的this始终指向箭头函数定义时的离this最近的一个函数，如果没有最近的函数就指向window。

//省略写法  
var people = name => 'hello' + name;  
   
var getFullName = (firstName, lastName) => \{  
    var fullName = firstName + lastName;  
    return fullName;  
\}   
（4）对象的扩展

属性的简写。ES6 允许在对象之中，直接写变量。这时，属性名为变量名, 属性值为变量的值。  
var foo = 'bar';  
var baz = \{foo\};  //等同于  var baz = \{foo: foo\};  
方法的简写。省略冒号与function关键字。  
var o = \{  
  method() \{  
    return "Hello!";  
  \}  
\};  
   
// 等同于  
var o = \{  
  method: function() \{  
    return "Hello!";  
  \}  
\};  
Object.keys()方法，获取对象的所有属性名或方法名（不包括原形的内容），返回一个数组。  
var obj=\{name: "john", age: "21", getName: function () \{ alert(this.name)\}\};  
console.log(Object.keys(obj));    // \["name", "age", "getName"\]  
console.log(Object.keys(obj).length);    //3  
   
console.log(Object.keys(\["aa", "bb", "cc"\]));    //\["0", "1", "2"\]  
console.log(Object.keys("abcdef"));    //\["0", "1", "2", "3", "4", "5"\]  
Object.assign ()，assign方法将多个原对象的属性和方法都合并到了目标对象上面。可以接收多个参数，第一个参数是目标对象，后面的都是源对象。

var target  = \{\}; //目标对象  
var source1 = \{name : 'ming', age: '19'\}; //源对象1  
var source2 = \{sex : '女'\}; //源对象2  
var source3 = \{sex : '男'\}; //源对象3，和source2中的对象有同名属性sex  
Object.assign(target,source1,source2,source3);  
   
console.log(target);    //\{name : 'ming', age: '19', sex: '男'\}  
（5）for...of  循环

是遍历所有数据结构的统一的方法。for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象（比如arguments对象、DOM NodeList 对象）、Generator 对象，以及字符串。

var arr=\["小林","小吴","小佳"\];  
for(var v of arr)\{  
    console.log(v);      
\}  
//小林   
//小吴   
//小佳  
（6）import和export

ES6标准中，JavaScript原生支持模块(module)了。这种将JS代码分割成不同功能的小块进行模块化，将不同功能的代码分别写在不同文件中，各模块只需导出公共接口部分，然后通过模块的导入的方式可以在其他地方使用。

export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口。

import用于在一个模块中加载另一个含有export接口的模块。

import和export命令只能在模块的顶部，不能在代码块之中。

//导入部分  
//全部导入  
import Person from './example'  
   
//将整个模块所有导出内容当做单一对象，用as起别名  
import \* as example from "./example.js"  
console.log(example.name)  
console.log(example.getName())  
   
//导入部分  
import \{ name \} from './example'  
   
//导出部分  
// 导出默认  
export default App  
   
// 部分导出  
export class User extend Component \{\};  
 （7）Promise对象

Promise是异步编程的一种解决方案，将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。

它有三种状态，分别是pending-进行中、resolved-已完成、rejected-已失败。

Promise 构造函数包含一个参数和一个带有 resolve（解析）和 reject（拒绝）两个参数的回调。在回调中执行一些操作（例如异步），如果一切都正常，则调用 resolve，否则调用 reject。对于已经实例化过的 promise 对象可以调用 promise.then() 方法，传递 resolve 和 reject 方法作为回调。then()方法接收两个参数：onResolve和onReject，分别代表当前 promise 对象在成功或失败时。

setTimeout(function() \{  
    console.log(0);  
\}, 0);  
var promise = new Promise((resolve, reject) => \{  
    console.log(1);  
    setTimeout(function () \{  
        var success = true;  
        if (success) \{  
            resolve('成功');  
        \} else \{  
            reject('失败');  
        \}  
    \},2000);  
\}).then(  
    (data) => \{ console.log(data)\},  
    (data) => \{ console.log(data)\}  
);  
console.log(promise);    //<pending> 进行中  
setTimeout(function () \{  
    console.log(promise);    //<resolved> 已完成  
\},2500);  
console.log(2);  
   
//1  
//Promise \{<pending>\}  
//2  
//0  
//成功  
//Promise \{<resolved>: undefined\}  
 （8）解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。

数组的解构赋值  
数组中的值会自动被解析到对应接收该值的变量中，数组的解构赋值要一一对应 如果有对应不上的就是undefined

var \[name, pwd, sex\]=\["小周", "123456", "男"\];  
console.log(name) //小周  
console.log(pwd)//123456  
console.log(sex)//男  
对象的解构赋值  
对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。

var obj=\{name:"小周", pwd:"123456", sex:"男"\}  
var \{name, pwd, sex\}=obj;  
console.log(name) //小周  
console.log(pwd)//123456  
console.log(sex)//男  
   
//如果想要变量名和属性名不同，要写成这样  
let \{ foo: foz, bar: baz \} = \{ foo: "aaa", bar: "bbb" \};  
console.log(foz) // "aaa"  
console.log(foo) // error: foo is not defined  
（9）set数据结构

Set数据结构，类似数组。所有的数据都是唯一的，没有重复的值。它本身是一个构造函数。

属性和方法：

size 数据的长度  
add() 添加某个值，返回 Set 结构本身。  
delete() 删除某个值，返回一个布尔值，表示删除是否成功。  
has() 查找某条数据，返回一个布尔值。  
clear() 清除所有成员，没有返回值。  
应用：数组去重。

var arr = \[1,1,2,2,3\];  
var s = new Set(arr);  
console.log(s);    //\{1, 2, 3\}  
   
console.log(s.size);    //3  
console.log(s.add(4));    //\{1, 2, 3, 4\}  
console.log(s.delete(4));    //true  
console.log(s.has(4));    //false  
s.clear();  
（10）Spread Operator 展开运算符(...)

将字符串转成数组  
var str="abcd";  
console.log(\[...str\]) // \["a", "b", "c", "d"\]  
将集合转成数组  
var sets=new Set(\[1,2,3,4,5\])  
console.log(\[...sets\]) // \[1, 2, 3, 4, 5\]  
两个数组的合并  
var a1=\[1,2,3\];  
var a2=\[4,5,6\];  
console.log(\[...a1,...a2\]); //\[1, 2, 3, 4, 5, 6\]  
在函数中，用来代替arguments参数  
rest参数  …变量名称

rest 参数是一个数组 ，它的后面不能再有参数，不然会报错

function func(...args)\{  
    console.log(args);//\[1, 2, 3, 4\]  
\}  
func(1, 2, 3, 4);  
   
function f(x, ...y) \{  
    console.log(x);  
    console.log(y);  
\}  
f('a', 'b', 'c');     //a 和 \["b","c"\]  
f('a')                //a 和 \[\]

[https_blog.csdn.net_sinat_36174237_article_details_82378891]: https://blog.csdn.net/sinat_36174237/article/details/82378891