banner
NEWS LETTER

JavaScript简史:ES5到ES11的版本回顾

Scroll down

JavaScript基本语法

JavaScript的历史

JavaScript在1992年有网景公司开发(Navigator),995年Sun公司收购了JScript原来叫JScript,由于不够出名,更名为JavaScript

JavaScript的组成部分

JavaSscrpt的组成部分:DOM BOM ECMAscript。 ECMAscript是用于制定Js规范,统一js标准;DOM全称browser object model,浏览器对象模型。用于与浏览器做交互的窗口,DOM 全称document object model文档对象模型,他的作用是用于获取网页元素节点

什么是JavaScript

特点 轻量级 弱类型 脚本语言

轻量级:没有复杂的依赖

弱类型:没有太严格的规范

脚本语言:html css是标记语言,是一个名词,就好比每一个国家使用每一个国家的语言,每一种种族使用自己的种族语。

使用JavaScript方法

  1. 行内式
    实例

    1
    2
    3
    4
    5
    <div onclick="alert('helloworld')">
    点击一下会弹出
    </div>
    <!-- 注意 引号混合使用,需外双内单,不能两双或两单 -->
    <a href="javascript:alert('hello world');">快点我</a>
  2. 内嵌式
    利用script标签 实例

    1
    2
    3
    4
    5
    <script>
    // 这里写js逻辑部分,script可以放在页面任意部分,但是必须放在body后面,
    // 因为代码的执行顺序是从上往下执行的,一但书写书写错误,那么会影响整个页面的加载
    console.log('控制台打印输出 hello world')
    </script>
  3. 外链式

    实例

    1
    2
    3
     // 利用script的src属性引入外部js文件 script标签需放在body后面,
    //script拥有src属性之后,script标签内部不要再放任何内容
    <script src="./js/index.js"></script>

变量的定义与赋值

JavaScript自带一些关键字和保留字,常见的关键字的保留字详情有JavaScript常见关键字和保留字,使用 var关键字即可定义一个变量

1
2
3
var number = 10
name = '张三'
console.log(number,name) // 10 张三

根据ECMAScript制定规范,变量的命令我们一般采用驼峰命名发,即首字母小写,后面字母大写,变量的命名规则有以下几点

  1. 由数字 字母 下划线 $符构成
  2. 不能以数字开头
  3. 严格分区大小写,不鞥使用中文
  4. 不能以关键字个保留字命名
  5. 命名语义化

数据类型

ES5的数据类型分为两大类,分别是基本数据类型与复杂数据类型,复杂数据类型也成引用数据类型

常见的基本数据类型有Number String Boolean Null Undefiend五个构成,

示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
//定义Number
var num = 10
concole.log(num) //10
// 定义字符串
var str = '张三'
// 字符串拼接
console.log(str+'今年'+num+'岁')
// 定义布尔值 只有两个值 1和0 0为真ture 1为假 false
var boolVariable = true
if (boolVariable) {
console.log('boolVariable is true');
} else {
console.log('boolVariable is false');
}
// 在以下情况会的到Undefiend
// 给定义的变量未赋值
var num
console.log(nub) // Undefiend
// 存在不存在的变量名
console.log(str) // Undefiend
// 被访问的值被定义为Undefiend
var test = Undefiend
console.log(Undefiend) // Undefiend
// 访问的参数没有被传递值
var fun(num) = function() {
console.log(num) // Undefiend
}
fun()

// null 的使用场景通常包括但不限于:在初始化对象之前或之后清除对象引用;作为 API 调用时的占位符,
// 表示没有数据或者数据为空;或者作为函数的返回值来表示没有任何对象可以返回。
var num = null
console.log(num)



ES常见的数据类型有 Function Arr Object 正则

示例

1
2
3
4
5
6
7
8
// 创建对象
var obj = {name:'zs',age:18,gender:'女'}
// 定义数组 数组里面可以放任意数据类型
var arr = ['张三','李四','王二','麻子']
// 定义函数
var fun() =function(){}
// 定义正则
var reg = /\d/

简单数据类型与复杂数据类型的区别

1731403124796

简单数据类型又叫做值类型,复杂数据类型又叫做引用数据类型。他们存储的方式不同,一个是存在栈,一个存储在。简单数据类型在存储时,存储的是变量本身,他的存储位置在栈。复杂数据类型,在存储时,变量中存储的仅仅是一个地址

检测与转换数据类型

关键词 typeof 只能检测基本数据类型,不能检测复杂数据类型 写法1 typeof 变量名 写法2 typeof(变量名)

1
2
3
4
5
6
7
8
9
10
11
var num = 10;
str = 'zs';
bool = true;
var null1 = null;
undefiend1 = undefined;
obj = { name: 'zs', age: '18', gender: '男' }
arr = ['zs', 18, 'ls', 20]
fun = function () { }
reg = /\d/
console.log(typeof num, typeof str, typeof bool, typeof null1, typeof undefiend1, typeof obj, typeof arr, typeof fun, typeof reg);
// number string boolean object undefined object object function object

为什么判断NaN是一个Number?

NaN不是一个数字,但是它是属于一个数字类型

转换数据类型

  1. 通过关键词 Number() parseInt() parseFlart()可以实现字符串对数字的转换,示例
  2. 通过 Boolean()可以实现非布尔值转换为布尔值
  3. 通过 toString()可以实现非字符串转字符串
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
var num = 10;
str1 = '10'
str2 = '12px'
str3 = '1px2'
str4 = '10.24'
str5 = '10p.34'
// Number()方法 强制把非数字类型转换为数字类型
var str = '10'
str1 = '12px'
console.log(Number(str), Number(str1), Number(12), Number(true), Number(null)); // 10 NaN 12 1 0
console.log(Number(undefine)); // undefine is not defined
// parseInt方法 强制把非数字类型转换为数字类型,如果转换为数字类型就只会取整数部分
var num = 10
str1 = '10'
str2 = '12px'
str3 = '1px2'
str4 = '10.24'
str5 = '10p.34'
console.log(parseInt(num), parseInt(str1), parseInt(str2), parseInt(str3), parseInt(str4), parseInt(str5)); // 10 10 12 1 10 10
// parseFlart()方法
var num = 10
str1 = '10'
str2 = '12px'
str3 = '1px2'
str4 = '10.24'
str5 = '10p.34'
str = '10.3p3'
console.log(parseFlart(num),parseFlart(str1),parseFlart(str2),parseFlart(str3),parseFlart(str4),parseFlart(str5),parseFlart(str6)) // 10 10 12 1 10.24 10 10.3
// 保留几位小数
console.log(res4.toFixed(2)) //10.4
// Boolean() 将非布尔值转换为布尔值
var num = 0
num1 = NaN
str = ''
null1 = null
unde = undefined
console.log(Boolean(num),Boolean(num1),Boolean(str),Boolean(null1),Boolean(unde),Boolean(123),Boolean(true)) // false false false false false true true
// toString() 将飞字符串转为字符串
var num = 0
num1 = NaN
bool = true
null1 = null
unde = undefined
res2 = bool.toString()
res3 = unde.toString()
console.log(res2); // Cannot read properties of undefined (reading 'toString')
console.log(res3); // Cannot read properties of undefined (reading 'toString')
console.log(num.toString(),num1.toString(),null1.toString()) // 0 true NaN


总结:

parseInt会把数据转换为数字类型,之后开始从左往后查找,遇到第一个不为数字的字符就会返回这个数据前面的数字,如果遇到小数点,也会停止查找,返回小数点前面的数字

parseFlart方法会把数据转换为数字类型,之后开始自从左往右开始查找,遇到第一个不为数字的字符就会停止查找并返回这个字符前面的数字,如果遇到小数点,如果小数点后面是纯数字,就会正常输出小数点后面的内容,如果小数点后面有非数字的字符,那么就会遇到第一个非数字字符停止查找,输出非数字前面之前的内容

注意:如果转换的非数字不存在数字,就会返回NaN (Not on number )

在js里,在非布尔值转布尔值中,只有0 NaN ‘’ null undefined 都为false,其他的都为true

在js中,在非字符串转字符串里,undefined和null没有toString方法

算数运算符

常见的算数运算符有 + - * / % 示例

1
2
3
4
5
var a = 10;
b = 20
// 2的4次方
var h = 2**4
console.log(a + b, b - a, a * b, b / a, 10 % 3, h) // 30 10 200 2 1 16

比较运算符

比较运算符有 > < >= <= == != === !==

1
2
3
比较运算符有 > <  >= <= == != === !==
var num = 10
console.log(num > 5,num < 5,num === 5,num >= 5,num <= 5,num == 5) // true false false true false false

总结

== 代表的是比较的是数值,=== 比较的是数值与类型

赋值运算符

赋值运算符有 = += -= *= /= %= 示例

1
2
3
var num = 10;
// + > = 号的优先级要高于
console.log(num += 5, num -= 5, num *= 5, num /= 5, num %= 3); // 15 10 50 10 1

总结:=此时的含义就是把等号右边的内容赋值给等号左边,+的优先级大于等于,所以num=10时,在做加法运算,在做赋值运算

逻辑运算符

逻辑运算符 ||(或者) &&(与) !(非)

1
2
var money = 6;
console.log(money > 10 || money > 1,money > 10 && money < 3,!true); // true false false

总结:

  1. || 同假则假 一真为真
  2. && 同真则真 一假则假
  3. ! 取反 真则假 假则真

一元运算符

一元运算符也称自增自减运算符,有 ++i(前置++) i++(后置加加) i– –i

1
2
var i = 10;
console.log(i++,++1,i--,--1) // 10 11 10 9

如何理解i++ ++i

i++ 先赋值,在累加,i– 先累加 在赋值

分支结构

分支之if语句 示例

1
2
3
4
5
6
7
8
// 单分支
if(条件成立){ 代码块}
// 双分支
if(条件成立) {代码块} else {代码块}
// 多分支
if(条件成立) {代码块} else if(条件成立) {代码块} else if(条件成立) {代码块} else{代码块}
// 嵌套分支
if(条件成立) {if(条件成立) {代码块}else { 代码块 } }else {代码块}

分支之Switch语法 示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
Switch(变量) {
case 1 :
// 如果变量与1完全相等,就会执行这里的代码
break
case 2:
// 如果变量与2完全相等,就会执行这里的代码
break
case 3:
// 如果变量与3完全相等,就会执行这里的代码
break
default
// 如果变量与上述都不符合,就会执行这里的代码
break
}

总结

  1. Switch...case不能直接进行范围判断
  2. 条件判断必须是全等的判断,数值与类型必须全等才能匹配上
  3. 如果在 case里面忘记写default,那么会根据顺序结构,依次向下执行,于是会把向下的结果都输出

三元运算符

三元运算符也叫三目运算符 语法:条件表达式?表达式1:表达式2 如果条件表达是成立,则执行表达式1,否则执行表达式2

1
2
3
4
// 判断基偶数
var num = 10;
num % 2 == 0 ? console.log("偶数") : console.log("奇数"); //偶数
num % 2 == 0 ? console.log("偶数") : null; // 如果不满足条件 什么都不用做 null用于站位,否则语法报错

三元运算符只能改基本的if…else语句 if…else但是不能改多分支语句

循环

循环之while语句 执行条件:初始值 结束条件 执行体 自增方法

1
2
3
4
5
6
7
8
9
10
11
// while (结束条件) { 执行体; 自增条件 }
var num = 1;
while (num<=5) {
console.log(num);
num++;
}
// do...while循环 当xxx做xxx语法do{执行体}while(结束条件)
do {
console.log(num);
num++;
} while (num <= 100);

区别:

  1. do...while不管条件是否成立都是执行一遍代码体
  2. while只有条件成立才会成立代码体

注意:如果执行体没有自增条件,就会形成死循环

循环之for语句

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
// for (初始化变量; 结束条件; 自增条件) { 执行体 }
for (var i = 1; i <= 100; i++) {
console.log(i);
}
// 满足条件终止程序执行
for (var i = 1; i <= 100; i++) {
if (i == 50) {
console.log('当前的数值为' + i + '程序终止运行');
break;
}
console.log(i); // 1-49
}
// 退出本次循环 进入下一次循序
for (var i = 1; i <= 100; i++) {
if (i == 50) {
console.log('当前的数值为' + i + '程序终止运行');
continue;
}

console.log(i); // 1-49 51-100
}
// 循环嵌套
for (var i = 1; i <= 9; i++) {
for (var j = 1; j < i; j++) {
document.write(i + '*' + j + '=' + i * j + '&nbsp')
}
document.write('</br>')

}

注意:break需要放在if里面才能我们想要的结果,如果放在if条件外面,for里面,那么会终止整个程序的运行

总结:

  1. break关键字是终止本次循环
  2. continue关键字是终止本次循环,进入下一次循环

函数

函数是一个容器,里面可以装很多代码,它的作用是重复的代码进行整合,把重复的代码放在一起,需要的时候直接调用是可以了。前面学的的Number() parseInt() parseFloat() String()这些方法,都可以叫函数,函数就是方法,方法就是函数。

代码示例

1
2
3
4
5
6
7
// 声明式
function 函数名() { 执行体}
// 赋值式声明
var myFn = function() { 代码体}
// 函数的调用
函数名()
myFn()

注意:声明式函数调用可以喊页面中任意位置,赋值式函数调用只能在声明之后调用,否则会报错 myFn in not function

函数的传参

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var myFn = function(a,b,c) { // a b c 形参
console.log(a,b,c)
}
myFn(10,20) // 10 20 实参
// arguments的使用
var myFn1 = function() {
console.log(arguments)
for(var i = 0;i<=arguments.length-1;i++) {
console.log(arguments[i]) // 1,3,5,7,9,11,13,15
}
}
myFn1(1,3,5,7,9,11,13,15)
// 函数返回值
function myFn3() {
var num = 10;
return num;
console.log('hello world');
}
var result = myFn3();
console.log(result);

总结

  • 形参的个数大于实参,那么多余的形参个数的值是 undefined
  • 实参的个数大于形参,那么多余的实参个数会被删除
  • 每一个函数都有一个内置的参数叫做 arguments,它是一个伪数组,他的特点是有长度,有下标,它里面内置了一个属性 length可以获取到他的长度
  • 函数定义的变量或者计算出来的结果,在函数外面不好调用,在函数外面调用的时候,就需要使用 return关键字
  • return后面的语句将不再执行
  • 如果 return后面有值,那么调用函数后返回的结果就是return后面的结果;如果return后面没有写内容,那么返回 undefined
  • 如果不写 return,那么函数的返回结果就是 undefined

注意:如果直接写在 return后面的语句会正常执行,但如果return后面写了分号或者折行后将不再执行

JS的预解析

1
2
3
4
5
6
7
8
9
10
11
12
13
console.log(num) // undefined
var num = 10;
console.log(num) // 10

fn()
function fn() {
console.log('hello world')
}

fnn() // fnn in not function
var fnn = function() {
console.log('hello world')
}

解析说明:

在进行 consolelog 之前,js会进行 预解析,它会先解析带有 varfunction关键字的变量,首先会进行变量提升,第一行会输出 undefined,是因为代码从上往下执行,把 var num提升到上面,相等于第一行之前隐藏了第一行代码,只是我们看不到,然后代码才从上往下执行,但是没有赋值,直到第二行才给num赋值,第四行能够正常输出,遇到fn的时候就知道fn是一个函数,所以能够正常执行

作用域

作用域是指定义的变量的作用范围,全局作用域示例

1
2
3
4
5
6
7
var num = 10;
str = 'hello world';
console.log(num,str)
console.log(window)
function fn() {
console.log('hello world')
}

总结

  1. 写在 script第一层的变量都是全局变量
  2. 写在全局的变量都会存储在 window这个对象上
  3. 写在全局的变量可以在任意位置使用,直接写变量名的不会进行变量提升,

局部作用域(函数存在局部作用域)

1
2
3
4
5
6
7
8
9
fn()
console.log(age);
function fn() {
var name = 'zs'
age = 10
console.log(name)
}

console.log(name)

在函数体中用 var定义的变量,只能在函数体中起作用,这样的变量作用域叫做局部作用域;如果在函数体中定义的变量没有带var,那么代表的就是全局作用域的变量,但是必须在函数调用之后使用,否则 xxx is not defined*

变量的查找与赋值

1
2
3
4
5
6
7
var num = 10;
function fn() {
console.log(num) // 10
num = 20
console.log(num) //20
}
console.log(num) // 20

规则: 如果有就先赋值给自己作用域下的变量,如果没有择取上一级查找,如果上一级没有,会一直查找到window对象上,如果window中也没有才会报 xxx in not undefined

函数与事件的关系

1
<div class= "box" id="myWrap" onClick="myClick()"></div>
1
.box {width:100px;height:100px;background-color:blue;}
1
2
function myClick() {console.log('被点击了')}
myWrap.onclick = function() {console.log('hello world')}

常用鼠标事件

序号 事件名 作用
1 onclick 点击事件
2 ondblclick 双击事件
3 onmouseover 鼠标滑过
4 onmousemove 移动事件
5 onmouseup 鼠标抬起事件
6 oninput 输入事件
7 onchange 输入内容触发事件
8 onkeydown 鼠标按下事件
9 onkeyup 鼠标抬起事件

递归

递归:递归就是函数自己调用自己

图片理解

1731377881658

代码示例

1
2
3
4
5
6
7
8
9
// 求1-5的和
function fn(n) {
if(n===1) {
retreat 1
}
retreat fn(n-1)+5
}
var res = fn(5)
console.log(res)

分析:

  1. n(5)->此时n=5,那么if条件不成立,所以执行return fn(4)+5; ->10+5
  2. fn(4)->此时n=4,那么if条件不成立:所以执行return fn(3)+fn(4)->6+4
  3. fn(3)->此时n=3,那么if条什不城立.,所以执行return fn(2)+fn(3) -> 3+3
  4. fn(2)->此时n=2,那么if条件不成立:所以执行return fn(1)+fn(2)->1+2 =3
  5. fn(1)->比时n=1,if条什成立,则返回1

对象的基本使用

万物皆对象对象,但是他是个具体的事物,比如一个人可以叫对象,但是一群人不能叫对象.

对象的示例

1
2
3
4
5
6
7
8
9
10
// 字面量对象创建
var obj = {}
// 添加属性和属性值
var obj = {name:'zs',age:18,sex:'男',hobby:['吸烟','喝酒','烫头']}
// 修改对象属性
obj.age=24
// 删除对象属性
delete obj.sex
// 获取对象属性
console.log(typeof obj.name) //string

通过内置构造函数new创建对象

1
2
3
4
5
6
7
8
9
var obj = new Object({ name: 'zs', age: '18' ,gender:'男'})
// 获取对象属性
console.log(obj['name'])
// 修改对象属性
obj.age=24
obj['age'] = 25;
// 删除对象属性
delete obj.gender
delete.obj['gender']

JavaScript基本语法-数据操作方法

数组

数组是一组数据的有序结合,他可以存储任意数据类型的值

数组创建之字面量

1
2
3
4
5
6
7
8
9
10
var arr = []
// 添加内容
var arr = [1, null, true, 'zs', { si: 'java', s2: 'php' }, undefined]
// 获取数组name
console.log(arr[4])
// 修改数组中的内容
arr[3] = true
console.log(arr)
// 删除数组中的内容
delete arr[2] // 删除数组中的内容,但是数组长度不变,不会影响下标

通过内置构造函数new Array()创建

1
2
3
4
5
6
7
8
9
var arr2 new Array(1,3,'abc',['x','y','z'])
console.log(arr2);
console.log(arr2[2]);
arr2[2]='opq';
console.log(arr2);
delete arr2[2];
console.log(arr2);
var arr3 new Array(4);
console.log(arr3);

一但通过构造函数的方式创建数组,那么如果数组中只放一个数字,那么这个数字代表的
是数组的长度,如果放多个数字,代表的是数组的内容

总结:数组有下标,有长度,长度与下标差一

数组的常用方法

1
2
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var arr1 = ['c', 'c++', 'java', 'python', 'php', 'javascript']
方法 作用 代码示例
push() 在数组末尾添加元素,不限制个数 返回值是他的长度 arr1.push(‘.net’,’go’)
unshift() 在数组前面添加元素,不限制个数,返回值是他的长度 arr1.unshift(‘c#’,’vb’)
pop() 删除元素末尾的元素,返回值是它删除的元素 arr1.pop()
shift() 删除元素开头的元素,返回值是它删除的元素 arr1.shift()
reverse() 反转数组,返回值是反转后的数组 arr1.reverse()
sort() 数组排序,默认是从小到大排序,但只能在10以内,
如果是10以上的数,需要传一个函数
var result = arr.sort(function
(a,b){return a-b})a-b是升序 b-a是降序
concat() 数组合并,返回值是合并后的新数组 ,
谁写在合并的前面谁就在数组的前面
var result1 = arr.concat(arr1)
join() 把数组转换为字符串,返回值是转换后的字符串,如果不给参数,
默认一逗号隔开
,

如果有参数,就以参数中的值为连接符
arr.join(“*”)
slice() 查找数组中的某几项,如果只给一个参数,代表从
开始索引截取到最后所有
,返回值为所截取的索引
arr1.slice(开始索引,结束所有)</br/>两个参数,第一个参数为开始索引,
第二个参数为结束索引,包含开始索引,不包含结束索引
splice() 三个参数,返回值为删除的元素,如果只是添加,不删除内容,

那么会在你写的这个索引值位置添加
arr.splice(开始所有,删除个数,替换删除个数的内容)

数组排序

把数组中的数组按照一定规则进行排序,通常在排序的时候我们排序的都是数组,排序分为冒泡排序和选择排序

冒泡排序:俩俩比较,不符合规则换位,难点在于表达式的使用与循环模型的应用

数组换位表达式 示例

1
2
3
4
5
var  arr = [3,2,5,4,2,1]
var temp = var[0]
arr[0] = arr[1]
arr[1] = temp
console.log(arr) // 2 3 5 4 1

注意:数组之中下标对应的数据只有一个,如果我们给对应下标的位置执行赋值,那么原有的数据就会被覆盖,换位的核心是把被覆盖的数据进行临时存储

用图片表示排序

1731848624733

代码编写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 从小到大排序
var arr = [3,2,5,4,1]
// 重复代码执行几次
for(var i = 0;i<arr.length-1;i++) {
// 每轮比较的次数都减一
for(var j = 0; j<arr.length-1-i;j++) {
// 前一个数据与后一个数据是 n n+1的关系
if(arr[j] > arr[j+ 1] ) {
var temp = arr[j]
var[j] = arr[j+1]
arr[j+1] = temp
}
}
}
console.log(arr)

选择排序

假定最大最小值,判定后进行数据换位,他和冒泡排序的区别在于冒泡排序是从后往前排的,而选择排序是从前往后排的。它的核心在于把数组分为两个部分一部分为比较的数据位置,另一部分为剩余参与比较的位置

代码示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 // 从小到大排序
var arr = [3, 5, 2, 1, 4];
// 循环次数
for (var i = 0; i < arr.length - 1; i++) {
// 假设最小值
var min = arr[i];
// 假设最小值的下标
var minIndex = i;
// i j n和n+1的关系 每一次循序
for (var j = i + 1; j < arr.length; j++) {
// 进行比较
if (arr[j] < min) { // 如果大于最小值,则更新最小值和下标
min = arr[j];
minIndex = j;
}

}
// 进行换位
arr[minIndex] = arr[i]
arr[i] = min
}
console.log(arr) // 1 2 3 4 5

总结

  1. 我们在完成比对之后,要把最小值和比较和比较数据位置的数据进行互换
  2. 我们在比较最小值的时候一定要记录最小值的下标,我们声明一个变量记录最小值下标即可
  3. 在经历一轮排序之后,我们可以确定数组的第0位就是数组之中最小值,我们把数组中最小值放在数组中第0位

数组去重

去除数组的重复项,可以通过双数组去重和查找去重实现,双数组去重的核心就是判定 newArr中是否已经存在我们将要存放的数据,我们使用indexOf工具判定新数组中是否存在要存放的数据,如果data在数据中存在,返回下标,否则返回-1,代码示例

1
2
3
4
5
6
7
8
9
var arr = [1, 1, 2, 3, 3, 3, 2, 2, 2, 4, 4, 4, 5, 5, 5, 5, 5];
var newArr = []
for (var i = 0; i < arr.length; i++) {
// 判断newArr是否存在arr[i]数据 不存在就插入新数据
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
console.log(newArr) // 1 2 3 4 5

查找去重

通过 splice配合双层循环实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 1. 获取所有的基准数据 ;  下标获取用循环更合适; 
var arr = [ 1,1,1,1,2,3,3,3,2,2,2,4,4,4,5,5,5,5,5];
for(var i = 0 ; i < arr.length ; i ++){
// 基准数据是 : arr[i];
// 我们获取去重数据 : i + 1 ~ 数组的最后一项!
for(var k = i + 1 ; k < arr.length ; k ++){
// 去重数据是 arr[k]
// 我们比较基准数据和去重数据;
// 如果相同我们就删除掉去重数据;
if( arr[i] === arr[k] ){
// 删除数组之中对应下标的数据我们使用splice( 从哪里开始 , 删除几个 );
// 如果要删除第k位的数据我们需要传递参数;
arr.splice( k , 1 );
// 注意 : splice 在删除数据之后,会让数组的数据向前顺移, 这个移动会导致我们忽略部分的去重数据 ! 这个移动会导致我们忽略一 个数组数据的比对!
// 解决方案 : 让我们当前的比较重新比较当前位置上的数据;
// k 表示位置, 代表了数据, 我们让k--重新比较当前位置的数据;
k -- ;
}
}
}
console.log( arr );

字符串

创建字符串

1
2
var str1 = "hello world"
var str2 = 'hello world'

单引号和双引号创建字符串完全相同没有区别,在字符串之中使用’或者”字符这种时候我们可以区分双引号和单引号!

使用技巧:如果我们在字符串之中使用到了单引号,那么创建字符串时的引号就是双引号

1
var str3 = "i'm Lilei";

如果我非得不区分!不用上面的技巧可以不可以使用单引号或者双引号字符,那可以,在字符前加上\转义运算就可以了;

1
var str4 = 'i\'m Lilei';

构造函数创建字符串

构造函数 :就是调用函数前加 new的函数

1
var str5 = new String("hello world");

这种方式创建出来的字符串,它的数据类型是object使用起来和正常的字符串没有区别,如果想要转换常规的字符串那么直接调用 str5.tostring()即可!

字符串概念

字符:计算机可以支持的字符进行了多次的扩张和多次的修改!目前所有计算机都支持的字符集是ASCII,ASCII码有128位字符构成!默认支持英语。更高级的字符集都是基于ASCII码进行扩展!我们目前的主流编码主要是unicode编码集;这个编码集共有65535个字符。我们所有的字符都可以转换成unicode编码,我们转换的方式\u字符编码可以表示一个字符.unicode表示的字符和我们直接输入的字符是完全一致的

1
2
3
var letter1 = "\u4e00";
var letter2 = "一";
console.log( letter1 , letter2 , letter1 === letter2 ); // true

字符串:一堆字符放在一起,我们就把这堆字符称之为字符串!

JavaScript基本网页制作

JavaScript进阶

1

Other Articles
1 +
Honors and Awards