ES6总结

1.1 ECMAScript 6 简介

学习网址：http://es6.ruanyifeng.com/

ECMAScript是javascript标准

ES6就是ECMAScript的第6个版本

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

1.2 ECMAScript 和 JavaScript 的关系

ECMAScript是JavaScript的规格，JavaScript是ECMAScript的一种实现，在日常场合，这两个词是可以互换的。

JavaScript的创造者Netscape公司，将JavaScript提交给国际标准化组织ECMA，希望这种语言能够成为国际标准，后来ECMA发布标准文件的第一版（ECMA-262），规定了浏览器脚本语言的标准，并将这种语言称为ECMAScript

该标准从一开始就是针对JavaScript语言制定的，之所以不叫JavaScript，有两个原因：一是商标，Java是Sun公司的商标，根据授权协议，只有Netscape公司可以合法地使用JavaScript这个名字，且JavaScript本身也已经被Netscape公司注册为商标；二是想体现这门语言的制定者是ECMA，不是Netscape，有利于保证这门语言的开放性和中立性。

但事实上，JavaScript比ECMA-262的含义多得多，一个完整的JavaScript实现应该由以下三个部分组成：

1) ECMAScript：核心

2) DOM：文档对象模型

3) BOM：浏览器对象模型

2.1数组的解构赋值

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

以前，为变量赋值，只能直接指定值。

let a = 1;let b = 2;let c = 3;

ES6 允许写成下面这样。

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

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值。

本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];

.

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"let [x, , y] = [1, 2, 3];

2.2字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';
a // "h"b // "e"c // "l"d // "l"e // "o"

类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

函数参数的解构赋值

 

2.3模板字符串 （重点）

传统的 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!
`);

 

2.4 数组扩展

var arr = [10,20,30]
var arr1 = [40,50,60];
console.log([...arr,...arr1]);
var arr2 = [23,235,2,3,52,35];
console.log(Math.max.apply(null,arr2));
console.log(Math.max(...arr2))

 

2.5字符串的新增方法

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

实例方法：repeat()

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

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

 

 ES6知识点总结

    变量声明关键字

        var
            全局作用域和函数作用域
        let
            局部作用域
            不会变量提升
            不能重复声明
        const
            值类型不能修改
            声明必须赋值
            一般大写

    解构

        数组
            定义：把数组或对象解析为单独变量
            1基本格式 
    var[a,b,c="defalt",...rest]=arr
            2逗号代表下一位
            3   ...rest
剩余的所有（只能放在最后）
            4.可以有默认值
            5  交换变量
[a,b]=[b,a]
        对象
            var {name，age，say="nihao",rest}=obj
            对象解构没有顺序

    展开

        ...arr
arr展开为单独变量
    

字符串

         字符串模板
`${js变量}`
可以换行，可加特殊符号
        遍历
for  of
        检测
includes（sub)是否包含
startsWith(sub)以开头
endsWidth(sub)以结尾
        去空白
trim（）去掉两端空白
trim Left（）去掉左边空白
trimRight（）去掉右边的空白
        重复
repeate(n)字符串重复n次
        填充
"22".padStart(4."0")
''0022"
.padEnd(次数，填充字符串）

数组高阶方法

    forEach遍历
        arr.forEach(function(item,index,self){})
        item
当前遍历的元素
index
下标
self
当前数组
    map映射
        arr.forEach(function(item,index,self){
//返回一个映射数组
})
    filter过滤
        arr.filter(function(item,index,self){
//返回真，元素保留   假 过滤掉
})
    reduce累计
        arr.reduce(function(a，b){
//a是上一个返回的结果
})
    some有一个
        有一个返回结果为true最总结果为true
    every每一个
        每个返回结果为true最终结果为true
    find
查找元素
        查找符和条件的元素
    findIndex
查找下标
        查找符合元素的下标
    sort(a,b)=>(a-b)
排序
  

函数

    默认参数
        function fn(a=10,b=12){}
    调用：扩展参
        fn(...arr)
    定义：不定参
        function(...args){
}

对象

    对象简写
        变量和值简写
        函数function简写
        var  name="mumu"
var obj={
name,
say(){alert(this.name)}
}
    对象动态属性
        {[nick+"msg"]:"你好"}

类

    面向对象基本特点：封装；继承；多态；接口
    单词
extends继承
constructor构造函数
super超类
static静态
    定义类方法
        class Person{
            constructor(name,age){
                this.name=name;
                this.age=age;
            }
            eat(){
                alert("我喜欢吃大米")
            }
        }
    实例化类
        var  pl=new Person()
    类中的this 
        Person类中的this指向、当前类的实例（pl）
    继承
        class Teach extends Person{
        constructor(name,age,major) {
               super( );
               this.major=major;
            }
}

模块module

    导入
        import{name，fun,Square}from '.api.js'
        import  Square from '.api.js'
import  Sq  from '.api.js'
        别名按时，*代表所有
impost  *api  from'./api.js'
api.name;api.fun()
        别名
import  Square,{name，fun  as fn }from '.api.js'
    导出
        export {name，fun，Square}
导入多次
        export   default  Square；
导入一次

Set

    定义：没有重复元素的集合（数组）
    初始化：
var  s1 =new  Set()
var  s2 =new  Set{[1,2,5]}
    添加：
sl.add()
    删除：
sl.delete()
情况
sl.clear()
    检测
sl.size
    长度
sl.size
    转数组
Array.from(sl)
[...sl]
    数组去重
        arr=[...new  Set(arr)]