web前端-ES6

1.ECMAScript 和 JavaScript 的关系

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

2.ES6

ES6 的第一个版本，在 2015 年 6 月发布，正式名称就是《ECMAScript 2015 标准》（简称 ES2015）。

3.Babel 转码器

Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在老版本的浏览器执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。

首先安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装bable

cnpm install --save-dev @babel/core

https://blog.csdn.net/wjnf012/article/details/80422313 

https://www.cnblogs.com/w-serendipity/p/8423275.html

配置.babelrc文件不显示问题https://blog.csdn.net/hlx20080808/article/details/83418120 

4. ES6基本语法

let命令是局部变量，const是只读的常量

不存在变量提升

暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

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

数组的解构赋值：

//以前的
let a=1;
let b=2;
let c=3;
//es6中变量的解构赋值
let [a,b,c]=[1,2,3];

 

对象的解构赋值：

let {foo , bar} = {foo:'aaa',bar:'bbb'};
foo//aaa
bar//bbb

字符串的遍历器接口：for of           (注：遍历字符串和数组，对象不可以)

for (let codePoint of 'foo') {
  console.log(codePoint)
}
// "f"
// "o"
// "o"

模板字符串

传统的 JavaScript 语言，输出模板通常是这样写的（下面使用了 jQuery 的方法）。

$('#result').append(
  'There are <b>' + basket.count + '</b> ' +
  'items in your basket, ' +
  '<em>' + basket.onSale +
  '</em> are on sale!'
);

上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。

$('#result').append(`
  There are <b>${basket.count}</b> items
   in your basket, <em>${basket.onSale}</em>
  are on sale!
`);

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当作普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。

实例方法：includes(), startsWith(), endsWith()

传统上，JavaScript 只有indexOf方法，可以用来确定一个字符串是否包含在另一个字符串中。ES6 又提供了三种新方法。

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

let s = 'Hello world!';

s.startsWith('Hello') // true
s.endsWith('!') // true
s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置。

let s = 'Hello world!';

s.startsWith('world', 6) // true
s.endsWith('Hello', 5) // true
s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。

实例方法：repeat()

repeat方法返回一个新字符串，表示将原字符串重复n次。

'x'.repeat(3) // "xxx"
'hello'.repeat(2) // "hellohello"
'na'.repeat(0) // ""

实例方法：padStart()，padEnd()

ES2017 引入了字符串补全长度的功能。如果某个字符串不够指定长度，会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。

'x'.padStart(5, 'ab') // 'ababx'
'x'.padStart(4, 'ab') // 'abax'

'x'.padEnd(5, 'ab') // 'xabab'
'x'.padEnd(4, 'ab') // 'xaba'

上面代码中，padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，第二个参数是用来补全的字符串。

实例方法：trimStart()，trimEnd()

ES2019 对字符串实例新增了trimStart()和trimEnd()这两个方法。它们的行为与trim()一致，trimStart()消除字符串头部的空格，trimEnd()消除尾部的空格。它们返回的都是新字符串，不会修改原始字符串。

const s = '  abc  ';

s.trim() // "abc"
s.trimStart() // "abc  "
s.trimEnd() // "  abc"

上面代码中，trimStart()只消除头部的空格，保留尾部的空格。trimEnd()也是类似行为。

除了空格键，这两个方法对字符串头部（或尾部）的 tab 键、换行符等不可见的空白符号也有效。

数组...拓展符

var arr1 = [10,20,30];
console.log(...arr);//10 20 30 

//求数组的最大值
var arr1 = [10,20,30];
var max = Math.max(...arr1);
console.log(max);//30

//复制数组
var arr1 = [10,20,30];
var arr2 = [...arr1];
console.log(arr2);//10 20 30
//注：这样复制的数组为深拷贝

//合并数组
var arr1 = [10,20,30];
var arr2 = [40,50,60];
var arr3 = [70,80,90];
var arr4 = [...arr1,...arr2,...arr3];
console.log(arr4);//10 20 30 40 50 60 70 80 90

//与解构赋值结合
const [first,...rest] = [a,b c,d,e];
first //a
rest //[b,c,d,e]

//函数
function demo(...aa){
    console.log(aa);//[1,2,3,4]
}
demo(1,2,3,4);

数组的方法

//1.Array.from()
//将伪数组转换成真正的数组
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    var divs = document.querySelectorAll('div');
    console.log(Array.from(divs));
</script>
//也可以用来复制数组
var arr1 = [1,2,3];
var arr2 = Array.from(arr1);//[1,2,3]

函数的默认值

function demo(x,y=2){
    console.log(x+y);
}
demo(1); //3
demo(1,3); //4

rest参数（...变量名）

//函数
function demo(...aa){
    console.log(aa);//[1,2,3,4]
}
demo(1,2,3,4);

箭头函数

使用箭头函数的场景：匿名函数

注：1.不可以当构造函数，不可以new

        2.不可以使用argumes对象，用rest参数代替

        3.this指向问题

//es5
var fun = function(a){
    return a;
}
//es6有返回值
var fun = a => a;

//es5
var fun = function(){
    return 12;
}
//es6箭头函数没有参数
var fun = () => 12;

//es5
var fun = function(x,y){
    return x + y;
}
//es6箭头函数有参数并且不止一个参数
var fun = (x,y) => x + y;

//箭头函数的函数体大于一，加{}
var fun =(x,y) => {
    //函数体...
}
//this的指向问题
var obj={
    uname:'qq',
    uage:20,
    showuname:function(){
        console.log(this.uname);//qq  指向对象
    }
    showuage:()=>{
        console.log(this.uage);//undefind 指向window
    }
}