首页 > 其他分享 > es6新特性

es6新特性

时间:2022-10-04 19:55:37浏览次数:74  
标签:es6 console log age mySet 特性 let myMap

symbol

es6新引入的基本数据类型,用于表示一个独一无二的值,不能和其它数据类型运算

模板字符串

${}来界定;
反引号(``)直接搞定;

<script>
      url="xxxxxx"
       // es6之前
       let html="<div>"+
                  " <a>"+url+"</a>"+
               "</div>";
        //es6
       let eshtml=`<div>
                   <a>${url}</a>
               </div>`
</script>

字符串新方法

includes()是否包含参数字符串,返回boolean

startsWith()和endsWith()判断字符串是否已参数字符串开头或结尾,返回boolean;该方法可以有两个参数,第一个数字可以表示开始查找的位置

let str = 'blue,red,orange,white';

str.includes('blue');//true
str.startsWith('blue');//true
str.endsWith('blue');//false

repeat()方法按指定次数返回一个新字符串

console.log('hello'.repeat(2));   //'hellohello'

padStart()和padEnd()按给定长度从前面或后面补全字符串,返回新字符串

let arr = 'hell';
console.log(arr.padEnd(5,'o'));  //'hello'
console.log(arr.padEnd(6,'o'));  //'helloo'
console.log(arr.padEnd(6));  //'hell  ',如果没有指定将用空格代替

console.log(arr.padStart(5,'o'));  //'ohell'

解构表达式

解构赋值是对赋值运算符的扩展。它是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。
字符串、以及ES6新增的Map和Set 都可以使用解构表达式

数组解构

let [a,b,c] = [1,2,3];
console.log(a,b,c);    //1,2,3
 
let [a,b,c] = [1,,3];
console.log(a,b,c);    //1,undefined,3
 
let [a,,b] = [1,2,3];
console.log(a,b);//1,3
 
let [a,..b] = [1,2,3];  //...是剩余运算符,表示赋值运算符右边除第一个值外剩余的都赋值给b
console.log(a,b);//1,[2,3]

对象解构

对象的解构赋值和数组类似,不过左边的变量名需要使用对象的属性名,并且用大括号{}而非中括号[]

let obj = { 
    name: "ren", 
    age: 12, 
    sex: "male" 
};

let { name, age, sex } = obj;
console.log(name, age, sex); //'ren' 12 'male'

let { name: myName, age: myAge, sex: mySex } = obj; //自定义变量名
console.log(myName, myAge, mySex); //'ren' 12 'male'

对象方面

Map对象用于保存键值对,任何值JavaScript支持的值都可以作为一个键(key)或者一个值(value)。
与对象不同的是

object的键只能是字符串或ES6的symbol值,而Map可以是任何值。
Map对象有一个size属性,存储了键值对的个数,而object对象没有类似属性。

let myMap = new Map([['name','ren'],['age',12]]);
console.log(myMap);  //{'name'=>'ren','age'=>12}

myMap.set('sex','male');
console.log(myMap);  //{'name'=>'ren','age'=>12,'sex'=>'male'}
console.log(myMap.size);  //3

myMap.get('name');  //'ren'
myMap.has('age');  //true
myMap.delete('age');  //true
myMap.has('age');  //false
myMap.get('age');  //undefined

Set

可以理解为后端的Set集合对象

Set对象和Map对象类似,但它存储不是键值对。类似数组,但它的每个元素都是唯一的。

let mySet = new Set([1,2,3]);//里面要传一个数组,否则会报错
console.log(mySet);  //{1,2,3}

mySet.add(4);
console.log(mySet);  //{1,2,3,4}

mySet.delete(1);  //true
mySet.has(1);  //false
console.log(mySet);  //{2,3,4}

利用set的唯一性,可以实现数组的去重

let arr = [1,1,2,3,4,4];

let mySet = new Set(arr);

let newArr = Array.from(mySet);
console.log(newArr);  //[1,2,3,4]

函数方面

参数默认值

<script>

    // es6之前
    // function add(a, b) {
    //     if(!a) a=0
    //     if(!b) b=0
    //     return a + b;
    // }
    
    //es6
    function add(a = 0, b = 0) {
        return a + b;
    }
    let x=add(); 
    let y=add(2); 
    let z=add(3, 4); 
          console.log(x,y,z); //x=0, y=2, z=7
</script>

箭头函数

箭头函数实现了一种更加简洁的书写方式。箭头函数内部没有arguments,也没有prototype属性,所以不能用new关键字调用箭头函数。

let add = (a,b) => {
    return a+b;
}
let print = () => {
    console.log('hi');
}
let fn = a => a * a;
//当只有一个参数时,括号可以省略,函数体只有单行return语句时,大括号也可以省略。

 

标签:es6,console,log,age,mySet,特性,let,myMap
From: https://www.cnblogs.com/qianduan-Wu/p/16754320.html

相关文章

  • 【Java8新特性】- 接口中默认方法修饰为普通方法
    Java8新特性-接口中默认方法修饰为普通方法......
  • 手写Promise——基于es6的Promise实现(含详细注释)
      1.PromiseA+规范官方英文地址:​​https://promisesaplus.com/​​中文翻译可参考​​http://malcolmyu.github.io/malnote/2015/06/12/Promises-A-Plus/​​2.代码......
  • 【Vue.js入门到实战教程】15-ES 2015 新特性一览
    ​技术栈选择前面我们介绍了从Laravel8开始,自带的前端UI脚手架扩展包Jetstream不再基于Vue作为默认的组件开发技术栈,以便降低后端新手入门前端组件开发的学习成本......
  • ES6中set的用法
    ES6中的set类似一个数组,但是其中的值都是唯一的,Set本身是一个构造函数,用来生成Set数据结构。set函数可以接受一个数组作为参数,用来初始化:constset=newSet([1,2,......
  • JDK13的六大重要新特性
    文章目录​​JDK13的六大重要特性​​​​支持Unicode12.1​​​​动态CDS归档(DynamicCDSArchiving)​​​​java.net.Socket和java.net.ServerSocketAPI的重新实现​​......
  • CSS3 的新特性
    CSS3的新特性新增的CSS3特性有兼容性问题,ie9+才支持移动端支持优于PC端1.CSS3新增选择器(1)属性选择器属性选择器可以根据元素特定属性来选择元素。这样就可以不要......
  • jdk8新特性
    default关键字定义一个Animal接口其中breath用default修饰。publicinterfaceAnimal{voidrun();voideat();defaultvoidbreath(){Syst......
  • HTML5的新增特性
    HTML5的新增特性1.HTML5新增的语义化标签header:头部标签nav:导航标签article:内容标签section:定义文档某个区域aside:侧边栏标签footer:尾部标签注意:1.这种语......
  • studio one 5中文版新功能特性
    StudioOne5mac版通过一个直观的应用程序录制、制作、混音、母带和演奏,基于划时代的音频引擎,提供了强大的音频性能,不仅可以在32位和64位浮点处理之间进行自动切换,还可以保......
  • 肖sir_Java 8 新特性__21
    1.1Lambda表达式Lambda表达式,也可称为闭包,它是推动Java8发布的最重要新特性。Lambda允许把函数作为一个方法的参数(函数作为参数传递进方法中)。语法1,(parameters......