Vue - JavaScript基础学习

一、语言概述

JavaScript 中的类型应该包括这些：

1.数字（默认双精度区别于Java）

console.log(3 / 2);             // 1.5,not 1
console.log(Math.floor(3 / 2)); // 1

0.1 + 0.2 = 0.30000000000000004

NaN（Not a Number）

parseInt("hello", 10); // NaN
NaN + 5; //NaN
isNaN(NaN); // true

2.字符串

"hello".charAt(0); // "h"
"hello, world".replace("world", "mars"); // "hello, mars"
"hello".toUpperCase(); // "HELLO"

3.其他类型

1.null(non-value)

2.undefined(未定义。不可修改的常量)

如果声明了一个变量却没有对其赋值，那么这个变量的类型就是 undefined。

3.Boolean

1.false、0、空字符串（“”）、NaN、null 和 undefined 被转换为 false
2.所有其他值被转换为 true

Boolean(""); // false
Boolean(234); // true

3.变量

1.let 局部变量

let 语句声明一个块级作用域的本地变量

let a;
let name = "Simon";

// myLetVariable 在这里 *不能* 被引用

for (let myLetVariable = 0; myLetVariable < 5; myLetVariable++) {
  // myLetVariable 只能在这里引用
}

// myLetVariable 在这里 *不能* 被引用

2.const 常量

const 允许声明一个不可变的常量。这个常量在定义域内总是可见的。

const Pi = 3.14; // 设置 Pi 的值
Pi = 1; // 将会抛出一个错误因为你改变了一个常量的值。

1.var 全局变量

var 是最常见的声明变量的关键字，使用 var 声明的变量在它所声明的整个函数都是可见的。

// myVarVariable 在这里 *能* 被引用

for (var myVarVariable = 0; myVarVariable < 5; myVarVariable++) {
  // myVarVariable 整个函数中都能被引用
}

// myVarVariable 在这里 *能* 被引用

4.运算符

相等的比较稍微复杂一些。由两个“=（等号）”组成的相等运算符有类型自适应的功能。
如果在比较前不需要自动类型转换，应该使用由三个“=（等号）”组成的相等运算符。

123 == "123"; // true
1 == true; // true

1 === true; //false
123 === "123"; // false

5.控制结构

1.if

   const name = 123
  if ("123" == name) {
    console.log("true")//true
  } else {
    console.log("false")
  }

  if ("123" === name) {
    console.log("true")
  } else {
    console.log("false")//false
  }

2.while

  let num = 0

  while (num < 3){
    console.log("num:"+num)//num:0 num:1 num:2
    num++
  }

3.for / forEach / for…in / for…of

for

  for (let i = 0; i < 2; i++) {
    console.log("num:"+i)//num:0 num:1
  }

forEach

  let num = 0;
  let array = [1,2,3,4]
  for (let i = 0; i < 5; i++) {
    num++
  }
  console.log("num:" + num)//num:5
  array.forEach((value) => console.log("num:"+value))//num:1 num:2 num:3 num:4

for…in / for of
1.for in 输出的是数组的index下标，而for of 输出的是数组的每一项的值。
2.for of 不能遍历对象

  const array = ["1","2","3"]
  for (const value of array) {
    console.log(value)//"1" "2" "3"
  }
  for (const key in array) {
    console.log(key)//"0" "1" "2"
    console.log(array[key])//"1" "2" "3"
  }

4.&& 和 || 是/否，控制运算(对象判空取对象属性)

  let object = {
    name:"Tom",
    age:20
  }
  let object2
  let name = object && object.name //object 不为空则获取name，否则不操作
  let sex = object2 && object2.name //object2 不为空则获取sex，否则不操作
  let other = object.sex || object.age //object.sex 为空则获取 object.age

  console.log(name)//Tom
  console.log(sex)//undefined
  console.log(other)//20

5.三元操作符

  let age = 20
  let value = age > 18? "yes" :"no"
  console.log(value)//yes

6.switch

6.对象

Object，可以简单理解成“名称 - 值”对（而不是键值对)

1.空对象

  let empty1 = {}//优先使用 方法叫作“对象字面量”法
  let empty2 = new Object()

定义对象和调用对象属性

  let object = {
    name:"Tom",
    age:20,
    detail:{
      height:180,
      weight:60
    }
  }

  object.name//Tom
  object.detail.height//180

function test() {
  let object = new Person("Tome",20)
  console.log(object.name)//Tom
  console.log(object.age)//20
  object.age = 18
  console.log(object.age)//18
}

function Person(name, age) {
  this.name = name;
  this.age = age;
}

7.数组及遍历数组方法

  let array = ["1", "2", "3"]
  for (let i = 0; i < array.length; i++) {
    console.log("遍历数组方法一", array[i])// 1 2 3
  }

  for (const value of array) {
    console.log("遍历数组方法二", value)// 1 2 3
  }

  for (const key in array) {
    console.log("遍历数组方法三", array[key])// 1 2 3
  }

  array.forEach(function (value, index, array) {
    console.log("遍历数组方法四", value)// 1 2 3
    console.log("遍历数组方法五", array[index])// 1 2 3
  })

1.array常用方法

1). push(value) 添加元素

  let array = ["1", "2", "3"]
  array.push("123")

  array.forEach((value, index, array) => {
    console.log(value) // 1 2 3 123
  })

2). toString()所有元素的字符串

  let array = ["1", "2", "3"]
  console.log(array.toString()) //"1,2,3"

3).concat(otherArray)数组连接组合

  let array1 = ["1", "2", "3"]
  let array2 = ["4", "5", "6"]
  console.log(array1.concat(array2)) //['1', '2', '3', '4', '5', '6']

4)…join(s) 数组元素中添加分隔符

  let array = ["1", "2", "3"]
  console.log(array.join())//1,2,3
  console.log(array.join(""))//123
  console.log(array.join("-"))//1-2-3
  console.log(array.join("|"))//1|2|3

8.函数

function test() {
  console.log(add02(1,2))//3
  console.log(add03(1,2,3,4))//10
}

function add01() {
  //默认return undefined
}

function add02(x, y) {
  const sum = x + y;
  return sum
}

function add03(...nums) {
  let sum = 0;
  nums.forEach((value) => {
    sum += value
  })
  //默认return undefined
  return sum
}