let定义:
1、没有域解析,不纯在变量提升
在代码块内,只要let定义变量,在之前使用都是报错
先定义在使用
2、同一个作用域里面,不能重复定义变量
3、for循环,for循环里面是父级作用域,里面又一个
4、var声明的变量是属于window的let和const不是
{
let a = 12;
{
let a = 6
console.log(a) //6
}
console.log(a) //12
}
var arr = [];
for (let i = 0; i < 10; i++) {
arr[i] = function() {
console.log(i)
}
}
arr[1]();
解构赋值:
let [a,b,c] = [12,1,2];
let [d,e,f = '暂无数据'] = ['a','b']
console.log(a,b,c)
console.log(d,e,f)
let json = {
name:'strive',
age:20,
sex:'nan'
}
let {name:n,age:g,sex} = json
console.log(n,g,sex)
let q = 12,w = 5;
[q,w] = [w,q];
console.log(q,w)
function getposition() {
return {
t:30,
l:100
}
}
({t,l} = getposition());
console.log(t,l)
function show({a,b,c='默认'}){
console.log(a,b,c)
}
show({
a:1,
b:2
})
字符串模板:
可以随意的换行`${data}`
字符串查找:
indexof str.indexof(要找的东西) 返回值 索引的位置 没找到返回的-1
includes() str.includes(要找的东西) 返回值 true/false
if (navigator.userAgent.includes('Chrome')) {
console.log('yes')
}else {
console.log('no')
}
字符串检测是已谁开头的:
let str = 'file:///Users/mac/Downloads/es6demo1.html';
let str2 = 'https://www.zhihu.com/';
console.log(str2.startsWith('http'))
字符串检测是已谁结尾的:
let sss = 'aaa.png';
let ssss = 'aaa.html';
console.log(ssss.endsWith('png'))
字符串重复多少次:
let strs = '重复'
console.log(strs.repeat(1000))
字符串填充:
padStart(字符串长度,填充的字符串) 往前添加
padEnd(字符串长度,填充的字符串) 往后添加
let str5 = 'apple';
let startpad = 'xxx';
console.log(str5.padStart(str5.length+startpad.length,startpad))
console.log(str5.padEnd(str5.length+startpad.length,startpad))
函数:
函数默认参数已经定义,不能在使用let或者const声明
默认值函数:
function show2({a=111,b=222}={}) {
console.log(a,b);
}
show2()
扩展运算符,reset运算符:
let arrs1 = [1,2,3,4,5];
console.log(...arrs1);
function shows1(a,b,c) {
console.log(a,b,c);
}
shows1(...[1,2,3])
function shows2(...a) {
console.log(a.sort());
}
shows2(1,9,-3,2)
function shows3(a,b,...c) {
console.log(a,b)
console.log(c)
}
shows3(1,2,3,4,5)
// 复制一份数组
let arrss1 = [1,2,3,4,5,6];
let arrs2 = [...arrss1];
console.log(arrss1,arrs2);
// ...:
// [1,2,3,4,5] -> ...[1,2,3,4,5] -> 1,2,3,4,5
// 1,2,3,4,5 -> ...1,2,3,4,5 -> [1,2,3,4,5]
// 剩余参数:必须放到参数末尾
箭头函数:
let jiantou = (a,b) => {
return console.log(a+b)
}
jiantou(20,3)
// 注意
// 1、this问题,定义函数所在的对象,不在是运行时所在的对象
let jsonss3 = {
id:1,
sex:() => {
// 箭头函数里的this这时候指向window
console.log(this.id)
}
}
jsonss3.sex();
// 2、箭头函数里面没有arguments,使用...可以代替arguments
function jiantousssss() {
console.log(arguments)
}
jiantousssss(1,2,3,4,5)
let jiantou2 = (...argus) => {
console.log(argus)
}
jiantou2(1,2,3,4,5)
// 3、箭头函数不能当构造函数
function jiantou3() {
this.name = 'abc'
}
let ns = new jiantou3();
console.log(ns.name);
let jiantou4 = () => {
this.name = 'abc'
};
let ns1 = new jiantou4
console.log(ns1.name)
数组:
循环:
// forEach
let arrEach = ['apple','bannene','oringe','tomato'];
arrEach.forEach((value,index,arr) => {
console.log(this,value,index,arr)
},123)
// forEach(循环的回调函数,this指向谁,箭头函数除外箭头函数只能指向他的父级)
// map
// 做数据映射,正常情况下需要配合return,返回的是一个新的数组若没有return,相当于forEach只要使用map一定要有return
// filter
// 过滤一些不合格的元素,如果回调函数是true就留下来false就放弃
// some
// 类似查找,数组里面某一个元素符合条件,返回true否则false
// every
// 数组里面所有的元素都要符合条件,才返回true否则false
// reduce 从左往右
// 求数组的和,积,阶乘
let arrreduce = [1,2,3,4,5,6,7,8,9,10];
let arrduce = arrreduce.reduce((prev,cur,index,arr)=>{
return prev+cur;
})
console.log(arrduce)
// reduceRight 从右往左
// 求数组的和,积,阶乘
// 幂的运算符
// Math.pow(2,3)===2**3
新增数组:
// Array.from有length就可以转换成数组类数组转换成数组
function arrform(){
let arrgs1 = Array.from(arguments);
console.log(arrgs1);
}
arrform(1,2,3,4,5,6)
//Array.of 把一组值转换成数组
let arrof = Array.of('apple','bannene','oringe');
console.log(arrof);
// arr.find()查找,找出第一个符合条件的数组成员如果没有找到就返回undefined
let arrlength = [20,900,101,100]
let arrfind = arrlength.find((item,index,arr)=> {
return item >100;
})
console.log(arrfind)
// arr.findIndex()查找的是位置下标,没有找到的是-1
let arrfindIndex = arrlength.findIndex((item,index,arr)=> {
return item >100;
})
console.log(arrfindIndex)
// arr.fill(填充的东西,开始位置,结束位置)
let arrfill = new Array(10);
arrfill.fill('默认添加',2,8);
console.log(arrfill)
// arr.includes()包含检测数组中是否有这个元素如果有返回true 如果没有是false
let arrincludes = ['apple','oringe','banben'];
console.log(arrincludes.includes('oringe2'))
对象:json
// 对象简介语法,在里面不要使用箭头函数
let names = 'zhangsan';
let agex = 18
let jsones = {
names,
agex,
showa(){
console.log(this.names)
}
}
console.log(jsones.showa())
// Object.is()用来比较两个值是否相等
console.log(Object.is(1,1))
// Object.assign(目标对象,source1.source2)复制一个对象,合并参数
let json1 = {a:1},json2 = {b:2},json3={c:3};
let objectass = Object.assign({},json1,json2,json3);
console.log(objectass);
let objarrass = ['apple','bannene','orange']
let abjarrsgin = Object.assign([],objarrass)
console.log(abjarrsgin)
// ...对象身上也可以使用
let jsondian = {a:1,b:2,c:3}
let jsondian1 = {...jsondian}
console.log(jsondian1)
Promise:
// Promise 解决异步回调问题
let apromise = 101
new Promise(function(resolve,reject){
// resolve成功调用
// reject失败调用
if (apromise === 10) {
resolve('成功了')
}else{
reject('失败了!')
}
}).then((res)=> {
console.log(res)
}).catch((err)=>{
console.log(err)
})
// Promise.resolve('aa')将现有的东西,转成一个promise对象,resolve状态,成功状态
let p1 = Promise.resolve('成功!')
p1.then(res=> {
console.log(res)
})
let p6 = Promise.resolve('成功!')
p6.then(res=> {
console.log(res)
})
// Promise.reject('aa')将现有的东西,转成一个promise对象,reject状态,失败状态
let p2 = Promise.reject('失败!')
p2.catch(res=> {
console.log(res)
})
// Promise.all([p1,p2])把promise打包,扔到一个数组里面,打包完还是一个promise对象,全部成功返回成功有一个失败就返回失败
Promise.all([p1,p6]).then((res)=> {
console.log(res)
}).catch((err)=> {
console.log(err)
})
// Promise.race([p1,p2])把promise打包扔到一个数组里面,打包完还是一个promise对象,第一个成功就返回成功第一个失败就返回失败
Promise.race([p2,p1,p6]).then((res)=> {
console.log(res)
}).catch((err)=> {
console.log(err)
})
// promise应用 获取登录状态和用户信息
let status = 1;
let userlogin = (resolve,reject)=>{
setTimeout(()=> {
if (status===1) {
resolve({data:'login success',state:0,token:'sjdnajndknasndkas'})
}else{
reject('失败1')
}
},2000)
}
let getuserinfo = (resolve,reject)=> {
setTimeout(()=> {
if (status===1) {
resolve({data:'getuser success1',state:01,token:'asdasdasdasdasd'})
}else{
reject('失败2')
}
},1000)
}
new Promise(userlogin).then((res)=>{
console.log('用户登录成功')
return new Promise(getuserinfo)
}).then(res=> {
console.log('获取用户信息成功')
})
模块化:
// import
1、可以是相对路径也可以是绝对路径
2、import模块只会导入一次,无论你引入多少次
3、import './module/1.js'; 如果这么使用相当于引入文件
(1)export 导出对象 export导出的对象import导入必须加{}如果是export default导出的不用加{}
const a = 1
const b = 2
export {
a,
b
}
(2)import 引入导出的内容
import {a,b} from './module/1.js'
import * as modules from './module.1.js'
4、有提升效果,import会自动提升到顶部,首先执行
5、导出去的模块内容,如果里面有定时器更改,外面呢也会改动
6、import还可以动态加载模块 import() 返回值是一个promise对象
优点
1.按需加载
2.可以写在if中
3.路径也可以动态加载
import ('./module/1.js').then(res=> {
console.log('成功')
}).catch(err=> {
console.log('失败')
})
7、默认严格模式
类(class)和继承:
// 继承es5之前
function Person(name,age){
this.name = name
this.age = age
}
Person.prototype.showName = function(){
return `名字:${this.name}`
};
let pro1 = new Person('zhangsan',19)
console.log(pro1.showName())
Object.assign(Person.prototype,{
showName1(){
return `my name is ${this.name}`
}
})
let pro2 = new Person('zhangsan',19)
console.log(pro2.showName1())
// class类的感念es6
// 没有提升功能必须定义之后再调用
// es5里面有默认函数提升
class Person2{
constructor(name,age) { //构造方法(函数),调用new 自动执行
console.log(name,age)
this.name = name
this.age = age
}
showName3(){
return `名字为${this.name},年龄为${this.age}`
}
}
let pro3 = new Person2('lisi',99)
console.log(pro3.showName3())
// class里面this的指向问题 bind 规定重新指向问题
/*
fn.call(this指向谁,args1,args2) 传递的不是数组
fn.apply(this指向谁,[ags1,args2]) 传递的是数组
*/
class Person3{
constructor(){
this.name = '新的aaa';
this.showName4 = this.showName4.bind(this)
}
showName4(){
return `新的名字为${this.name}`
}
}
let p3 = new Person3;
let {showName4} = p3
console.log(showName4())
// class 新加的seter 和 geter
class Person4{
constructor(){
}
get aaa(){
return `获取aaa的值为${this.val}`
}
set aaa(val){
console.log(val)
}
}
let p4 = new Person4;
p4.aaa = '传输进去的值'
console.log(p4.aaa)
// 静态方法:就是类身上的方法
// 实现让类调用这个方法 使用static关键字就可以实现让类调用类这个对象上面绑定的方法
class Person5{
constructor(){
}
showName5(){
return `这是showName方法`
}
static aaa(){
return `这是person5的aaa方法`
}
}
let p5 = new Person5;
console.log(p5.showName5());
console.log(Person5.aaa())
// 子类和父类:继承es5的
// 父类:
function Persons(name){
this.name = name;
}
Persons.prototype.showName6 = function(){
return `学生的名字是${this.name}`
};
// 子类:
function Student1(name,skill){
Persons.call(this,name) // 继承父类属性
this.skill = skill
}
Student1.prototype = new Persons() //继承父类方法 一定要new person否则不会出现
// 调用
let stu1 = new Student1('xiaoming','逃学');
console.log(stu1.showName6())
// es6的继承
// 父类
class Person7{
constructor(name){
this.name = name;
}
showName(){
console.log('fuleidefangfa')
return `这是父类的方法,${this.name}`
}
}
// 子类
class Student2 extends Person7{
constructor(name,skill){
super(name);//使用super来继承父类的属性
this.skill = skill;
}
showName(){
super.showName() //父类的方法执行
return '子类里面的showname';
}
showSkill(){
return `我最擅长的技能是${this.skill}`
}
}
// 调用
let stu2 = new Student2('大张三','泡妞');
console.log(stu2.showName())
// 继承实现拖拽demo
class Drag{
constructor(id){
this.oDiv = document.querySelector(id);
this.disx = 0;
this.disy = 0;
console.log(this.oDiv)
this.init();
}
init(){
this.oDiv.onmousedown = function(ev){
this.disx = ev.clientX - this.oDiv.offsetLeft;
this.disy = ev.clientY - this.oDiv.offsetTop;
document.onmousemove = this.fnMove.bind(this);
document.onmouseup = this.fnUp.bind(this);
return false
}.bind(this)
}
fnMove(ev) {
this.oDiv.style.left = ev.clientX - this.disx+'px';
this.oDiv.style.top = ev.clientY - this.disy+'px';
}
fnUp() {
document.onmousemove = null;
document.onmouseup = null;
}
}
class DragLimt extends Drag{
fnMove(ev){
super.fnMove(ev);//继承父类的方法
// 限制内容
if (this.oDiv.offsetLeft<=0) {
this.oDiv.style.left = 0;
}else if (this.oDiv.offsetright<=0) {
this.oDiv.style.right = 0;
}
}
}
// 调用
new Drag('#div1');
new DragLimt('#div2');
数据类型:
/* 1.symbol不能使用new
2.symbol返回是一个唯一值
做一个key和一些私有的东西
3.Symbol是一个单独的数据类型就叫Symbol,基本类型
4.如果Symbol作为key,用forin循环出不来*/
let sym = Symbol('aaaaaa');
console.log(sym)
generator函数:
/* 1.可以使用结构赋值
2.扩展运算符
3.还可以使用Array.from转换成数组*/
function * gener() {
yield 'hello';
yield 'to';
yield 'world';
return 'world';
}
let gene = gener();
for (let val of gene){
console.log(val)
}
let [g1,...g2] = gener()
console.log(g1,g2)
console.log(...gener())
console.log(Array.from(gener()))
async特点:
/* 1.await只能放到async函数中
2.相比genrator语义化更强
3.await后面可以是promise对象,也可以是数字布尔字符串
4.async函数返回的就是一个promise对象
*/
// 1.promise封装
// const fs = require('fs');
/*const readFile = function(filename){
return new Promise((resolve,reject)=>{
fs.readFile(filename,(err,data)=>{
if (err) {
reject(err)
}else{
resolve(data)
}
})
})
}
// 使用
readFile('data/a.txt').then(res=> {
console.log(res.toString());
})*/
// async调用
/*async function fn (){
let f1 = await readFile('data/a.txt');
let f2 = await readFile('data/b.txt');
let f3 = await readFile('data/c.txt');
console.log(f1.toString(),f2.toString(),f3.toString());
}
fn();*/
/*5.只要await后面promise状态变为reject那么整个async函数会中断执行
如何解决async函数中抛出错误,影响后续代码执行
try {
//放置异常报错的代码
} catch(e) {
}*/
async function fn1(){
try {
return await Promise.reject('失败了!!fn1');
} catch(e) {
console.log(e);
}
return await Promise.resolve('成功了!fn1');
}
fn1().then(res=> {
console.log(res)
}).catch(err=> {
console.log(err)
})
Set数据结构:
// Set数据结构:类似数组但是里面不能有重复的值没有key没有get方法 **存储的是一个数组,初始往里面添加东西是 不行的,必须使用add来进行添加才可以
let set1 = new Set(['a','b']);
console.log(set1)
set1.forEach((item,index) => {//可以使用循环来正常的便利里面的属性
console.log(item)
console.log(index)//没有下标
})
console.log(set1.add('c'))//通过add给set里面添加元素
console.log(set1.size)//获取里面有多少元素
console.log(set1.delete('a'))//通过delete删除里面的元素
console.log(set1.has('b'))//检查set里面是否有这个值有的话true没有的话是false
console.log(set1.clear())//清空set里面的所有的值
console.log(set1)
// set数组去重
let arrauuns = [1,2,3,4,5,6,7,8,9,0,9,8,7,6,5,43,2,1];
let arrayuns1 = [...new Set(arrauuns)]
console.log(arrayuns1)
Map数据结构:
// Map数据结构 对json功能的增强,key可以使任意类型有set和get方法
let map1 = new Map();
map1.set('key','value')//设置一个值用set
map1.get('key')//获取一个值
console.log(map1)
map1.forEach(item =>{
console.log(item)
})
Number:
// Number新增内容
Number.isFinite(000)//判断是不是数字是的话返回true不是的话就是false
Number.isInteger(0.5)//判断是不是整数是整数就返回true不是的话就是false
// 安全整数
Number.isSafelnteger(2**53-1)//包含2**53-1和-(2**53-1)为安全整数为true如果不是2**53-1就是不安全整数为fasle
Number.MAX_SAFE_INTEGER //最大安全整数
Number.MIN_SAFE_INTEGER //最小安全整数
Math:
// Match
Math.trunc(4.99)//截取,只保留整数
Math.sign(-9)//判断一个数是正数还是负数还是0 负数返回的是-1正数返回的是1,0的时候返回的是0,-0的时候返回的是-0其他值返回NAN
Math.cbrt()//计算一个数的立方根