JavaScript es2015经验基础总结

Posted 2020-09-29

一、作用域 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"));