ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

ES6-13 新特性

2022-08-26 19:02:52  阅读:190  来源: 互联网

标签:ES6 13 console log Symbol 特性 let const name


一、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

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有