zoukankan      html  css  js  c++  java
  • JavaScript es2015经验基础总结

    一、作用域 var和es6中的let 的区别。
    1、var 是JavaScript中定义全局变量的关键字
    2、let 是es6语法中定义变量的关键字 但是let的变量是块级作用域(只能在自己的块里面使用 也就是在大括号里面可以使用在外面是用不了)

    实例(var):
    'use strict';
    if(true){
    var a="apple";
    }
    console.log(a); //控制台输出apple

    实例(let)
    'use strict';
    if(true){
    let a="apple";
    }
    console.log(a); //控制台输出 a is not defined

    二、const 常量(也同样遵循块级作用域)
    1、var创建的是变量(也就是可以进行二次创建的变量)
    2、const 创建的是常量( 一旦创建不能重复赋值(指的是这个重复声明的动作不能发生) )

    实例(const):
    'use strict'
    const fruit = "apple";
    console.log(fruit); // 控制台输出 apple
    const fruit = "banana";
    console.log(fruit); // 控制台输出 Duplicate decalaration “fruit” 重复的声明了fruit 报错

    //因为第一次,创建fruit的时候 使用的是const 创建常量,所以不能再重复声明。

    注意:限制的是给衡量分配值这个动作,并不是限制值得改变
    实例(数组的常量)
    'use strict'
    const fruit = [];
    fruit.push("apple");
    fruit.push("banana");
    console.log(fruit); //会以数组的形式在控制台输出 里面包含 苹果[0]和香蕉[1];

    实例(重新声明常量是错误的)
    'use strict'
    const fruit = [];
    fruit.push("apple");
    fruit.push("banana");
    fruit = []; //这个动作又重新声明常量fruit了
    console.log(fruit); //会报错 重复声明。

    三、es6中的结构的使用 数组分配
    1、传统的JavaScript数组里的值我们在 控制台打印的话 需要使用数组名称[下标]依次打印
    2、在es6中,我们可以使用let定义数组结构,来指定某个数组的返回值逐条分配

    实例(传统JavaScript方法)
    function breakfast(){
    return [ 'apple' , 'drink' , 'cake' ];
    }
    var tmp = breakfast() , dessert = tmp[0] , drink = tmp[1] , fruit = tmp[2];
    console.log(dessert , drink , fruit);

    实例(es6的结构使用)
    function breakfast(){
    return [ 'apple' , 'drink' , 'cake' ];
    }
    let [ dessert , drink , fruit ] = breakfast(); //定义数组变量 方法执行过后返回值会依次的添加到每一个里面
    console.log(dessert , drink , fruit);


    四、es6对象
    实例(es6)
    function breakfast(){
    return {drink:"orange" , dessert:"cake" , fruit:"apple"}
    }
    let {drink:a , dessert:b , fruit:c} = breakfast();
    console.log(a , b , c);

    注意:在这里let中的 a是变量 drink是上面创建对象中的属性 和 传统JavaScript 对象是相反的变量

    实例(传统JavaScript)
    function breakfast(){
    return {drink:"orange" , dessert:"cake" , fruit:"apple"}
    }
    var tmp = breakfast(), a=tmp.drink,b=tmp.dessert,c=tmp.fruit
    console.log(a);
    console.log(b);
    console.log(c);

    五、es6中的字符模板 template string

    实例(传统字符串连接变量)
    let dessert = "apple" , drink = "cake";
    let breakfast = "今天的早餐是" + dessert + "与" + "drink" + "!";
    consloe,log(breakfast);

    实例(es6模板字符串 连接 变量)
    let dessert = "apple" , drink = "cake";
    let breakfast1 = `今天的早餐是 ${dessert} 与 ${drink} !`;
    console.log(breakfast1);

    六、定义字符串模板标签 (会有一个函数 其中有两个参数 一个string代表原始字符串 value代表模板字符变量)

    实例(输出两个参数观察)

    let dessert = "cake" , fruit = "apple";
    let breakfast = kenchen`今天的早餐吃的是 ${ dessert } 与 ${ fruit } ! ` ;
    function kenchen( string , ...value ){
    console.log(string); //输出的是字符串数组[0:今天的早餐吃的是, 1:与 , 2:!]
    console.log(value); //输出的是模板变量值得数组 [0:cake,1:apple]
    }

    实例(通过模板标签输出breakfast)
    let dessert = "cake" , fruit = "apple";
    let breakfast = kenchen`今天的早餐吃的是 ${ dessert } 与 ${ fruit } ! ` ;
    function kenchen( string , ...value ){
    let breakfast1 = "";
    for(let i = 0; i<value.length; i++){
    breakfast1 += string[i];
    breakfast1 += value[i];
    }
    breakfast1 += string[string.length-1];
    return breakfast1;
    }
    console.log(breakfast);
    解析: kenchen模板标签其实就是一个方法名称,当方法执行结束之后 返回的状态 是返回给kenchen标签的也就是breakfast
    返回值其实就是模板标签,也就赋值给了breakfast 从而输出的时候输出breakfast就可以

    七、es6中string的判断包含方法
    startsWith():判断字符串是以什么字符开头的 startsWith("abc"); 返回布尔值true/false
    endsWith() : 判断字符串是以什么字符结束的 endsWith("z") ; 返回布尔值true/false
    includes() : 判断字符转是否包含某个字符 includes("cake") ; 返回布尔值true/false

    综合实例(es6字符串检索)

    let dessert = "cake" , fruit = "apple";
    let breakfast = `今天的早餐吃的是 ${ dessert } 与 ${ fruit } ! ` ;
    console.log(
    breakfast.startsWith("今天s") //返回false
    );
    console.log(
    breakfast.endsWith(" ")// 以空格结束的 所以 返回true
    );
    console.log(
    breakfast.includes("cake") //字符串里是否包含蛋糕 答案 返回true
    );
    if(breakfast.startsWith("今天是")){
    alert("早餐字符串是以今天开头的")
    }else{
    alert("检索失败")
    } //弹出检索失败

    八、函数function 函数 设置默认值(参数默认值)
    1、es6中给function的参数设置默认值,如果调用函数时不传递参数函数参数将使用默认值,如果传递参数才使用传递的值

    实例(参数默认值)
    function breakfast(dessert = "cake" , fruit = "apple"){
    return `${dessert} ${fruit}`
    }
    console.log(
    breakfast("aaa","orange") //将输出 传递的 aaa 和 apple
    );

    九、...操作符
    1、展开: 比如数组的展开输出

    实例(...展开实例)
    let fruit = ["apple" , "cake"];
    console.log(fruit); //输出的是数组对象
    console.log(...fruit);//输出的是appla cake

    实例(新创建一个数组 将fruit展开后包含在 新数组中 在输出新数组对象 和 新数组展开结果)
    let fruit = ["apple" , "cake"],
    fruits = ["orange" , ...fruit];
    console.log(fruits); //输出数组对象 第二个包含着第一个 成为一个数组
    console.log(...fruits);//输出 orange apple cake

    2、用在函数的参数里面 让函数支持更多的参数 数量不受限制也就是----剩余操作符

    实例(一个函数多个无线传递参数 输出)
    function breakfast(fruit , dessert , ...food){
    console.log(fruit , dessert , food);
    //输出两个 第一个 是apple cake 后面是一个数组对象 [orange banana]
    }
    breakfast("apple" , "cake" , "orange" , "banana");

    实例(全部显示字符串 ...展开)
    function breakfast(fruit , dessert , ...food){
    console.log(fruit , dessert , ...food);
    //输出 apple cake orange banana
    }
    breakfast("apple" , "cake" , "orange" , "banana");

    十、函数的function参数是对象的形式
    1、参数中需要使用大括号{}将参数对象包裹起来 然后在给一个空值 以至于不传递对象的时候不会报错
    2、调用函数传递对象参数的时候 也需要使用 {} 将设置的 属性和值包裹起来

    实例(function 对象参数(object))
    function breakfast(fruit , dessert , {address , home} = {}){
    console.log(fruit , dessert , address , home);
    }
    breakfast("apple" , "cake" , {address:"济南" , home:"北京龙虾餐馆"});

    十一、es6中函数的name属性
    1、普通函数
    2、匿名函数
    3、普通函数赋值变量

    实例(普通传统name属性)
    function breakfase(){
    // 外面输出的是 breakfast 函数名
    }
    console.log(
    breakfase.name
    );

    实例(匿名函数的name属性)
    let breakfase1 = function(){
    // 外面输出的是 breakfast1 变量匿名函数名
    }
    console.log(
    breakfase1.name
    );

    实例(传统赋值给变量时的name)
    let breakfase2 = function ArrayCheck(){
    // 外面输出的是 ArrayCheck 优先级高的 函数名
    }
    console.log(
    breakfase2.name
    );

    十二、es6的function创建的新方式

    //es6写法 创建函数的新的方式
    let breakfast = dessert => console.log(dessert);
    breakfast("apples");
    breakfast是函数的名称
    dessert第一个是 形参
    => 是es6函数的写法
    console.log(dessert); 函数的返回值

    //es5的写法
    var breakfast = function breakfast(dessert){
    console.log(dessert);
    }

    //上面是传递一个参数的 传递多个参数的需要怎么设置呢
    let breakfast = (dessert , fruit) => console.log(dessert + " " + fruit);
    breakfast("cake" , "apple");

    //es5写法
    var breakfast = function breakfast(dessert , fruit){
    console.log(dessert + " " + fruit);
    }
    breakfast("cake" , "apple");

    //如果加大括号 就相当于 里面的值需要被返回 需要return
    let breakfast = (dessert = "cake" , fruit = "apple") => {
    return dessert + " " + fruit;
    };
    console.log(breakfast("drink" , "banana"))

    //es5写法
    var breakfast = function breakfast(dessert , fruit){
    return dessert + " " + fruit;
    }
    console.log(breakfast("drink" , "banana"));

  • 相关阅读:
    面向对象编程:这里我说了算!
    一步步构建大型网站架构
    如何设计伟大产品:要学会讲故事
    如何从组件开始构建一座城市?
    深度理解依赖注入(Dependence Injection)
    Java Study For Seven Day( 面向对象三)
    Java Study For Five Day( 面向对象一)
    Java Study For Six Day( 面向对象二)
    关于学习效率的探讨
    CodeForces
  • 原文地址:https://www.cnblogs.com/wangweizhang/p/7215597.html
Copyright © 2011-2022 走看看