1.let
//let 是在代码块内有效，var 是在全局范围内有效: 创建代码块
//let 只能声明一次 var 可以声明多次:
//let 不存在变量提升，var 会变量提升:
//for 循环计数器很适合用 let
for(let i = 0; i<10;i++){
console.log(i)
}
console.log(i);//i is not defined报错
let a= 1;
let a = 2;
console.log(a)// Identifier 'a' has already been declared标识符‘a’已被声明
console.log(let1)//报错 没有提升
var let1 = 3;
console.log(var1)//undefined var1提升只是没有赋值
var var1 = 4;
2.const
//const 声明一个只读变量，声明之后不允许改变。意味着，一旦声明必须初始化，否则会报错。
ES6 明确规定，代码块内如果存在let或者const，代码块会对这些命令声明的变量从块的开始
就形成一个封闭作用域.代码块内，在声明变量 PI 之前使用它会报错。
//基本使用
// const a = 1;
// a = 2;
// console.log(a)//Assignment to constant variable 常变量已被赋值
//暂时性死区
var PI = 3.14;
var j = 312;
if(true){
// console.log(PI);//PI is not defined
// console.log(j)//j is not defined
const j = 416;
let PI = 3.1415926;
}
const obj1 = {
name : '法外狂徒',
age : 18
}
console.log(obj1.name)//法外狂徒
3.解构赋值
基本
let [a,b,c] = [1,2,3]
console.log(a)//1
可嵌套
let [a,[b,c]] = [4,[5,6]]
console.log(a)//4
可忽略
let [a,,c] = [1,2,3]
console.log(a)//1
不完全解构
let [a=10,b] =[]
console.log(b)//undefined
剩余运算符 用 '...'三个点表示 必须是最后一个let
[a,...b]=[1,2,3,4,5]
console.log(b)//Array数组[2,3,4,5]
展开运算符
let a = [1,2,3];
let b = [4,5,6]
let c = [...a,...b]
字符串解构
let [a,b,c,d,e] ='hello'
console.log(a)//h
对象解析构造 let对象
let [obj] = [{name:'张三',age:18}]
console.log(obj)//Object对象
属性
let [{foo,age}] = [{foo:'你好世界',age:20}]
console.log(foo)//你好世界
4.map和set集合
//Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。
// var myMap = new Map();
// myMap.set("name","jz")
// myMap.set("likes", ['运动', '唱歌', 'bg']);
// console.log(myMap)
// //for of循环
// for(var item of myMap){
// console.log(item[0])
// console.log(item[1])
// }
// for(var [key,value] of myMap){
// console.log(key);
// console.log(value);
// }
//Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
// var mySet = new Set();
// mySet.add('1')
// mySet.add('2')
// mySet.add('3')
// mySet.add('3')
// mySet.add('3')
// console.log(mySet)
5.字符串的方法
//repeat(n) 复制n份
// 以下三个方法都可以接受两个参数，需要搜索的字符串，和可选的搜索起始位置索引。
//这三个方法如果传入了正则表达式而不是字符串，会抛出错误。而 indexOf 和 lastIndexOf 这两个方法，它们会将正则表达式转换为字符串并搜索它。
// includes()：返回布尔值，判断是否找到 参数 字符串。
// startsWith()：返回布尔值，判断 参数字符串 是否在 原字符串 的 头部。
// endsWith()：返回布尔值，判断 参数字符串 是否在原字符串的 尾部。
// 引入了字符串补全长度的功能。如果某个字符串不够指定长度，
会在头部或尾部补全。padStart()用于头部补全，padEnd()用于尾部补全。
// padStart()和padEnd()一共接受两个参数，第一个参数是字符串补全生效的最大长度，
第二个参数是用来补全的字符串。
let m=(new Date().getMonth()+1).toString();
m=m.padStart(2,'0');
console.log(m)
var str = "hello"
console.log(str.includes('l'))//true
console.log(str.startsWith('l',2))//true
console.log(str.startsWith('h'))//true
console.log(str.endsWith('o'))//true
console.log(str.repeat(2))//hellohello
//字符串合并新方法 `你好${str1}世界${str2}`
var str1 = 'hello'
var str2 = 'world'
var str3 = '你好'+str1+'世界'+str2;
var str4 = `你好${str1}世界${str2}`
console.log(str3)//你好hello世界world
console.log(str4)//你好hello世界world
6.对象
6.1 var obj1 = {name,age}
// const name = '张三';
// const age = 18;
// var obj1 = {name,age}
// var obj2 = {
// name:name,
// age : age
// }
// //obj1 与 obj2 相同
// console.log(obj1.name)//张三
// console.log(obj2.name)//张三
6.2 函数写法
var obj = {
name:'张三',
age:18,
fun : function(){
}
}
var obj = {
name:'张三',
age:18,
//函数也可这样写
fun (){
}
}
6.3 //拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。
// var obj1 = {name:"zhangsan"}
// var obj2 = {age:20}
// var obj3 = {...obj1, ...obj2}
// console.log(obj3)
6.4 assign() 对第一层是深拷贝，第二层或者之后都是浅拷贝！！！
obj3 指向与obj1 obj2堆内存的数据 Object.assign({}, obj1, obj2)
// var obj1 = {name:"lisi", newval: {age:20}}
// var obj2 = {age:30}
// var obj3 = Object.assign({}, obj1, obj2)
// // assign对第一层是深拷贝，第二层或者之后都是浅拷贝！！！
// console.log(obj3)
// obj3.newval.age = 40;
// console.log(obj1.newval.age)//40
6.5 Object.is(value1, value2)用来比较两个值是否严格相等，与（===）基本类似。
console.log(Object.is(NaN,NaN))//true
console.log(NaN===NaN)//false
console.log(Object.is(+0,-0))//false
console.log(+0===-0)//true
6.6 Object.freeze({});冰冻 不仅 obj地址不可改变 obj内的属性也不可改变
const obj = Object.freeze({});
obj.name='jack';
console.log(obj)//报错
6.7对象的扩展 属性名表达式
6.7 rest参数 ...变量名
7 array方法
// Array.of()
// 将参数作为元素转换为一个数组，参数为空时转换为空数组
// var arr = Array.of(1,2,3,4);
// console.log(arr)//[1,2,3,4]
// Array.from()
// 将伪数组或者迭代的对象转化为数组
// function demo() {
// // Array.prototype.slice.call(arguments)
// var arr = Array.from(arguments)
// console.log(arr.push)
// }
// demo(1, 2, 3, 4)
// find()
// 查找数组中符合条件的元素，若多个符合，返回第一个符合的元素
// var arr = [2,12,34,5,56,77,8,54]
// var a = arr.find(function(item){
// return item>10;
// })
// console.log(a)//12
// findIndex()
// 查找数组中符合条件的元素，若多个符合，返回第一个符合的元素的索引值
// var arr = [2,12,34,5,56,77,8,54]
// var a = arr.findIndex(function(item){
// return item>10
// })
// console.log(a)//1
// fill()
// 将一定范围的数组元素，改为一个值
// 参数1：用来填充的值
// 参数2：被填充的起始索引
// 参数3(可选)：被填充的结束索引，默认为数组末尾
// 左闭右开
// var arr = Array.of(1,2,3,4)
// console.log(arr.fill(0,1,3)); // [1, 0, 3, 4]
// copyWithin()
// 将一定范围内的数组元素，改为当前数组的另一个一定范围的值
// 参数1：被修改的起始索引
// 参数2：被用来覆盖的数据的起始索引
// 参数3(可选)：被用来覆盖的数据的结束索引，默认为数组末尾
// console.log([1, 2, 3, 4].copyWithin(0,2,4)); // [3, 4, 3, 4]
// entries()
// 遍历键值对。
var arr = Array.of(1,2,3,4)
var a = arr.entries()
console.log(a)// interator接口
for(var [key,value] of a){
console.log(`${key}:${value}`)
}
// keys()
// 遍历键名。
let arr = [1,2,3,4];
let x = arr.keys();
// console.log(a)
console.log(x.next().value)//0
console.log(x.next().value)//1
console.log(x.next().value)//2
console.log(x.next().value)//3
//values() 遍历值
let y = arr.values();
console.log(y.next().value)//1
console.log(y.next().value)//2
console.log(y.next().value)//3
console.log(y.next().value)//4
//includes() 返回布尔类型 验证数组内是否有参数值
// var arr2 = [1, 2, 3, 4]
// console.log(arr2.includes(1))//true
//falt() 嵌套数组转一维数组
// 面试题 数组扁平化！！！
var a = [1, 2, 3, [4, 5, 6, [7, 8, 9, [10]]]]
console.log(JSON.stringify(a))
// var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(a.flat().flat().flat())
8 this
8.1 异步代码
// 异步代码
// 在js中异步代码有两种，setTimeout setInterVal
// 异步代码在所有同步代码执行之后才会执行！！！
// setTimeout(function() {
// console.log("定时器")
// }, 0)
// console.log("代码end") // 这个先执行！！！
// function fn() {
// setTimeout(() => {
// // 定义时，this 绑定的是 fn 中的 this 对象
// console.log(this.a);
// }, 0)
// }
// fn()
// var a = 20;
8.2 箭头函数this指向
// 谁调用了函数，函数里面this就是谁！！！（是在ES5中生效）
// 箭头函数this。 （向上查找非箭头函数，这个非箭头函数的this就是你要找的this）
var Person = {
'age': 18,
'sayHello': function () {
// var that = this;
setTimeout(() => {
// this指向是window
console.log(this.age);
});
// console.log(this.age)
}
};
var age = 20;
// 谁调用了函数，函数里面this就是谁！！！（是在ES5中生效）
// 箭头函数this。 （向上查找非箭头函数，这个非箭头函数的this就是你要找的this）
Person.sayHello(); // 18
9.isNaN()
window.isNaN函数会把非数值的参数转化成数值再进行判断，
windows.isNaN('abc')//true windows.isNaN(123)//ture
Number. isNaN只对数值类型有效，非数值类型的参数一律返回false。
Number.isNaN('abc')//false
//ES6中提供了一个Number.isNaN()方法用于判断一个值是否严格等于NaN
console.log(Number.isNaN(NaN))//ture
10.Number.isInteger()用来判断一个值是否为整数。
Number.isInteger(3);结果为：true
Number.isInteger(3.0);结果为：true//重点 在JavaScript内部，整数和浮点数是同样的储存方法
，所以3和3.0被视为同一个值
Number.isInteger(3.01);结果为：false
11.//es6 函数的参数可以支持默认值
11.1普通参数
添加默认值
a=0,b=0
// function add(a=0,b=0){
// console.log(a,b)
// }
// add()//0 0
// add(4,16)//4 16
11.2 //数组参数
添加默认值
[a,b]=[0,0] / [a=0,b=0]=[]
//不添加默认值
// function sun([a,b]){
// console.log(a,b)
// }
// sun([4,16])//4,16
//添加默认值
// function sun([a,b]=[0,0]){
// console.log(a,b)
// }
// sun()//0 0
// sun([4,16])//4 16
// function sun([a=0,b=0]=[]){
// console.log(a,b)
// }
// sun()//0 0
// sun([4,16])//0 0
11.3 //对象参数
添加默认值 {name='jack',age=18}={}/{name,age}={name:'jack',age:18}
不添加默认值
let name = '法外狂徒张三'
let age = 20
function obj({name,age}){
console.log(name,age)
}
obj({name,age})//法外狂徒张三 20
添加默认值
// function obj({name,age}={name:'jack',age:18}){
// console.log(name,age)
// }
// obj()//jack 18
// obj({name:'法外狂徒张三',age:20})//法外狂徒张三 20
// function obj({name='jack',age=18}={}){
// console.log(name,age)
// }
// obj()//jack 18
// obj({name:'法外狂徒张三',age:20})//法外狂徒张三 20
12箭头函数
1.无参，不能省略()
2.如果函数体只用一句话，并且还是返回值语句，省略{}
3.只有一个参数，可以省略()
4.用两个及以上参数，不可以省略（）
5.特殊情况需要注意5.如果函数体只用一句话，并且还是返回值语句，但是返回类型为对象，不可以省略{}
//1.无参，不能省略()
// let add = ()=>{
// console.log('法外狂徒张三')
// }
// add()//法外狂徒张三
//2.如果函数体只用一句话，并且还是返回值语句，省略{}
// let add = ()=> '法外狂徒张三'
// console.log(add()) //法外狂徒张三
//3.只有一个参数，可以省略()
// let add = name=>console.log(name)
// add('法外狂徒张三')//法外狂徒张三
//4.用两个及以上参数，不可以省略（）
// let add = ([name,age]=['jack',18])=> console.log(name,age)
// add()//jack 18
// add(['法外狂徒张三',20])//法外狂徒张三 20
//特殊情况需要注意5.如果函数体只用一句话，并且还是返回值语句，但是返回类型为对象，不可以省略{}
// let add=(name='jack',age=18)=>{
// return{
// name,
// age
// }
// }
// let name='法外狂徒张三'
// let age = 20
// console.log(add(name,age)) //Object {name: "法外狂徒张三", age: 20}
13 rest参数
//rest参数只能为最后一个参数 若不知道参数个数有多少个，则模糊声明 ...变量名
rest当参数是为一个数组
[...rest]可展开 let a = [...rest] 可将set转化为数组
//普通参数
function add(...rest){
console.log(rest)
}
let name= '张三'
let age = 20
add(1,2,3,4,{name,age})//Array数组[1,2,3,4,{name: "张三", age: 20}]
//数组参数
// function add([a,b,c,...rest]=[0,0,0]){
// console.log(a,b,c,rest)
// }
// add()//0,0,0,Array数组空
// add([1,2,3,4,5,6])//1,2,3,Array数组[4,5,6]
//扩展运算符 ... 打散集合
// let arr=[20,30,40,50]
// console.log(...arr);
let set=new Set();
set.add(10)
set.add(20)
set.add(30)
let [a]=[...set];//将set---->数组
console.log(a)//10
let b=[...set]
console.log(b)//[10, 20, 30]
let [arr]=[[...set]]
console.log(arr)//[10, 20, 30]
14promise
//1.promise能够让人以同步形式完成异步代码的书写
//2.promise三种状态 改变方法
// pending 进行中
// fulfiled/resolved 成功 resolve()
// rejected 失败 reject()
//3.Promise是一个对象
//Promise对象需要接收一个函数作为参数
//作为参数的函数，有两个参数，resolve,reject
//resolve和reject是函数
// new Promise((resolve,reject)=>{resolve()/reject()})
//4.then()方法
//4.1 then()执行后会自动创建一个promise对象
//4.2
new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('222')
resolve();
});
}).then(fn2())
//只有有resolve() ,fn2()才能够执行
//4.3 若fn2返回的为一个promise对象，则会覆盖掉当前then产生的promise对象
//4.4 若fn2只返回了一个数值则 then(fn2).then(data=>{console.log(data)}) 返回的数值为data
function fn1() {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('111')
resolve();
});
})
}
function fn2(){
return new Promise((resolve,reject)=>{
setTimeout(() => {
console.log('222')
resolve();
});
})
}
function fn3(){
setTimeout(() => {
console.log('333')
});
return [111,222]
}
//1.fn1()执行
// 2.返回promise对象，对象内有resolve()执行
// 3.执行then(fn2)方法，
// 4.因为2.promise对象内有resolve()执行, fn2()执行 即可以理解为resolve()则fn2()
//5.fn2执行完毕后返回一个promise对象 覆盖了then()自动产生的对象，
//6.fn3执行完毕，返回值
//7.then(data=>console.log(data))结束 data即为返回值
// console.log(fn1)
fn1().then(fn2).then(fn3).then(function(data){
console.log(data)
})
15 async await
//await关键字只能在声明为async的函数中使用
//await 能够获取promise异步请求的成功的结果
//await关键字只能在声明为async的函数中使用
async function getData1() {
//await 能够获取promise异步请求的成功的结果
try {
//若服务器返回成功结果，则直接保存到变量中，若访问服务器失败，则被catch捕获
let data = await axios.get('http://localhost:3000');
let data1 = await axios.get('http://localhost:4000?name=java')
console.log(data)
console.log(data1)
} catch (e) {
}
}
getData1()
