JavaScript(简称“JS”)是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名,但是它也被用到了很多非浏览器环境中,JavaScript基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式、声明式、函数式编程范式。

数组对象

检测是否为数组 instanceof/isArray

方法一:

使用 instanceof Array 运算符 来检测是否为数组

function name(arr){
  if(arr instanceof Array){
    ...
  }
}
JavaScript

方法二:

使用 Array.isArray 参数 来检测是否为数组

function name(arr){
  if(Array.isArray(arr)){
    ...
  }
}
JavaScript

H5新增,IE9以上支持

插入/删除 元素 push/pop&shift/unshift

队列 push/shift

队列(queue)是最常见的使用数组的方法之一

  • push 在末端添加一个元素
  • shift 取出队列首端的一个元素,整个队列往前移,这样原先排第二的元素现在排在了第一

栈 push/pop

  • push 在末端添加一个元素
  • pop 从末端取出一个元素

所以新元素的添加和取出都是从“末端”开始的。
栈通常被被形容成一叠卡片:要么在最上面添加卡片,要么从最上面拿走卡片:

对于栈来说,最后放进去的内容是最先接收的,也叫做 LIFO(Last-In-First-Out),即后进先出法则。
而与队列相对应的叫做 FIFO(First-In-First-Out),即先进先出。
JavaScript 中的数组既可以用作队列,也可以用作栈。它们允许你从首端/末端来添加/删除元素。
这在计算机科学中,允许这样的操作的数据结构被称为 双端队列(deque)

作用于数组末端的方法:
pop:
let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.pop() ); // 移除 "Pear" 然后 alert 显示出来
alert( fruits ); // Apple, Orange

push:
let fruits = ["Apple", "Orange"];
fruits.push("Pear");
alert( fruits ); // Apple, Orange, Pear
JavaScript
作用于数组首端的方法:
shift:
let fruits = ["Apple", "Orange", "Pear"];
alert( fruits.shift() ); // 移除 Apple 然后 alert 显示出来
alert( fruits ); // Orange, Pear

unshfit:
let fruits = ["Orange", "Pear"];
fruits.unshift('Apple');
alert( fruits ); // Apple, Orange, Pear
JavaScript

PS:

push 和 unshift 方法都可以一次添加多个元素:

let fruits = ["Apple"];
fruits.push("Orange", "Peach");
fruits.unshift("Pineapple", "Lemon");
// ["Pineapple", "Lemon", "Apple", "Orange", "Peach"]
alert( fruits );
JavaScript

数组排序 reverse/sort

翻转数组:

var arr['three','two','one'];
arr.reverse();
console.log(arr);//one,two,three
JavaScript

冒泡排序:

var arr[3,1,2];
arr.sort();
console.log(arr);//1,2,3
//如果数组里是:3,1,16,7,68,会输出:1,16,3,68,7
//只能排序个位数,多位数会从左到右依次排列
解决方案
var arr[3,1,16,7,68];
arr.solt(function(a,b){
  return a-b;//升序,降序b-a
});//输出:1,3,7,16,68
JavaScript

数组索引 indexOf/lastindexOf

var arr=['red','green','yellow','pink','pink'];
console.log(arr.indexOf('pink'));//3
//如果有两个一样的,只返回第一个满足条件的索引号
//没有该元素,返回-1
var arr=['red','green','yellow','pink'];
console.log(arr.lastindexOf('pink'));//4,从后往前查找
JavaScript

数组转为字符串 toString/join

方法一:

数据类型——类型转换 中说的强制转换

var arr=[1,2,3,4,5];
consloe.log(arr.toString());
JavaScript

方法二:

使用 join() 转换,可以自定义分隔符

var arr=[1,2,3,4,5];
consloe.log(arr.join('-'));//1-2-3-4-5
JavaScript

返回一个由删除元素组成的新数组 splice

var a = [1, 2, 3, 4, 5];
console.log(a.splice(1, 3)); //[2,3,4]
console.log(a.length); //2
console.log(a);//[1,5]
JavaScript
  • splice的第一个参数是绝对索引值,而不是相对于数组索引;
  • 第二个参数并不是删除元素的个数,而是删除动作执行多少次,
  • 并不是按数组实际索引移动,而是连续移动。
  • 同时调整后面元素索引,前面索引不理会

将第二个参数设为0,第三个参数后面可以添加想要插入的内容:

var a = [1, 2, 3];
console.log(a.splice(1, 0, 9, 99, 999));
console.log(a);//[ 1, 9, 99, 999, 2, 3 ]
console.log(a.splice(1, 3, 8, 88, 888));
console.log(a);//[ 1, 8, 88, 888, 2, 3 ]
JavaScript

第二个参数不为0,后面添加内容就是:
先删除,再插入,从而达到替换的效果

截取数组片段 slice(start,end)

var a = [1, 2, 3, 4, 5, 6, 7];
console.log(a.slice(1, -1)); //[ 2, 3, 4, 5, 6 ]
console.log(a.slice(0, 3)); //[ 1, 2, 3 ]
 console.log(a.slice(1,2));//2
console.log(a.slice(3)); //[ 4, 5, 6, 7 ]
JavaScript
  • 如果只写一个参数返回参数到数组结束部分
  • 如果参数出现负数,则从数组尾部计数(-3意思是数组倒第三个)
  • 如果start大于end返回空数组
  • slice不会改变原数组,而是返回一个新的数组

拼接数组 concat()

var a=new Array(1,2,3,4,5);
 var b=new Array(6,7,8,9);
console.log(a.concat(b));//[1, 2, 3, 4, 5, 6, 7, 8, 9] 
JavaScript

字符串对象

字符串的不可变性

var a='one';
a='two';
JavaScript

最后输出结果是two,但是:

  • 原本底层:开辟一个内存空间,里面放入’one’,变量a指向这个空间
  • 重新赋值后:再开辟一个新的内存空间,放入’two’,指向
  • 系统认为原来的字符串很重要,会保留原来的空间
  • 所以实际开发中不要频繁的重赋值/拼接字符串

查找字符返回位置 indexOf

indexOf('要查找的字符',[起始的位置]);

var s = '改革春风吹满地,春天来了';
console.log(s.indexOf('春')); //2
console.log(s.indexOf('春', 3)); //2 8  从索引是3的位置开始往后查找
console.log(s.indexOf('春', 2)); //2 2

lastindeXOf()//从后面查找
JavaScript

根据位置返回字符 charAt/charCodeAt/str

var a = '改革春风吹满地,春天来了';
console.log(a.charAt(5));//满,返回5处的字符
console.log(a.charCodeAt(5));//28385,返回5处字符的ASCII码 开发中常用来判断用户按哪个按键
console.log(a.str[5]);//H5新增,和charAt等效
JavaScript

拼接字符串 concat

var a='name is';
console.log(a.concat('jiang','zhong','wen'));//name is jiangzhongwen
JavaScript

截取字符串 substr/slice/substring

  1. a.substr(start,length):从start开始取,取length个var a='nameisjiang' a.substr(4,2);//is
  2. a.slice(start,end):取start到end之间的,不包括endconsole.log(a.slice(4, 8)); //isji
  3. a.substring(start,length):取start到end之间的,不包括end。基本和slice相同,但不接受负值console.log(a.substring(4, 8)); //isji

替换字符 replace

a.replace('被替换的','替换为');
//当被替换的数组里面有多个相同的字符时,只替换第一个

转换为数组 split

//a.split('分隔符');
var a='red,blue,yellow,pink'
a.split(',');//['red','blue','yellow','pink']
var b='red&blue&yellow&pink'
a.split('&');//['red','blue','yellow','pink']
JavaScript

转换大小写

toUpperCase();
toLowerCase();
JavaScript

简单数据类型和复杂数据类型

定义

  • 简单数据类型:又称基本数据类型/值类型,在存储时变量中存储的是值本身
    之前的:string、number、boolean、undefined、null 都是简单数据类型
    其中null比较特殊,返回值是一个空的对象var a=null; consloe.log(typeof a);//object一般用来,给一个以后打算用做对象的变量赋值
  • 复杂数据类型:又称引用类型,在存储时变量中存储的仅仅是地址(引用)
    通过new创建的对象(系统对象,自定义对象),Object/Array/Date等都是复杂数据类型

堆和栈

  • 栈(操作系统):
    简单数据类型存放到栈里面
    操作系统自动分配释放 函数的参数值、局部变量的值等
    其操作方式类似于数据结构中的栈
  • 堆(操作系统):
    复杂数据类型存放到堆里
    一般由程序员负责分配与释放,若不释放则由垃圾回收机制回收
  • JS中没有堆和栈的概念,通过堆栈的方式理解代码运行方式
var num=5;//简单数据类型

中开辟一块内存空间,放入5
num指向这个空间

var obj={1,2,3};//复杂数据类型
JavaScript

中开辟一块内存空间,存入地址,地址指向堆里面的数据({1,2,3})
obj指向的空间

传参

简单传参

function fun(a){//这里相当于新建了个变量a=,结果对x没影响
  a++;
  console.log(a);//11
}
fun(x);
console.log(x);//10
JavaScript

复杂传参

function Pe(name){
  this.name=name;
}
function fn(x){//这个地方x=p;需要注意的是把栈中p的地址复制给了x,地址指向相同
  console.log(x.name);//2.这里还是刘德华
  x.name='张学友';
  console.log(x.name);//3.输出:张学友,这里x的name和p的是一个,张学友覆盖了刘德华
}
var p=new Pe('刘德华');
console.log(p.name);//1.输出:刘德华
fn(p)
console.log(p.name);//4.输出:张学友(被覆盖了)
JavaScript

相似鼠标事件的区别

onmouseover和onmouseenter

  1. 鼠标移入该元素的时候触发的事件
  2. 如果打开页面的时候鼠标刚好在该元素上面,onmouseenter就没有被触发,而onmouseover会被触发
  3. 因为onmouseenter只有在鼠标进入该元素的瞬间才会被触发

onmouseleave和onmouseout

  1. 只要鼠标不在该元素身上,onmouseout就会触发
  2. 而onmouseleavr只有在鼠标从该元素身上离开的时候才会触发

onmouseover和onmousemove

  1. onmouseover 只在刚进入区域时触发
  2. onmousemove 除了刚进入区域触发外,在区域内移动鼠标,也会触发该事件