前端打怪之旅=>Es6入门(对象简化写法、函数)

对象的简化写法

ES6允许在大括号里面,直接写入变量和函数,作为对象的属性和方法 这样的书写更加简洁

javascript 复制代码
let name = '浅辄';
            let change  = function(){
                console.log('我可以改变世界');
            }
            const school ={
                name,
                change,
                improve(){
                    console.log('提高编程水平')
                }
            }
            console.log(school)

箭头函数

1.形式如下

js 复制代码
        let fn = function() {

        }
        let fn = (形参) => {
            //省略了function关键字
            return xxx;
        }
        //调用函数
        let result = fn(实参);
        console.log(result);

2.特性

  • this是静态的.this始终指向函数声明时所在作用域下的this的值

    js 复制代码
    	function getName1(){
    		console.log(this.name)
    	}
    	
    	let getName2=()=>{
    		console.log(this.name)
    	}
    	
                //设置window对象的name属性
                window.name='浅辄';
                const SCHOOL ={
                        name:"Lee"
                }
                //直接调用
                getName1()
                getName2()
                //call调用
                getName1.call(SCHOOL)
                getName2.call(SCHOOL)
  • 不能作为构造实例化对象

    ini 复制代码
                let Person=(name,age)=>{
                    this.name = name;
                    this.age = age;
                }
                
                let me = new Person("Lee",18);
                console.log(me);
  • 不能使用arguments变量

    js 复制代码
                            let fn=()=>{
                                    console.log(arguments);
                            }
                            fn(1,2,3)
  • 箭头函数的简写

    • 省略小括号,当形参且只有一个的时候

      csharp 复制代码
                  let add = n =>{
                      return n+n;
                  }
                  console.log(add(2));
    • 省略花括号,当代码体只有一条语句的时候,此时return必须省略,而且语句的执行结果就是函数的返回值

      ini 复制代码
                  let pow=(n)=>n*n;
                  
                  console.log(pow(2));

函数参数默认值

形参初始值

js 复制代码
        function add(a,b,c){
            return a+b+c
        }
        let result = add(1,2);
        console.log(result);

这里的c是没有给它赋值的

js 复制代码
        function add(a,b,c=10){
                return a+b+c
        }
        let result = add(1,2);
        console.log(result);

这里要注意要把赋值过的参数放在后面,否则你在下面写入实参的时候,第二个

与解构赋值结合使用

js 复制代码
function connect({
                host = "127.0 .0 .1",
                username,
                password,
                port
            }) {
                console.log(host);
                console.log(username)
                console.log(password)
                console.log(port)
            }
            connect({
                host: 'localhost',
                username: 'root',
                password: 'root',
                port: 3306
            })

rest参数

ES6引入rest参数,用于获取函数的实参,用来代替arguments

获取实参

Es5获取

javascript 复制代码
        function data(){
            console.log(arguments);
        }
        
        data('小a','小b','小c')

这是一个对象

Es6获取

javascript 复制代码
		function data(...args){
			console.log(args);
		}
		
		data('小a','小b','小c')

这是一个数组,因为他是一个数组,所以一些关于数组的API是可以调用的,比如filter some every map

注意:rest参数必须要放到参数最后

相关推荐
伍哥的传说38 分钟前
鸿蒙系统(HarmonyOS)应用开发之手势锁屏密码锁(PatternLock)
前端·华为·前端框架·harmonyos·鸿蒙
yugi98783840 分钟前
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
前端
浪裡遊1 小时前
Sass详解:功能特性、常用方法与最佳实践
开发语言·前端·javascript·css·vue.js·rust·sass
旧曲重听12 小时前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿2 小时前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉2 小时前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽2 小时前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课2 小时前
React useEffect 详解与运用
前端·react.js
我想说一句2 小时前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee1232 小时前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为