共计 5190 个字符，预计需要花费 13 分钟才能阅读完成。
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()函数
filter函数会返回一个新的数组，不会批改原来函数- 参数是一个函数
- 参数里的匿名函数中的
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)) // 输入 12rest参数和 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"); // 举世无双的一种数据类型- 常常给对象增加 属性 和办法
Symbol函数承受一个可选的字符串，是为了减少对Symbol的形容- 用
Object.getOwnPropertyNames(),Object.keys()或者for ... in办法遍历对象，无奈遍历到symbol属性 - 用
Object.getOwnPropertySymbols)()则能够返回所有symbol属性 symbol属性不能newsymbol.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
正文完