Web前端笔记-7、JS基础-变量、数据类型、运算符、类型转换、语句(分支循环)、数组、函数、对象

JS基础、Web API、进阶

变量、数据类型、运算符

是一种运行在客户端（浏览器）的编程语言，可以用来创建动态更新的内容，控制多媒体，制作图像动画等交互效果。

书写位置：行内JavaScript、内部JavaScript、外部JavaScript

• 内部JavaScript

直接写在html文件里，用script标签包住

规范：script标签写在</body>上面，浏览器会按照代码在文件中的顺序加载 HTML。

• 外部JavaScript

代码写在以.js结尾的文件里

语法：通过script标签，引入到html页面中。这是标签内部代码会被忽略。

<script src=""></script>

• 行内JavaScript

代码写在标签内部

语法：直接标签内部写js代码

此处作为了解即可，但是后面vue框架会用这种模式

结束符

作用：使用英文的;代表语句结束

实际情况：实际开发中，可写可不写，浏览器（avascript 引擎）可以自动推断语句的结束位置

现状：在实际开发中，越来越多的人主张，书写JavaScript 代码时省略结束符

约定：为了风格统一，结束符要么每句都写，要么每句都不写（按照团队要求.）

输入输出语句

alert 页面弹出警告框

document.write 在body标签内输出内容，如果输出的内容写标签，也会被解析成网页元素

console.log 控制台输出语法，程序员调试使用

引用数据类型

Object、 Function、Array

字符串反引号

字符串拼接：

使用场景：+ 可以实现字符串的拼接，最常见是字符串拼接变量

口诀：数字相加，字符相连

反引号：内容拼接变量时，用${}包住变量

比较运算符

===是左右两边是否类型和值都相等，这个用的多。

== 是左右两边是否值都相等

类型转换，语句

布尔型转换为数字：true 为1,false 为0

null 转换为数字为0，undefined 为 NaN

数组 Array

数组：（Array）是一种数据类型，属于引用数据类型

作用：在单个变量名下存储多个数据 []

修改操作：如何修改的是不存在的数据项，会在这个位置添加。

新增操作：

数组.push(新增数据)

作用：将一个或多个元素添加到数组的末尾（重点）

返回值：该数组的新长度，会修改原数组

数组.unshift(新增数据)

作用：将一个或多个元素添加到数组的开头

返回值：该数组的新长度，会修改原数组

删除操作：

数组.pop()

作用：从数组中删除最后一个元素，修改原数组

返回值：该元素的值

数组.shift()

作用：从数组中删除第 一个 元素，修改原数组

返回值：该元素的值

数组. splice() 方法 可以添加也可以删除数组元素

说明：可以从指定位置删除或者增加的数组元素，注意它修改原数组

splice(start, deleteCount)

start 起始位置：

指定修改的开始位置（从0计数）

deleteCount 删除个数：

表示要移除的数组元素的个数。可选的，如果省略则默认从指定的起始位置删除到最后

增加：splice(start, deleteCount, item1..)

排序：数组.sort()， 会修改原数组。

升序：

arr.sort(function(a,b) {
  return a - b;
})

数组过滤filter：将数组中满足条件的数据去掉，返回一个新数组。

del(id) {
  this.list = this.list.filter(item => item.id !== id)
}

数组累加器reduce

array.reduce(function(total, currentValue, [currentIndex, arr]), initialValue)
add () {
  // t是当前总和，e是当前元素对象，0是初始值。
  return this.list.reduce((t, e) => t + e.score, 0)
}

数组判断every

let flag = [5, 4, 3, 2, 1].every(item => item >2)
// flag = false
}

查找find

let row = this.list.find(item => item.id === id)
row.price--

函数

函数：是可以被重复使用的代码块

默认参数：function sum(x = 0, y= 0){}

匿名函数

函数表达式：将匿名函数赋值给一个变量，并且通过变量名称进行调用 我们将这个称为函数表达式。

let fn = function(){}

fn()

web api阶段会使用

立即执行函数：IIFE（立即执行函数表达式）（Immediately Invoked Function Expression）。

//注意加分号，前面的代码也要加;
//方式1
(匿名函数)();
//方式2
(匿名函数());
//1 ()(); 推荐第一种
(function (){
  console.log(666)
})();
//2
(function(){}());

场景介绍：避免全局变量之间的污染

对象

对象（Object）：JavaScript里的一种数据类型（引用类型），也是用于存储数据的。

let pig = {
  uname: 'picca',
  age: 12,
  sing: function () {
    console.log('~~~')
  }
}

pig.sing()

对象的增删改查

增加对象内容

对象.新属性=新值

对象.新方法名=function(){}

删除对象内容

delete 对象名.属性名

属性-查的另外一种写法

• 对于多词属性比如中横线分割的属性'pig-name': 'picca'，点操作就不能用了
• 可以采取：对象['属性']，单引号和双引号都阔以，当然也可以用于其他正常属性

for in 遍历

for (let key in pig) {
  console.log(key)
  log(pig[key])
}

对象数组

let pigs = [{},{},{}]

内置对象

Javascript内部提供的对象，包含各种属性和方法给开发者调用