Javascript学习笔记(上) | 青训营笔记

58 阅读3分钟

这是我参与「第四届青训营 」笔记创作活动的的第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是一门很优秀的语言,同样也是一门难度很高的语言,熟能生巧罢,只有多练习才能真正的掌握。