世界上最流行的脚本-JavaScript，看过不会来找我

Posted kobe_OKOK_

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了世界上最流行的脚本-JavaScript，看过不会来找我相关的知识，希望对你有一定的参考价值。

文章目录

摘要

下面文章中使用JS代替javascript

1 引言

JavaScript(以下统一简称JS)是目前最流行的脚本语言，没有之一，在你的手机，pad，电脑等交互逻辑都是通过JS实现的。

JS是一种运行在浏览器中的解释型的编程语言，nodejs将JS移植到了服务端，这让JS成为了全能战士

只要你想接触前端，JS是你绕不开的话题，在web前端领域，JS是绝对的顶流

JS 历史

1995年，还是一个静态网页时代，当时的网景公司凭借Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。当时网景公司想在静态页面加一些动态效果，就让Brendan Eich设计JS语言，这哥们真是一个天才，竟然在10天时间内写出JS，没错，只有10天，至于为什么名字叫JavaScript，其实就是想蹭一下Java的热度，语言本身与Java毫无关系。

ECMAScript

因为JavaScript的功能十分适合网页的动态化，随着计算机技术的不断发展，人们也不再满足于静态网页，微软做为行业巨头，自然也嗅到了这个机会，于是在JS问世后一年，微软开发了Jscript，为了能够让JS成为全球标准，网景、微软还有几家公司联合ECMA组织制定了Javascript语言标准，被称为ECMAScript语言标准。

ECMAScript是一种语言标准，JavaScript是网景公司对ECMAScript标准的一种实现。

至于为什么不把JavaScript当作标准名称呢，是因为JavaScript被网景注册了商标，不是很严谨的场合可以把JS与ECMAScript当作一回事。

发展历程，版本迭代

JS是10天被设计出来，虽然Eich很牛，但谁也架不住时间紧、任务重，所以，JS有很多设计缺陷。

2015年ES6标准发布

2 基础

2.1 嵌入网页

方式1

JS脚本可以被嵌入在网页的各个部分，使用标签，一般放在body或者head中

方式2 直接引入文件

<script src="a.js"><script>

IDE 推荐

  • VScode
  • Sublime
  • Notepad++
  • HbuilderX

2.2 基本语法

JS每条语句以“;”结尾，语句块用{。。。},JS并不强制要求在每个语句的结尾加“；”，解释器负责给每个语句补上“；”，但是一般情况下，为了保持良好编程习惯，还是要在每行语句后面加上一个分号。

语句块

var a = 10;
"hello world!";
var b = 123; var c = 456; // 这是两条语句

注释

// 单条
/* 
	多条注释
*/

大小写

JS大小写敏感

2.3 数据类型

2.3.1 基本数据类型

Number

JS 不区分整数和浮点数，统一用Number表示

var a = 123;
console.log(typeof(a)); // number 
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

数字类型可以使用+、-、*、/ 、%求余运算

字符串

//''或者“” 
// ``反引号可以包括多行文本
var s1 = "Hello";
var s2 = 'hello';
var s3 = `
		人生苦短
		我用JS
		多行文本输出
			`;

布尔

true
false

布尔运算符多用于条件判断，也可以进行逻辑运算，逻辑与&&，逻辑或||，逻辑非！

console.log(true && false); // false
console.log(true || false); // true
console.log(!true);         // false
var age = 15;
if(age>18){
	console.log("成年人");
}
else{
	console.log("未成年人"); // 未成年人
}

JS中的相等

<script>
    console.log(null === null); // true
	console.log(NaN === NaN);   // false 
	console.log(1/3 === (1-2/3)); // false 
	console.log(Math.abs(1/3)-Math.abs(1-(2/3))<0.0000001); // true 
	console.log('3'===3); // false
	console.log('3'==3);  // true 
</script>

2.3.2 高级数据类型

数组

JS 的数组（Array）可以包含任意数据类型，并通过索引来访问每个元素。通过length属性获取Array的长度

  • length

    数组内的元素是可以原地修改的，可以通过数组的length属性动态修改数组的长度。

    var arr = [1,-9,null,true,99.9];
console.log(arr.length);
console.log(arr[1]);
console.log(arr[2]);
console.log(arr[4]);
console.log(arr[5]); // 超过下标也不会报错，返沪undefined
arr.length = 8;
arr[7] = 'hello';
console.log(arr); // [1, -9, null, true, 99.9, undefined, undefined , "hello"]

  • indexOf

    获取数组内元素的索引，如果没有这个元素，返回-1.如果有这个元素，直接返回这个元素对应的索引数值

    console.log(arr.indexOf(1)); //0 
console.log(arr.indexOf(99.9)); //4
console.log(arr.indexOf('fa')); //-1

  • slice

    截取数组的部分元素，返回一个新数组，不包括结尾索引

    var arr = [1,-9,null,true,99.9];
console.log(arr); //index.html:10 (5) [1, -9, null, true, 99.9]
var arr_ = arr.slice(0,3);  // 返回一个新数组
console.log(arr_);  // (5) [1, -9, null, true, 99.9]
console.log(arr);   // (5) [1, -9, null, true, 99.9]

  • push/pop

    push:从数组后面插入元素

    pop:从数据后面删除元素

    			var arr = ["三国战将"]
			arr.push("赵云");
			arr.push("关羽");
			arr.push("张飞");
			console.log(arr); //(4) ["三国战将", "赵云", "关羽", "张飞"]
			console.log(arr.pop()); // 删除最后一个元素并返回
			console.log(arr);   // (3) ["三国战将", "赵云", "关羽"]

  • unshift/shift

    unshift：从数组头部插入元素

    shift：从数据头部删除元素

    			var arr = ["三国战将"]
			arr.unshift("赵云");
			arr.unshift("关羽");
			arr.unshift("张飞");
			console.log(arr); //(4) ["张飞", "关羽", "赵云", "三国战将"]
			console.log(arr.shift()); // 删除第一个元素并返回
			console.log(arr);   // (3) ["关羽", "赵云", "三国战将"]

  • sort

    对当前数组进行排序,原地排序

    var a = ["C","B","A"];
a.sort();
console.log(a); // (3) ["A", "B", "C"]

  • reverse

    反转数组，原地反转数组

    var a = ["C","B","A"];
a.reverse();
console.log(a); // (3) ["A", "B", "C"]

  • splice

    splice()方法是修改Array的“万能方法”，它可以从指定的索引开始删除若干元素，然后再从该位置添加若干元素：

    var a = ["乔丹","科比","艾弗森","卡特","詹姆斯"];
// 从第二个索引开始，删除两个元素，返回被删除的元素，同时从第二个索引开始添加新元素
var d = a.splice(2,2,"韦德","安东尼"); 
console.log(d); //(2) ["艾弗森", "卡特"]
console.log(a); // (5) ["乔丹", "科比", "韦德", "安东尼", "詹姆斯"]

  • concat

    把当前数组和另一个数组链接起来，返回一个新数组

    var a = ["C","B","A"];
var b = a.concat(1,2,3,[7,8,9]);
console.log(a); // (3) ["C", "B", "A"]
console.log(b); //(9) ["C", "B", "A", 1, 2, 3, 7, 8, 9]

  • join

    把数组中的每个元素用指定的字符串链接起来，返回链接后的字符串

    var a = ["C","B","A"];
var b = a.join('-');
console.log(a); // (3) ["C", "B", "A"]
console.log(b); //C-B-A

  • 多维数组

    
var a = [[1,2,3],[4,5,6]];
console.log(a[1][1]); // 5
console.log(a[0][2]); // 3

对象

JS的对象是一种无序的集合数据类型，由若干键值对组成，对象是面向对象编程的基础，程序中的一个个对象就是对现实生活的抽象。

用{。。。}表示一个对象， key:value形式申明，每个kv对之间用逗号分割，最后一个键值对不需要再末尾加，如果加了，有些老旧浏览器将报错；通过点号可以点出一个对象的属性，也可以通过obj[attr]获取属性，如果属性名有特殊字符，那么属性名必须用引号括起来，取属性的时候不能使用点号，所以对象的属性尽量使用没有特殊符号的单词，做到见名知意

			var xiaoming = {
				name:'小明',
				birth:1994,
				height:1.86,
				weight:78.0,
				score:null
			}
			console.log(xiaoming.name); // 小明
			console.log(xiaoming.age);  // undefined
			console.log(xiaoming.birth); // 1994
			console.log(xiaoming['weight']); // 78
			xiaoming.xixi = 'haha';
			console.log(xiaoming.xixi); // haha
  • 即使对象没有这个属性，也不会报错
  • 可以创建对象后，动态设置属性，这是动态语言所特殊的
			console.log("xixi" in xiaoming);     // true
			console.log("toString" in xiaoming); // true
			
			console.log(xiaoming.hasOwnProperty('xixi'));  // true
			console.log(xiaoming.hasOwnProperty('age'));   // false
			
			delete xiaoming.xixi;
			console.log(xiaoming.hasOwnProperty('xixi')); // false

  • 判断对象是否具备某个属性

    可以使用in关键字，attr in object 返回一个布尔值，如上例，toString没有在xiaoming这个对象中定义，但是同样返回true，这说明JS中所有对象的原型链都会有object对象，object对象有toString属性；

    如果只想拿到对象本身的属性，可以使用object.hasOwnProperty()方法

Map

Map是一组键值对结果，Map的查找时间复杂度为O(1)

  • 通过二维数组构造一个Map

    var m = new Map([['语文',78],['数学',98],['英语',79]]);
			console.log(m);//Map(3) {"语文" => 78, "数学" => 98, "英语" => 79}
			console.log(m.get('语文')); // 78
			console.log(m.has('英语'));  // true 
			console.log(m.set('物理',100)); // Map(4) {"语文" => 78, "数学" => 98, "英语" => 79, "物理" => 100}
			delete m.delete('语文');
			console.log(m);

    Map.get() 获取一个key的值

    Map.has()判断这个集合中是否有这个key

    Map.set() 设置key-value

    Map.delete() 删除map的某个key

Set

Set和Map类似，Set是一个key的集合，但不存储value，由于key不能重复，所以Set中每个key都是唯一的。

创建一个Set，需要提供Array作为输入，或者直接创建一个空Set

			var s = new Set();
			s.add(1);
			s.add(2);
			s.add(3);
			s.add(3);
			console.log(s); // Set(3) {1, 2, 3}
			var s1 = new Set([1,2,3,'3',3,3,3]);
			console.log(s1); // Set(4) {1, 2, 3, "3"}
			s1.delete('3');
			s1.delete(2);
			console.log(s1);  // Set(2) {1, 3}

2.4 程序结构

2.4.1 顺序结构

JS中的顺序结构就是从上而下执行的。

2.4.2 选择结构

把null、undefined、0、NaN和空字符串''视为false，其他值一概视为true

'use strict';
			var height = parseFloat(prompt("请输入身高(m):"));
			var weight = parseFloat(prompt("请输入体重(kg):"));
			var bmi = weight / (height*height);
			if(bmi<18.5){
				console.log("过轻");
			}
			else if(bmi>=18.5 && bmi < 25){
				console.log("正常");
			}
			else if(bmi>=25 && bmi < 28){
				console.log("过重");
			}
			else if(bmi >=28 && bmi < 32){
				console.log("肥胖");
			}
			else if(bmi >=32){
				console.log("严重肥胖");
			}
			else{
				console.log("数据有误");
			}

2.4.3 循环结构

  • while

    先判断条件，条件不满足一次都不执行

    'use strict';
var sum = 0;
var i =0 ;
while(i<=100){
	sum += i;
	i ++ 
}
console.log(sum); // 5050

  • do-while

    先执行循环体，在判断条件，至少会执行一次循环体

    'use strict';
var sum = 0;
do{
	sum += i;
	i ++ 
}while(i<=100);
console.log(sum);

    通过一个小实例看一下while与do… while的区别

    
			'use strict';
			var sum = 0;
			var sum_ = 0;
			var i =1 ;
			do{
				sum += i;
				i ++ 
			}while(i>100);
			console.log(sum);  // 1
			
			
			while(i>100){
				sum_ += i;
				i++;
			}
			console.log(sum_); // 0

    循环一定要注意结束条件，< 与 <= 会是完全不同的结果

  • 普通for循环

    与C语言的for循环基本相同

    var sum = 0;
for(let i=0;i<=100;i++){
	sum += i;
}
console.log(sum); // 5050

  • for…in

    遍历数组和对象这种容器数据类型

    'use strict';
var arr = ["张飞","关羽", "赵云"];
for(let i in arr){
	console.log(i);
	console.log(arr[i]);
}
			
var obj1 = {
	name:'xiaohua',
	age:14,
	grade:4
}
for(let i in obj1){
	console.log(i);
	console.log(obj1[i]);
}

  • for…of

    遍历Array可以采用下标循环，遍历Map和Set就无法使用下标。为了统一集合类型，ES6标准引入了新的iterable类型，Array、Map和Set都属于iterable类型。

    具有iterable类型的集合可以通过新的for ... of循环来遍历。

    'use strict';
var arr = ["张飞","关羽", "赵云"];
			
for(let i of arr){
	console.logJavaScript
    

     JavaScript入门
    

     前端-JavaScript
    

     JavaScript 入门
    

     JavaScript
    

     JavaScript