Java Script 1.0

Java Script

发布日期: 2020-09-16

更新日期: 2023-12-16

文章字数: 4.4k

阅读时长: 18 分

# Javascript 知识点

# Javascript 为什么可以运行在浏览器

Javascript 可以运行在浏览器，是因为浏览器有 Javascript 解析引擎，不同的浏览器使用不同的 Javascript 解析引擎。

Chrome 浏览器 --> V8 (性能最好)
FireFox 浏览器 --> OdinMonkey (奥丁猴)
Safri 浏览器 --> JsCore
IE 浏览器 --> Chakra (查克拉)

# Javascript 为什么可以操作 DOM 和 BOM

因为每个浏览器都内置了 DOM，BOM 这样的 API，因此浏览器中的 Javascript 才可以调用它们。

# 变量

创建变量必须使用 关键字 声明 = 赋值，将变量右面的值赋值给符号左面
变量的命名规范：只能用 数字 字母 下划线 $ 构成，其中不能以 数字 开头
不能使用关键字和保留字命名 (关键字就是 js 本身的语法使用的关键字，保留字是 js 下一个版本可能被当做关键字的词)
语义化命名
小驼峰多个单词组合后面的首字母大写
变量未声明就使用就报错 xx is not defined
```
console.log(aa);
// aa is not defined
```
事件外声明的变量事件内可以获取，事件内声明 (var) 的变量事件外不能获取

# let 和 var 的区别

let 关键字声明变量只要遇到大括号就形成作用域
【注】let 关键字声明的变量，所在作用域叫做块级作用域。
var 关键字声明变量将变量或者形参所在函数的大括号作为作用域处理。
var 有变量声明提升，let 没有

let 声明不允许出现冗余声明

var name;
var neme;
可以;
let age;
let age;
不可以;

var name;
let name; // Uncaught SyntaxError: Identifier 'name' has already been declared
let age;
var age; // Uncaught SyntaxError: Identifier 'age' has already been declared

全局声明：与 var 关键字不同，使用 let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的变量则会）。
不过，let 声明仍然是在全局作用域中发生的，相应变量会在页面的生命周期内存续.
因此，为了避免 SyntaxError，必须确保页面不会重复声明同一个变量。
```
var name = "Matt";
consoloe.log(window.name); //"Matt"
let age = 26;
consoloe.log(window.age); //undefined
// 访问对象下不存在的属性也会拿到 undefined
```

# const 声明常量关键字

const IP = "10.30.152.33";
alert(IP);

# 数据类型

分为基本数据类型 (string,number,boolean,undefind,null,symbol) 和引用数据类型 (obj,array,function)
undefined 的意思是 变量声明未赋值就使用会得到 undefined , 不会创建该变量只是用来查错

# undefined 和 null

null： Null类型，代表“空值”，代表一个空对象指针，使用typeof运算得到 “object”，所以你可以认为它是一个特殊的对象值。

undefined： Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
我的理解就是： undefined是访问一个未初始化的变量时返回的值，而null是访问一个尚未存在的对象时所返回的值。
因此，可以把undefined看作是空的变量，而null看作是空的对象。

# undefined

访问对象下不存在的属性也会拿到 undefined

var x;
console.log(x); //undefined

console.log(window.fs); //undefined
console.log(fs); //fs is not defined

console.log(undefined == null); // true
console.log({} + 1); // [object Object]1
console.log([1, 1] + 1); // 1,11

# NaN

not a number 当进行了错误的数学运算结果就会是 NaN，NaN 依然是属于数字类型
用 Number.isNaN () 方法判断一个值是否是 NaN
isNaN () 方法 会尝试将传入的参数转换为数字，然后再判断是否为 NaN 。如果参数无法转换为数字，isNaN () 方法会返回 true。这意味着，对于非数字类型的值，isNaN () 方法会先尝试将其转换为数字 to，然后再进行判断。
Number.isNaN () 方法 不会将传入的参数强制转换为数字 ，它只会对参数进行严格的 NaN 判断。 只有当参数的值真正为 NaN 时，Number.isNaN()方法才会返回 true 。对于非数字类型的值，Number.isNaN () 方法会直接返回 false。

isNaN("Hello"); // true，"Hello"无法转换为数字
isNaN("123"); // false，"123"可以转换为数字123

Number.isNaN("Hello"); // false，"Hello"不是NaN
Number.isNaN("123"); // false，"123"不是NaN
// 因此，如果你只想判断一个值是否为NaN，推荐使用Number.isNaN()方法，因为它更加严格和准确

# 检测数据类型方法

# typeof

数据类型的基础检测方法 (typeof 数据) 会得到该数据的数据类型 ( 使用英文字符串表示的 )

var num1 = 10；
console.log(typeof num1); //number

var str = new String('hello')
console.log(typeof str); //object

# Object.prototype.toString.call()

还有一个不错的判断类型的方法，就是 Object.prototype.toString.call ()
我们可以利用这个方法来对一个变量的类型来进行比较准确的判断

js 中所有的数据类型，本质上都是对象，而这些数据类型不过是对象的一种类型而已。
Object.prototype.toString 这个方法是 用于返回当前调用者的对象类型的
call 是为了让 Object.prototype.toString 方法指向我们指定的数据 。否则返回永远都是 [object Object]

Object.prototype.toString.call(1); // "[object Number]"

Object.prototype.toString.call("hi"); // "[object String]"

Object.prototype.toString.call({ a: "hi" }); // "[object Object]"

Object.prototype.toString.call([1, "a"]); // "[object Array]"

Object.prototype.toString.call(true); // "[object Boolean]"

Object.prototype.toString.call(() => {}); // "[object Function]"

Object.prototype.toString.call(null); // "[object Null]"

Object.prototype.toString.call(undefined); // "[object Undefined]"

Object.prototype.toString.call(Symbol(1)); // "[object Symbol]"

# instanceof

instanceof 主要用来判断是哪个构造函数 (实例) 的
instanceof 的实现原理就是只要 左边变量的原型链 上有 右边变量的 prototype 即可。

let s = new String("abc");
typeof s === "object"; // true
s instanceof String; // true

let person = function () {};
let nicole = new person();
nicole instanceof person; // true

// 字符串，布尔值，数字等很难检测出来
// 一般用来检测 new 的
// [] => Array 和 Object 检测都是 true
// {} => Object 为 true
console.log(123 instanceof Number); //false
console.log(new Number(123) instanceof Number); //true
console.log(Number(123) instanceof Number); //false

# 字符串转数字

# 1. 隐式 (自动) 转换

* - / % 会自动将符号左右的非数字转化为数字再运算
转化的规则是 整体看是否可以变成数字 ，可以的话就转换成数字，不可以就变成 NaN
+ 只要符号左右出现了字符串，就会将不是字符串的数据转化为字符串，然后实现拼接运算

# 2. 使用 js 的三种方法

parseInt(value);
规则是一个字符一个字符的转换，直到不能为之。只能转化为整数
parseFloat(value);
规则是一个字符一个字符的转换，直到不能为之。可以转化为小数
Number(value);
整体看能不能转化成数字，能就转，不能就是 NaN

var str = "true";
var num = parseFloat(str);
var num1 = Number(str);
console.log(num); //NaN
console.log(num1); //NaN

# 转字符串的方法

偶尔会用到其实就是在数据上加个引号

String(value) value.toString()
var num = 100;
// num = String(num);
num = num.toString();
console.log(typeof num); //string

# 转换为布尔值

转化为布尔值对数字而言: 非 0 为真，0 为假
注意：只有数字 0，空字符串，null，undefined，NaN 这些值转化为布尔值的时候是 false
其余的都是 true

Boolean(value);

# 运算符

+ - * / % =(赋值)

> < >= <= == === != !==
== 和 ===
判断是否相等,后者要求高必须满足值和类型都相同
!= 和 !==
判断不相等,始终认为不同类型的数据是不同的(不可以比较的) 先判断类型,再判断值

&& ||(回车上边的) ！

++和-- 放前面先运算，放后面先赋值再计算

# 三目运算符

条件？成立语句：不成立做的事

var status = true;
if (status) {
  console.log("将要执行关闭操作");
  console.log("关闭之后干点别的事");
} else {
  console.log("将要执行打开操作");
}

status ? console.log("将要执行关闭操作") : console.log("将要执行打开操作");

status
  ? (console.log("将要执行关闭操作"), console.log("关闭之后干点别的事"))
  : console.log("将要执行打开操作");
//写多个语句需要加小括号，语句之间需要用逗号隔开

var cj = 80;
var result = cj >= 60 ? "及格" : "不及格";
console.log(result); // 及格

# 语句

# if 语句

if
if+else
if+ elseif + elseif …… else (可有可无)

if (num < 60) {
  console.log("不及格");
} else if (num > 60 && num < 70) {
  console.log("及格");
} else if (num > 70 && num < 80) {
  console.log("良好");
} else {
  console.log("优秀");
}

# switch 语句

switch 语句也属于判断
每有一种条件就设置一个 case , 而且判断成功的语句后面必须加上 break 关键字用于跳出 switch
switch 括号里 的应是判断 变量
case 后边加的是可能值要加 冒号
switch 语句的判断使用的是 ===

var day = 1;
switch (day) {
  // 当day等于1的时候
  case 1:
    console.log("今天早上喝牛奶");
    break;
  case 2:
    console.log("今天早上吃手抓饼");
    break;
  default:
    console.log("睡懒觉");
}

# 循环语句

for语句;
// for 循环语句的执行顺序
// 1. 定义初始次数 i 并赋值初始值为 0
// 2. 判断 i 的值是否满足条件
// 3. 满足执行花括号内的操作,不满足的话直接结束循环语句
// 4. 执行 i++
// 5. 重复第二、三步

// 计算一下 1+2....+100 的和    目标是控制台输出结果
var sum = 0;
var j = 0;
var total = 0;
for (var i = 1; i < 101; i++) {
  sum += i;
}
console.log(sum);

while语句;
while (j < 101) {
  total += j;
  j++;
}
console.log(total);

do while 语句
do{

}while(条件)

# Object 对象

对象 (object)：属性的无序集合
delete 方法，删除对象的属性

# object 语法

var goods = {
  goodsName: "iphone",
  price: 9999,
  inventory: 10000,
};
//对象属性的修改
goods.price = 9000;

//直接给新的属性赋值就是添加新属性
goods.imgSrc = "https://img1.360buyimg.com/n6/jfs/t1.jpg";
//使用 delete 关键字删除某个属性
delete goods.imgSrc;

# 创建一个小猫对象

var cat = {
  name: "大花",
  age: 12,
  // 当属性的属性值是一个函数的时候 我们也称这个属性为 方法
  say: function (a, b) {
    console.log("喵喵喵");
    console.log("求和结果:", a + b);
    return { name: "二哈" }; //cat.say(1,2).name 这样在底下调用也可以
  },
};

//调用对象内的say方法
const res = cat.say(100, 200);
/* 喵喵喵;
求和结果: 300; */
console.log(res);
// {name: "二哈";}
console.log(cat.say(1, 2).name); // 二哈

# Date 日期对象

# Date 对象创建

日期对象声明
1、没有传入参数，默认当前系统时间
    Thu Aug 20 2020 16:26:15 GMT+0800 (中国标准时间)
    GMT 格林尼治时间
2、传入参数
    "2000-01-01"
    "2000/01/01"
    按照顺序，分别传入参数  年 月 日 时 分 秒 毫秒
    【注】在国外月份是从0开始数的 0~11
    直接传入毫秒数   1秒 = 1000毫秒  （已1970年1月1日 0:0:0 为参照时间点去进行换算）

var date = new Date();

# Date 对象方法

# var date = new Date();

下述的变量 date 是这里定义的

# getFullYear () 获取年份

var year = date.getFullYear();

# getMonth () 0——11 获取月份

var month = date.getMonth() + 1;

# getDate () 获取日

var day = date.getDate();

# getDay () 获取星期几 0-6 0 是周日

var xinqi = date.getDay();

# getHours () 获取小时 0——23

var hour = date.getHours();

# getMinutes () 获取分

var minute = date.getMinutes();

# getSeconds () 获取秒

var second = date.getSeconds();

# getMilliseconds () 获取毫秒数

var mil = date.getMilliseconds();

上述的方法 get 后加上 UTC 获取的就是世界时间
将 get 换成 set 的话就是设置当前时间

# Date.parse () 日期对象转成毫秒数

可以将日期对象转成毫秒数，参照时间点是 1970 年

var d = new Date();
alert(Date.parse(d)); //1609408670000

# getTime () 获取格林威治时间

1970:1.1 00:00:00 到现在的毫秒数

可以作为一个唯一的不重复数字;
var date = new Date();
var time = date.getTime();
console.log(time);
// 真正获取一个当前时间的字符串
var timeStr = Date();
console.log(timeStr);
// Wed Dec 23 2020 10:29:46 GMT+0800 (中国标准时间) 2020年12月23日

# 日期对象的格式化

var d = new Date();
// alert(d); //Thu Dec 31 2020 17:52:59 GMT+0800 (中国标准时间)
// alert(d.toDateString()); /* Thu Dec 31 2020 */
// alert(d.toTimeString()); /* 17:53:33 GMT+0800 (中国标准时间) */
// alert(d.toLocaleDateString()); /* 2020/12/31 */
// alert(d.toLocaleTimeString()); /* 下午5:54:16 */
alert(
  d.toLocaleDateString() + d.toLocaleTimeString()
); /* 2020/12/31下午5:54:28 */

/* 系统给我们的不一定是最好的，最好是自定义 */

# Number 对象

toFixed (n) 将数字转化成字符串并保留几位小数四舍五入

var num = 10;
var str = num.toFixed(2);
console.log(str); //10.00
console.log(typeof str); // string

# String 对象

# 属性

length 获取字符串的长度

var str = "helloll";
console.log(str.length); //7

# 方法

# var str = “helloll”;

# charAt (index) 获取字符串内对应的字符

// index 代表的就是字符的下标  从0开始
for (var i = 0; i < str.length; i++) {
  console.log(str.charAt(i));
}

# str.charCodeAt (i) 获取字符串中指定字符的 ASCII 码值

# String.fromCharCode (ASCII) 将 ASCII 换成对应的字符

# endsWith (str) 判断当前字符串是否以某个字符串结尾返回 true 或者 false

# startsWith 判断当前字符串是否以某个字符串开始返回 true 或者 false

console.log(str.endsWith("ll")); //true
console.log(str.startsWith("ll")); //false

# lastIndexOf (str) 从后面开始检测，位置永远是小的那个

console.log(str.lastIndexOf("ll")); //5

# substring (start, end) 方法用于提取字符串中介于两个下标之间的字符。

[start,end) 如果省略 end ，那么返回的子串会一直到字符串的结尾

console.log(str.substring(1, 4)); //ell

# indexOf (str) 判断当前字符串是否包含某个字符串返回开始位置或者 -1

console.log(str.indexOf("ll")); //2

# includes (str) 判断当前字符串是否包含某个字符串返回 true 或者 false

console.log(str.includes("lll")); //false

# trim () 清空字符串左右的空白，返回去掉空白之后的字符串，原来的不变

# trimStart () 清空字符串左的空白，返回去掉空白之后的字符串，原来的不变

# trimRight () 清空字符串右的空白，返回去掉空白之后的字符串，原来的不变

var str = " hello ";
var newStr = str.trimStart();
console.log(newStr); //hello空格

# toUpperCase () 转换成大写，返回新的的字符串，原来的不变

# toLowerCase () 转换成小写，返回新的的字符串，原来的不变

var newstr = str.toUpperCase();
console.log(newstr); //HELLOLL

# split () 拆分

将 字符串 使用某个字符 拆分成数组 返回数组 原字符串不变 ，如果什么都不写，就将整个字符串作为整体存入数组中 (对应 数组 的 join 方法)

// str.split(""); 按每个字符拆分
var str = "2020-12-14";
var arr = str.split("-");
console.log(arr); //(3) ["2020", "12", "14"]
var newStr = arr.join();
console.log(newStr); //2020,12,14
var newStr = arr.join(" ");
console.log(newStr); //2020 12 14

# slice (a,b) 字符串的截取 [a,b), 不修改原来的

var str = "hello world";
var newStr = str.slice(3);
console.log(newStr); //lo world

# repeat (n) 重复 n 次，不修改原来的

var str = "6";
var newStr = str.repeat(1);
console.log("新" + newStr, "旧" + str); //新6 旧6

# padEnd 向字符串后面填充内容，填充到指定的长度

# padStart 向字符串前面填充内容，填充到指定的长度

不设置填充内容只设置长度默认填充空格

var str = "hello";
var newStr = str.padEnd(10, "abc");
console.log(newStr); //helloabcab

# search 检测字符串中是否存在某个字符串返回位置，找不到返回 - 1 如果参数是字符串，会自动转换成正则表达式

var str = "我的电话号码是15813145678";
console.log(str.search(/\d{11}/)); //7

# match 检测字符串中是否存在某个字符串返回类数组 (就相当用了正则 exec 方法)

# matchAll 就相当于做了很多次的 exec 然后将所有 exec 的结果放到数组内，返回这个数组正则必须加 g 不好用

match 的正则带了 g 的标志的话，会返回匹配到的所有字符串组成的数组

var str = "我的电话号码是15813145678,我家里电话是 12345678765";
console.log(str.match(/\d{11}/));
// ["15813145678", index: 7, input: "我的电话号码是15813145678,
// 我家里电话是 12345678765", groups: undefined]

# replace 将字符串内的某些字符串替换成别的，原来的不变

replace (要被替换的内容 (可以是字符串也可以是正则), 替换成什么);

var str = "hello 2019,hello 2018";
var newStr = str.replace(/\d{4}/g, "2020");
console.log(newStr); //hello 2020,hello 2020
console.log(str); //hello 2019,hello 2018

# replaceAll 和上面一个意思

# Math 对象

# 属性很多数学里面常用的一些常数

PI;
console.log(Math.PI);

# 方法

Math.pow(x,y)   求x的y次方
abs  绝对值
console.log(Math.abs(-10));//10

ceil 上进
console.log(Math.ceil(3.000001));//4

floor 下舍
console.log(Math.floor(3.99999));//3

round 四舍五入
console.log(Math.round(3.5));//4

random  0-1随机数 不包括0和1
console.log(Math.random());

// max 最大值
var arr = [1, 2, 4123, 4, 124, 25, 1, 41, 4, 123]
var num1 = 100
var num2 = 200
var num3 = 100
console.log(Math.max(num1,num2,num3)); // 200
console.log(Math.max(arr)); // NaN
// min 最小值

// 3-5 随机整数
Math.random()*3      上进     +2
console.log(Math.ceil(Math.random() * 3) + 2); //3-5
Math.ceil(Math.random() * 100) //1-100

// Math.random() 返回一个介于 0 和 1 之间的随机小数。
// Math.random() * 100 将随机小数乘以 100，得到一个介于 0 和 100 之间的随机数。
// Math.ceil() 函数将这个随机数向上取整，得到一个大于或等于该随机数的最小整数。
// Math.ceil(Matn.random() * 100) 就是 1-100
// Matn.random() * 3  就是 0-3 不包括
// Math.ceil(Matn.random() * 3) 就是 1-3
// Math.ceil(Matn.random() * 3) + 2 就是 3-5

Mrr-cxh

https://mrr-cxh.github.io/2020/09/16/java-script-1.0/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Mrr-cxh !

Java Script js基础

Java Script 2.0数组专栏

数组专栏。数组是用于储存多个相同类型数据的集合。JavaScript（简称“JS”）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中。

2020-09-29 Java Script

Java Script js基础

浏览器

浏览器是用来检索、展示以及传递Web信息资源的应用程序。Web信息资源由统一资源标识符(URI)所标记，它是一张网页、一张图片、一段视频或者任何在Web上所呈现的内容。使用者可以借助超级链接( Hyperlinks)，通过浏览器浏览互相关联的信息。

2020-08-20 前端基础

基础浏览器

Java Script 1.0

# Javascript 知识点

# Javascript 为什么可以运行在浏览器

# Javascript 为什么可以操作 DOM 和 BOM

# 变量

# let 和 var 的区别

# const 声明常量关键字

# 数据类型

# undefined 和 null

# undefined

# NaN

# 检测数据类型方法

# typeof

# Object.prototype.toString.call()

# instanceof

# 字符串转数字

# 1. 隐式 (自动) 转换

# 2. 使用 js 的三种方法

# 转字符串的方法

# 转换为布尔值

# 运算符

# 三目运算符

# 语句

# if 语句

# switch 语句

# 循环语句

# Object 对象

# object 语法

# 创建一个小猫对象

# Date 日期对象

# Date 对象创建

# Date 对象方法

# var date = new Date();

# getFullYear () 获取年份

# getMonth () 0——11 获取月份

# getDate () 获取日

# getDay () 获取星期几 0-6 0 是周日

# getHours () 获取小时 0——23

# getMinutes () 获取分

# getSeconds () 获取秒

# getMilliseconds () 获取毫秒数

# Date.parse () 日期对象转成毫秒数

# getTime () 获取格林威治时间

# 日期对象的格式化

# Number 对象

# String 对象

# 属性

# 方法

# var str = “helloll”;

# charAt (index) 获取字符串内对应的字符

# str.charCodeAt (i) 获取字符串中指定字符的 ASCII 码值

# String.fromCharCode (ASCII) 将 ASCII 换成对应的字符

# endsWith (str) 判断当前字符串是否以某个字符串结尾 返回 true 或者 false

# startsWith 判断当前字符串是否以某个字符串开始 返回 true 或者 false

# lastIndexOf (str) 从后面开始检测，位置永远是小的那个

# substring (start, end) 方法用于提取字符串中介于两个下标之间的字符。

# indexOf (str) 判断当前字符串是否包含某个字符串 返回开始位置或者 -1

# includes (str) 判断当前字符串是否包含某个字符串 返回 true 或者 false

# trim () 清空字符串左右的空白，返回去掉空白之后的字符串，原来的不变

# trimStart () 清空字符串左的空白，返回去掉空白之后的字符串，原来的不变

# trimRight () 清空字符串右的空白，返回去掉空白之后的字符串，原来的不变

# toUpperCase () 转换成大写，返回新的的字符串，原来的不变

# toLowerCase () 转换成小写，返回新的的字符串，原来的不变

# split () 拆分

# slice (a,b) 字符串的截取 [a,b), 不修改原来的

# repeat (n) 重复 n 次，不修改原来的

# padEnd 向字符串后面填充内容，填充到指定的长度

# padStart 向字符串前面填充内容，填充到指定的长度

# search 检测字符串中是否存在某个字符串 返回位置，找不到返回 - 1 如果参数是字符串，会自动转换成正则表达式

# match 检测字符串中是否存在某个字符串 返回类数组 (就相当用了正则 exec 方法)

# matchAll 就相当于做了很多次的 exec 然后将所有 exec 的结果放到数组内，返回这个数组 正则必须加 g 不好用

# replace 将字符串内的某些字符串替换成别的，原来的不变

# replaceAll 和上面一个意思

# Math 对象

# 属性 很多数学里面常用的一些常数

# 方法

你的赏识是我前进的动力

# endsWith (str) 判断当前字符串是否以某个字符串结尾返回 true 或者 false

# startsWith 判断当前字符串是否以某个字符串开始返回 true 或者 false

# indexOf (str) 判断当前字符串是否包含某个字符串返回开始位置或者 -1

# includes (str) 判断当前字符串是否包含某个字符串返回 true 或者 false

# search 检测字符串中是否存在某个字符串返回位置，找不到返回 - 1 如果参数是字符串，会自动转换成正则表达式

# match 检测字符串中是否存在某个字符串返回类数组 (就相当用了正则 exec 方法)

# matchAll 就相当于做了很多次的 exec 然后将所有 exec 的结果放到数组内，返回这个数组正则必须加 g 不好用

# 属性很多数学里面常用的一些常数