1、定义方式:
let:块级;const:定义常量
用const定义数组时可以push
冻结:(const定义时静止push)
const arr = Object.freeze(['a','b'])
2、解构赋值
let [a,b] = ["1","2"] //a=1;b=2
let {a,b} = {a:1,b:2} //a=1;b=2
交换值:
[a,b] = [b,a]
function test({a,b}){}
test({a:1,b:2})
3、默认参数
function test(a=1,b=2){}
//调用时,不传a和b,则实用默认值
4、字符串值(两撇``)
let test = "你好"
console.log(`这个世界${test}`)//这个世界你好
5、字符串查找
str.includes("test")//查找str字符串中是否含有test
6、扩展运算符(...)
...1,2,3 = [1,2,3]
...[1,2] = 1,2
例子
function addNum(...num){
//num会是一个数组[1,2,3]
}
addNum(1,2,3)
let obj1 = {name:xxx}
let objs = {...obj1,age:18}//{name:xxx,age:18}
... 用于对象时只有第一层是深度拷贝,其他层级都是浅拷贝
... obj1 这样的写法错误,一定要{}包含着才行
7、数组复制
let arr = [1,2]
let arr2 = [...arr]
或 arr2 = Array.from(arr)
8、箭头函数
function test(a,b){
return a+b
}
test(a,b)=>{
return a+b
}
箭头函数this指向声明时的this,而不是声明时的this
即父作用域中的this (即父函数的作用域,注意对象{ }没有作用域,函数的{ }才算)
var obj ={
name:"xxx",
say:function(){
setTimeout(()=>{
console.log(this) //指向obj 如果非箭头函数指向window
},1000)
}
}
obj.say()
箭头函数的this指向定义的对象本身,setTimeout调用则this不再指向window
9、数组循环
let arr = [1,2,3]
arr.forEach((val,index,arr)={})//相当于for循环
arr.map((val,index,arr)=>{ //映射;结合return使用,修改每一行的值(返回新数组)
retutn val=2
})
arr.filter((val,index,arr)=>{ //过滤,返回符合条件的新数组
return val>2 //[3]
})
arr.find((val,index,arr)=>{ //返回第一个符合条件的行,第二个和之后的不返回
return val>2
})
arr.some((val,index,arr)=>{ //查找是否有符合条件的,有则返回true
return val==2
})
arr.every((val,index,arr)=>{ //每一行都满足则返回true
return val>4
})
arr.reduce((pre,cur)=>{
//将数组里的每一行相加,返回新数值,pre是上一次返回的值,默认是0,cur是当前值
return pre+cur
},0)
let obj = {a:1,b:2}
for(let key of keys(obj)){
console.log(key) //输出每一行的key
}
for(let value of values(obj)){
console.log(value)//输出每一行的值
}
for(let [key,value] of entres(obj)){
console.log(value)//输出每一行的key和值
}
10、类数组(一组元素,arguments、有length属性)
Array.from(1,2,3) //[1,2,3]
Array.from("msg") // [m,s,g]
Array.of("1,"2")//[1,2]
11、新增api
Object.is(NaN,NaN) //true
NaN==NaN //false
Object.assign([],arr1,arr2) //返回合并的数组
Object.assign({},obj1,obj2) //返回很并的对象,重复则覆盖
12、Promise
什么是promise
就是将异步操作以同步操作的流程来表达,避免出现层层嵌套的函数(地狱回调)
let p = new Promise(function(resolve,reject){
if(true){
resolve("成功啦")
}else{
reject("出错")
}
})
p.then(res=>{
console.log(res) //成功啦
return new Promise(function(reolve,reject){
if(true){
resolve("成功啦2")
}
})
})
.then(res=>{
})
.catch(err=>{
console.log(err) //出错
})
promise实现原理
1、promise有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)
原型:
class myPromise {
const ststus = 'padding'
const result = undefined
const reason = undefined
construstor(excution){
const reselove = (result)=>{
if(this.status === 'padding'){
this.ststus = 'fulfilled'
this.result = res
}
}
const reject = (reason)=>{
if(this.status === 'padding'){
this.ststus = 'rejected'
this.reason = reason
}
}
excution(reselove,reject)
}
then(onreselove,onreject){
if(this.status=='fulfilled'){
onreselove(this.result)
}
if(this.status=='rejected'){
onreject(this.reason)
}
}
}
应用:
conset pro = new myPromise((reselove,reject)=>{
reselove('这是啥啊')
})
pro.then((res)=>{},err=>{}
13、promise.all或promise.race
Promise.all([p1,p2]).then(res=>{})//p1,p2全部成功才返回
Promise.all:
成功返回成功数组,一但失败就不会继续往下走
promise.race
哪个返回快就返回哪个结果,不管成功或失败
14、新增数据类型symbol
let sym = Symbol("aaa")
//不能new,返回唯一值;常用作key;是一个基本类型,for...of循环不出来
15、generator函数
function * test(){
yield "你好" //或函数
yield "世界" //或函数
}
test().next() //你好
test().next() //世界
16、async(解决异步)
async function test(){
try{
await axios.get(xxx,{})
await axios.get(xxx2,{})
}catch(e){
}
}
test() //先执行第一个wait再执行第二个await
async返回的是一个promise对象,所以test().then(()=>{})
18、模块化
export {test}
//immport {test} '../xxx.js'
export default test
//import test from '../xxx.js'
19、类
之前写法:
function Person(name){
this.name = name //实例属性,挂载在原型链上__proto__
}
//定义实例方法
Person.prototype.showname = function(){
return `我叫${this.name}`
}
let p = new Person("小明")
console.log(p.shoename()) //小明
//定义静态方法,挂载在构造函数上
Person.test = function(){}
//定义静态属性
Person.age = 18
es6写法:
class Person{
consructor(name){
this.name = name
}
shownaem(){
return `我叫${this.name}`
}
static showAge(){ //静态方法,通过类名.访问
}
}
let p = new Person("小红")
console.log(p.showname())
20、继承
多个类都有相同的操作方法时,可以把这些方法放到父类,然后继承拿到并调用
之前写法
function Person(name){
this.name = name
}
Person.prototype.showname = function(){
return `我叫${this.name}`
}
function Son(name,skill){
Person.call(this,name) //继承属性
}
Son.prototype = new Person() //继承方法
let son = new Son("小明")
console.log(son.showname) // 小明
es6写法
class Person{
consructor(){
this.name = name
}
showname(){
return `我叫${this.name}`
}
}
class Son extends Person{
constrctor(name,skill){
super(name) //继承属性
this.skill= skill //私有
}
showkill(){
}
}
let son = new Son("小明","打球")
console.log(son.showname())//小明
21、新增数据结构Set、Map
Set:类似于数组,里面没有重复值,没有key
用处-:使用add()时候,如果Set里面已经存在则不会添加这个重复的元素
let setArry = new Set([1,2,2])
setArry.add("3"); //{1,2,3}
setArry.delete("2")
.has("2") //true
.clear()
let newarr = [...serArry ] //[1,2]
可用for of 或forEach循环
Map:类似于json,是对json功能增强,key可以是任意类型
let map = new Map()
map.set(key,value) // 设置一个值
map.get(key) //获取一个值
可用for of 或forEach循环
22、数值的变化
二进制:let a = 0b010101
八进制:let a = 0o666
十六进制:ket a = #ccc
23、安全整数
范围:-(2**53-1)~(2**53-1) //2的53次方
Number.idSafeInteger(456546) //判断是否为安全整数
Number.isFinite("2") //判断是否为数字
Number.isInteget(2) // 是否为整数
24、命名捕获
25、标签函数
function test(arg){
return arg[0]
}
test `你好`
26、proxy 代理
例:
let obj ={name:"小明"}
let newobj = new Proxy(obj,{
get(target,property){ //target是obj,property是使用的属性
return target[property]
}
})
console.log(newobj.name)
27:Reflect 反射
28、判断对象中是否含有某属性
(test in obj) // 返回true则存在
29、拿取对象key值,返回数组
let obj = {"name":"ll","age":18}
console.log(Object.keys(obj)) //["name","age"]
30、使用扩展运算符组合两个对象
const name = { id: '1234', name: 'Charuka'};
const university = { id: '1234', university: 'Harvard'};
const PersonalDetails = Object.assign({}, name, university);
//或 const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails); // { id: '1234', name: 'Charuka', university: 'Harvard' }
31、从对象获取键和值的列表
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
//获取键
console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]
//获取值
console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]
32、检查属性
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
for (var item in vehicle) {
if (vehicle.hasOwnProperty(item)) {
console.log(item);
};
};
// brand
// year
// type
33、克隆对象
const initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const secondaryVehicle = Object.assign({}, initialVehicle);
//或: var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));
console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};
34、从对象中选择特定数据
const selectObj = (obj, items) => {
return items.reduce((result, item) => {
result[item] = obj[item];
return result;
}, {});
};
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};
const selected = selectObj(vehicle, ['brand', 'type']);
console.log(selected); // { brand: 'BWM', type: 'suv' }
35、从对象中删除键
const remove = (object, removeList = []) => {
const result = { ...object };
removeList.forEach((item) => {
delete result[item];
});
return result;
}
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
const itemRemoved = remove(vehicle, ['year']);
console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }
36、将对象数据拉入数组
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
console.log(Object.entries(vehicle));
// [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]
37、用Object.entries循环访问 JavaScript 对象
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
Object.entries(vehicle).forEach(
([key, value]) => console.log(key, value)
);
// brand BWM
// year 2022
// type suv
法二:
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
for (const [key, value] of Object.entries(vehicle)) {
console.log(key, value);
}
// brand BWM
// year 2022
// type suv
38、有条件地向对象添加属性
const type = { type: 'suv' };
const vehicle = {
brand: 'BMW',
year: 2022,
...(!type ? {} : type)
}
console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }