首页 > 其他分享> > ES6-13 新特性

ES6-13 新特性

2022-08-26 19:02:52 作者：互联网

一、ES6

1、let & const

let特性：

let不能重复声明变量，var可以
块级作用域。es6中let声明的变量只能在块级作用域中起效，es5中存在全局，函数，eval作用域，
let声明的变量不存在var的变量提升问题

const特性：

一定要赋初始值
一般常量大写（编程规范）
常量值不能修改
存在块级作用域
对于数组和对象的元素修改，不算做对常量的修改，(因为引用数据类型保存的是内存地址，所以声明数组和对象时可以使用const声明，以此保证其保存的内存地址不变)

2、解构赋值

数组解构：

const Web = ['html', 'css', 'javascript']
let [tool1, tool2, tool3] = Web
console.log('tool1-----', tool1) // html
console.log('tool2-----', tool2) // css
console.log('tool3-----', tool3) // javascript

对象解构：

     const liMing = {
            name: 'liMing',
            age: '22',
            tell: function(){
                console.log(`I am liMing`)
            }
        }
  let {name, age, tell} = liMing
        console.log(name) // 'liMing'
        console.log(age) // '22'
        console.log(tell) // f(){...}
        tell() // I am liMing

3、模板字符串

let i = 6
console.log(`dddd${i}dddd`)

4、对象的简写

const liMing = {
     name,
     tell,
     sayHi(){
           console.log('hello')
    }
}

// 等价于

//const liMing = {
     //name: name,
     //tell: tell,
     //sayHi: function(){
           //console.log('hello')
    //}
//}

5、箭头函数

区别：

箭头函数this指向上一层对象，无法被call改变。
普通函数this指向调用其函数的对象

箭头函数不能作为构造函数实例化对象

let Person = (name, age)=>{
     this.name = name
     this.age = age
}
 let me = new Person('LiMing', 20)
 // 报错：Uncaught TypeError: Person is not a constructor

箭头函数不能使用arguments变量，但是可以使用 ...rest

let fun = ()=>{
     console.log(arguments); 
      // 报错：Uncaught ReferenceError:arguments is not defined
}
fun(1,2,3)

补充：call()可调用函数，可以改变this指向，实现继承效果

var person = {
    name : "sward"
}
var obj = {
    print : function(age){
        // this 指向 person
        console.log(this.name , age)
    }
}
obj.print.call(person , 30);//sward 30

6、函数参数的默认值设置

ES6允许给函数参数赋初始值

// 解构赋值一起用
 function connect({host,user,pass,port='666'}){  //赋初始值
      console.log(host);
      console.log(user);
      console.log(pass);
      console.log(port);
 }
connect({
       host:'localhost',
       user:'root',
       pass:'roott',
})

7、rest参数

ES6引用rest参数，用于获取函数的实参，用来代替ES5中 arguments

        // ES5获取实参的方式
        function printStudent(){
            console.log(arguments) // arguments为一个对象
        }
        printStudent('LiMing','HanMeimei')

        // ES6获取实参的方式
        function printFriend(friend1, friend2, ...rest){ // rest参数必须放在形参列表最后，否则会报错
            console.log(friend1) 
            console.log(friend2) 
            console.log(rest) // 得到一个数组，可以使用数组api
        }
        printFriend('小猫','小狗','兔子','鸭子')
        // 小猫
        // 小狗
        // ['兔子','鸭子']

8、扩展运算符【...】

能将数组等转为逗号分隔的参数序列

注：虽然形式与rest参数类似，但是rest参数是用在函数定义时的形参位置，扩展运算符是用在函数实际调用时的实参位置

        const STUDENTS = ['小明','小芳','小红']
        function printStudent(){
            console.log(arguments)
        }

        printStudent(STUDENTS) // 参数为一个数组，数组内包含3个元素
        printStudent(...STUDENTS) // 参数为3个元素

应用场景：

<body>
    <div></div>
    <div></div>
    <div></div>
    <script>
         const one = ['a','b'];
         const two = ['c','d'];
         const he = one.concat(two);  //concat:链接数组
        //  console.log(he);
        //数组的合并
        const three =[...one,...two]
        console.log(three);
        // 数组的克隆
        const five = [...one];
        // 将伪数组变为真正的数组
        const six = document.querySelectorAll('div');
        const six2 = [...six]
        console.log(six);
        console.log(six2);
    </script>
</body>

9、Symbol

了解详情

ES6引入了一种新的原始数据类型Symbol，表示独一无二的值。它是JavaScript语言的第7种数据类型，是一个类似字符串的数据类型

特点：

Symbol的值是唯一的，用来解决命名冲突的问题
Symbol的值不能与其它数据进行运算，也不能与自己进行运算，例如：+,-,*,/,比较运算
Symbol定义的对象属性不能使用for...in遍历，但可以使用Reflect.ownKeys来获取对象的所有键名

创建Symbol：

区别：Symbol.for()方法创建的Symbol会被放入一个全局 Symbol注册表中，假如表中存在返回上一次存的，否则在创建一个

// 方式一
let s = Symbol()
// console.log(s,typeof s);
let s1 = Symbol('song')
let s2 = Symbol('song')
console.log(s1 === s2); //false

// 方式二
let s3 = Symbol.for('song')
let s4 = Symbol.for('song')
console.log(s3 === s4); //true

使用场景：

//方式一：
        let game = {
            up: 'upp',
            down: 'doown'
        }
        let methods = {
            up: Symbol(),
            down: Symbol(),
        }
        // 添加方法
        game[methods.up] = function () {
            console.log('up up up')
        }
        game[methods.down] = function () {
            console.log('down down down')
        }
        console.log('game----', game)
        // 调用
        game[methods.up]()  // 打印 up up up


//方式二：
//只能调用方法，不能访问属性
        let youxi = {
            name: '游戏',
            age: 15,
            add: function () {
                console.log("吊毛");
            },
            // [Symbol('name')]:'宋sw',  
            [Symbol('say')]: function () {
                console.log("我可以发言");
            },
            [Symbol('zhadan')]: function () {
                console.log("发言");
            },
        }
        // Object.getOwnPropertyNames()方法返回一个由指定对象的所有自身属性的属性名
        // （包括不可枚举属性 但 不包括Symbol值作为名称的属性就是不包括这种【[Symbol('name')]:'宋文俊',】）组成的数组。
        let aaa = Object.getOwnPropertySymbols(youxi)    //总结：把对象上所有Symbol的属性，弄到一个数组里

        console.log(aaa); 
        youxi[aaa[0]](); //调用 
        youxi[aaa[1]](); //调用

标签：ES6,13,console,log,Symbol,特性,let,const,name
来源： https://www.cnblogs.com/sssong123/p/16628858.html