欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

JavaScript ES6新增语法

程序员文章站 2023-12-22 22:14:28
...

一、声明关键字

Let:

  1. 基础功能与var一样
  2. 全局变量不会绑定到window对象
  3. 没有提升
  4. 不允许重复声明
  5. 块级作用域(只要是花括号就是作用域)
  6. 暂时性死区(声明之前不允许使用)

const:

  1. 功能与let一致
  2. const声明的是常量,声明时候立即赋值,之后不能再修改(const不允许修改地址,但可以改值)
  3. 一般声明一次再不回改变的变量使用const

二、解构赋值

  1. 数组的解构赋值(从左到右顺序,依次解构,变量多了就为undefined)
	let arr = [3,4,5,6];
    let age = arr[0];
    let sex = arr[1];
    let num = arr[2];
    let abc = arr[3];
    let qwe = arr[4];
    let [sex,age,num,abc,qwe] = arr;

	console.log(age)
    console.log(sex)
    console.log(num)
    console.log(abc)
    console.log(qwe)  //undefined

  1. 字符的解构赋值(从左到右的顺序,依次解构,变量多了就为undifined)
    var str = "hello world";
    var [a,b,c,d,e,f,g] = str;
    
	console.log(a)
    console.log(b)
    console.log(c)
    console.log(d)
    console.log(e)
  1. 对象的解构赋值(按照键名一一对应,不存在的键名为undefined)
 var obj = {
        name:"admin",
        sex:1,
        age:18
    }
 var name = obj.name
 var {sex,age,name} = obj;

 console.log(name)
 console.log(age)
 console.log(sex)
  1. 解构赋值一般用于函数的传参和函数返回值
function fn([a,b,c,d,e]){}
    var arr = [2,3,4,5,6]
    fn(arr)

    function fn(){
        return {
            year:2020,month:12,date:31
        }
    }
    var {tear,month,date} = fn()

快速交换两个变量的值

 	var a = 10;
    var b = 20;
    var [a,b] = [b,a]

    console.log(a)
    console.log(b)

三、字符的方法

  1. 新的字符方法
	var str = "hello";
    console.log(str.repeat(5));
    console.log(str.includes("a"));
    console.log(str.startsWith("e"));
    console.log(str.endsWith("o"));
  1. 字符转编码:str.codePointAt()
  2. 编码转字符:String.formCodePoint()
  3. 新增字符串模版(字符串的拼接方式)
  var s1 = "这是字符" + "这是拼接的字符";
    var s2 = `这
    也
    是
    字
    符
    ${ s1 }`;
    console.log(s1);
    console.log(s2);

四、箭头函数(()=>{}

特点:

  • 不能直接存在,必须作为值存在
  • 语法极简
  • 当有且只有一个形参时,可以省略小括号
  • 当有且只有返回语句时,可以省略return关键字和花括号
  • 伤害了代码的可读性
  • 当有且只有返回语句,返回的是对象时,要么不能省略花括号和return,要么将对象使用小括号包裹起来
  • 箭头函数没有自己的this,内部的this回自动使用外层this
  • 箭头函数不能被new执行

使用场景:

  1. 回调函数
  2. 返回值
  3. 小范围使用
  var f = ()=>{
        console.log(1);
    }
    f();

    var fn = a=>{
        console.log(a)
    }
    fn("hello")

    var fn = a=>"hello " + a;

    console.log(typeof fn);

五、展开运算符(...

类似与解构赋值,展开复杂数据(数组和对象)

  • 取数组最大值最小值
 	var arr = [34,56,87,25,69]; 
    console.log(Math.max(...arr));

	var arr = [34,56,87,25,69]; 
    ES6中取数组的最大或最小值
    console.log(Math.max(...arr));

	 var obj = {
        name:"admin"
    }
    var people = {
        age:18,
        sex:1,
        ...obj
    }
    console.log(people)


    var obj = {
        name:"admin"
    }
    var obj2 = {...obj}
    obj2.name = "root";
    console.log(obj)
    console.log(obj2)
    console.log(...obj)
    console.log(name:"admin")

六、symbol数据类型

  • 一种新的数据类型,特点类似于字符
  • 一旦被创建,不可更改不与任何数据相同,自身相等,用来做标记量(字典量)
  • 使用在固定的不可被改变的标记量
 	var s1 = Symbol();
    var s2 = Symbol();
    console.log(s1);
    console.log(s2);
    console.log(typeof s2);
    console.log(s1 === s1);
    console.log(s1 === s2);

七、set和map

set:
重复的参数,不会添加,类型为对象,没有索引号和字符长度
使用for - of遍历;s.siez查看长度(可用于数组去重)

var s = new Set([4,5,2,1]);
    s.add("hello")
    s.add(4)
    s.add("4")
    console.log(s);
    console.log(typeof s);
    console.log(s[0])
    console.log(s.length)
    for(var i of s){
        console.log(i);
    }
    console.log(s.size)

Array.from(set([3,3,2,4,5])) //一行代码实现数组去重

map:
set(“键”,值),对象添加属性的方法

  • 添加的属性键值为:键=>值连接
  • 类型为对象,size查看字符长度
  • get(“键”)获取属性值
  • 使用for-of遍历

    var m = new Map();

    m.set("name","admin");
    m.set("age",18);
    m.set("sex",1);
    m.set("show",function(){});

    console.log(m)
    console.log(typeof m)

    console.log(m.size)

    console.log(m[0])
    console.log(m.length)

    console.log(m.get("name"))
    console.log(m.get("sex"))
    console.log(m.get("age"))

    for(var i of m){
        console.log(i)
    }

上一篇:

下一篇: