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代表模板字符变量）

实例（输出两个参数观察）

实例（通过模板标签输出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字符串检索）

八、函数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"));

巴特西

JavaScript es2015经验基础总结

最新文章

热门文章