ES6笔记

ES6运行的三种方式

• 第一种：浏览器直接显示（Babel浏览器脚本）
  • Babel的链接：https://www.bootcdn.cn/babel-standalone/
  • Babel将ES6的语法转化成ES5的语法在浏览器上运行
• 第二种：在线转换https://www.babeljs.cn/
• 第三种：Babel（node.js）工具，工具把ES6转换成ES5，然后用node.js运行ES5
  • Babel包：babel-preset-latest，babel-preset-react，babel-preset-stage

ES6的浏览器兼容

• Chrome，Safari，FF都支持，node.js
• IE11及以上都支持，IE10部分支持，IE8，IE9不支持
• 对于支持ES6的浏览器，其实不需要任何额外的工具，type=“module”

let、const和块级作用域

let关键字

• let关键字只在块中有效

if(true){
    var a = 1;
    let b = 2;
    console.log(a);//1
    console.log(b);//2
}
console.log(a);//1
console.log(b);//b is not defined

• let关键字可以防止循环变量泄露，同时能够提供闭包

for(var i = 0 ; i < 5 ; i++){
    console.log(i)
}
console.log(i);//5
for(let a = 0 ; a < 5 ; a++){
    console.log(a)
}
console.log(a);//a is not defined

• for循环是一个特例，括号是一个独立作用域，大括号是一个独立作用域

for(let i = 0; i < 3; i++){
    let i = 3;
    console.log(i);
}

• let不会进行变量提升

console.log(a);//undefined
var a = 1;
console.log(b);//Cannot access 'b' before initialization
let b = 1;

• 暂时性死区的概念，let不进行变量提升，他会绑定到一个块作用域上
  • var 在预编译时将变量产生，只是数值没有初始化，可以访问
  • let 在预编译的时候产生，但是在let声明以前，不能使用，从块级作用域的头部到let声明之间的范围叫做暂时性死区

let a = 5;
if(true){
    console.log(a);//Cannot access 'a' before initialization
    //TDS
    let a = 3;
    //undefined
    console.log(a);//3
}
console.log(a);//5

• let不能在一个作用域内重复定义

{
    var a = 5;
    var a = 3;
    console.log(a);//3
}

{
    let b = 5;
    let b = 3;
    console.log(b);//Identifier 'b' has already been declared
}

• 块级作用域解决了两种不合理的现象

var a = 5;
function f(){
    console.log(a);
    if(true){
        var a = 3;
    }
}

f();//undefined

for(var i = 0 ; i < 5 ; i++){
    
}
console.log(i);//5

• 立即执行函数简化

(function(){
    var tmp = 5;
    console.log(tmp);
})();

{
    let tmp = 5;
    console.log(tmp);
}

• let 声明的变量，内层可以访问外层的变量，外层不能访问内层的变量，内层退出后失效

let a = 5;
{
    console.log(a);//5
}
{
    let b = 3;
    console.log(b);//3
}
console.log(b);//b is not defined

• 块级作用域的函数声明
  • ES5：不允许在块结构中声明函数
  • ES6: 允许在块结构中声明函数，还是依然有预编译，函数依然有预编译，函数名会提升到全局作用域或者函数作用域的头部

function f(){
    console.log('outside');
}

(function(){
    if(false){
        function f(){
            console.log('inside')
        }
    }
    console.log(f);//ES6: f()outside  ES5: undefined
    f();//ES6: outside  ES5: ERROR
})();

const 关键字

• 原始类型：变量中的值不能改
• 引用类型：指向的地址不能改
• 其余特性与let一致

解构赋值

• 数组的解构
• 赋值

let a = 1;
let b = 2;
let c = 3;
//等价
let [a,b,c] = [1,2,3];

• 多个变量

let [a,b,...c] = [5,3,4,9,7]
console.log(a,b,c);// 5 3 [ 4, 9, 7 ]

• 变量多，数据少

let [a,b,c,d] = [1,2,3];
console.log(a,b,c,d);//  1 2 3 undefined

• 默认值

let [a,b,c,d = 4] = [1,2,3];
console.log(a,b,c,d);//  1 2 3 4

• 是否赋值默认值是根据变量是否 === undefined

let [a,b,c,d = 4] = [1,2,3,undefined];
console.log(a,b,c,d);//  1 2 3 4

let [a,b,c,d = 4] = [1,2,3,null];
console.log(a,b,c,d);//  1 2 3 null

• 对象的解构
• let{ 匹配：变量 }
• let{ 变量 } == let { 同名匹配：变量 }
• key
  • a 和 b 当作 key 去匹配变量并赋值

let {a:a1,b:b1} = {a:1,b:2}
console.log(a,b);// a & b is not defined
console.log(a1,b1);// 1  2

let {a,b} = {a:1,b:2}
//等价
let {a:a,b:b} = {a:1,b:2}

• 可以多次匹配

let json = {
    p:[
        'hello',
        {y:'world'}
    ]
}
let {p,p:[x,{y}]} = json;
console.log(p,x,y);//[ 'hello', { y: 'world' } ] hello world

• 复杂的匹配

let obj = {
    loc:{
        start:{
            line:1,
            column:5
        }
    }
}

let {loc,loc:{start},loc:{start:{line}}} = obj;
console.log(loc,start,line);//{ start: { line: 1, column: 5 } } { line: 1, column: 5 } 1

• 当对以定义的对象进行解构赋值需要加括号

let a;
({a} = {a:5});

• 把数组当对象

let arr = [0,1,2,3];
let {0:a,1:b,2:c,3:d} = arr;
console.log(a,b,c,d);//0 1 2 3

• 字符串的解构赋值

let [a,b,c] = 'abc';
console.log(a,b,c),//a b c

• 包装类的解构赋值 string number boolean

let {toString:s} = 123;
console.log(s === Number.prototype.toString);//true

• 函数参数的解构赋值

function f1({a = 0 , b = 0 } = {}){
    console.log(a,b);
}
f1({a:'hello',b:'world'});
f1();

• 解构赋值的常用方法

1. 交换变量

 let [x,y] = [1,2];
[x,y] = [y,x];
console.log(x,y);//2 1

2. 函数返回一个数组或者对象，需要处理

function f(){
    return [1,2,3]
}
let [x,y,z] = f();
console.log(x,y,z);//1 2 3

3. 给函数传递参数

function f([a,b,c]){
    console.log(a,b,c);
}
f([1,2]);//1 2 undefined
f([,1,2]);//undefined 1 2

4. JSON文件的处理
5. 给函数设置默认值

function f1({a = 0 , b = 0 } = {}){
    console.log(a,b);
}

6. 从模块或者api中获得函数或者变量

const {PI,sin,cos} = Math;
console.log(PI,sin,cos);

字符串的拓展

• includes startsWith endsWith

let s = 'HELLO,Js';
console.log(a.includes('Js'));//是否包括 true
console.log(a.startsWith('H'));//是否开头 true
console.log(a.endsWith('s'));//是否结尾 true

• repeat

let s = 'abc';
console.log(s.repeat(2));//重复 abcabc

• padStart padEnd 补充,只有字符串位数小于最小要求才会补充

let s = 'x';no
console.log(s.padStart(5,'0'));//0000x
console.log(s.padEnd(5,'0'));//x0000

• 模板字符串

//字符串拼接
let [a,b,c] = [1,2,3]
let s = '<ul>\n'+
    '<li>' + a + '</li>\n' +
    '<li>' + b + '</li>\n' +
    '<li>' + c + '</li>\n' +
    '</ul>\n';
console.log(s);

//支持多行，支持使用变量，支持函数表达式
let [a,b,c] = [1,2,3];
function f(){
    return 5
}
let s = `<ul>
    <li>${a}</li>
    <li>${b}</li>
    <li>${c}</li>
    <li>${a+b}</li>
    <li>${f()}</li>
</ul>`
console.log(s);

数值的拓展

• Number.isInteger() 是否为整数

console.log(Number.isInteger(1));//true
console.log(Number.isInteger(0.1));//false

• Number.EPSILON 最小值常量

console.log(Number.EPSILON.toFixed(30));
//0.000000000000000222044604925031

• Number.isSafeInteger() 判断安全整数,Number.MAX_SAFE_INTEGER 最大安全整数

console.log(Number.isSafeInteger(5));//true
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER));//true
console.log(Number.isSafeInteger(Number.MAX_SAFE_INTEGER + 1));//false

Math 拓展api

• Math.trunc() 去除小数部分
• Math.cbrt() 立方根
• Math.hypot() 对所有数据的求平方和然后再开方
• 对数 Math.expm1(x) == e^x - 1
• 更多拓展…

函数的拓展

箭头函数

• 基本用法：

var f = v => v;
console.log(f(1));//1
//等价
var f = function(a){
    return a;
}

• 当箭头函数没有参数或者有多个参数，要用 () 括起来；当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => {
    let result = a+b;
    return result;
   }
//或
var f = (a,b) => a+b

• 当箭头函数要返回对象的时候，为了区分于代码块，要用 () 将对象包裹起来

var f = (id,name) => ({id: id, name: name});
console.log(f(1,'Js'));//{ id: 1, name: 'Js' }

• 箭头函数的解构赋值

let obj = {a:3 , b:4};
let f1 = ({a,b}) => {
    let c = Math.sqrt(a*a + b*b);
    return c
}
console.log(f1(obj));

• 箭头函数的应用

//1.数据修改
console.log([1,2,3].map( x => x + 1 ));//[ 2, 3, 4 ]
//2.排序
console.log([3,2,1,-1].sort((a,b) => a - b));//[ -1, 1, 2, 3 ]
//3. rest 参数
f2 = (a, ...args) => args;
console.log((f2(1,2,3,4,5)));//[ 2, 3, 4, 5 ]

• 箭头函数的语法特性
• 函数体内的this是在定义时确定的，不是在调用时确定的

let obj = {id:1}
function f(){
    console.log(this);
    setTimeout(() => {console.log(this.id)},1000)
}
f.call(obj);//{ id: 1 }   1

• 箭头函数不能作为构造函数 —》 箭头函数不初始化this
• 在箭头函数里面不能用arguments

let f1 = function(){
    console.log(arguments)
}
f1(1,2,3,4);//Arguments(4) [1, 2, 3, 4, callee: (...), Symbol(Symbol.iterator): ƒ]
let f2 = () => {console.log(arguments)}
f2(1,2,3,4);// arguments is not defined

• 解决无法使用arguments的方法

let f3 = (...args) => {console.log(args)}
f3(1,2,3,4);// [1, 2, 3, 4]

• 嵌套箭头函数，箭头函数内还能定义箭头函数

function f1(...args1){
    console.log(args1)
    return {f2:function(...args2){
        console.log(args2)
        return {f3:function(...args3){
            console.log(args3)
        }};
    }};
}

var a = f1(1,2,3);//[ 1, 2, 3 ]
var b = a.f2(4,5,6);//[ 4, 5, 6 ]
var c = b.f3(7,8,9);//[ 7, 8, 9 ]
// 等同
let f1 = (...args1) => {
    console.log(args1);
    return {f2: (...args2) => {
        console.log(args2);
        return {f3: (...args3) => {
            console.log(args3);
        }}
    }}
}
let a = f1(1,2,3);
let b = a.f2(4,5,6);
let c = b.f3(7,8,9);

函数的参数

• 函数默认值的设置

//案例
function f1(x,y){
    x = x || 'hello';
    y = y || 'world';
    console.log(x,y);
}
f1();//hello world
f1('js');//js world
f1('js','');//js world
//缺陷：1：当参数传了值，因为这个值为false，所以上次参数被覆盖
//		2：不利于代码优化，当需要删除一个参数时会更难处理
//解决方法
function f2(x = 'hello',y = 'world'){
    console.log(x,y);
}
f2();//hello world
f2('js','');//js

• 不能声明和形参一样的变量
• 当参数赋值以后，不能重复声明
• 参数默认值计算是惰性的
• 要注意TDS，参数初始化无法访问
• 函数的lenght：函数需要的参数个数

数组的拓展

• 拓展运算符

let [a,...args] = [1,2,3,4];
console.log(args);//[ 2, 3, 4 ]
//逆向展开
console.log(...[1,2,3,4]);// 1 2 3 4
//应用
arr1 = [1,2,3];
arr2 = [4,5,6];
arr3 = [...arr1,...arr2];

• 拓展的变量必须是最后一个，否则报错
• 对字符串的拓展：将字符串展开
• Array.from 把类数组转换成数组

let arrayLike = {
    0: 'aaa',
    1: 'bbb',
    2: 'ccc',
    'length': 3
}
let arr1 = [].slice.call(arrayLike);
//等同
let arr2 = Array.from(arrayLike);
console.log(arr1);
console.log(arr2);
// 应用
let divs = document.querySelectorAll('div');
let arr = Array.from(divs);
console.log(arr);

• Array.of 把零散的数据变成数组

console.log(Array.of(1,2))//[1,2]

• find() ， findIndex()回调函数
• 参数value,index,arr

let arr = [-2,1,2,3];
console.log(arr.find(x => x < 0));//-2
console.log(arr.find((value,index,arr) => {
    console.log(value,index,arr);//-2 0 [ -2, 1, 2, 3 ]
    return value < 0;//-2
}))
console.log(arr.findIndex(x => x < 0));//0
console.log(arr.findIndex((value,index,arr) => {
    console.log(value,index,arr);//-2 0 [ -2, 1, 2, 3 ]
    return value < 0;//0
}))
//应用
//查找数据中的NaN的index
let a = [1,2,3,NaN,4];
console.log(a.findIndex((value,index,arr) => {
    return Object.is(NaN,value);
}))//3

• 数组实例fill()

let a = new Array(5);
a.fill(0);
console.log(a);//[ 0, 0, 0, 0, 0 ]