es6的一些个人总结

2023-01-25 19:42:52

es6的一些知识点

前言：es6（ECMAscript2015）标准

let、const、var的一些区别

let、const 块级作用域、全局作用域、函数作用域
var 全局作用域、函数作用域

变量提升的问题：

var        ：  true

let、const ： false

例子：

console.log(a);//undefind

let a=1；

块级作用域：例如在一个函数，for循环。。。区块之内！

const 常量，值不可更改。

let、var 变量，值可以更改

严格模式

消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。

"严格模式"体现了Javascript更合理、更安全、更严谨的发展方向，包括IE 10在内的主流浏览器，都已经支持它，许多大项目已经开始全面拥抱它。

“use strict”

模板字符串（Template Strings）

规定了一种新的string方法可用 `` 斜引号来创建字符串的代码块
绑定变量用${}来绑定。

let name="xiaosan";

        let age=22;

        let home="china"

        let str1=`she's name ${name},

        she age ${age},

        she homes's ${home}`

        alert(str1)

字符串内可直接换行

let str1=`she's name ${name},

        she age ${age},

        she homes's ${home}`

        alert(str1)

标签模板字符串。

function tag(strings,...args){    //...扩展运算符

           //console.log(strings);

           //console.log(args);

           let str='';

           for(var i=0,l=strings.length-1;i<l;i++){

                str=str+strings[i]+args[i];

           }

           str+=strings[l];

           return str

       }

       let name1="xiaomi";

       let age1=23;

       let str3=tag`

        she's nam1 ${name1}

        she age ${age1}

       `

       console.log(str3)

增强的对象字面量（自变量）

对象属性能够简写；
对象方法可以简写function关键字

let name="张三";

        let age=22;

        let zhangshan={

            name,

            age,

            runing(){

                console.log("我会跑")

            }

        }

对象属性名可以书写自动计算形式
原型继承__proto__

 let people={

            eat(){

                console.log("我会吃")

            },

            speak(){

                console.log("我会说话")

            },

            feeling(){

                console.log("我有感情")

            }

        }

        let caowei={

            name:name,

            __proto__:people,//设置对象原型，用来继承

            study(){

                console.log("I have sutying ok!")

            }

        }

        console.log("my name's"+caowei.name)

        caowei.study();

        caowei.eat();

        caowei.speak();

        caowei.feeling();

         console.log(caowei)

解构赋值

es6允许我们按照一定结构提取数组与对象里的值，赋给变量
函数的解构赋值
说的明白一点解构赋值它的类型就是数组跟对象

例子

//数组

        let [a,,c]=[1,2,3];

        console.log(a,c)

//对象

        let obj={

            x:1,

            y:2

        }

        let {x,y}=obj

        console.log(x,y)//1 2

//函数操作

//函数传对象

        function fn(person){

            let name=person.name;

            let age =person.age;

            console.log(name,age)

        }

        let aa={name:"xiaosan",age:18}

        fn(aa)*/

       /* function fn({uname:name,age,sex="女人"}){

            console.log(name,age,sex)

        }

        let bb={uname:"xiaosan",age:18}

        fn(bb)*/

        //es5 函数传数组

        /*function fn(Arr){

            let x=Arr[0];

            let y=Arr[1];

            let z=Arr[2];

            console.log(x,y,z)

        }*/

        /*function fn([x,y,z,d=22]){

            console.log(x,y,z,d)

        }

        let arr=[9,5,8]

        fn(arr)

//字符串解构赋值

        let str="123456";

        let [a,b,c,d,e,f,g=50]=str;

        console.log(a,b,c,d,e,f,g)

扩展运算符

扩展运算符用三个点号表示，功能是把数组或类数组对象展开成一系列用逗号隔开的值操作数组操作对象（自变量对象ps：兼容问题）

 //展开数组

    let arr=[1,2,3]

    let arr2=arr;

   // console.log(arr2);

   document.write(arr2)  //1,2,3

   let arr3=[...arr]   //也可以看做是拷贝

   console.log(arr3)//( 3) [1 2 3]

   //展开对象

let obj={

    name:"zhangsan",

    age:19,

}

let obj1={

    ...obj,

    sex:"man"

}

console.log(obj1)  //报错 现在浏览器不支持但是方法确实可行可以采用babel编译一下使用

//展开函数

function myFunction(x, y, z) {

    console.log(x,y,z)//0 1 2

 }

var args = [0, 1, 2];

myFunction(...args);

function myFunc(a, b, ...rest) {

    console.log(rest.length);//3

}

myFunc(1,2,3,4,5); // => 3

function myFunction(x, y, z,...l) {

    console.log(x,y,z,l)//0 1 2

 }

var args = [0, 1, 2,4,5,6];//0 1 2 (3) [4,5,6]

myFunction(...args);

//数组 与 扩展运算符结合

let c = ["abc",11,12]

let a = [1, 3, 4, 5,c],

    b = [...a, 6, 7, 8, 9]

  // b=a;

console.log(b)//(8) [1,2,3,4,5,6,7,8,9];

箭头函数=>

ES6允许使用“箭头”（=>）定义函数

var f = v => v

上边的函数可以书写为

var f = function(v) {

  return v;

};

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。

var f = () => 5;

// 等同于

var f = function () { return 5 };

var sum = (num1, num2) => num1 + num2;

// 等同于

var sum = function(num1, num2) {

  return num1 + num2;

};

如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。



var getTempItem = id => ({ id: id, name: "Temp" });

箭头函数可以与变量解构结合使用。



const full = ({ first, last }) => first + ' ' + last;

// 等同于

function full(person) {

  return person.first + ' ' + person.last;

}

默认参数，剩余参数，扩展参数

参数的默认参数，剩余参数，拓展参数

//默认参数

         let sayHello=(name,age=25)=>{

             let str=`my name's ${name},age's ${age} old`

            //console.log(name,age)

            console.log(str)//my name's chenxu,age's 25 old

        }

        sayHello("chenxu")

        //扩展参数

        let sum=(a,b,c)=>{

            console.log(a,b,c)

        }

        let arr=[4,5]          //扩展

        sum(1,...arr)

        //剩余参数

        let sum1=(a,b,...c)=>{

            console.log(c);

            console.log(a,b);  //剩余

        }

        sum1(1,2,3,4,5,7,9)

*/

        let sum2=(a,b,...c)=>{

            console.log(c);

            var result=c.reduce((a,b)=>a+b);

            console.log(result);

            console.log(a,b);

        }

        sum2(1,2,3,4,5,7,9)

码农公寓