ES6个性

ES6(ECMAScript2015)也就是ECMAScript6。因为2015年发行第六版，所以有两个名字ES6或者ECMAScript。ES6之后，ECMA每年都会准时更新，之前不会准时更新

获取div对象
<div class="item"></div><div class="item"></div><div class="item"></div>let items = document.getElementsByClassName("item"); //将class为item的元素放在items，造成一个list items是一个外面放div的块对象数组// 遍历这个listfor(let i=0;i<items.length.i++){    items[i].onclick = function(){        items[i].style.background = "pink";    }}
let和const的相同点
  • 都是只在申明的块级作用域内有用

let和const的不同点:

  • let申明的变量能够扭转，而且是类型和值都能够扭转！，const申明的常量不能扭转，必须一旦申明就立刻初始化。

    let x = 3;x = 4;===============const x = 4; // 之后就不能在变了

ES6中的let和const取代了ES5中的var，让代码更平安。

const个性

const润饰的常量不能做批改，But,const润饰的数组和对象却是能够批改...

const NAME = 'fenn';NAME = 'jiaying';  // 谬误const NAMES = ['wei','fenn','jiaying'];NAME.push('wang')
数组和对象的解构
// 数组的解构const F4 = ['刘备','关羽','张飞'];let [L,G,Z] = F4; // 实现解构，L变量存储的是刘备// 对象的解构const zhao = {    name:'刘备',    age:23,    work:function(){        console.log('三顾茅庐');    }}const {name,age,work} = zhao; console.log(name);work(); // 函数执行;
// 函数和对象解构的联合function connect({host="99.11.6.106",username,password,port}){ //形参也能赋默认值    console.log(host);    console.log(username);    console.log(password);    console.log(port);}connect({    host:"localhost",    username:"root",    password:"root",    port:3306,});
模板字符串``

也是一种字符串.这种字符串中能够存在换行符

let str = `<ul>            <li>刘备</li>            <li>关羽</li>            <li>张飞</li>            </ul>`;

另外，能够更不便的进行字符串拼接

let str1 = '刘备';let str2 = '蜀中${str1}' // str2 蜀中刘备
对象简化写法

能够间接将变量和函数写入对象中

let name = '刘备';let change = function(){    console.log('Hello,chengdu')}const Liu = {    name,    change,    f(){   // 这样也是一种简化，写全应该是f:function()        ...    }}
箭头函数

箭头函数相比一般函数。它的this是动态的，不会因为call、apply办法的改变而变，箭头函数外面的this永远指向的是函数所处的对象

window.name = '刘备'const WEI = {    name:'曹操';}let getName = () => {    console.log(this.name);}function getName2(){    console.log(this.name);}// 间接调用getName();getName2();         // 一样的都是输入 刘备// call扭转指向 调用getName.call(WEI);  // 因为getName是箭头函数 不会被扭转指向getName2.call(WEI); // 因为是一般函数，call指向WEI对象，getName2中的this就会变成WEI

这里也能够更好地了解call、apply、bind的作用.

箭头函数不能作为构造函数实例化对象。也就是说，实例化对象应用的函数依然用的是一般函数

let Person = (name,age) =>{   //当函数被用作结构的时候，还是只能应用function型函数    this.name = name;    this.age = age;}function Person(name,age){    this.name = name;    this.age = age;}let me = new Person('刘备',23);

不能应用arguments形参

箭头函数最罕用的用途还是this

// 这个例子来领会this指向const obj1 =  {    name:'刘备',    getName:function(){        this.name; // 一般函数 this指的是obj1    }}const obj2 =  {    name:'刘备',    getName:() => {        this.name; // 箭头函数 this指向的是window，不是obj2    }}
filter()函数
  1. filter函数会返回一个新的数组，不会批改原来函数
  2. 参数是一个函数
  3. 参数里的匿名函数中的item会顺次执行这个函数,匿名函数返回true，则会保留在新的数组里
let nums = [1,2,3,4,5,6,7,8,9,10];let nums2 = nums.filter((item) => {    if(item %2 === 0){        return true;    }else{        return false;    }})
形参设置默认值

这个个性很多语言也有。

function add(a,b,c=10){    return a+b+c;}console.log(add(1,1)) // 输入12
rest参数和arguments参数

与arguments参数比拟相似，性能也类似

function fn(){    console.log(arguments); // arguments参数不必被动定义，能够间接用;输入的是对象}fn("w","n","z");function fn1(...args){    console.log(args); // 输入的是一个数组}fn("王菲","那英");function fn2(x,y,...args){    console.log(args); // 输入的是数组[3,4,5,6,7]}fn2(1,2,3,4,5,6,7)

对于arguments参数的了解和应用，能够看这篇博客arguments参数的了解和应用

扩大运算符

作用:将一个数组中内容，开展成多个变量。简略来说就是扔掉数组标记[]

const tfboys = ["王俊凯","易烊千玺","王源"];function chunwan(){    console.log(arguments);}chunwan(tfboys); // 控制台输入arguments个数只有一个,然而一个数组chunwan(...tfboys)// 应用扩大运算符后,arguments.length是3 别离是 "王俊凯","易烊千玺","王源"

数组合并:

const list1 = ["a","b"];const list2 = ["c","d"];const list12 = [...list1,...list2];

数组对象转成数组:

<div></div><div></div><div></div>const divs = document.querySelectorAll("div"); // 这是一个数组对象const divArray = [...divs] // 这时候才转成数组

数组拷贝:

const A = ["e","g","m"];const B = [...A] //又失去一个截然不同的数组B
数据类型symbol

Symbol是JS特有的数据类型

let s = symbol("symbol"); // 举世无双的一种数据类型
  1. 常常给对象增加属性和办法
  2. Symbol函数承受一个可选的字符串，是为了减少对Symbol的形容
  3. 用Object.getOwnPropertyNames(),Object.keys()或者for ... in 办法遍历对象，无奈遍历到symbol属性
  4. 用Object.getOwnPropertySymbols)()则能够返回所有symbol属性
  5. symbol属性不能new
  6. symbol.for()创立共享symbol，如果已存在，间接返回第一个symbol
emperor = {}const bastard1 = Symbol.for("如花");emperor[bastard1] = "如花的儿子";const bastard2 = Symbol.for("如花");emperor[bastard2] = "如花的儿子";const bastard3 = Symbol.for("似水");emperor[bastard3] = "似水的儿子"console.log(emperor); // 只会输入两个symbol  symbol["如花"]="如花的儿子" symbol["似水"]="似水的儿子"console.log(bastard1 === bastard2) // 因为应用symbol.for创立，所以===成立 trueconsole.log(symbol() === symbol()) // false 因为symbol创立的唯一性
iterator

能够用原生附带迭代器的数据类型有

Array、arguments 、set、map、string。

不确定有没有itrator的话，能够输入对象，在对象中寻找有没有symbol.iterator属性,有的话就能够应用迭代器

const xiyou = ["唐僧","孙悟空","猪八戒","沙僧"];for(let v of xiyou){ // for in的话输入的会是数组下标    console.log(v);}

迭代器symbol.iterator本人也是一个对象，能够打印输出。外面有一个办法next()。我感觉了解最重要的就是要晓得iterator是一个对象，而不是一个一般的指针。以前的了解有偏差

生成器函数

略

Promise

理解概念：回调函数。函数被当做参数且满足肯定条件后是回调函数

setTimeout(function(){    console.log("3s后执行回调函数"); // 函数参数就是回调函数},3000);

异步工作：不阻塞前面工作的执行。跨栏式执行叫做异步工作。

const p = new Promise(function(resolve,reject){    setTimeout(function(              let data = "从数据库\网络取得数据";              resolve(data);              let err = "取得数据失败";              reject(err);              ),3000);});p.then(function(value){    console.log("");},function(reason){    })
// promise封装读取文件readFile异步函数// promise封装这种慢动作十分有用const fs = require("fs");const p = new Promise(function(resolve,reject){    fs.readFile("./resouse/为学.md",(err,data)=>{        if(err) reject(err); // 失败        resolve(data); // 胜利    });});p.then(function(value){    console.log(value.toString());},function(reason){    console.err("读取失败");})
// promise 封装Ajax/http申请const p = new Promise(function(resolve,reject){    // 1.Ajax创建对象    const xhr = new XMLHttpRequest();    // 2.初始化    xhr.open("GET","https://api.apiopen.top/getJoke");    // 3.发送    xhr.send();    // 4.绑定事件,解决响应后果    xhr.onreadystatechange = function(){        if(xhr.readyState = 4){            if(xhr.status >=200 && xhr.status<300){                console.log(xhr.response);            }else{                console.error(xhr.status);            }        }    }});
Ajax