HBuilder X 3.8.4 基础知识

研崖

已于 2023-06-10 09:20:04 修改

阅读量1.3k

点赞数

文章标签：前端 javascript html

于 2023-06-09 02:20:30 首次发布

本文链接：https://blog.csdn.net/zyddd131452/article/details/131117376

版权

本文详细介绍了JavaScriptES6中的关键特性，包括变量声明（var,let,const）、块级作用域、模板字符串、函数参数默认值、剩余运算符（剩余参数和数组展开）、扩展运算符、解构赋值以及箭头函数的使用。此外，还探讨了异步处理的关键字async和Promise的应用。

摘要由CSDN通过智能技术生成

一、变量声明

var

先声明，在赋值

变量提升

可以重复赋值

可以跨块

不能跨函数

可以修改值

let

先声明，在赋值

没有变量提升

不可以重复赋值

不可以跨块

不能跨函数

可以修改值

const

声明时必须赋值

没有变量提升

不可以重复赋值

不可以直接修改值，

可以修改数组内的值

变量提升报错

二、变量作用域

ES6

增加：增加了块作用域

表示：{ }

含有：if 语句和 for 语句中的{ }

等于3

报错 b跨块了

三、模板字符串

四、函数参数的默认值

   /函数 //函数返回值
           function fun1(a,b,c){
               return a+b+c;
               }
               //函数执行结果
               document.write(fun1(1,2,3));

/函数 //函数返回值
           function fun1(a,b,c){
               c=c||5;
               return a+b+c;
               }
               //函数执行结果
               document.write(fun1(1,2))

/函数传递函数
               function fun4(a=1,b=2,c=ride(7)){
                   // c=c||5;
                   return a+b+c;
                   }
               function ride(val){
                   return val*5;
               }

                   //函数执行结果
                   document.write(fun4());

五、剩余运算符（合并为数组）

剩余参数允许将一个不定数量的参数表示一个数组，。。参数名

剩余参数会保存为一个数组

//ES6
           const a = 10;
           function add2(num,...arr){
           for(let i=0;i<arr.length;i++){
           num  +=arr[i];
           }
           return num;
           }
           const  data2 = add2(a,20, 30,40,50);
           document.write(data2);

//ES5

const num = 10;

function add(num){
console. log(arguments);
return num;
}
const data = add(num,20, 30,40,50);

//循环

function add(num){
for(let i=1;i<arguments.length;i++){
num +=arguments[i];
}
return num;
}

六、扩展运算符（将数组展开）

七、解构赋值

let arr =[1,2,3,4,5];
           let [a,b,c,d,e]=arr;//完全解构
           console.log(c);
           console.log(arr[2]);


           let [a,b,c]=arr;//不完全解构

//文字数组解构

let obj={
name:'张三',
age:18,
sex:'男'
}

八、对象的简写

   //ES5
           const obj={
           name:name,
           age:age,
           xb:sex,
           }
         //ES6 同名的属性可以省
           const obj={
           name,
           age,
           xb:sex,
           // getName: function(){
           //    return this.name;//this代表的obj
           // }
           getName(){
               return this.name;//this代表的obj
           }
           }
           console.log(obj);
           //obj中的getname函数
           console.log(obj.getName())

九、箭头函数

//es6
           //ES6箭头函数语法:将原函数的"function”关键字删掉，并使用"=>”连接参数列表和函数体//function()0相当于()=>0
           //第1种写法，多个参数
           let add1 = (a,b)=>{
               return a+b;}
           //第2种写法，1个参数
           let add2 = a=>{
               return a+10;}
           //第3种写法，没有参数
           let add3 = ()=>{
           return 10;

           }
           console.log(add1(5,3));
           console.log(add2(2));
           console.log(add3());
           //第3种写法，后面直接是表达式
           // let add = (a,b)=>a+b;
           // let add = a=>a+10;
           // let add =()=>10;
           // let add =()=>[1,2,3];
           //let add =()=>{name: "张三",age:18};不对
           let add6 =()=>({name: "张三",age:18});
console.log(add6());

十、箭头函数的this指向

let obj ={
name:'张三',
           //    age:18,
           // fun:function(){
           // //this指向了当前调用这个方法的对象:obj
           // console.log(this);
           // console.log(this.name);
           // }
           // }

//展示
           // obj.fun();

           // let objj={
           // name:'张三',
           // age:18,
           // fun:function(){
           // document.addEventListener('click',function(){
           // //this指向了当前调用这个方法的对象:document(整个文档)
           // console.log(this);
           // console.log(this.name);
           // })
           // }
           // }
           // objj.fun();

///普通函数
let objj={
           name:'张三',
           age:18,
           fun:function(){
               document.addEventListener('click',()=>{
           // //this指向了当前调用这个方法的对象:window
           // //箭头函数中this指定向了定义时所在的对象,不是调用时所在的对象

           console.log(this);
           })
           }
           }
           objj.fun();

           /箭头函数
// let objj={
           // name:'张三',
           // age:18,
           // fun:()=>{
           // //this指向了当前调用这个方法的对象:window
           // //箭头函数中this指定向了定义时所在的对象,不是调用时所在的对象

           // console.log(this);
           // }
           // }
           // objj.fun();

十一、async关键字

//async关键字放到函数前面，用于表示函数是一个异步函数
//async返回的始终是Promise对象,用then方法获取结果

           // const hello =async function(){}
           // console.log(hello());

           // const hello=async ()=>{
           // return "hello world";}
       ///表示
           // hello().then(res=>{
           // console.log(res);})

       乘法
       const cf = num =>{
       return new Promise((resolve)=>{
       setTimeout(()=>{
       resolve(num*2)},1000)
       })
       }

       // let a = cf(1)+cf(2);
       // console.log(a)

       加法
       // const jf=async()=>{
       //    let a=cf(1); //返回的都是promise对象
       //    let b=cf(2);
       // return a+b;} //相加后也是promise对象
       // ///表示
       // jf().then(res=>{
       //    console.log(res)
       // })

       //引入await 只能放在async函数里面

       // const jf=async()=>{
       //    let a=await cf(1); //拿到返回了具体的值才会往下执行
       //    let b=await cf(2); //返回了具体的值//将异步的操作转为同步操作
       // return a+b;} //
       // ///表示
       // jf().then(res=>{
       //    console.log(res)
       // })

       //引入try /catch 用于语句中可能出现的错误信息
       const jf=async(x,y)=>{
           try{
           let a=await cf(x); //拿到返回了具体的值才会往下执行
           let b=await cf(y); //返回了具体的值//将异步的操作转为同步操作
       return a+b;
       } catch{
           return"发生错误"
       }
       }//
       ///表示
       jf(2,3).then(res=>{
           console.log(res)
       })