ES6

1 var 和 let const

  var a = 2; var 变量提升。var是全局作用域

  let a = 10; let 声明变量,没有变量提升。

  let 是一个块级别作用域。

  let不能重复声明。(可以被修改)

  const 有以上特征,声明常量,无法修改。开发一般默认是const,除非有明显的变量,声明为let。

  const 可以声明对象常量,对象不能被修改,对象的属性可以被修改。

   let使用场景:1for循环,2 不会污染全局变量。

const arr = []
for (var i = 0; i<10; i++) {
    arr[i] =function (){
        return i
    }
}
console.log(arr[5]())

let RegExp =10;
console.log(RegExp)
console.log(window.RegExp)

  

2 模块字符串

  

    const o = document.querySelector('.box');
    let id =1,name='caomei';
    o.innerHTML="<ul><li><p+id= "+id+">"+name+"<p><li><ul>"

如今写法:
  let htmlStr = ` <ul>
    <li> <p id=${id}>${name}></p>
    </li>
  </ul>`
变量名用$+{变量名}进行代替;美元符号+{变量名}
  o.innerHTML= htmlStr;

  

3 函数默认值,剩余参数,

  函数默认值书写:

function add(a,b) {
    a = a|| 10;
    b = b|| 20;
    return a+b;
}
console.log(add())

function add1(a,b =20) {
    return a+b;
}
function add2(a=20,b =20) {
    return a+b;
}

  

函数默认参数 是个 函数:

//默认的表达式也是个参数。
function add3(a,b=getVal(5)){
    return a+b;
}
function getVal(val) {
    return val +5
}
console.log(add3(10));

  

函数的剩余参数: 

function pick(obj) {
    let res = Object.create(null);
    for(let i = 1;i<arguments.length;i++) {
        res[arguments[i]] = obj[arguments[i]]
    }
}

let book ={
    title:'es6',
    author:'caomei',
    yaer:2019
}
let bookDate = pick(book,'author','year');
console.log(bookDate)


function pick2(obj,...keys) {
    let res = Object.create(null);
    for(let i = 1;i<arguments.length;i++) {
        res[keys[i]] = obj[keys[i]]

    }
    return res
}

  

4 函数 扩展运算符,箭头函数。

剩余运算符: 把多个独立的参数 合并到一个数组里面。

扩展运算符:吧一个数组分割,并且各个项作为分离的参数传给函数。

处理数组中的最大值,使用apply:

const arr = [1,2,3,5]

console.log(Math.max.apply(null,arr))

console.log(Math.max(...arr));

箭头函数: =>定义。 function()  {} 变成了   ()=》 {} 非常多非常多。

 let add =function(a,b){return a+b}

let add =(a,b)= >{ return a+b}; //function变成了=》

let add = val => val+5;

let add2 = (val1,val2)=>val1+val2;

返回对象的时候必须加()

let getObj = id=>({id:id,name:'caomei'})

let obj = getObj(1);

let fn = (()=>{return ()=>{

  console.log('hello');}

})();

es6的this指向。  没有this绑定!

es5之前 ,this是会被改变的。取决于调用函数的上下文对象。

let p ={

  id :123,

  init: function(){ document.addEventListener('click',function(event) {

  this.doSomeThigs(event.type)}}//这个this值得是document对象。

}

bind 把this指向进行改变。 {}.bind(this)。不好理解

document.addEventListener('click',(event)=>{this.doSomeThings(event.type)},fasle)

给方法指向的时候,不要使用箭头函数,使用原来的,会是箭头函数this指向window。

一但使用箭头函数,当前就没有作用域连。箭头函数没有this指向,箭头函数内部this只能查找作用域连的方法。

注意事项1:箭头函数 不能使用new关键字来实例化对象。

2: function 函数是一个对象,箭头函数不是一个对象,内部没有arguments,其实就是一个语法糖。 

5 解构赋值。

是对赋值运算符的一种扩展。

它对数组和对象进行的操作。

有点: 代码上简洁。

let ndoe ={ type:'iden',name:'foo'}

let type1 = node.type

let name1= node.name  

对象的结构赋值。完全解构

let {type1,name1} = node ; 名称必须和node里面一样!

console.log(type,name)

let obj = {a:{},b:[],c:"hellowolrd"}

let {a } = obj;

不完全解构,可以忽略。

let {a,...res} = obj;

//默认值:

let  {a,b=20} = {a:20}

//对数组的完全解构:

let  arr= [1,2,3]

let  [a,b,c] =arr;

对数组的不完全解构。

[1,[2],3]

6 扩展对象。

const name ='小米',age =20;

const  person = { //des直接写入变量和函数,最为对象的属性和方法。

  name, //相当于name:name

age,

sayName(){}

}

functio fn(x,y){return {x,y}}//

console.log(fn(10,20));

letcart ={ whel:4,set(newVal{},get(){return this.whell}}

const obj = {};

obj.isShow = true;

const name = 'a';

obj[name+'bc'] = 123;

obj ['f'+'bc'= function(){consoel.log(this};

//对象的方法 is() === 比较两个值是否严格相等。

console.log(NaN === NaN)//解决NaN的特殊性。

// assign();  对象的合并。!!!!使用的比较多。

Object.assign(target,obj1,obj2...)

Object.assign({},{a:1},{b:2})//返回合并之后的新对象,浅拷贝。

7symbol

数据类型Symbol,表示的是独一无二的值。用的比较少!

const name = Symbol('name')

const name2 = Symbol('name')地址不一样。

最大的用途定义对象的私有变量!

let  s1 =Symbol('s1);

obj[s1] = 'xiaocaomei'

(obj[s1])

let obj2= {[s1]:'xiaocao'}//如果吧[]去掉就是错的、

obj.s1错误!!!

8 set 集合。表示无重复值的有序列表。

  let set = new Set();

  set.add(2)

  set.deletet(2)

  set.has('4) //检查

  set.size

  set.forEach( (val,key)=>{

  console.log(val);console.log(key);// key和val一样的。

  }

  将set转化为数组!使用扩展运算符。

  let arr = [...s2]

  //set中对象引用无法被释放。

  obj= null;//释放一个对象。

  

9map

  键值对有序列表,键和值都是任意类型、

  map.set('name','caomei')

  map.get('name');//获取

  map.has('name') //true校验

   map.delete('name');

  map.clear();

  let m =new Map();

  let m = new Map(['a',1], ['c',2])

10 数组扩展

数组方法from() of();

from()将伪数组转化为真数组:

[].slice.call(argments):es5转化。

Array.from(arguments):

应用  lis =querySelectorAll('li');

Array.from(lis)

([...lis]) 扩展运算符,将伪数组转化为真正的数组!

from()可以接受第二个参数,对每个元素进行处理。

let liContents = Array.from(lis,ele=>ele.textContent);

of将一组的数据转化为转化为数组。

Array.of(3,11,20,{id:1},[20])

copywithin;复制,【】数组内部指定位置的元素复制到其他的位置。

[1,2,3,8,9,10].copyWithin(0,3);  3之后的替换到3之前的【8,9,10,8,9,10】

find() findIndex():()里面的写的是条件

find():找出第一个符合条件的数组成员

findIndex():找出第一个符合条件的数组成员下表

// entries(),keys(),value()返回一个遍历器,使用for ...of进行遍历

// keys() 对键名进行遍历,value对值遍历,entries键值对

for(let index of ['a','b',].keys()){

console.log(index}

for (let let of ['a','b',].values()){

console.log(index}

for (let [index,ele] of ['a','b'].entries()){

console.log(index,ele)

}

let letter = ['a','b','c']

it = letter.entries();

it.next().value();

includes()返回一个布尔值,表示数组是否包含给定的值。

[1,2,3].includes(2) 返回true

[1,2,3].include('4') 不包含返回false

[1,2,3].indexof('2') 包含返回下标,不包含返回下标。

数组方法:

A.isArray(A)是否是一个,返回布尔值

A.forEach(函数)让数组的每一个元素遍历 一次myFcuntion函数。数组改变。

A.map(函数):让数组每个元素执行函数,并且返回新数组。原数组不变。

A.filter(函数):让数组每个元素执行相同的函数,合成一个新数组

A.reducer(函数):对数组每一个元素,执行函数,返回综合。

A.erery(函数):对数组每一个元素是否复合条件,中间一个不符合返回false。

A.some():所有元素进行判断范湖一个布尔,存在元素都满足,返回true。都不满足返回fasle

A.pop(),删除最后一个。返回新的数组

A.push()添加新的。

A.shift()删除第一个。返回新的数组

A.unshitf(x)添加第一个。返回新的数组的长度。

多个数组拼接:A.concat()

A.toString():转为字符串。

A.join(',').A.('##'):转为字符串,设置元素间隔

A.splice(开始位置,删除个数,元素):万能的方法,可以实现增删改。

11 Interator

12 Promise

13 Async

14 类:

es5 制造类:function Peson()

es6制造类: class Person {

constructor(name,age){ this.name= name,this.age= age }

sayName() {return  this.name}}//方法之间没有逗号。

  //实例化的时候立刻调用constructor。  

Object.assign(person.prototype,{})

通过object.assign()方法,一次性向类中添加多个方法

let p1 = new Person();

多个类进行继承。

 class Dog extends Animal{}

15 es6模块化。

CommonJS就是一个对象 服务器

AMD浏览器。

ES6 的module,是浏览器和服务器一起的。依赖关系。

原文地址:https://www.cnblogs.com/hacker-caomei/p/14897112.html