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

30分钟学会ES6 (一)

程序员文章站 2023-12-21 13:06:58
...

ES6学习系列重点针对ES6中新增特性进行学习,分为两个章节:

30分钟学会ES6 (一)

let,const

let和const都是用于定义变量/常量,与以前的var类似,但是在特性上有区别,解决了var之前的一些问题。

let

  • 通过let修饰的变量只能在所在块区域中生效,而var在块外也可生效。

    • var关键字定义的变量
    {
      	var a = 10;
    }
    console.log(a); //10
    
    • let关键字定义的变量,只在对应块内生效,不会到块外面,也不会影响子块。
    {
        let b = "hello";
        console.log(b);//hello
    }
    console.log(b);//undefined
    
  • 通过let定义的变量可以防止循环变量延申到外部。

    • var关键词定义的循环变量

    for(var i = 0;i<2;i++){
    console.log(i);
    };
    console.log(“i=”+i); //i=2

    
    - `let`关键词定义的循环变量
    
    从下面也可以看出,**通过`let`修饰的循环变量与块结构内的let定义的变量作用域不同** 。
    
    ```javascript
    for(let i = 0;i<2;i++){
      let i = "hello";
      console.log(i); //abc
    }
    console.log(i);//Uncaught ReferenceError: i is not defined
    
  • 同一个块结构中不能出现两次同名的let定义的变量

    • var关键词定义的同名变量
    {
        var i = 10;
        var i = 11;
        console.log("i="+i); //i=11
    }
    
    • let关键词定义的同名变量
    {
        let i = 10;
        let i = 11;
        console.log("i="+i); //Identifier 'i' has already been declared
    }
    

const

const用于定义常量,作用域和let相同,也只会在所在块结构内部生效。

const定义的变量是指向内存地址,所以不可变的是内存地址,而不是值。也就是说变量不能重新定义新的对象,但是可以修改对应的值。

  • const常量作用域在块内。
{
    const a = 10;
    console.log(a); //10
}
console.log(a); //a is not defined
  • const常量不可新建对象,但是可以修改值。
const a = [];
a = [10];//Assignment to constant variable.
a.push(10);
console.log(a);//[10]

变量解构赋值

可以同时定义多个变量,例如函数同时返回多个值(类似于java的tuple)。这种情况下只要左右参数和值对应即可,通过数组方式定义。

  • 解构数组

  • 设置默认值
let [a,b=10]=[20];
console.log("a="+a); //20
console.log("b="+b); //10
  • 解构对象

    解构数组是通过[]存放对应的变量和值,解构对象则是通过{}存放对应的变量和JSON格式变量。

    let {a,b} = {a:"hello",b:"world"};
    console.log(a+" "+b); //hello world
    
    let {first:f,last:l} = {first:"hello",last:"world"};
    console.log(f+" "+l); // hello world
    
    function a(x,y){
        return {x,y}; //这里内部是将x,y通过{}包裹转换成对象{x:x,y:y}
    }
    let {x,y} = a(1,2); //let {x,y}={x:1,y:2}
    console.log("x="+x+",y="+y); //x=1,y=2
    
  • 解析json

    let user={name:"zhangsan",age:20};
    let {name,age} = user;
    console.log("name="+name+",age="+age);
    
  • 遍历map

    let map = new Map();
    map.set("name","zhangsan");
    map.set("age",20);
    for(let[key,value] of map){
    	console.log(key+"="+value);
    }
    

template string

基于模板方式输出字符串,类似于artTemplate模板引擎。使用${}引入变量,使用``包裹内容部分。

let user = {name:"zhangsan",age:18};
const html = `
    <label>姓名</label>:${user.name}
    <p></p>
    <label>年龄</label>:${user.age}
`
console.log(html);

函数相关

箭头函数

类似于java的lambda表达式,只是箭头是==>,而Java是->

function handle(func,a,b){
    if(typeof func == "function"){
    	func.call(this,a,b);
    }
}
//原来的
handle(function(a,b){
	console.log(a+b);
},10,20);

//箭头函数
handle((a,b)=>(console.log(a+b)),10,20);

默认参数

支持在定义函数时,设置参数的默认值,这样就不用在函数体内判断a=a||''了。

function test(a=10){
	console.log(a);
}
test(); //10

function fetch(url,option={method:"GET"}){
	console.log(option.method);
}
fetch("http://www.baidu.com"); //GET
fetch("http://www.baidu.com",{method:"POST"}); //POST

rest参数

类似于java的不定长数组类型String... params,在js中也可以这么表示...params

rest参数不能使用默认值

//错误!!!
function test(...a=10){ //Rest parameter may not have a default initializer
	console.log(a);
}

//正确
function test(...a){
    console.log(a); //[10, 20, 30]
}
test(10,20,30);

Set,Map

Set

类似于java的set,里面的值保证唯一。

可以通过for...of...进行遍历。

//通过新增的方式加入元素
let set = new Set();
[1,2,3,2,3,1].forEach((value,index)=>(set.add(value)));
for(let i of set){
    console.log(i);
}
//通过构造函数加入元素,接受数组的参数
let set1 = new Set([1,2,3,3,2,1]);
console.log(set1);//1,2,3
//获取长度
console.log(set1.size);//3
//删除元素
set1.delete(2);
console.log(set1);//1,3
//判断元素是否存在
let exist = set1.has(1);
console.log(exist);//true
//清空元素
set1.clear();
console.log(set1);//{}

Map

//新建空对象
let map1 = new Map();
map1.set("name","hello");
map1.set("age",20).set("sex","boy");
console.log(map1);

//通过构造函数入参
let map2 = new Map([["name","hello"],["age",20]]);
console.log(map2);

//判断是否存在key
console.log("exist key:"+map2.has("name"));

//获取值
console.log("get value:"+map2.get("name"));

//遍历
map2.forEach((value,key)=>(console.log(`${key}=${value}`)));

//遍历key
for(let k of map2.keys()){
    console.log("遍历key:"+k);
}

//遍历value
for(let v of map2.values()){
    console.log("遍历value:"+v);

上一篇:

下一篇: