JavaScript基础笔记

一、初识JavaScript
JavaScript 是一种脚本，一门编程语言，它可以在网页上实现复杂的功能，网页展现给你的不再是简单的静态信息，而是实时的内容更新，交互式的地图，2D/3D 动画，滚动播放的视频等等。

1 . 函数
函数定义：函数是一种可以通过调用来完成具体事件的代码块，我们可以需要使用它的时候给它赋值，然后输出我们想要的结果，函数名可以是英文、中文(尽量不要使用)、数字、$ 符号和 _ 下划线，函数名不能以数字开头，也不可以是系统保留字（var， function， for， whlie 等），函数的赋值可以是一个或者多个，函数的参数只在函数里面才有效，在函数以外我们就访问不到这个值；函数不仅可以合并操作重复性的代码，还可以通过计算得到一个值，这个值就是返回值，还可以被赋值给变量。
函数有两种定义方式，第一种是 var 函数名 = function，另外一种是function 函数名 ，函数的使用方法如下:

//第一种定义方式 匿名函数 此函数function 没有函数名，但是它将值赋给了变量 add 匿名函数，仅在调用时，才临时创建函数对象和作用域链对象；调用完，立即释放，所以匿名函数比非匿名函数更节省内存空间
const add(定义个函数名) = function(a, b 可以给函数附上一个或者多个值) {
//在里面输入代码主体
    return a + b
}

console.log(add(1, 2))//输出函数执行结果
let num = add(1, 3)
console.log(num) 

//第二种定义方式 普通函数 声明了一个add函数 因为非匿名函数在定义时，就已经创建函数对象和作用域对象；所以，即使未调用，也占用内存空间；
function add(a, b 可以给函数附上一个或者多个值) {
//在里面输入代码主体
    return a + b
}
console.log(add(1, 2))//输出函数执行结果

2.循环：
循环就是可以帮我们重复去做一件事，反复去执行一个语句和代码。目前接触了while循环和for循环，while循环和for循环各有各的优势, for循环可以设置次数，while循环条件满足没有次数限制，对一个数组进行循环时，一般来说，如果每轮循环都是在循环处理完后才将循环变量增加的话，使用for循环比较方便。 如果循环处理的过程中就要将循环变量增加时，则使用while循环比较方便。

• while循环（语句如下）

let i = 0
let s = 0
while(i < 4 条件决定执行多少次) {
  i++
  s += 1  //代码主体
  console.log(s) //s输出 1 2 3 4
}

• for循环（语句如下）

var a = 1
for(var i = 0; i < 5; i++ 条件 ) {
  a++//代码主体
}
console.log(a)//输出一个变量的值

• do...while循环(语句如下)

//do...while 语句一直重复直到指定的条件求值得到假值（false）。
let i = 0;
do {
  i += 1;
  console.log(i);
} while (i < 5);//当条件为false的时候停止循环

• for...in

//for...in 语句循环一个指定的变量来循环一个对象所有可枚举的属性。
function dump_props(obj, obj_name) {
  var result = "";
  for (var i in obj) {
    result += obj_name + "." + i + " = " + obj[i] + "<br>";
  }
  result += "<hr>";
  return result;
}

• for...of

//for...of循环一般是用来遍历数组
for (let i of arr) {
  console.log(i); // 输出 "3", "5", "7"
}

3.break语句和continue，break 是终止单次循环，continue是跳过本次循环，语法如下：

4.数据类型：

  // Number: 数字(1, 2, 3...)
  // String: 字符串('1', '你好')
  // Boolean 布尔值(true && false)
  // undefined 一个没有被赋值的变量会有个默认值 undefined
  // Null 类型只有一个值: null 转为数字就是0 他的类型是一个object对象
  // Object 对象可以被看作是一组属性的集合。用对象字面量语法来定义一个对象时，
  // 会自动初始化一组属性。而后，这些属性还可以被添加和移除。
  // 属性的值可以是任意类型，包括其它对象。属性使用键（key）来标识，
  // 它的键值可以是一个字符串或者符号值`

5.if...else 条件语句

    // if 和 else ,可以理解为如果if这样(条件)，那么else就会那样（对应的结果）
    // 它输出的结果只能是一个，只满足一个条件其他的条件都不会执行；
    // if判断的条件（里面的表达式）其实是一个值，这种值叫布尔值（bool, boolean）
    // 这种值只有两个结果，要么是真（ture）要么就是假（false），
    if (condition1) //为true或者false
       statement1 //为true时执行以下语句
    else if (condition2)
       statement2
    else if (condition3)
       statement3
    ...
    else //为false时执行以下语句
       statementN

6. 运算符

// 比较运算符
1 === '1' //严格相等
1 == '1'//绝对相等,他会去忽略类型
!= //不等于
< //小于
> //大于
<= //小于等于
>= //大于等于

// 逻辑运算符 与（&&） 或（||） 非（！）
```
// &&就是两个条件必须要全部符合
 if(账户存在 && 密码正确) {
   登录成功
 } else {
   登陆失败
 }

// ||是两个条件满足一个即可
 if(1 == 1 || 1 == 2) {
   console.log('turn')
 } else {
   console.log('false')
 }

 //！ 是不等于
 if(1 != 1) {
   console.log('turn')
 } else {
   console.log('false')
 }

// 求模运算符
```
 let a = 4
 if(a % 2 == 0) {
   console.log('偶数')
 } else {
   console.log('奇数')
 }

7. 数组: array 是一个数组，可以用来出储存很多元素，每一个元素的值、类型都可以不用相同，使用[1, 2, 3]，每个元素用逗号隔开，还可以用数组名加 . length来访问数组的长度（列表中元素的个数）,还可以通过下标（每个元素都对应着一个下标，第一个是0第二个是1，以此类推）来访问数组， `

var a =[1, 2, 'hh', 'turn']
 console.log(a)//访问a数组
 console.log(a.length) //访问数组的长度
 console.log(a[0]) //访问第一个数组
 console.log(a[1]) //访问第二个数组
 console.log(a[2]) //访问第三个数组
 console.log(a[3]) //访问第四个数组
 //还可以通过循环的方式来访问数组，这个就是称之为遍历
 
let a = [2, 3, 4, 6, 7, 1]
 for(var i = 0; i < a.length; i++) {
   console.log(a[i])
 }
//上面的for循环等于下面的while循环
let a = [2, 3, 4, 6, 7, 1]
let i = 0
 while( i < a.length) {
   console.log([i])
   i++
 }
 
 a.forEach((index) => {
    console.log(index)
 })

 a.pop() // 删除数组末尾的元素
 a.Push('大gua') // push可以在数组最后加入新元素，这个元素可以是任何类型。
 a.shift() // 删除数组头部元素
 a.unshift('22222') // 添加元素到数组的头部
 a.indexOf(2) // 找出某个元素在数组中的索引
 a.splice(1, 2) //从一个索引位置删除多个元素(从下标为1的元素删除两个元素)
 a.slice() //拷贝一个数组,注意这里是浅拷贝

8.字符串:对于保存可以以文本形式表示的数据非常有用。

 let str = 'abcd'
 let str1 = str.charAt(1) //charAt可以拿到索引为1的字符串
 let strLength = str.length // 可以求出字符串的长度
 let strs = 'efg'
 let strAdd = str + strs // 字符串还可以相加
 
 // 模板字符串
 let s = 'hello'
 // 可以用反应号（``）加&{ 需要插入的字符串 }来得到一个新的字符串
 let ss = `${s} world`
 console.log(ss);

9.debug 特别是写代码的时候如果出错了怎么去解决, 首先就是冷静分析，因为我们不知道代码是否执行，可以用log去加载代码执行轨迹，还可以用log去显示代码执行时的运行数据，从而我们就知道哪里出现了错误, 多打log 我们就知道变量的执行轨迹和运行时的数据

var value = function(array) {
  var s = 0
  for(var i = 0; i< array.length; i++) {
    var n = array[i]
    s = s + n
    //log出n在循环中的数据
    console.log('n 的值是 ', n)
  }
  return s
}
value([1, 2, 4, 7, 5])

10.测试和自动测试

let ensure = function(condition, message) {
  if(!condition) {
    console.log(message)
  }
}

//我们需要测试的函数
let value = function(array) {
  let s = 0
  for(let i = 0; i< array.length; i++) {
    var n = array[i]
    s = s + n
  }
  return s
}
//如果代码正确那就不输出，如果错误就输出
let textValue = function() {
  let value1 = [1, 2, 3, 4, 5]
  let s = 15
  ensure(s == value(value1), 'value 错误')
}

11.object对象
object是一个非常重要的存储数据的类型，我们可以通过key（键）来访问数据,左边是键，右边是值，键在所有情况下基本上都是字符串的形式，右边的值可以是任何类型。点语法访问有两种情况不能使用，第一个是键里面包含空格（例如na me），第二个是键存储在变量中的情况下（var a = 'name'），这两种我们不能直接不能通过点访问，访问不存在的键会得到一个undefined

  let value = { name: 'gua', age: 18, gender: '男' }
  value['name'] //第一种访问方式
  value.age //第二种访问方式
  value['height'] = '180' //增加一个元素
  value['name'] = '瓜' //修改已有元素
  delete value.gender //删除一个元素