js - 何为javascript？ - 《错误代码本》

- https://juejin.cn/post/7000175914680057870 )">！本文章参考： https://juejin.cn/post/7000175914680057870 )

本文转载：
作者：请叫我阿ken
链接：https://juejin.cn/post/7000555502988394533
来源：稀土掘金

！本文章参考： https://juejin.cn/post/7000175914680057870 )

JavaScript 出生于1995年，Netscape（网景）公司（现在的Mozilla公司）的布兰登·艾奇在网景导航者浏览器上首次设计出了JavaScript

JavaScript 是一种脚本语言

javascript 是由 ECMAScipt、DOM、BOM 三个部分组成的：

ECMAScript (基本语法)

ECMAScript:  是 JavaScript 的核心。ECMAScript 规定了JavaScript 的编程语法和基础核心内容，是所有浏览器厂商共同遵守的一套 JavaScript 语法工业标准

DOM (文档对象模型)

DOM : 文档对象模型，是 W3C 组织推荐的处理可扩展标记语言的标准编程接口，通过 DOM 提供的接口，可以对页面上的各种元素进行操作(如大小、位置、颜色等)。

BOM (浏览器对象模型)

BOM : 浏览器对象模型，它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过 BOM，可以对浏览器窗口进行操作 (如弹出框、控制浏览器导航跳转等)。

数据类型：

JavaScript 是一种弱类型语言，不用提前声明变量的数据类型。

数据类型分类

基础数据类型

Boolean(布尔)

var str = true; // 表示真， 1. 成立
var str2 = false; // 表示假, 0. 不成立

String(字符串型) ：用单引号或双引号包裹

var str1 = '';    // 空字符串
var str2 = 'abc';  // 单引号包裹的字符串
var str3 = "abc";  // 双引号包裹的字符串

Nuber (数字型) : 包含整型值和浮点型值

var num1 = 21;  // 整型值
var num2 = 0.21; // 浮点型值

Null(空型)

var a = null;   // 变量a的值为 null

Underfind(未定义型)

var a;                // 声明变量a、未赋值，此时a就是 undefined
var b = undefined;    // 变量b的值为 undefined

复杂数据类型

Object(对象)
Date
Math

数据类型检测

typeof 可以用来检测数据类型

console.log (typeof 12);         // 输出结果：number
console.log (typeof '12');       // 输出结果：string
console.log (typeof true);       // 输出结果：boolean
console.log (typeof undefined);  // 输出结果：undefined
console.log (typeof null);       // 输出结果：object

数据类型转换

转换为字符串
```javascript var num = 23.1;

// 方法一：利用 + ‘’ 拼接字符串的方法 var str = num + ‘’; console.log(str, typeof str) //23.1 string

// 方法二：利用 toString() 转为字符串 var str = num.toString(); console.log(str, typeof str); //23.1 string

// 方法三：利用 String() 转为字符串 var str = String(num); console.log(str, typeof str); //23.1 string


-  转换为数字型

// 方式一使用 parseInt() 将字符串转为整数 console.log ( parsenInt(‘12’) ); // 12

// 方式二使用 parseFloat() 将字符串转为浮点数 console.log ( parseFloat(‘2.94’) ); // 2.94

// 方式三使用 Number() 将字符串转为数字型 console.log ( Number(‘1.94’) ); // 1.94

// 方式四利用算术运算符(-, *, )隐式转换 console.log (‘19’ - 1); // 18


<a name="0ac8d27c"></a>
##### 数组对象
> **JavaScript 中的数组对象可以使用 new Array 或字面量“[ ]” 来创建。**
>  
>  
>

数组类型检测有两种常用的方式，分别是使用 instanceof 运算符和使用Array.isArray() 方法。

```javascript
var arr = [];
var obj = { };
// 第1种方式
console.log ( arr instanceof Array );
// 输出结果:true
console.log ( obj instanceof Array );
// 输出结果:false
//第2种方式
console.log ( Array.isArray(arr) );
// 输出结果:true
console.log ( Array.isArray(obj) );
// 输出结果:false
如果检测结果为 true ，表示给定的变量是 一个数组，如果检测结果为false， 则表示给定的变量不是数组

数组转换为字符串

若需要将数组转换为字符串，可以利用数组对象的 join() 和 toString() 方法实现。
toString()    把数组转换为字符串，逗号分隔每一项
join (’ 分隔符 ')    将数组的所有元素连接到一个字符串中
// 使用toString()
var arr = ['a', 'b', 'c'];
console.log ( arr.toString() );
// 输出结果:a,b,c
// 使用join()
console.log ( arr.join() );
// 输出结果:a,b,c
console.log ( arr.join('') );
// 输出结果:abc
console.log ( arr.join('-') );
// 输出结果:a-b-c
:join() 和 toString() 方法可将多维数组转为字符串，默认情况下使用逗号连接。不同的是，join() 方法可以指定连接数组元素的符号。另外，当数组元素为 undefined、null 或空数组时，对应的元素会被转换为空字符串。

数组的其他方法

JavaScript 还提供了很多其他也比较常用的数组方法 . 填充数组、连接数组、截取数组元素等

fill()用一个固定值填充数组中指定下标范围内的全部元素
splice()数组删除，参数为 splice(第几个开始，要删除个数)，返回被删除项目的新数组
slice()数组截取，参数为 slice(begin, end)，返回被截取项目的新数组
concat()连接两个或多个数组，不影响原数组，返回一个新数组

案例 splice() 方法在指定位置添加或删除数组元素
``` var arr = [‘sky’, ‘wind’, ‘snow’, ‘sun’]; // 从索引为2的位置开始，删除2个元索 arr.splice(2, 2); console.log (arr); // 输出结果: (2) [“sky”, “wind”]

// 从索引为1的位置开始，删除1个元素后，再添加 snow 元素 arr.splice(1, 1, ‘snow’); // 输出结果: (2) [“sky”, “snow”] console.log(arr);

// 从索引为1的位置开始，添加数组元素 arr.splice(1.0, ‘hail’, ‘sun’); console.log(arr); // 输出结果: (4) [“sky”, “hail”, “sun”, “snow”]


<a name="4923e90c"></a>
##### 数组案例
-  [案例] 数组去除重复元素  
```javascript
:要求在一组数据中，去除重复的元素。其中数组为 [‘blue’, ‘green’, ‘blue’] 。示例代码如下。
function uniqueLcx(arr) {
var newArr = [];
// 用来存放数组中不重复的元素
// 遍历一遍数组，如果数组内某一元素重复出现则放入新数组中
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;
}
var demo = uniqueLcx(['blue', 'green', 'blue']);
console.log(demo);
// 输出结果: (4) ["blue","green"]

[案例] js 实现在控制台中输出当前日期

var date = new Date();//基于当前日期时间创建Date对象
var year = date.getFullYear();//获取年
var month = date.getMonth();// 获取月
var day = date.getDate();//获取日
//通过数组将星期值转换为字符串
var week =['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
//输出date对象保存的时间， 示例:今天是2019年8月16日星期二，
console.log('今天是'+ year + '年' + month + '月' + day + '日' + week[date.getDay()]);

[案例] js 实现倒计时

function countDown(time){
var nowTime = +new Date();
//+new Date() 是new Date().getTime() 代码的简写，返回当前时间戳，单位是毫秒。
var inputTime = +new Date(time);
//设置活动的结束时间戳。
var times  = (inputTime - nowTime) / 1000;
//计算剩余毫秒数，需要转换为秒数，转换规则为1秒/1000毫秒。
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt (times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
// 第5 ~ 13 行代码计算天数d、小时h、分时m、秒数s, 并使用returm返回。
}
// 示例结果: 05天23时06分10秒
console.log(countDown('2021-10-12 22:28:57'));
// 输出距离指定结束日期2021-10-12 22:28:57还剩多少时间。

字符串方法操作

字符串对象提供了一些用于截取字符串、连接字符串、替换字符串的属性和方法

字符串对象用于截取、连接和替换字符串的方法

concat(strl, str2, str3…)连接多个字符串
slice(start,[ end ])截取从 start 位置到 end 位置之间的一个子字符串
substring(start [,end] )截取从 start 位置到 end 位置之间的一个子字符串，基本和 slice 相同，但是不接收负值
substr(start [, length] )截取从 start 位置开始到 length 长度的子字符串toLowerCase()获取字符串的小写形式
toUpperfCase()获取字符串的大写形式
split( [ sparator [, limit] )使用 separator 分隔符将字符串分隔成数组，limit 用于限制数量
replace(str1, str2)使用 str2 替换字符串中的 str1 ，返回替换结果，只会替换第一个字符
作者：请叫我阿ken
链接：https://juejin.cn/post/7000555502988394533
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

案例：演示，
var str = 'HelloWorld';
str.concat('!');     // 在字符串末尾拼接字符，结果:HelloWorld!
str.slice(1, 3);     // 截取从位置1 开始到位置3 范围内的内容，结果：el
str.substring (5);  // 截取从位置5 开始到最后的内容，结果: World
str.substring(5, 7);  // 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.substr(5);      // 截取从位置5 开始到字符串结尾的内容，结果: World
str.substring(5, 7);// 截取从位置5 开始到位置7 范围内的内容，结果：Wo
str.toLowerCase();  // 将字符串转换为小写，结果：helloworld
str.toUpperCase();  // 将字符串转换为大写，结果：HELLOWORLD
str.split('1');    // 使用"1"切割字符串，结果：["He","","oWor","d"]
str.split('1', 3);  // 限制最多切割3次，结果：["He","","oWor"]
str.replace('World','!');// 替换字符串，结果："Hello!"
作者：请叫我阿ken
链接：https://juejin.cn/post/7000555502988394533
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

[案例]统计出现最最多的字符和次数
```javascript 案例：演示 charAt() 方法的使用。通过程序来统计字符串中出现最多的字符和次数: var str = ‘Apple’; //第1步统计每个字符的出现次数 var o = { };

for (var i = 0; i < str.length; i++) { var chars = str.charAt(i); // 利用 chars 保存字符串中的每一个字符 if( o[chars] ) {
// 利用对象的属性来方便查找元素 o[chars]++; }else{ o[chars] = 1; } }

console.log(o); // 输出结果:{A: 1, p: 2, 1:1,e:1}

var max = 0; // 保存出现次数最大值 var ch = ‘’; // 保存出现次数最多的字符

for(var k in o){ if (o[k] > max){ max = o[k]; ch = k; } }

// 输出结果:”出现最多的字符是:p,共出现了2次” console.log(‘出现最多的字符是:’ + ch + ‘,共出现了’ + max + ‘次’);

作者：请叫我阿ken 链接：https://juejin.cn/post/7000555502988394533 来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。


-  [案例] 判断用户名是否合法  
```javascript
案例：要求用户名长度在 3 ~ 10 范围内，不允许出现敏感词 admin 的任何大小写形式。
var name = prompt('请输人用户名');
if (name.length < 3 || name.length > 10){
alert('用户名长度必须在3 ~ 10之间。');
} else if (name.toLowerCase().indexOf('admin') !== -1){
alert('用户名中不能包含敏感词: admin。');
}else{
alert('恭喜您，该用户名可以使用');
}
// 上述代码通过判断 length 属性来验证用户名长度 ; 通过将用户名转换为小写后查找里面是否包含敏感词 admin 。实现时 name 先转换为小写后再进行查找，可以使用户名无论使用哪种大小写组合，都能检查出来。indexOf() 方法在查找失败时会返回 -1，因此判断该方法的返回值即可知道用户名中是否包含敏感词
作者：请叫我阿ken
链接：https://juejin.cn/post/7000555502988394533
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。