JavaScript学习笔记

JavaScript引入
内部引入
<script> alert("hello world")；</script>
外部引入
<script src="./外部文件"> </script>
定义变量
变量类型＋变量名＋变量值

注释
单行注释://
多行注释:/** **/

数据类型变量名
变量名的定义:
1.由数字，字母，下划线，美元符号组成
2.以上都可以做首字母
3.特殊字符不可以做变量名

数据类型快速浏览

1，number

整数 123

小数 1.2

科学计数法 1.23e3

负数－3

NaN:not a number

Infinity 表示无限大

2，字符串:‘abc’ “abc”

3，布尔值 true false

4，&& ‖ ！

5，=符号

=赋值，==等于，类型不一样，只是一样的结果也为true，===等于，类型相同的值一样，结果才为true。

6.null和undefined

空和未定义

7.数组

var arr=[1,2,3,‘hello’]

new Array(1,2,3,‘hello’）

8.对象｛｝

person.name

9.严格检查模式

use strict

防止JavaScript随意性，写在第一行

数据类型

1.字符串类型

单引号和双引号包裹
（1）转义字符串\
（2）多行字符串的编写：用反引号包裹

例：

var msg =
  `hello
  world
  你好
  世界`

（3）模板字符串：用＄{}包裹

例：

let name = "xiaoming";
let age = 3;
let msg = `你好呀，我叫${name}，今年${age}岁。`

（4）长度字符串

str.length 

（5）字符串的可变性

JS中字符串是不可变的

注：可像数组一样用下标获得字符串中的元素

（6）大小写转换

转大写：student.toUpperCase()

转小写：student.toLowerCase()

注释：是方法，不是属性

（7）获取下标

student.indexof('t')

（8）获取字符串substring

例：

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

student.substring(1,3)//从第2个字符串截取到第3个字符串

（x,y)截取包含x，不包含y 

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

(1)定义数组 var arr=[1,2,3,4,5,6]

(2)通过下标来取值和赋值

(3)数组长度arr.length

(4)假设给arr.length赋值，数组长度大小就会发生变化，调用未赋值的元素结果为undefined，但如果赋值过小，就会造成元素丢失

(5)通过元素获得下标索引 indexOf( )

(6)截取数组slice( )，与字符串中substring是相似的，返回一个新的数组

(7)尾部操作

push( )压入元素到尾步 pop( )弹出尾部的一个元素

(8)头部操作

unshfit( )压入元素到头部，shift( )弹出头部的一个元素

(9)排序 sort( )

(10)元素反转 reverse( )

(11)拼接 concat( )

并不会修改数组，只会返回一个新的数组

(12)链接符

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

(13)多维数组

var arr=[[1,2],[3,4],[“5”,“6”]]；

 

3.对象

(1) 定义对象

var 对象名={属性名：属性值

                      属性名：属性值

                      属性名：属性值}

JS中，{  }来表示一个对象 用键值对描述属性，多个属性之间用逗号隔开，最后一个属性不加逗号！

例：定义了一个person对象，它有四个属性。

var person = {
  name:"xiaoming",
  age:3,
  email:2585801995@qq.com,
  score:0
}

(3) 对象属性赋值

person. name=“xiaohong”

使用不存在的对象属性：不会报错，返回undefined

(4) 动态的删除属性

delete person.phone

(5)动态的添加

直接给新属性添加值即可  person.say=“hh”

(6)判断属性是否在对象中 in

‘age’ in persons

(7)判断是否是这个对象自身拥有的属性

person. has OwnProperty(‘age’)

JavaScript中的所有的键是字符串，值是任意对象

4.分支和循环

(1) if判断

例：

if(score>=60) {
  alert("过");
} else if(score<60&&score>0) {
  alert("挂科");
} else {
  alert("重修");
}

（2）while循环 注：避免死循环

例：

while(i<100) {
  i=i+1;
  console.log(i);
}

do {
  i=i+1;
  console.log(i);
}while(i<100)

区别：do while一定会执行一次，while是先判断，可能会不执行

（3）for循环

 例：

for(let i=0;i<100;i++) {
  console.log(i);
}

（4）forEach循环（5.1引入的特性）
例：

var arr = [1,2,12,3,23,4];
arr.forEach(function(value,index,arr) {
  console.log(value)
})//通过函数

（5）for in循环

for(var index in arr) { }

注：index是索引而不是数组中的具体元素

for(var num in arr) {
  console.log(arr[num])
}

（6）map和set ES6的新特性

map：

var map = new Map([['tom',100],['jack',90],['peter',80]]);
var name1 = map.get('tom');//通过key获得value
map.set('david',60);//新增或修改
map.delete("tom");//删除

set：无序不重复的集合

添加set.add（ ）

删除set.delete（ ）

是否包含某个元素set.has（ ）

（6）iterator迭代器

for in只能来用下标遍历

for of

例：

var arr = [3,4,5];
for(let x of arr) {
  console.log(x);
}

函数

1.定义和参数获取

例：创建绝对值函数
（1）定义函数
①定义方式

function abs(x) {
  if(x>=0) {
    return x;
  } else {
    return -x;
  }
}

一旦1执行到return代表函数结束，返回结果。
如果没有执行到return，函数执行完也会返回结果，结果为undefined。
②定义方式

var abs = function(x) {
  if(x>=0) {
    return x;
  } else {
    return -x;
  }
}

function(x)是匿名函数，但是可以把结果赋值给abs。通过abs就可以调用函数。

（2）调用函数

参数问题：JavaScript可以传任意个参数，也可以不传递参数。
参数进来是否存在的问题如何解决？
假设不存在参数如何规避？

解决方法：

var abs = function(x) {
  //手动抛出异常来判断
  if（typeof x!=='number') {
    throw 'Not a Number';
  }
  if(x>=0) {
    return x;
  } else {
    return -x;
  }
}

（3）arguments
arguments是JS免费送的关键字，能获取传递进来的所有参数，是一个数组。

var abs = function(x) {
  console.log("x=>"+x);
  for(var i=0;i<arguments.length;i++) {
    console.log(arguments[i]);
  }
  if(x>=0) {
    return x;
  } else {
    return -x;
  }
}

问题：arguments包含所有的参数，有时候想使用多余的参数来进行附加操作，需要排除已有参数。
（4）rest：ES6引入新特性，获取除了已经定义的参数之外的所有的参数。
以前：

if(arguments.length>2) {//如果定义了2个参数
  for(var i=2;i<arguments.length;i++) {…}
}

现在：

function f(a,b,…rest) {
  console.log("a=>"+a);
  console.log("b=>"+b);
  console.log(rest);
}

注意：rest参数只能写在最后面，必须用…标识。

2.变量的作用域、let、const

（1）在JavaScript中，var定义变量实际是有作用域的。
①假设在函数体中声明，则在函数体外不可使用（用闭包可以实现）。

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

function f1() {
  var x=1;
}
function f2() {
  var x='A';
}

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

function f() {
  var x=1;
  function f3() {
    var y=x+1;//2
  }
  var z=y+1;//Uncaught ReferenceError: y is not defined
}

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

function f1() {
  var x=1;
  function f2() {
    var x='A'
    console.log('inner'+x);//innerA
  }
  console.log('outer'+x);//outer1
}

（2）提升变量的作用域

function f() {
  var x="x"+y;
  console.log(x);
  var y="y";
}

结果为xundefined。
说明：js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值。
等同于：

function f() {
  var y;
  var x="x"+y;
  console.log(x);
  y="y";
}

规范：所有变量的定义都放在函数头部

（3）全局变量
全局对象window

var x="xxx";
window.alert(window.x);//默认所有的全局变量，都会自动绑定在window对象下

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

var x="xxx";
window.alert(x);
var old_alert=window.alert;
//old_alert(x);
window.alert=function() {
};
window.alert(123);//123没有弹出，发现alert()失效了
//恢复
window.alert=old_alert;
window.alert(456);//弹出456

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

减少冲突：

//唯一全局变量
var win={ }
//定义全局变量
win.name= "xiaoming";
win.add=function(a,b) {
  return a+b;
}

把代码全部放入定义的唯一空间名字中，降低全局命名冲突问题。
jQuery库把所定义的都放到jQuery中，并用简化符$()。

（4）局部作用域let

如：

function aa() {
  for(var i=0;i<100;i++) {
    console.log(i);
  }
  console.log(i+1);//101
}

问题：i出了这个作用域还可以使用。
ES6中let关键字，解决局部作用域冲突问题。

function aa() {
  for(let i=0;i<100;i++) {
    console.log(i);
  }
  console.log(i+1);//Uncaught ReferenceError: i is not defined
}

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

（5）常量const
在ES6定义常量：用全部大写字母命名的变量就是常量，建议不要修改这样的值。

如

var PI='3.14';//可以改变这个值

在ES6引入了常量关键字const，可以修改值

例：

const PI='3.14';
PI='123';//TypeError: Assignment to constant variable

3.方法的定义和参数获取

（1）定义方法
把函数放在对象里面，对象里只有方法和属性。
例：

var ming = {
  name: 'xiaoming',
  birth: 2001,
  //方法
  age: function() {
    var now = new Date().getFullYear();
    return now-this.birth;
  }
}
//调用属性
ming.name
//调用方法，一定要带()
ming.age()

this.代表什么？

var ming = {
  name: 'xiaoming',
  birth: 2001,
  //方法
  age: getAge
}
function getAge() {
    var now = new Date().getFullYear();
    return now-this.birth;
}
ming.age();//20
getAge();//NaN，单独使用，使用window对象，没有birth属性
}

this是无法指向的，是默认指向调用它的对象。
（2）apply

可以控制this指向

getAge.apply(ming,[]);//this指向ming，参数为空

内部对象

标准对象：number、string、boolean、object、function、undefined

 

 

1.Date日期对象

（1）基本使用

var now = new Date();
now.getFullYear();//年
now.getMonth();//月，用0~11代表月
now.getDate();//日
now.getDay();//星期
now.getHours();//时
now.getMinutes();//分
now.getSeconds();//秒
now.getTime();//时间戳，全世界统一从1970.1.1 00:00:00到现在的毫秒数
console.log(new Date(1610588740041));//时间戳转为时间

（2）转换

now = new Date(1610588740041);
now.toLoacleString();//本地时间
now.toGMTString();//标准时间