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

最后

以上就是爱笑金毛为你收集整理的web前端练习14----es6新语法1,let,const,解构赋值,模板字符串,字符串，判断类型的全部内容，希望文章能够帮你解决web前端练习14----es6新语法1,let,const,解构赋值,模板字符串,字符串，判断类型所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。