ES6
let
1.不允许重复声明
2.let可以每一次都生成一个新的值
for(Let i=0;i<oli.length;i++{
oli[i].onclick =function(){
console.log(i)
}
3.暂存性死区
let应该放在console的上面
4.不与顶层对象挂钩
const
1.常量
一开始必须要给他值
2.不能重复定义
3.块级
在块外无法访问
4.声明不提升
改变const值
1.将其定义为对象的形式
变量解构赋值
可以直接获取到其中的值
可以获取到前三个字母
模板字符串
特殊:支持表达式例如三目运算符
Let arr =["tiechui","kerwin","gangdan"]
Let newlist = arr.map(function(item,index)
return `<li class="${index===0?'active':''}">
<b>${item}</b>
</li>`
console.log(newlist)
Let oul = document.querySelector("ul")
oul.innerHTML = newlist.join("")
字符串扩展与数值扩展
数组拓展
array.of区别:
array如果只有一个值会被人为空
而.of可以使其中一个值为那个数
flat:
let arr = [1,2,3,[4,5,6]]
let arr1 = arr.flat()
console.log(arr,arr1)
对象拓展
1.key值域变量相同时可以省略
Let name= "moduleA"
Let obj=name, //name:name
test1(){
},
test2(){
2.对象属性:表达式
Let name=a
Let obj = {
[name+"bc"]:"kerwin'
console.log(obj)
可以实现key的拼接
3.扩展运算符…
let obj1 ={
name:"kerwin"
// let obj1={
…obj
//
//}
Let obj2 = {
age:100
// obj1.name = "tiechui"I
console.log({…obj1,…obj2})
4.object.assgin
合并:
第一个元素为目标,第二三个往第一个元素合并
Let obj1={
name:"kerwin"}
let obj2 ={
age:100}
let obj3 ={
name:"tiechui"
}
console.log(0bject.assign(obj1,obj2,obj3))
5.object.is
可以用来判断NaN是否相等
console.log(Object.is(parseInt("kerwin"NalN));
也可以用来判断正0和负0是否相等
函数的扩展
1.参数默认值后面的可以再改盖掉前面的
//1-参数默认值
function ajax(url,method="get",async=true){
console.log(url,method,async)
ajax("/aaa","get",true)
ajax("/bbb")
ajax("/ccc","post")
2.rest函数(剩余参数)
function test(x,y,…data){
console.log(data)
}
test(1,2,3,4,5,6) //此时test就是剩余参数
3.name属性
例如test.name,可以获取他的name属性
4.箭头函数可以简洁
1.//箭头函数:写法简洁
Let test = ()=>"1111111111111"
console.log(test())
Let arr = ["aaa","bbb","ccc"]
Let newarr = arr.map((item)=><li>${item}</li> )
console.log(newarr)
//1只有return 可以省略
//2.如果返回对象需要注意加上括号表明是一个整体
Let test2 = ()=>({
name:"kerwin",
age:100
})
//3.如果只有一个参数,
可以省略()
Let arr = ["aaa","bbb","ccc"]
Let newarr = arr.map(item=>'<li>${item}</li>)
Let newarr2 = arr.map((item,index)=> <li>${item}-${index}</li>)
console.log(newarr,newarr2)
//4.无法访问arguments,无法new
Let test3 =()=>{
// console.log(arguments)
}
// test3(1,2,3,4)
可以通过新建一个that来存储this
或者使用箭头函数,因为他没有this,所以指向的是父域的
Symbol(表示独一无二的值)
//1.不能进行运算
// console.log(s1>"aaaaa")
// 2.显示调用toString()
console.log(s1.toString()+"aaaa")
//3.隐式转换boolean
iF(s1){
console.log("执行")
Iterator迭代器
Iterator 的遍历过程:
(1)创建一个指针对象,指向当前数据结构的起始位置。也就是说,遍历器对象本质上,就是一个指针对象。
(2)第一次调用指针对象的next方法,可以将指针指向数据结构的第一个成员。
(3)第二次调用指针对象的next方法,指针就指向数据结构的第二个成员。
(4)不断调用指针对象的next方法,直到它指向数据结构的结束位置。
set
//set实例属性和方法
console.log(s1.size)
//add
s1.add(5).add(6)
console.log(s1)
// has
console.log(s1.has(5))
// delete
s1.delete(5)
console.log(s1.has(5))
Map数据结构
Proxy代理
注意使用proxy要改变this指向
Reflect
Reflect 可以用于获取目标对象的行为,它与Object类似,但是更易读,为操作对象提供了一种更优雅的方
式。它的方法与 Proxy是对应的。
//1.代替object 某些方法
Let obj ={
Reflect.defineProperty(obj,"name",{
value:"kerwin",
writable:false,
enumerable:false
})
console.log(obj)
//2修改某些object方法返回结果
// 老写法
try {
object.defineproperty(target, property, attributes);
success
} catch (e) {
// fail
}
//新写法
if (Reflect.defineProperty(target, property, attributes)){
// success
} else {
// fail
}
//老写法
delete obj.name
∥/新写法
Reflect.deleteProperty(obj,"name")
Promise对象
Let pro = new Promise(function(resolve,Ireject){
/∥/执行器函数
setTimeout(()=>{
resolve(1000)
{
},1000)
})
// pro.then(()=>{
console.log("奖金")
//
//},()=>{
console.log("没有")
//
//})
pro.then(()=>{
console.log("奖金")
}).catch(()=>{
console.log("没有")
})
//.then.then链式调用
Let pro = new Promise(function(resolve,reject){
∥/执行器函数
setTimeout(()=>{
resolve(1000)
// reject("no 1111")
},1000)
})
pro.then((res)=>E
console.log("奖金1",res)
//如果return非promise类型,pending-fulfilled
}).then((res)=>{
console.log("奖金2",res)
}).catch((err)=>{
console.log("没有",err)
})
Generator
function ajax(url){
return new Promise((resolve,reject)=>{
Let xhr new XMLHttpRequest()
xhr.open("get",url,true)
xhr.send()
xhr.onreadystatechange function(){
if(xhr.readyState 4){
if(xhr.status>-200&8xhr.status<300){
resolve(JSON.parse(xhr.responseText))
}else{
reject(xhr.responseText)
}
})
function *gen(){
Let res = yield ajax("1.json")
console.log("第一个请求的结果",res)
Let res2 = yield ajax("2.json",res)
console.log(res2)
}
Let g = gen()
//手动版本
// console.log()
g.next().value.then(data=>{
// console.log(data)
g.next(data)
})
//自动版本
function AutoRun(gen) {
Let g = gen();
function next(data){
Let res =g.next(data);
if (res.done) return
res.value.then(function (data) {
next(data);
});
class语法
class Person {
static myname="person类的名字"
static mymethod = function(){
// console.log("mythod",this.age)
}
constructor(name,age){
this.name = name
this.age =age
}
say(){
console.log(this.name,this.age)
}
//类的方法
Let s=Symbol('say')
class Person {
constructor(name,age){
this.name
name
this.age age
[s](){
console.log(this.name,this.age)
}
}
Let obj = new Person("kerwin",100)
console.log(obj.__proto__===Person.prototype)
Moudle模块化语法
1.type =modle无法有效果无法放代码
导入的方法:
import A1 from‘./1.js’
import {A1,A2} from './1.js'
NodeJs的模块化
const obj1 = require("./1.js")
const obj2 = require("./2.js")
exports.B1=B1
exports.B2=B2