title: js lang: zh display: home description: js image: https://picsum.photos/536/354?random&date=2021-04-12 date: 2019-09-21 tags:

  • js categories:
  • 教学

js

# 一.Console 窗口调试 JavaScript 代码

# 二.输出内容

  1. 使用 window.alert() 弹出警告框。慎用，必须点击弹窗之后才能继续后面的操作，但是很直观。里面的内容不能是对象
  2. 使用 console.log() 在控制台中打印 log，经常使用，是前端调试的重要工具

# 三.变量、常量和申明

  • 申明变量用 let const 两个关键字。请忘记 var。let 可以全面的替代 var
  • let x = 5,即申明了一个变量 X，值为 5。
  • 变量必须先声明才能使用。如下。如果不申明就用会报错
let x = 5 //申明
x = 6 //修改
  • 常量：值固定的值，不会改变的值，非必须，也可以使用 let。只是使用 const 的话，就不能修改了，会报错
const imgType = '图片'
  • 变量申明规范：myName。英文命名，开头小写，后面的单词首字母大写

# 四.数据类型

https://www.runoob.com/js/js-datatypes.html

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined） 对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

  • 基础数据类型：
let a = 1
let b = a
console.log(b) //1
// 变量可以赋值给变量。被赋值的b可以变成a的值,a不会受到影响
  • 引用数据类型:对象(Object)、数组(Array)、函数(Function)
let a = {
  aa: 1,
}
let b = a
console.log(b) //{aa:1}
b.aa = 2
console.log(b) //{aa:2}
console.log(a) //{aa:2}

// 对于引用数据类型， = 号传递的只是一个引用关系，相当于一把钥匙。实际开的是同一扇门，用的是同一个东西

// 那怎么复制一个没有联系的呢？
let b = { ...a } //扩展运算符，具体后面讲
let b = Object.assign({}, b) //讲两个对象合并

# 五.Object 对象

  • 对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。
let person = { firstName: 'John', lastName: 'Doe', age: 50, eyeColor: 'blue' }

console.log(person.lastName)
console.log(person["lastName"])

let name = ''
if(XXX){
name = 'firstName'
}else{
  name = 'lastName'
}

console.log(person[name];)

# 六.函数

函数就是一个方法，里面可以一系列的操作。可以通过这个方法返回内容。用花括号包含历来.可以传入参数

let a = 1
function functionname(a) {
  a = a + 1
  // 执行代码
  return a
}

console.log(functionname())

# 七.作用域

作用域指的是变量的使用范围。定义一个变量，只有在一定范围内有用。——以大括号为分界。即你声明的变量，只在所在的那个大括号范围内使用。 可以向下穿透！

function myFunction() {
  let carName = 'Volvo'
  function myFunction() {
    console.log(carName) //这里也可以用
  }
}
console.log(carName) //这就不能用了

if (true) {
  let carName = 1
} else {
  console.log(carName) //这里不能用
}
  • ！！很多教程里讲的是函数内作用域，用的是 var 声明的。不要搞混。直接忘掉 var！！

# 八：字符串

let carname = "Volvo XC60";

  • 相关方法 ！！注意，JS 中，index 往往代表下标，也就是第几个的意思。一般从 0 开始

  1. charAt(index)：返回指定位置的字符。

  2. includes(searchString, position)：判断一个字符串是否包含另一个字符串，返回布尔值。

  3. indexOf(searchValue, fromIndex)：检索字符串中第一次出现指定值的位置，如果未找到则返回 -1。

  4. length：返回字符串的长度。

  5. replace(regexp|substr, newSubstr|function)：替换字符串中的指定值，返回一个新字符串。可以使用正则表达式或字符串作为参数，也可以指定替换函数。

  6. slice(start, end)：选取字符串的某个部分，并返回一个新字符串。可以接受一个或两个参数，分别表示起始和结束位置（不包括结束位置），如果省略结束位置，则返回从起始位置到字符串结尾的所有字符。

  7. split(separator, limit)：将字符串分割成子字符串数组，返回一个数组。可以指定分隔符和可选的限制数量。

  8. substring(start, end)：提取字符串中两个指定的索引之间的字符，返回一个新字符串。如果省略结束位置，则提取到字符串末尾。

  9. toLowerCase()：把字符串转换为小写。

  10. toUpperCase()：把字符串转换为大写。

  11. trim()：去除字符串两端的空格，并返回一个新字符串。

  • 模版字符串
let expression = 'aa'
console.log(`string text ${expression} string text`)

// 相当于
// 'string text ' + expression+ ' string text'

# 九。运算符

https://www.runoob.com/js/js-operators.html

运算符 = 用于给 JavaScript 变量赋值。

算术运算符 + 用于把值加起来。

只适用于字符串和数字。字符串会将字符串拼起来，数字就是数学的加法。字符串+数字，会当字符串处理

# 十。比较 和 逻辑运算符

https://www.runoob.com/js/js-comparisons.html

# 十一。 if...Else 语句 switch 语句

# 十二。for 循环

// 注意let
for (let i = 0; i < cars.length; i++) {
  document.write(cars[i] + '<br>')
}

// 还有for in 和for of

# 十三。类型转换

主要可能用到的有两种 Number() String()

# 十四。数组

前端笔记

前端笔记
学习计划

学习计划