学习JavaScript的第一天

　　今天又是收获满满的一天，心里真的感到很开心！今天你学习了吗？无论这个世界对你怎样，都请你一如既往的努力、勇敢、充满希望。

　　今天我学习的是前端开发的脚本语言JavaScript，接下来我就聊聊我今天的成果吧！

行为层（JavaScript）

　　JavaScript是一门弱类型的脚本语言，其源代码在发往客户端运行之前是不需要进行编译的，而是将文本格式的字符代码发送给浏览器由浏览器解释运行。

　　注意：它是一门世界上最流行的脚本语言。而作为一个程序开发人员，必须要精通JavaScript.

 

如何引入JavaScript?

　　1.使用内部标签：

　　　　<script>

　　　　　　//...

　　　　</script>

　　　2.外部引入（abs.js）:

　　　　//...

　　　　test.html:

　　　　　　<script src="abs.js"></script>

 

基本语法入门：在JavaScript中严格区分大小写！！！

　　1.定义变量     变量类型 变量名=变量值；

　　2.条件控制     if...else...(可以嵌套)；

　　3.使用console.log(变量名)可以在浏览器控制台打印变量！等价于Java中的System.out.println()。

 

数据类型

　　1.布尔值  true和false

　　2.逻辑运算：&& 两个都为真，结果为真

　　　　　　　　|| 一个为真，结果为真

　　　　　　　　！ 真即假，假即真

　　3.比较运算符（非常重要，注意跟Java的区别）

　　　　　　　　=     赋值

　　　　　　　　==   等于（类型不一样，值一样，也会判断为true）

　　　　　　　　===  绝对等于（类型不一样，值一样，结果为true，否则为false）

　　　　　　　　注意：在js中，坚持不要使用==进行比较；

　　　　　　　　　　　在js中，要尽量避免使用浮点数进行运算，它存在精度问题；如果实在不能避免，可使用绝对值进行大致比较。

　　　　　　　　另外须知：NaN===NaN,这个与所有的数值都不相等，包括它自己；

　　　　　　　　　　　　　只能通过isNaN(NaN)来判断这个数是否为NaN。

　　4.number:  js不区分小数和整数 。

　　5.字符串：“abc” 或者 'abc'(即单引号、双引号都可以)。

　　6.null和undefined

　　　　null: 空；

　　　　undefined：未定义。

　　7.数组

　　　　在Java中的数值必须是相同类型的对象，而在js中不需要这样！！！

　　　　如果取数组下标越界，就会出现undefined。

　　8.对象

　　　　对象是使用大括号{}，数组是中括号[]。

　　　　每个属性之间使用逗号隔开，最后一个不需要添加，例如：

　　　　　　　　　　　　　　　　　var preson={

　　　　　　　　　　　　　　　　　　　　name:"zhangzaijun",

　　　　　　　　　　　　　　　　　　　　age:20,

　　　　　　　　　　　　　　　　　　　　tags:['js','java','web','...']

　　　　　　　　　　　　　　　　　　　　　　　}

　　　　　　　取对象的值运行如下：person.name

　　　　　　　　　　　　　　　　　“zhangzaijun”

　　　　　　　　　　　　　　　　　person.age

　　　　　　　　　　　　　　　　　20

 

 

严格检查格式：

　　前提：IDEA需要设置支持ES6语法。

　　‘use strict':严格检查模式，预防JavaScript的随意性导致产生的一些问题，必须写在JavaScript的第一行！

 

数据类型（详细）

1.字符串

　　a.正常字符串我们使用 单引号或者双引号包裹；

　　b.注意转义字符　　　\

　　c.多行字符串编写：var msg=`hello   //注意：这里使用的是tab上面，esc键下面

　　　　　　　　　　　　　　　　world

　　　　　　　　　　　　　　　　　　你好`

　　d.模板字符串：//注意：这里使用的是tab上面，esc键下面

　　　　　　　　　let name="zhangzaijun";

　　　　　　　　　let age=3;

　　　　　　　　　let msg=`你好呀，$(name)`

　　e.字符串长度：str.length

　　f.字符串的可变性，不可变

　　g.大小写转化

　　　　//注意：这里是方法，不是属性了

　　　　student.toUpperCase();//转大写

　　　　student.toLowerCase();//转小写

　　h.student.indexOf('t');

　　i.substring 截取字符串

　　　　[)

　　　　student.substring(1);//从第一个字符串截取到最后一个字符串

　　　　student.substring(1,3)//[1,3)

　　

2.数组   Array可以包含任意的数据类型

　　　　var arr=[1,2,3,4,5,6];

　　　　arr[0]

　　　　arr[0]=1

　　a.长度   arr.length

　　　　注意：加入给arr.length赋值，数组大小就会发送变化，如果赋值过小，元素就会丢失。

　　b.indexOf,通过元素获取下表索引

　　　　例如：arr.indexOf(2)

　　　　　　　1

　　　　注意：字符串的“1“和数字1是不同的。

　　c.slice()  截取Array的一部分，返回一个新数组，类似于String中的substring

　　d.push(),pop() 尾部

　　　　push:压入到尾部

　　　　pop:弹出尾部的一个元素

　　e.unshift(),shift() 头部

　　　　unshift:压入到头部

　　　　shift:弹出头部的一个元素

　　f.排序sort()

　　g.元素反转reverse()

　　h.拼接concat()

　　　　注意：concat()并没有修改数组，只是会返回一个新的数组。

　　i.连接符join,打印拼接数组，使用特定的字符串连接

　　　　例如：var arr=['A','B'.'C'];

　　　　　　　arr.join('-');

　　　　　　　"A-B-C"

　　j.多维数组

　　　　例如：arr=[[1,2],[3,4],[5,6]]

　　　　　　　arr[1][1]

　　　　　　　4

　　　　　注意：数组存储数据（如何存和取，方法都可以自己实现）。。。

3.对象   若干个键值对

　　var 对象名={

　　　　属性名：属性值，

　　　　属性名：属性值，

　　　　属性名：属性值

 

                        }

　　注意：在js对象中，{...}表示一个对象，键值对描述属性 ***：***，多个属性之间用逗号隔开，最后一个属性不加逗号！！！

　　a.对象赋值

　　　　person.name="zhangzaijun"

　　　　"zhangzaijun"

　　　　person.name

　　　　"zhangzaijun"

　　b.使用一个不存在的对象属性，不会报错！undefined

　　c.动态的删减属性，通过delete删除对象的属性

　　　　例如：delete person.name

　　　　　　　true

　　　　　　　person

　　d.动态的添加，直接给新的属性添加即可

　　　　例如：person.haha="haha"

　　　　　　　"haha"

　　　　　　　person

　　e.判断属性值是否在这个对象中！*** in ***！

　　　　例如：’age' in person

　　　　　　　true

　　　　　　　//继承

　　　　　　　‘toString' in person

　　　　　　　true

　　f.判断一个属性是否是这个对象自身拥有的 hasOwnProperty()

　　　　例如：person.hasOwnProperty('toString')

　　　　　　　false

　　　　　　　person.hasOwnProperty('age')

　　　　　　　true

 

4.流程控制

　　if判断；

　　while循环，避免程序死循环；

　　for循环；

　　forEach循环

　　　　例如：var age=[41,12,3,65,78,95,45]

　　　　　　　age.forEach(function(value){　　

　　　　　　　　　　　　　　　　　　console.log(value);

　　　　　　　　　　　　　　　　　　　　})

　　for...in

　　　　例如：for(var num in age){

　　　　　　　　if(age.hasOwnProperty(num){

　　　　　　　　　　console.log("存在")

　　　　　　　　　　console.log(age[num])

　　　　　　　　　　　　　　　　}　　}

5.Map和Set   ES6的新特性

Map

　　例如：var map=new Map([['tom',100],['jack',90],['haha',80]])

　　　　　var name=map.get('tom');//通过key过去value

　　　　　map.set('admin',123456);//新增或修改

　　　　　map.delete("tom");//删除

Set：无序不重复的集合

　　例如：set.add(2）；//添加

　　　　　set.delete(1);//删除

　　　　　console.log(set.has(3));//是否包含某个元素

 

6.iterator

全部都使用for...of遍历

a.遍历数组

　　例如：var arr=[3,4,5];

　　　　　for(let x of arr){

　　　　　　　　　console.log(x);

　　　　　　　　　　　　}

b.遍历Map

　　例如：var map=new Map([['tom',100],['jack',90],['haha',80]]);　　　　　　　　　

　　　　　for(let x of map){

　　　　　　　　　console.log(x);

　　　　　　　　　　　　}

c.遍历Set

　　例如：var set=new Set([5,6,7]);

　　　　　for(let x of set){

　　　　　　　　　console.log(x);

　　　　　　　　　　　　}

 

如何定义函数？

定义方式一：

　　例如：function abs(x){...}

定义方式二：

　　例如：var abs=function(x){...}

　　方式二是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！  方式一和方式二等价。。。

如何调用函数呢？（以计算绝对值为例）

　　　　　abs(10)  //10

　　　　　abs(-10) //10

　　参数问题：js可以传任意个参数，也可以不传递参数。

　　arguments是一个js免费赠送的关键字；代表传递进来的所有参数是一个数组。

　　问题：arguments包含所有的参数，我们有的时候想使用多余的参数来进行附加操作，需要排除已有参数

　　　　为解决上述问题，我们可以使用rest,它是ES6引入的新特性——获取除了已经定义的参数之外的所有参数 ....

　　　　　　例如：function aaa(a,b,...rest){

　　　　　　　　　　console.log("a->"+a);

　　　　　　　　　　console.log("b->"+b);

　　　　　　　　　　console.log(rest);}

　　　　　　　　注意：rest参数之恩呢写在最后面，必须用...标识。

 

变量作用域

　　在js中，var定义变量实际是有作用域的。

　　假设在函数体中声明，则在函数体外不可以使用；

　　如果两个函数使用了相同的变量名，只要在函数内部，就不冲突；

　　内部函数可以访问外部函数的成员，反之则不行；

　　假设内部函数变量和外部函数变量重名，函数查找变量从自身开始，由内向外查找，假设外部存在这个同名的函数变量，则内部函数就会屏蔽外部函数的变量。

全局对象window

　　alert()这个函数本身也是一个window变量

　　js实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围找到，就会向往查找，如果在全局作用域都没有找到，报错 RefrenceError。

规范：

　　由于我们所有的全局变量都会绑定在我们的window上，如果不同的js文件，使用相同的全局变量，就会出现冲突。如何减少冲突？把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名的冲突问题。。。

 

局部作用域Let

　　ES6 let关键字，解决局部作用域冲突问题！

　　建议大家都使用let，去定义局部作用域的变量。。。

常量const

　　在ES6之前，怎么定义常量：只有用全部大写字母命名的变量就是常量，建议不要修改这样的值；

　　在ES6引入了常量关键字const

　　　　例如：const PI=3.14//这样PI值就不可以更改了

 

如何定义方法？

　　方法就是把函数放在对象的里面，对象只有两个东西：属性和方法。

　　在此我们会用到关键字this，注意this关键字无法指点的，是默认指向调用它的那个对象；

　　

　　在js中，apply可以控制this的指向。任何函数都有apply这个方法，该方法有两个参数，一个就是指向的对象，另一个参数是“[]"(代表为空）。

 

Date

基本使用：

　　　　var now=new Date();

　　　　now.getFullYear();//年

　　　　now.getMonth();//月  0-11月

　　　　now.getDate();//日

　　　　now.getDay();//星期几

　　　　now.getHours();//时

　　　　now.getMinutes();//分

　　　　now.getSecond();//秒

 

　　　　now.getTime();//时间戳  全世界统一  1970 1.1 0：00：00

　　　　console.log(new Date(1578106175991));//时间戳转为时间

 

JSON

　　在JS中，一切皆对象，任何JS支持的类型都可以用JSON来表示；number,string...

　　格式：

　　　　对象都用{}；

　　　　数组都用[];

　　　　所有的键值对 都是用key:value

 

JSON字符串和JS对象的转化：

　　例如：var user={

　　　　　　　　name="zhangzaijun";

　　　　　　　　age:3;

　　　　　　　　sex:'男'

　　　　　　　　　　}

//对象转化为json字符串{“name":"zhangzaijun","age":3,"sex":"男"}

var jsonuser=JSON.stringify(user);

//json字符串转化为对象 参数为json字符串

var obj=JSON.parse('{"name":"zhangzaijun","age":3,"sex":"男"}');

 

JSON和JS对象的区别：

var obj={a:'hello',b:'hellob'};

var json='{"a":"hello","b":"hellob"}'

 

　　今天的内容确实有点多呀，我整理都有点晕了，不过还好终于整理完成！！！