es6基础语法

绝地灬酷狼 2022-09-11 12:30 206阅读 0赞

# 1、语法标准： #

开发者

执行者（node.js /浏览器）

1.安装nodejs

2.查看版本

3.第一个程序

1）nodejs交互界面

2）编写代码，执行hello.js

# 2、注释 #

# 3、变量声明 #

弱类型ECMAScript5

重复声明

var a;

变量的提示

es5 函数作用域

function foo() { 
        var result = 0;
        for (var i = 0; i <= 100; i++) { 
            result += i;
        }
        console.log(i);
    }

es6引入let,const

// 将var的变量变成一个局部的，让外部不能访问
    function foo() { 
        { 
            
            // let i = 3;
            (function() { 
                var i = 3;
            })();
        }
        console.log(i);
    }
    foo();

let声明变量，具有局部作用域，不存在变量声明的提升，不可以对一个变量进行重复声明。暂时性死区。

const 常量 只能赋值一次的变量，其他与let保持相同特性

const obj = { age:11}
    obj.age++

# 4、解构 #

使用模式匹配方式从一个对象中、数组中获取值的方式

let obj = { 
    name:"terry",
    age:12,
    gender:"male",
    telephone:'15555223',
    email:'sksksk@qq.com'
        
    }
    let a = obj.name;
    let b = obj.age;
    let c = obj.gender;

4.1对象解构

对象的属性没有次序，变量必须与属性同名，才能得到正确的值。

let {  foo: baz } = {  foo: 'aaa', bar: 'bbb' };
    baz // "aaa" 
    foo //报错：foo is not defined

实际上说明，对象的解构赋值是下面形式的简写

`let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };`

let { 
    //第一个name用来匹配的，第二个name新建的一个变量，用来存放第一个name匹配的值
    name:name,
    age:age
    } = { 
    name:"terry",
    age:12,
    gender:"male",
    telephone:'15555223',
    email:'sksksk@qq.com'
        
    }
    
    简便写法
    let { 
        //第一个name用来匹配的，第二个name是匹配的值
        name,
        age,
        my
        gend:"男"
    } = { 
        name: "terry",
        age: 12,
       
        telephone: '15555223',
        email: 'sksksk@qq.com'
    
    }
    console.log(name, age);//terry 12
    console.log(name, age);//terry 12 undefined

嵌套对象的解构

let { length} = [1,2,3]
    console.log(length);//3

如何使用push方法往类数组中推入元素

4.2数组解构

let \[a,b,c\] = \[“terry”,“tom”,“sjsj”\]

let \[a,b,c,d\] = \[“terry”,“tom”,“sjsj”\]

# 5、字符串拓展 #

5.1遍历

for…of循环

let str = "hello world"
    for(let s of str){ 
    console.log(s);
    }
    //依次打印出h,e,l...

2.API拓展

1）静态方法

2）实例（成员）方法

let s = 'Hello world!';
    //表示参数字符串是否在原字符串的头部
    s.startsWith('hel');//true
    //表示参数字符串是否在原字符串的尾部
    s.endsWith('d!');//true
    //表示参数字符串是否在原字符串的尾部
    includes('o');//true

repeat()

console.log("x".repeat(3)); // "xxx"
    console.log("hello".repeat(2)); // "hellohello"

padStart():头部补全

padEnd():尾部补全

//　padStart()和padEnd()一共接受两个参数，第一个参数用来指定字符串的最小长度，第二个参数是用来补全的字符串
    "x".padStart(5,"b");//bbbbbx
    "x".padEnd(5,"b");//xbbbbb

trimStart():删除开始的空格

trimEnd()：删除尾部的空格

trim():删除字符串开头和尾部的空格

let aa = " b ";
    aa.trimStart();//"b "
    aa.trimEnd();//" b"
    aa.trim();//"b"

浅复制是指只复制原变量的地址，当原变量改变时，该变量也会改变

深复制是指对原变量复制一个新的变量，当原变量发生改变时，不会对新变量产生影响

# 6、对象扩展 #

6.1对象简写

let name = "terry";
    
    let age = 12;
    
    let sayName = function(){}
    
    let obj = {
        name:name,
        age:age,
        sayName:sayName
    }
    
    //这种写法比较复杂，下面使用简单的
    
    let obj = {
        name,
        age,
        sayName
    }

6.2扩展运算符

let { name,...other} = {  name: 'terry', age: 12, gender: 'male' }; 
     name // 'terry' 
     other // {age: 12, gender: 'male'}

**对象的扩展运算符（ … ）⽤于取出参数对象的所有可遍历属性，拷⻉到当前对象之**

**中。 对象的扩展运算符等同于使⽤ Object.assign() ⽅法。**

let obj = { name: 'terry', age: 12, gender: 'male'} let o = { ...obj} //将对象obj进行解构，然后将其赋值给o
    o // {name: 'terry', age: 12, gender: 'male'}

深拷贝：

6.3Object静态方法扩展

6.3.1 Object.is()

用于比较两个值是否相等，与===全等的行为基本一致，对于NaN，+0，-0等并不能做出严格相等来判断。

+0 === -0//true
    NaN === NaN//false
    Object.is(+0,-0);//false
    Object.is(NaN,NaN)//true

6.3.2 Object.assign()

用于对象的合并，将源对象（source）的所有可枚举属性，复制到⽬标对象（target）。

let p1 = { name:"zs"}
    let p2 = { age:15}
    let p3 = Object.assign(p1,p2)
    p3//{ name: 'zs', age: 15 }
    p1//{ name: 'zs', age: 15 }
    p2//{ name: 'zs', age: 15 }
    p3.name===p1.name//true

这说明使用Object.assign()静态方法，是将参数2的值添加到参数1中，然后将参数1的值赋值给需要赋值的变量,说明assign这个方法实现的是浅复制，如果需要使值不发生改变，可以给第一个参数传一个空对象

let p4 = Object.assign({},p1,p2);
    p4//{ name: 'zs', age: 15 }

如果源对象中的对象存在嵌套关系，进行浅拷贝

let o1 = {  a: {  age: 1 } }
    let o2 = Object.assign({ }, o1)
    console.log(o1 === o2);//false
    o1.a.age = 15;
    console.log(o1.a.age);//15
    console.log(o2.a.age);//15

6.3.3 Object.setPrototypeOf(obj,prototype)和getPrototypeOf(obj)

setPrototypeOf：设置一个指定的对象的原型 ( 即, 内部\[\[Prototype\]\]属性）到另一个对象或 [`null`][null]。

getPrototypeOf：获取指定对象的原型

参数：

obj 要设置其原型的对象

prototype 该对象的新原型

6.3.4 对象转为数组，数组转为对象

Object.keys():该⽅法返回⼀个数组，成员是参数对象⾃身的（不含继承的）所有可遍历（enumerable）属性的键名。

Object.values() ：该⽅法返回⼀个数组，成员是参数对象⾃身的（不含继承的）所有可遍历（enumerable）属性的键值。

Object.entries()：该⽅法返回⼀个数组，成员是参数对象⾃身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。

Object.fromEntries()：该⽅法是entries的逆操作，⽤于将⼀个键值对数组转为对象。

let obj = { 
        name: 'zs',
        age: 15
    }
    var fromobj = Object.entries(obj);
    console.log(Object.keys(obj));//[ 'name','age' ]
    console.log(Object.values(obj));//[ 'zs', 15 ]
    console.log(Object.entries(obj));//[ [ 'name', 'zs' ], [ 'age', 15 ] ]
    console.log(Object.fromEntries(fromobj));//{ name: 'zs', age: 15 }

# 7、数值拓展 #

parseInt

parse:相当于解析，要想起解析字符串

**静态方法：**

Number.isNaN

Number.isFinite(0.8)//true

//判断是否为整数

Number.isInteger(2)//true

# 8、数组拓展 #

待更新~

[null]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/null