web前端练习14----es6新语法1,let,const,解构赋值,模板字符串,字符串，判断类型

  ECMAScript 是（欧洲计算机制造商协会）它规定了js的语法标准。 
  主要包括：
  语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
  类型 – 布尔型、数字、字符串、对象等。
  原型和继承
  内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等。

  https://www.kancloud.cn/kancloud/es6-in-depth/45513

一、let声明变量

百度搜索 mdn let  文档地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/let

let 语句声明一个块级作用域的本地变量，并且可选的将其初始化为一个值。

区别：
var 
1.全局作用域 和 函数作用域
2.同一变量可以重复声明
3.预解析（上面调用，下面声明）

let  
1.全局作用域 和 块级作用域
2.同一变量不能重复声明
3.不能预解析

例子1

//      let变量 =============
//      块级作用域两种写法是等价的
//      var闭包形式
        (function(){
            var iii =10;
            console.log(iii);
        })()

//      let块级作用域
        {
            let iii = 11;
            console.log(iii);
        }
//      都是在外面无法调用
        console.log(iii);

二、const 声明常量

百度搜索 mdn const  文档地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/const

常量是块级作用域，很像使用 let 语句定义的变量。常量的值不能通过重新赋值来改变，并且不能重新声明。

例子1

const number = 42;

try {
  number = 99;
} catch(err) {
  console.log(err);
  // expected output: TypeError: invalid assignment to const `number'
  // Note - error messages will vary depending on browser
}

console.log(number);
// expected output: 42

三、解构赋值

百度搜索 mdn 解构赋值  文档地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

解构赋值语法是一种 Javascript 表达式。通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。

数组的解构赋值 

例子1.1：数组的解构赋值

    function method1() {
        let iarray = [1, 2, 3, 4, 5];
        let [a,,c]=iarray;
        [a,,c]=[c, , a];
        console.log(a);
        console.log(c);
    }
    method1();

例子1.2：数组的剩余参数

        // 数组的剩余参数
        function method4(){
            let array = [1,2,3,4,5];
            let [a,b,...c]=array;
            console.log(a,b,c);
            // 1 2 (3) [3, 4, 5]
        }
        method4();

对象的解构赋值

例子2.1：对象的解构赋值

    // 对象的解构赋值
    function method2() {
        //对象的解构赋值
        let object = {
            name: 'zhh',
            age: '20',
            sex: '男'
        }
        let {name,age,sex}=object;
        console.log(name);
        console.log(age);
        console.log(sex);
    }
    method2();

例子2.2：对象的剩余参数

        // 对象的剩余参数
        function method5(){
            let object ={name:'zhh',age:'20',sex:'nan'};
            let {name,...b}=object;
            console.log(name,b);
            // zhh {age: "20", sex: "nan"}
        }
        method5();

字符串的解构赋值

例子3.1：字符串的结构赋值

        //字符串的结构赋值
        function method3() {
            let str = '秦始皇';
            let [qin, shi, huang] = str;
            console.log(qin, shi, huang);
            //秦 始 皇
        }

例子3.2：字符串的剩余参数

        //字符串的剩余参数
        function method6() {
            let str = '秦始皇';
            let [a, ...b] = str;
            console.log(a,b);
            //秦 ["始", "皇"]
        }
        method6();

四、模板字符串

百度搜索 mdn 模板字符串  文档地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/template_strings

模板字面量 是允许嵌入表达式的字符串字面量。你可以使用多行字符串和字符串插值功能。它们在ES2015规范的先前版本中被称为“模板字符串”。

例子1

    // 模板字符串,里面放一个值
    function method3(){
        let name ='zhh';
        let age =12;
        let str = `我的名字叫${name},我的年纪${age+1}`;
        console.log(str);
    }
    method3();

例子2

    // 模板字符串,保持字符串的本来样子，
    // 省去了以前的换行，单引号套数双引号等繁琐的写法
    function method4(){
        let age =12;
        let str = `
                 翟浩浩
                 ${age}
                   `;
        console.log(str);
    }
    method4();

五、字符串

百度搜索 mdn String  文档地址

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/String

startsWith() 以某个字符串开头

      // 是否以 hell 开头，1表示索引开始的位置
      console.log('hello'.startsWith('hell'));
      console.log('hello'.startsWith('hell',1));

endsWith() 以某个字符串结尾

      // 是否以 llo 结尾，5表示索引开始的位置
      console.log('hello'.endsWith('llo'));
      console.log('hello'.endsWith('llo',5));

includes() 包含某个字符串

      // 表示字符串中是否包含某个字符串，1表示索引开始的位置
      console.log('hello'.includes('h'));
      console.log('hello'.includes('h',1));

str.repeat() 重复字符串

        function method2() {
            // 字符串方法
            let str = '吾生也有涯 ';
            let isYa = str.repeat(3);
            // 吾生也有涯 吾生也有涯 吾生也有涯 
            console.log(isYa);
        }
        method2();

判断对象的类型：参考

https://blog.csdn.net/u011272795/article/details/80105513

 

参考 视频：

http://v.xue.taobao.com/learn.htm?itemId=561644266806

https://wx.kaikeba.com/presaledata/77?channel=8v4xou
https://learn.kaikeba.com/catalog/210028

javascript最好的视频（es5,dom,bom）

http://www.gulixueyuan.com/my/course/58