关于javascript:ES6新特性

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 的块对象数组

// 遍历这个 list
for(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 创立，所以 === 成立 true
console.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