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"));

时间: 2024-08-28 12:45:30

JavaScript es2015经验基础总结的相关文章

JavaScript程序设计:基础&#183;PHP&#183;XML

这篇是计算机类的优质首发推荐>>>><JavaScript程序设计:基础·PHP·XML> 内容简介 <华章程序员书库·JavaScript程序设计:基础 PHP XML>从计算机的基础知识开始介绍,涵盖程序设计的基础知识.JavaScript基础知识.JavaScript的循环结构.选择结构.表单.函数和源文件.数组.搜索和排序.文件对象模型和XML.PHP概述及相关知识.<华章程序员书库·JavaScript程序设计:基础 PHP XML>充

【javascript】ajax 基础 --本文转载

[javascript]ajax 基础 什么是 ajax ajax 即"Asynchronous JavaScript and XML"(异步 JavaScript 和 XML),也就是无刷新数据读取. http 请求 首先需要了解 http 请求的方法(GET 和 POST). GET 用于获取数据.GET 是在 URL 中传递数据,它的安全性低,容量低. POST 用于上传数据.POST 安全性一般,容量几乎无限. ajax 请求 ajax 请求一般分成 4 个步骤. 1.创建 a

【JavaScript】02.基础语法学习

[JavaScript]02.基础语法学习 引言: 老农认为(老农是我对自己的昵称),学习任何一门计算机程序语言都要先从它的语法知识开始.计算机程序语言由一堆预定义的字符和书写这些字符的规则组成.这些预定义的字符在语言里面叫做关键字或者保留字,书写这些字符的规则叫做语法. 计算机语言(Computer Lnguage),是指用于人与计算机之间通讯的语言.语言分为自然语言与人工语言两大类.自然语言是人类在自身发展的过程中形成的语言,是人与人之间传递信息的媒介.人工语言指的是人们为了某种目的而自行设

JavaScript之基础-1 JavaScript(概述、基础语法)

一.JavaScript 概述 JavaScript 概念 - JavaScript 是一种运行于 JavaScript解释器/引擎中的解释型脚本语言 - JavaScript 解释器作为JS脚本的运行环境,有如下两种呈现方式 - 独立安装的 JavaScript 解释器; - 嵌入在浏览器内核中的 JavaScript 解释器; - 目前 PC .平板.手机.机顶盒中安装的主要浏览器全部支持JavaScript JavaScript 发展史 - 1992年,Nombas公司为自己的CEnvi软

javascript之正则表达式基础知识小结

javascript之正则表达式基础知识小结,对于学习正则表达式的朋友是个不错的基础入门资料. 元字符 ^ $ . * + ? = ! : | \ / ( ) [ ] { } 在使用这些符号时需要用“\”来进行转移. 如果记不清楚那些标点符号需要转移,可以在使用标点符号时都使用反斜杠“\” 简单匹配 1.直接量 /javascript/ 匹配带有“javascript”的字符串 比如“javascript is an object-oriented scripting language” 2.[

Javascript的面向对象基础

今天学习了一些关于javascript面向对象的基础,之前在网上也陆续接触过一些,不过都感觉理解的不够透彻,所以今天做一个小结. 首先javascript的面向对象还要从何为对象说起,所谓对象可以看作是一个黑盒子,你并不清除它内部实现功能的原理,但是你只要了解它是如何使用的,并且能够用它自带的功能完成自己想要做的事情,基本上来说这就是面向对象的思想.其实面向对象的思想生活中随处可见,电视机,电冰箱,空调等等,都可以看作是对象,拿一般人来说,无需知道它们的工作原理,但只要按说明书去使用即可. 回归

【转载】100多个很有用的JavaScript函数以及基础写法大集合

1.document.write("");为 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中元素的ID号").name(或value) 6.一个小写转

Javascript eval()函数 基础回顾

如果您想详细了解ev al和JSON请参考以下链接: eval  :https://developer.mozilla.org/En/Core_JavaScript_1.5_Reference/Global_Functions/Eval JSON:http://www.json.org/ eval函数的工作原理 eval函数会评估一个给定的含有JavaScript代码的字符串,并且试图去执行包含在字符串里的表达式或者一系列的合法的JavaScript语句.eval函数将把最后一个表达式或者语句所

【15】ES6 for Humans: The Latest Standard of JavaScript: ES2015 and Beyond

[15]ES6 for Humans 共148页: 目前看到:已经全部阅读. 亚马逊地址: 魔芋:总结: 我先看的是阮一峰的在线书籍.这本书的内容很多都与之重复的. 居然卖¥463.也是没谁了. 都是基本概念.加一些实例代码.并没有太过深入的内容. PS:电子书放网盘了. 推荐指数:2颗星. 目录: 1. Getting Started with ES6 2. New Syntax in ES6 3. Destructuring 4. Classes in ES6 5. Modules 6. S