这是我参与「第四届青训营 」笔记创作活动的的第4天。
一、本堂课重点内容:
1. 初识Javascript
2. Js变量
3. Js开发常用语法糖
二、详细知识点介绍以及例子:
1、 初识Javascript
Javascript,简称Js,是一种在客户端运行的脚本语言,可以说它不需要编译,运行过程是由js解释器(js引擎)逐行来进行解释并运行。现在常用的js引擎是谷歌开源的V8引擎,已经遍布到各个浏览器之中了。
所以js通常是将代码嵌入到浏览器来执行的,可以放在html文件的script标签内,也可以存放在js文件由script标签导入来使用。
目前js已经可以用于多个领域的开发并且已经有了其超集编程语言typescript来弥补js在大型项目开发中的不足。
2、 Js变量
Js变量和其他语言中的变量用途一致,用于保存数据。
变量常用的声明语句是var,let和const。
使用例子:
//1.变量作用域(适用范围) { var name='z'; console.log(name); } console.log(name);//var变量无块级作用域限制/**/
以上是ES5语法中的声明变量方式,此种方式声明的变量没有块级作用域的限制。
而通过ES6语法(let,const)声明的变量则会受到块级作用域的限制,不会出现访问冲突问题,利于实际开发。
//2.变量作用域(适用范围) { let name='z'; console.log(name); } console.log(name);//var变量无块级作用域限制/**/
可见在花括号外部的log没有输出,是空的。说明了name变量已经被销毁了
此外,js的变量声明是不带数据类型的,它的具体数据类型是依赖于我们决定的值。
var alpha='a' var str='abc' var num=11037 console.log('alpha',typeof alpha); console.log('str',typeof alpha); console.log('num',typeof alpha);
Js中共有8中数据类型,此处列举常用的6种:
Number、String、Boolean、Null、undefined、object
3、 Js开发常用ES6语法糖
3.1强化循环
of,类似cpp迭代器
let res=0; for(let book of this.books){//使用了迭代器 res+=book.count*book.price; }
in,自动控制索引i的范围
for(let i in this.books){//限制了迭代范围的普通循环 res+=this.books[i].count*this.books[i].price; }
3.2从可迭代对象中筛选满足要求的数据并构成新的可迭代对象
//1.filter:对回调函数有一个要求-----返回一个booleanlet newNums=nums.filter(function(num){ //参数是一个回调函数,filter将遍历到的元素作为参数num传入 return num<100;//filter将保留nums小于100的数字});
使用filer方法,将第参数(函数)返回true的数据加入到新的可迭代变量,最终将加过返回。
//1.filter:对回调函数有一个要求-----返回一个booleanlet newNums=nums.filter(function(num){ //参数是一个回调函数,filter将遍历到的元素作为参数num传入 return num<100;//filter将保留nums小于100的数字});
使用filer方法,将第参数(函数)返回true的数据加入到新的可迭代变量,最终将加过返回。
3.3map函数,用于迭代访问
new2Nums=newNums.map(function(num){ return num*2;})
迭代访问可迭代对象数据,并对齐进行操作,这里是将所有数值乘以2。
3.4reduce,对数组内容进行汇总(即每次迭代可以访问上次迭代结果)
//3.reduce,对数组所有内容进行汇总(可以用于累加)let sum=new2Nums.reduce(function(preValue,num){//preValue:上一次返回的值,num当前迭代访问到的 return preValue+num;},0)//preValue的初值(第一次遍历时)console.log(sum);
preValue就是上次迭代结果,是reduce第二个参数即其初始值,在每次迭代时更新并被下一次迭代访问。
三、课后个人总结:
Javascript是一门很优秀的语言,同样也是一门难度很高的语言,熟能生巧罢,只有多练习才能真正的掌握。