JavaScript基础认识

JavaScript是一种专为网页交互而设计的脚本语言

其主要分为三个部分

  1. 核心(ECMAScript)
  2. 文档对象模型(DOM)
  3. 浏览器对象模型(BOM)

核心(ECMAScript)规定了这门语言的基本组成如：

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 操作符
  • 对象

文档对象模型(DOM)作用于获取所写的所有HTML标签，并给标签添加或者删除样式，并可以给标签添加事件(例如点击、拖动等)。

这些功能的实现是基于下面几种接口：

  • DOM 遍历和范围： 可以找到页面中所有的标签;
  • DOM 事件： 例如给某个图片添加拖动事件，使图片可以随意拖动;
  • DOM 样式： 可以更改页面中所有元素的样式，例如更改某一段文字的颜色。

浏览器对象模型(BOM)只会处理跟浏览器相关的东西，如：

  • 弹出新窗口功能
  • 移动、缩放、关闭浏览器窗口的功能
  • 给用户提供显示器分辨率的功能
  • 提供浏览器信息

JavaScript的书写方式

JavaScript与CSS不同的是它的输出结果不是在浏览器页面中显示，而是在控制台中显示，

console表示访问控制台，log()表示在控制台输出信息，console.log('输出的内容')就是在控制台输出内容了。

在JavaScript中申明变量一般使用 let和const

ps：const是固定变量，不能再次赋值，且必须拥有初始值

如 let str =‘我在学JavaScript’这里使用双引号和单引号都可以，都表示申明一个字符串。

在申明中 我们可以进行字符串连接如：

let say = ‘大家好’ + str +‘我很快乐’;

除了这种连接方法，我们可以利用 反引号“ 来表示模板字符串

其中我们需要知道占位符\${expression}

即 let say = `大家好，我${str},我很快乐`

当然 如果想在JavaScript字符串里打出如双引号和单引号，可以使用转义符 \

具体参考C语言的转义符。

如果多行字符串拼接，如拼接一首诗，可以如下

let str = '春眠不觉晓\n' + '处处闻啼鸟\n' + '夜来风雨声\n' + '花落知多少\n';
console.log(str);

而使用模板字符串只需要敲回车就行

let str = `春眠不觉晓
处处闻啼鸟
夜来风雨声
花落知多少`;

console.log(str);

当然占位符中可以使用一些表达式 如${number1 - number2}

通过类似此方法，可以简化字符串拼接，减少加号和引号的使用。

模板字符串，也支持三元表达式如：

${false ? '南京'：‘江苏’}等等

数组元素操作(增/删/改/查)

数组元素操作 增：

变量名.push('要添加的值'); 在数组末尾添加新的元素。

变量名.unshift('要添加的值'); 在数组开头添加新的元素。

数组元素操作 删：

变量名.pop(); 删除数组末尾一个元素。

变量名.shift(); 删除数组开头一个元素。

变量名.splice(n,b); 删除数组指定位置元素：

//splice 后接一个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

// 删除从下标为1的位置到结束位置的值
let deleteSchools = schools.splice(1);
// 删除之后，原数组中的剩余内容
console.log(schools); // ["清华大学"]
// 删除的内容
console.log(deleteSchools); // ["北京大学", "浙江大学", "同济大学"]
//splice 后接两个参数
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

// 从下标为0开始,往后数两个元素,删除
let deleteSchools = schools.splice(0, 2);
console.log(schools); // ['浙江大学', '同济大学']
console.log(deleteSchools); // ['清华大学', '北京大学']

数组元素操作 改：

同样是使用 .splice 方法改变指定位置的值

splice后接上三个参数

  1. 第一个值,整数类型,表示起始位置
  2. 第二个值,整数类型,表示步长(往后选几个元素,1 代表往后选 1 个元素)
  3. 第三个参数,要替换的数组的值
let schools = ['清华大学', '北京大学', '浙江大学', '同济大学'];

schools.splice(2, 0, '江西理工大学');
console.log(schools); //  ["清华大学", "北京大学", "江西理工大学", "浙江大学", "同济大学"]
//因为第二个参数为0，表示步长为0，所以显示的效果为添加了一个新的元素

数组元素操作 查：

.indexOf()方法

此方法可以在后面写两个参数，第一个为寻找的值，第二个为开始寻找的位置。

|JavaScript定时器|

内置对象Math

这些对象段我单纯记录一下可能使用的方法。

Math.E // 常数e。
Math.LN2 // 2 的自然对数。
Math.LN10 // 10 的自然对数。
Math.LOG2E // 以 2 为底的e的对数。
Math.LOG10E // 以 10 为底的e的对数。
Math.PI // 常数π。
Math.SQRT1_2 // 0.5 的平方根。
Math.SQRT2 // 2 的平方根。
Math.abs() // 绝对值
Math.ceil() // 向上取整 取大于等于 x，并且与它最接近的整数。
Math.floor() // 向下取整 取小于等于 x，并且与它最接近的整数。
Math.round() // 四舍五入取整 取与 x 最接近的整数。
Math.max() // 最大值
Math.min() // 最小值
Math.pow() // 指数运算
Math.sqrt() // 平方根
Math.log() // 自然对数
Math.exp() // e的指数
Math.random() // 随机数

window.localStorage—-storage对象

window.localStorage.setItem('myLocalStorage', 'storage Value');//浏览器中存入数据
以 key 和 value 表示
window.localStorage.getItem('myLocalStorage'); //读取数据，参数为 key值
window.localStorage.clear(); //清理缓存

string对象

与java相似，就不说了。。。。

Array对象

连接数组：join()

join()方法以指定参数作为分隔符，将所有数组成员连接为一个字符串返回。如果不提供参数，默认
用逗号分隔。

倒序排列：reverse()

reverse方法用于颠倒排列数组元素，返回改变后的数组。

排序：sort()

sort方法对数组成员进行排序，默认是按照字典顺序排序。如果想让sort方法按照自定义方式排序，
可以传入一个函数作为参数。

遍历：map/forEach

遍历数组我们之前用的是for循环，但其实 JavaScript 为我们提供了两个很方便的遍历方法：
map 和 forEach。

有返回值的遍历：map

先看 map 方法的使用，它接受一个函数，然后将数组的所有成员依次传入这个参数函数，最后把每
一次的执行结果组成一个新数组返回.

let arr = [
  { name: 'jenny', age: 18 },
  { name: 'tom', age: 10 },
  { name: 'mary', age: 40 }
];

// elem: 数组成员
// index: 成员下标
// a: 整个数组
const handledArr = arr.map(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(arr);
console.log(handledArr);

无返回值的遍历：forEach

forEach 的用法和 map 基本一致，不过 forEach 没有返回值.

const handledArr = arr.forEach(function(elem, index, a) {
  elem.age += 1;
  console.log(elem, index, a);
  return elem.name
});

console.log(handledArr);
//输出 undefined

Date对象

这里具体列出 get和set方法

let dt = new Date();
dt.getTime(); // 返回实例距离1970年1月1日00:00:00的毫秒数。
dt.getDate(); // 返回实例对象对应每个月的几号（从1开始）。
dt.getDay(); // 返回星期几，星期日为0，星期一为1，以此类推。
dt.getFullYear(); // 返回四位的年份。
dt.getMonth(); // 返回月份（0表示1月，11表示12月）。
dt.getHours(); // 返回小时（0-23）。
dt.getMilliseconds(); // 返回毫秒（0-999）。
dt.getMinutes(); // 返回分钟（0-59）。
dt.getSeconds(); // 返回秒（0-59）。
注意，所有这些 get*方法返回的都是整数，不同方法返回值的范围不一样：
 分钟和秒：0 到 59
 小时：0 到 23
 星期：0（星期天）到 6（星期六）
 日期：1 到 31
 月份：0（一月）到 11（十二月）
let dt = new Date();
dt.setTime(ms); // 设置实例距离1970年1月1日00:00:00的毫秒数。
dt.setDate(date); // 设置实例对象对应每个月的几号（从1开始）。
dt.setFullYear(year); // 设置四位的年份。
dt.setMonth(month); // 设置月份（0表示1月，11表示12月）。
dt.setHours(hour); // 设置小时（0-23）。
dt.setMilliseconds(ms); // 设置毫秒（0-999）。
dt.setMinutes(min); // 设置分钟（0-59）。
dt.setSeconds(sec); // 设置秒（0-59）。