JS内容ES6专项
let变量
let用来声明变量
用法和var类似
例如:let a = 10
1,块级作用域
在一个{}
中let声明的变量只存在这个{}
之内
2,不允许重复声明
let a = 2;
let a = 1;
如上,网页会报错
变量的声明不能被覆盖
3,变量不能被提升
必须先声明,再使用,
如果直接使用,会报错
在声明变量之前的区域被称为暂存性死区
4,let不与顶层对象挂钩
const常量
1,常量
不允许重复定义
const声明的是一个常量,一旦声明,不能再进行更改
2,块级作用域
和let相同,只在一个块内存在
3,变量不能被提升
与let相同
必须先声明,再使用,
如果直接使用,会报错
在声明变量之前的区域被称为暂存性死区
4,不与顶层对象挂钩
变量的解构赋值
ES6进行解构赋值
let[a,b,c] = [1,2,3];
数组可以嵌套进行解构赋值
例如:
let [a,[[b],c]] = [1,[[2],3]]
let [,,third] = ["a","b","c"]
//third返回值为c
let [x,,y] = [1,2,3]
//x返回1
//y返回3
let [head, ...tail] = [1,2,3,4]
//head[1]
//tail[2,3,4]
let [x,y,...z] = ['a']
//x"a"
//y返回undefined
let [x,y] = [1,2,3]
//x返回1
//y返回2
let [a,[b],d] = [1,[2,3],4]
//a返回1
//b返回2
//d返回4
当解构失败时,直接返回undefined
对象的解构赋值
对象与数组的解构赋值不同,对象的属性没有次序,只需要保证变量和属性同名,就能取到值
let obj = {
name:"kerwin",
age:100
}
let {age} = obj
特殊
如下
var code = "1234"
let res = {
code:200,
data:"111111"
}
let {data,code:co} = res;
console.log(data,co)
当对对象进行解构赋值时,若上面有一变量名与对象中的变量名相同,可以用上面的方法改变对象的变量名,再进行解构
函数解构赋值获取参数
function getData(){
let res = {
code:200,
data:{
list:["aaa","bbb","ccc"]
}
}
test(res)
}
function test({code,data:{list}}){
console.log(code,list)
}
getData()
模块字符串
拼接
之前拼接字符串: console.log("my name is"+name+".I'm"+age+"years old")
需要通过多个+相加
ES6:
用``
(反引号)进行拼接,称为模板字符串
在``
中编写${变量}将字符串和变量拼接到一起
console.log(`my name is ${name}.I'm ${age} years old`)
换行
使用``
模板字符串时,可以直接换行,不需要将字符串进行拼接
$符的特别用法
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("")
includes函数
includes函数可以判断是否目标包含输入的值
let myname = "xiaoming"
console.log(myname.includes("ao"))
如果包含,则返回true
同理,还有其他两个相似的函数
startWith("ao")
endWith("ao")
includes函数还支持两个变量的输入
myname.includes("ao",2)
第二个参数表示从该个字符开始进行比对
数值plus
二进制和八进制表示法
let num1 = 100; //十进制
let num2 = 0x100; //十六进制
let num3 = 0b100; //二进制
let num4 = 0o100;//八进制
isFinite与isNaN方法
减少全局方法,可以使得语言逐步模块化
let num1 = Number.isFinite(100) //返回true
let num2 = Number.isFinite(100/0) //返回false
let num3 = Number.isFinite(Infinity) //返回false
let num4 = Number.isFinite("100") //返回false
//isFinite检查是否是一个具体的数值
let num5 = Number.isFinite(NaN) //返回true
let num6 = Number.isFinite(100) //返回false
let num7 = Number.isFinite("abc") //返回false
let num8 = Number.isFinite("100") //返回false
保留整数
将小数抹去,保留整数
Math.trunc(1.2)
如上,直接返回1
判断数字的数学类型【正数,负数,0】
如果是正数,返回+1
如果是负数,返回-1
如果是0,返回+0
如果是-0,返回-0
非数值回先转换为数值,再进行对比
数组扩展
1,...
展开
第一种
let arr = [1,2,3]
let arr2 = [4,5,6]
console.log([...arr,...arr2])
返回值就是1,2,3,4,5,6、
第二种
let myarr = [1,2,3,4,5,6]
let [a,b,c] = myarr
console.log(a,b,c)
返回值为1,2,3
如果改变上面代码为
let myarr = [1,2,3,4,5,6]
let [a,b,...c] = myarr
console.log(a,b,c)
a返回值为1
b返回值为2
c返回值为3,4,5,6
2,Array.from
可以对数据类型进行转换
例如:可以将数组结构 转换为数组对象
function test(){
console.log(Arry.from(arguments))
}
test(1,2,3,4)
let olis = document.querySelectorAll("li")
Arry.from(olis).map(function(){
})
3,Array.of
将一组值转换为数组
let arr1 = Array(3)
let arr2 = Array.of(3)
console.log(arr1,arr2)
4,find findIndex()
findIndex()
查找符合条件的元素,如果某元素符合条件,就会返回该元素的索引值,否则返回-1
let arr = [11,12,13,14,15]
let res = arr. findIndex(function(item){
return item>13
})
console.log(res)
findlast findLastIndex()
findLastIndex()
从右向左进行遍历,之后返回一个条件符合的元素的位置
与上面相同
对象扩展
对象简写
let obj = {
name,
test1(){
}
}
对象属性
ES6简写获取对象的属性
{
getName() { return "Luke" },
getAge() {return 24 }
}
对象的扩展运算符
对象的扩展运算符和上面的数组扩展运算符相似
对象的扩展运算符可以执行遍历的操作let m = {a:3,b:4}; let n = {...z}; console.log(n);//a返回3,b返回4
Object.assign
可以合并多个对象
例如
var arr1 = {a : 1};
var arr2 = {b : 2};
var arr3 = {c : 4};
var arr4 = {d : 5};
Object.assign(arr1,arr2,arr3,arr4);
//结果返回为{a : 1 , b : 2 , c : 4, d : 5}
Object.is
判断两个值是否相同
例如
Object.is('a', 'a');
只要相同,就返回true
特别
Object.is(0, -0);
返回值为false
Object.is(null, null);
返回值为true
ES6函数的扩展
函数参数的默认值
function ajax(url,method="get",async=true){
console.log(url,method,async)
}
ajax("/aaa","get",true)
ajax("/aaa",)
如上,本应该输入三个参数,但实际只输入了一个参数,后面两个参数存在默认参数,在运行时直接套用
rest参数 剩余参数
此处剩余参数和上面的剩余参数概念大致相似
例如
function foo(x,y,...args){
console.log(args)
}
foo(1,2,3,4);
这里args返回【3,4】
箭头函数
以往的函数可以简写成箭头的形式
如:(a,b)=>{执行语句}
1,只有return可以省略
2,当只有一个参数时,可以省略小括号,当只有一行执行语句时,同时不写return,语句的返回结果就是返回值:(a)=>{return a*a}
简写为a=>a*a
3,无法访问arguments,无法new
4,箭头没有this
this执行父作用域
Symbol
Symbol是ES6一种新的原始数据类型
使用Symbol作为对象属性名
let name = Symbol()
let age = Symbol()
var obj = {
[name]:"xiaoming"
[age]:"100"
Symbol函数可以接受一个字符串作为参数,表示对Symbol实例的描述主要是为了在控制台显示,便于区分
对象中的Symbol可以确保不同对象中可以有相同的属性名
1,不能进行运算
console.log(s1>"aaaaa")
2,显示调用toString()
console.log(s1.toString()+"aaaa")
3,Symbol.for()可以重新使用同一个name值
var obj = {
[Symbol.for("name")]:"xiaoming",
[Symbol.for("age")]:100
}
console.log(obj[Symbol.for("name")])
lterator迭代器
1,为各种数据结果提供一个统一的,渐变的数据接口
Array Arguments Set Map String TypedArray NodeList
2,使得数据结果的成员能够按某种次序排列
3,ES6创造了一种新的遍历命令for...of
循环,lterator接口主要提供for...of
循环
let a = ['A','B','C'];
for(let i of a)
console.log(i) // i 保存Value
for(let i in a)
console.log(i) // i 保存Key
Set
类似于数组,但成员的值都是唯一的,没有重复的值
set基本属性
let s1 = new Set([1,2,3,4,5])
console.log(s1)
let s2 = new Set()
s2.add(1)
s2.add(2)
s2.add(3)
console.log(s2)
其他属性
add
s.add()
可以在括号内添加元素
例如
s1.add(5).add(6)
可以直接给其添加元素
has
s.has()
可以判断是否含有括号内的目标元素
返回值为boolean值(true或者false)
delete
s.delete()
可以删除括号内的元素
Map
类似于对象,也是键值对的集合,但“键”的值可以包括含对象在内的各种类型的值
Map基本
let m = new Map([
["name","kerwin"],
["age",100],
[{a:1},"大连"]
])
其他属性
set get has delete size clear
Proxy代理
它的作用是在对象和对象的属性值之间的一个代理,获取该对象的值或者设置该对象的值,以及实例化等操作都会被拦截,可以经过这一层统一处理,我们可以认为它是代理器
get方法
let target = {}
let proxy = new Proxy(target,{
get(target,prop){
return target[prop]
}
})
set方法
let target = {}
let proxy = new Proxy(target,{
set (target,key,value){
console.log("set",target,key,value)
if(key==="data"){
box.innerHTML = value
}
target[key] = value
},
Reflect
Reflect可以用于获取目标对象的行为,它与Object类似,但是更易读,为操作对象提供了更优雅的方式,与Proxy对应
代替Object的某些方法
const obj = {
}
Reflect.definedProperty(obj.'name',{
value:'xiaoming')
writable:false,
configurable:false
})
修改某些Object方法返回结果
老写法:delete obj.name
新写法:Reflect.delectProperty(obj."name")
与Proxy配合
例如
let target = new Set()
const proxy = new Proxy(target,{
get(target,key){
const value = Reflect.get(target.key)
if (value instanceof Function){
console.log(`访问${value}方法`)
return value.bind(target)
}
return value
},
set(){
return Reflect.set(...arguments)
}
})
proxy.add(1)
let arr = [1,2,3]
let proxy = new Proxu(arr,{
get(target,key){
coonsole.log('get',key)
return Reflect.get(...arguments)
}
set(target,key,value){
console.log('set',key,value)
return Reflect.set(...arguments)
}
})
Promise
Promise是异步编程的一种解决方案,比传统的解决方案,回调函数,更合理,更强大。
指回调函数方式更灵活
解决异步回调函数的问题
回调地狱
当一个回调函数嵌套一个回调函数的时候,就会出现一个嵌套结构,当出现多层嵌套时就回出现回调地狱的情况
例如
这是一个promise的使用方法
promiseClick()
.then(function(data){
console.log(data);
return runAsync2();
})
.then(function(data){
console.log(data);
return runAsync3();
})
.then(function(data){
console.log(data);
});
promise可以简化层层回调的写法
Generator函数
Generator 函数是ES6的一种异步编程解决方案
Generator 函数是一个状态机,封装了多个内部状态
执行Generator函数会返回一个遍历器对象,也就是说,Generator函数除了状态机,还是一个遍历器对象生成函数,返回遍历器对象,可以依次遍历Generator函数内部的每一个状态
基本语法
function *gen(){
yield "aaa"
yield "bbb"
return "ccc"
}
let g = gen()
let res1 = g.next()
console.log(rest1)
let res2 = g.next()
console.log(rest2)
let res3 = g.next()
console.log(rest3)
调用此函数之后,该函数并不执行,也不返回函数运行结果,而是指向内部状态的指针对象
class
类的写法
class Person{
constructor(name,age){
this.name = name;
this.age = age;
}
say(){
console.log(this.name.this.age)
}
}
let obj = new Person("xiaoming",100)
类的继承
父元素继承
class Parent {
constructor(name, age) {
this.name = name
this.age = age
}
say () {
console.log(this.name)
}
}
子类继承
class Son extends Parent {
}
const m = new Son('Jee', 20)
console.log(m)
m.running()
moudle模块化
异步加载,私密不漏(导入的时候不进行导出),重名不怕(导出的时候进行重命名操作),依赖不乱
例如,一个html文档中还存在其他的多个JS文档链接
导入1.js中的方法
import xiaomingA1 from './1.js'
import xiaomingA1 from './2.js'
import xiaomingA1 from './3.js'
console.log(obj,test1,test2)
通过模块化的引入,可以使各个变量不会相互影响
模块化
JS现在有两种模块,一种是ES6模块,另一种是CJS模块
CJS是NodeJS专用的,与ES6模块不兼容,两者最明显的差异是CJS使用require()和moudle.exports,ES6模块使用import和export
ES6模块不是对象,而是通过export命令显示指定输出的代码,再通过import命令输入
写法1
export default A1
import a1 from"./1.js"
写法2
export {A1,A2}
import {A1,A2} from"./1.js"
import {A1 as a1,A2 as a2}from"./1.js"
import *as obj from "./1.js"
console.log(obj)