javascript是一门基于对象和事件驱动并具备一定安全性的浏览器脚本语言。
组成
DOM(Document Object Model) 文档对象模型 用于操作结构的
BOM(Browser Object Model) 浏览器对象模型
ECMAScript 核心JS (变量 、命名规范、数据类型 、操作语句)
书写位置
行内
<body>
<div οnclick="alert('不忘初心,方的始终!')“ style=“width:200px; height:"200px;”></div>
</body>
内嵌
<script>
alert('good good study,day day up!!!');
alert('hello world!!!');
</script>
外链
<script src="资源文件/路径地址"></script>
变量
作用:
就是用来存储数据的 (存储值 和 代表值) 定义一个变量只需要var以下。
基本语法:
var 变量名 = 值;
变量的命名规范
1、可以由数字、字母、下划线、 $符组成,但是不能以数字开头
2、不能使用关键字和保留字
(1)关键字:js内置的名字
(2)保留字:未来可能成为关键字的
3、简明知义,符合驼峰命名法
(1)小驼峰:第一个有意义单词的首字母小写,其余有意义单词的首字母大写。stuName
(2)大驼峰:所有有意义单词的首字母都大写。StuName
4、不能重复命名,后面的覆盖前面的。
变量的定义方式
基本格式
(1)声明+定义
例如: var str="hello";
(2) 只声明不定义
例如: var str1;
(3) 连续声明不定义
例如:
var a1=100;
var a2=200;
var a3=300;
console.log(a1,a2,a3);
typeof
作用:用来做数据类型得划分(检测)
语法:
typeof(数据);
返回值:将对应得数据类型返回,值都是字符串
数据类型的划分
1、基本数据类型
(1) Number 数字 (包含:整数、小数、0;进制 (8进制:以0开头,没有超过8的基数); 16进制:(以0开头, 基数是1—9 a—f );NaN (Not a Number) 不是一个数字,一般在运算不出结果时会NaN.; Infinty 无穷大 ;精度缺失(小数计算存在精度缺失): (面试题) JavaScript中在进行运算的时候是遵循IEEE754双精度运算标准,底层都是转为二进制进行计算的,0.1在转为二进制的时候是无限循环的,内置做了四舍五入,最终导致运算结果不精确。 )
(2)string 字符串
用单引号或双引号包起来的就是字符串
字符串.length:字符串的长度或字符串中字符的个数
字符串.charAt:获取某个字符
字符串.charAt(index); index: 索引/下标,编程语言中计算都是从0开始,0对应得是第一项,依次类推.......
最后一项的索引是 字符串.length-1
(3)Boolean 布尔
true(真的)值为1;
false(假的)值为0;
(4)null :空对象
(5)undefined :未定义,未初始化,没有进行赋值操作
2、复杂数据类型(引用数据类型)
object 对象
Array 数组
function 函数
数据类型转换
为什么要进行数据类型转换?
数据类型不对,拿不到想要的结果,先转为对应得数据类型再进行运算。
运算符
分类
运算符:
算术运算符(+ - * / % ++ --)
赋值运算符(= 赋值 将等号右边的值赋值给等号左边,+= -= *= /= %=)
比较运算符(== 等于 > >= < <= != 不等于 === 绝对等于 !== 绝对不等于 )
逻辑运算符(&&与 || 或 ! 非
&&与 :表示且的的关系,都为真才为真,一假即假
||或:表示或者的关系,都为假才为假,一真即真
! 非:取反 )
三目运算符(条件 ? 条件成立执行的代码段 : 条件不成立执行的代码段; (三目运算符又称之为问号冒号表达式,一般应用于简单的判断相当于if..else) )
表达式:算术表示式,赋值表达式,判断表达式,逻辑表达式
基础交互
一.元素的获取方式
只要在文档中符合都会获取到
-
id获取
-
基本语法:document.getElementById(id值);
-
document:文档,表示获取的范围
-
get:获取 Element:元素 By:通过..
-
-
返回值:获取到了返回具体的元素,获取不到返回null
-
-
类名获取(className)
-
基本语法:document.getElementsByClassName(类名值);
-
document:文档,表示获取的范围
-
get:获取 Elements:元素(复数) By:通过..
-
-
返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
-
length属性 集合的长度 或 集合中元素的个数
-
集合.length;
-
-
获取集合中具体元素
-
集合[索引]
-
-
用过id获取只能在document下获取,不能自定义获取范围
-
标签名(tagName)
-
基本语法:document.getElementsByTagName(标签名);
-
document:文档,表示获取的范围
-
get:获取 Elements:元素(复数) By:通过..
-
-
返回值:获取到了:返回一个元素集合 HTMLCollection,这个集合由索引和值组成,0对应第一项,1对应第二项依次类推,天生自带length属性,最后一项的索引是集合.length -1; 获取不到 返回一个空集合 长度是0
-
length属性 集合的长度 或 集合中元素的个数
-
集合.length;
-
-
获取集合中具体元素
-
集合[索引]
-
自定义获取范围
父级元素:必须是具体的元素
-
父级元素.getElementsByClassName(类名值);
-
父级元素.getElementsByTagName(标签名);
二.鼠标事件
绑定事件也要是具体的元素,不能够直接去操作集合
-
onclick 单击事件
-
ondblclick 双击事件
-
onmousedown 鼠标按下
-
onmouseup 鼠标抬起
-
onmousemove 鼠标移动
-
oncontextmenu 鼠标右击
-
onmouseover 鼠标移入
-
onmouseout 鼠标移出
-
onmouseenter 鼠标进入
-
onmouseleave 鼠标离开
三.元素操作
原则:给值就是设置,不给值就是获取
元素的所有操作都必须是具体的元素,集合不能直接操作
1.操作元素内容
从元素中获取到的内容都是字符串,没有内容获取到的是空字符串
-
操作表单元素内容
-
设置:表单元素.value = 值;
-
获取:表单元素.value;
-
.操作普通闭合标签
-
设置:表单元素.innerText/innHTML = 值;
-
获取:表单元素.innerText/innHTML;
-
区别:innerText只能识别文本,而innerHTML既可以识别文本,又可以识别标签
2.操作元素属性
操作结构上天生自带的属性
-
设置:元素.属性 = 值; 获取不到返回空字符串
-
获取:元素.属性;
3.操作元素样式
通过style属性去操作元素样式,只能操作元素的行内样式
样式属性:在js中符合驼峰命名法 fontSize
-
设置:元素.style.样式属性 = 样式值;
-
获取:元素.style.样式属性;
window.onload
保证所有的资源(样式,结构,图片,音频,视频...)加载完毕,再去执行函数中的js代码
-
window:属于浏览器的顶层对象
-
onload :资源加载完毕事件
-
例如:
-
window.onload = function(){
//资源加载完毕执行的js代码
}
流程控制
流程控制不是JS独有所有的编程语言都存在流程控制,控制代码执行的顺序或加载流程
-
顺序结构:默认代码从上到下执行
-
分支结构(选择结构) if switch
-
循环结构 for while及do-while for-in
-
关键字:continue break
分支结构
if
1.单分支 if
-
基本语法:
-
if(条件){
-
条件成立执行的代码段
-
}
-
可以把大括号中的代码成为判断体
-
条件可以是表达式也可以单个数据
-
判断体中代码只有一行可以省略{}
-
2.双分支 if-else
-
基本语法:
-
if(条件){
-
条件成立执行的段
-
}else{
-
条件不成立执行的代码段
-
}
3.多分支 if-else if
-
基本语法:
-
if(条件){
-
条件成立执行的段
-
}else if{
-
条件成立执行的段
-
}else{
-
以上条件都不成立执行的代码段
-
}
-
else可以省略
-
switch
-
基本语法:
-
switch(值){
-
case 比较值:条件成立执行的代码段;
-
break;
-
case 比较值:条件成立执行的代码段;
-
break;
-
case 比较值:条件成立执行的代码段;
-
break;
-
default:以上条件都不成立执行的代码段
-
}
-
当前值 和 case后边对应的值进行比较(绝对比较),不同数据类型一定不相等
-
case穿透:当前case对应的情况成立,执行后边的代码段,会将下边case对应的代码段也执行,防止case穿透:在当前代码段结束加break; 结束代码执行
循环结构
for
让特定的代码段执行指定的次数
-
基本语法
-
for(表达式1;表达式2;表达式3){
循环体
}
表达式1:设置初始值
表达式2:循环条件 循环的终值
表达式3:更新循环变量
循环体:特定的代码段
for循环的加载流程
while及do-while
基本语法:
while循环
设置初始值
while(条件){
循环体
更新循环变量
}
do-while循环
do{
循环体
更新循环变量
}while(条件)
-
区别
-
while循环条件不成立一次都不执行,do-while不管条件成立与否最少执行一次,因为先执行的是do中的代码段
-
for循环和while循环的区别
-
for循环一般应用于初始值已知,终值已知,确定的循环次数
-
while循环一般应用于初始值未知,终值未知,循环次数不固定
continue及break
continue和break一般应用于循环中都是用来终止循环操作的,continue和break后边的代码都不执行了,continue是只终止当前这一次循环然后进入下一次循环,break是结束整个循环
for-in循环
-
基本语法:for(var key in 对象){代码段}
-
一般用来循环遍历(迭代)对象
函数
1.基础概念
-
函数的定义:函数就是将具有独立功能的代码块,整合到一起并命名,需要的时候调用即可
-
函数的作用:提高代码重用率,提高代码效率
2.函数的基本使用
-
普通函数
-
基本语法
-
函数的定义 function 函数名(){函数体}
-
函数的调用:函名();
-
-
-
表达式函数
将一个函数当做值进行赋值
-
基本语法
-
定义: var 变量 = function(){函数体}
-
调用:变量();
-
-
3.函数的参数
参数的基本使用
-
参数:涉及到不确定的值,传递不同参数实现了不同的功能
-
基本语法 :
-
function 函数名(形参){
-
函数体->特定功能的代码段
-
} 函数名(实参);
-
形参:形式上的参数
-
实参:具体的值
-
4.作用域
概念:变量或函数使用的范围
作用域的划分
-
全局作用域:script标签以内,函数体以外称之为全局作用域
-
局部作用域:函数执行形成局部作用域(私有作用域)
全局变量变量和局部变量
-
全局变量(全局函数):全局作用域下定义的变量就属于全局变量,可以在任意地方使用或修改
-
局部变量(局部函数):局部作用域下定义的变量就属于局部变量,只能在当前作用域下使用或修改
5.预解析
预解析可以分为:
-
全局作用域下的预解析
-
局部作用域下的预解析
预解析发生在js代码真正执行之前,先进性预解析的操作,把所有带有var和functiuon关键的进行预解析,var进行预解析是只声明不定义,funtion在预解析的时候是声明+定义
-
声明:var a;
-
定义 : a = 100;
函数执行形成私有作用域,这个作用域中的代码从上到下执行,在执行之前也是先进行预解析,这个私有作用域属于栈区,函数的形参赋值在预解析之前函数执行完毕自动销毁(垃圾回收机制)
6.作用域链
首先作用域链是一种查找机制,在当前作用域下用到某个变量或方法(函数),有私有的先用自己私有的,私有的没有就会往上一级作用域进行查找,查找不到再往上一级作用域进行查找,直到找到全局作用域为止,找不到可能就报错了
函数封装及this
代码复用
-
结构一致,功能一样
封装:将实现同样功能的代码段,放到一个函数中,用到了调用即可,提高代码效率或复用性
函数返回值
基本语法:return 值;将函数内部的内容返回到外界
获取经过浏览器渲染的样式
-
基本语法:getComputedStyle(具体元素).样式属性;
-
注意点:
-
只能做获取,不能设置
-
不兼容,IE8及以下没有这个属性
-
-
-
IE下提供了独有的获取经过浏览器渲染样式的属性
-
基本语法:元素.currentStyle.样式属性;
-
this
this表示当前行为执行的主体
javaScript中this不是函数独有的,我们主要研究的是函数中的this
-
1.直接在全局作用域下输出this,this就是window
-
2.在事件处理函数中(将函数当做值赋值给某个事件),this表示当前触发那个元素
-
3.当前函数调用就看前边有没有点,有点点前面是谁就是谁,没有点就是window
定时器与运动函数封装
定时器
定时器的分类
-
延迟定时器:多长时间之后才执行一次 (只执行一次 )
-
应用场景:广告弹出
-
-
间歇性定时器:没隔多长时间就执行一次(只要不清除就一直执行)
-
应用场景:轮播图,倒计时
-
延迟定时器:一般支持最小值4ms 间歇性定时器:一般支持最小毫秒值 10ms
定时器设置
延迟定时器
-
基本语法:setTimeout(fun,time)
-
fun:函数,可以传递实名函数或匿名函数
-
time:时间,单位是ms(单位省略) 1s = 1000ms
-
//广告弹出 var div = document.getElementsByTagName("div")[0]; var span = document.getElementsByTagName("span")[0]; // 设置定时器 setTimeout(function(){ div.style.display = "block"; },3000); span.onclick = function(){ div.style.display = "none"; }
间歇性定时器
-
基本语法:setInterval(fun,time)
-
fun:函数,可以传递实名函数或匿名函数
-
time:时间,单位是ms(单位省略) 1s = 1000m
-
定时器的清除
-
清除延迟定时器
-
基本语法:clearTimeout(timerId);
-
timerId:当前定时器的返回值,是一个唯一的数值。
-
-
-
清除间歇性定时器
基本语法:clearInterval(timerId);
-
timerId:当前定时器的返回值,是一个唯一的数值。
-
Math
数学函数 所有的API都是 Math.方法();
-
Math.abs(数值); 去绝对值
-
Math.max(数值1,数值2,...); 求当前数据中最大值
-
Math.min(数值1,数值2,...); 求当前数据中最小值
-
Math.round(数值); 四舍五入
-
Math.ceil(数值); 向上取整
-
Math.floor(数值);向下取整
-
Math.pow(n,m);n的m次幂
-
Math.sqrt(数值); 开平方根
-
Math.random(); 生成[0-1)左闭右开区间的随机小数
生成某个范围的随机数
-
Math.round(Math.random()*(max-min)+min); 包含开始值也包含结束值
/* 作用:生成某个范围的随机整数 @para:参数 min:小值 max:大值 @return 随机数值 */ function getRandom(min,max){ return Math.round(Math.random()*(max-min)+min); }
Date
日期对象
-
只能通过构造函数的方式进行创建 new Date();
// 创建:只支持构造函数方式进行创建 var date = new Date(); console.log(date); console.log(typeof date);
日期对象的方法
-
getFullYear();获取年
-
getMonth();获取月 0 - 11
-
getDate(); 获取日 1 - 31
-
getDay(); 获取星期几 0 - 6
-
getHours(); 时 0 - 23
-
getMinutes(); 获取分 0 - 59
-
getSeconds();获取秒0 -59
-
getMilliseconds(); 获取毫秒 0-999
字符串对象 *
字符串对象的创建
-
字面量
var str = '字符串';
-
构造函数
var str = new String('字符串');
规则:字符串所有的属性和方法都不会改变原来字符串
字符串对象的属性及方法
-
length:字符串的长度或字符的个数
-
变量[索引]; 获取对应的某个字符,IE7及以下不兼容 获取到的值是undefined
-
变量.charAt(index); 获取对应的某个字符
-
变量.charCodeAt(index); 获取对应某个字符的(ASCII)Unicode编码(在电脑系统中的编码)范围 0 -- 65535
-
indexOf(str,[index]) /lastIndexOf(str,[index]); 判断当前字符串中是否包含某个字符串,返回首次/最后一次出现的索引,不包含返回-1
-
str:字符串
-
[index]:可以省略 可以传递一个索引,相当于从这个位置开始查找,indexOf默认是从索引为0开始进行查找,传递第二个参数就从当前位置进行查找,lastIndexOf默认是从末尾开始向前进行查找
-
字符串的方法
-
toUpperCase() / toLowerCase(); 转为大写/小写字符串
-
trim(); 去除首尾空格
-
replace(searchStr,replaceStr); 将查找到的字符串用新的字符串替换 一次只能替换一处
-
searchStr:查找的字符串
-
replaceStr:替换字符串
-
-
split("分隔符"); 将字符串以某个字符串(分隔符)进行分割,返回值一个数组
数组对象
数组是存储任意数据的集合,数组由索引和值组成,天生自带length属性,索引0对应第一项,1对应第二项依次类推,最后一项的索引是arr.length -1;
数组对象的创建
-
字面量 : [] 不给数据就是空数组
-
构造函数:new Array(); 不给数据就是空数组
数组对象的增加修改和删除
var arr1 = [10, 20, 30, 100, 200, 1000, 2000]; /* push(数据,...); 作用:在数组末尾进行增加 参数:增加的数据,数据可以是一个也可以是多个,多个之间用逗号隔开 是否改变原数组:改变 返回值:返回增加后数组的长度 */ var resArr1 = arr1.push("哈哈", "呵呵"); console.log(resArr1, arr1); /* pop(); 作用:在数组末尾进行删除,删除一项 参数:无 是否改变原数组:改变 返回值:返回删除的哪一项 */ var arr2 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr2 = arr2.pop(); console.log(resArr2, arr2); /* unshift(数据,...); 作用:在数组开头进行增加 参数:增加的数据,数据可以是一个也可以是多个,多个之间用逗号隔开 是否改变原数组:改变 返回值:返回增加后数组的长度 */ var arr3 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr3 = arr3.unshift({ name: "哈哈" }); console.log(resArr3, arr3); /* shift(); 作用:在数组开头进行删除,删除一项 参数:无 是否改变原数组:改变 返回值:返回删除的哪一项 */ var arr4 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr4 = arr4.shift(); console.log(resArr4, arr4); // splice(startIndex,n); // 作用:从startIndex索引开始删除n项 // 参数:startIndex开始索引 n:个数 // 是否改变原数组:改变 // 返回值:将删除的每一项以一个新的数组进行返回 ,没有删除返回空数组 var arr5 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr5 = arr5.splice(2, 3); console.log(resArr5, arr5); // splice(startIndex); 只传递开始索引,从当前索引开始删除到末尾 var arr6 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr6 = arr6.splice(3); console.log(resArr6, arr6); // 替换 // splice(startIndex,n,content,...); 从当前索引开始删除n项用content进行替换 var arr7 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr7 = arr7.splice(2, 3, "哈哈", { name: "哈哈" }); console.log(resArr7, arr7); // 增加 // splice(startIndex,0,content,...); 从当前索引开始删除0项用content进行替换,插入到开始索引之前 var arr8 = [10, 20, 30, 100, 200, 1000, 2000]; var resArr8 = arr8.splice(2, 0, "哈哈", { name: "哈哈" }); console.log(resArr8, arr8);
数组对象的方法
// 数组对象的方法 // indexOf(数据,[index])/lastIndexOf(数据,[index]); 首次/最后一次出现的索引,不包含返回-1 (不兼容IE8及以下) var arr4 = [10, 20, 30, 10, 200, 10, 2000]; console.log(arr4.indexOf(10, 2)); console.log(arr4.indexOf(100000)); console.log(arr4.lastIndexOf(10, 2)); // join(拼接符); // 作用:将数组用拼接符进行拼接返回一个字符串 // 参数:字符串 // 返回值:字符串 var arr5 = [10, 20, 30, 10, 200, 10, 2000]; var resStr5 = arr5.join("+"); console.log(resStr5, arr5); // concat(数据1,数据2,..); // 作用:做数据的拼接(数组的合并) // 参数:任意数据 // 返回值:一个新的数组 var arr = [10, 20]; var resArr = arr.concat([10, 20, 30], "哈哈", { name: "哈哈" }); console.log(resArr, arr); var arr1 = [20, 30, 40]; var arr2 = [200, 300, 400]; var newArr = arr1.concat(arr2); console.log(newArr); // reverse(); 倒叙,翻转 // 作用:将原数组进行倒叙 // 参数:无 // 是否改变原数组:改变 // 返回值:倒叙后的数组 var testArr = [10, 20, 30, 40, 50, 60]; var resTestArr = testArr.reverse(); console.log(resTestArr); console.log(testArr); // slice(startIndex,endIndex); // 作用:数组的截取 // 参数:startIndex->开始索引 endIndex->结束索引 (不包含结束索引) // 是否改变原数组:不变 // 返回值:将截取到的内容以一个新的数组返回,截取不到返回空数组 // 不传递参数,默认从索引0开始截取到末尾相当于克隆一份一模一样的 // 传递一个:从当前索引开始截取到末尾 // 支持负数索引:最后一项是-1 ,截取都是从前向后截取的 开始索引要小于结束索引 var test1Arr = [10, 20, 30, 40, 50, 60]; var resTest1Arr = test1Arr.slice(1,4); console.log(resTest1Arr); console.log(test1Arr); console.log(test1Arr.slice()); console.log(test1Arr.slice(3)); console.log(test1Arr.slice(-5,-2));
数组的算法
数组去重
var arr = [1, 1, 2, 1, 1, 2, 4, 4, 2]; //核心思想 用当前项和数组当中后边的每一项进行比较,如果当前项和后边这一项相等就删除后边一项 for (var i = 0; i < arr.length; i++) { for (var j = i + 1; j < arr.length; j++) { // 当前项和后边这一项 if (arr[i] == arr[j]) { arr.splice(j, 1); j--; } } } console.log(arr);
// 第二种方式 (indexOf/lastIndexOf->IE8及以下不兼容) var arr1 = [10,20,30,40,100,200,10,20,30,40,100,200]; // 新创建一个数组 var newArr = []; for(var i = 0;i<arr1.length;i++){ var cur = arr1[i]; // 如果新的数组中不包含这一项 就添加到新的数组中 if(newArr.indexOf(cur) == -1){ newArr.push(cur); } } console.log(newArr);
数组排序
-
选择排序
var arr = [8,6,3]; for(var i = 0;i<arr.length;i++){ for(var j = i+1;j<arr.length;j++){ // 当前项大于后边这一项 if(arr[i] > arr[j]){ // 交换位置 var temp; temp = arr[i]; arr[i] = arr[j]; arr[j] = temp; } } } console.log(arr);
-
冒泡排序
var arr = [4, 3, 5, 2, 1]; // 轮数 for(var i = 0;i<arr.length-1;i++){ // 次数 for(var j = 0; j<arr.length-1-i;j++){ // 当前项大于后一项就交换位置 if(arr[j] > arr[j+1]){ var temp; temp = arr[j]; arr[j] = arr[j+1]; arr[j+1] = temp; } } } console.log(arr);
数组的排序方法
// sort方法改变原数组,返回值是排好序的数组 var arr = [11, 9, 8, 5, 2, 1, 4, 22, 3]; // 不传递参数 默认是按照字符串的ASCII值比较的 默认升序 // sort(); var resArr = arr.sort(); console.log(resArr); console.log(arr); // 传递参数 // sort(callBack); // callBack:函数 // 数值排序 //callBack 函数是sort方法内部去给我们调用的,是根据返回值的正负进行比较 (相减的结果要么是正数,要么是负数) var arr1 = [11, 9, 8, 5, 2, 1, 4, 22, 3, 100, 200, 88, 66, 55]; var resArr1 = arr1.sort(function (a, b) { console.log(a, b); // return a - b; //升序 return b - a; //降序 }); console.log(resArr1); console.log(arr1); var arr2 = [{ name: "王五", age: 100, date: "1910-4-2", name1: "Hllo" }, { name: "张三", age: 80, date: "1960-8-2", name1: "hi" }, { name: "李四", age: 70, date: "1970-8-2", name1: "Joy" }, { name: "王二麻子", age: 70, date: "1970-4-2", name1: "bors" }, ]; console.log(arr2); // 按照年龄排序 // var resArr2 = arr2.sort(function (aObj, bObj) { // console.log(aObj, bObj); // console.log(aObj.age, bObj.age); // return aObj.age - bObj.age; // }); // console.log(resArr2); // 出生日期 // var resArr2 = arr2.sort(function (aObj, bObj) { // return new Date(bObj.date) - new Date(aObj.date); // }); // console.log(resArr2); // 按照名字(中文)进行排序 // return 字符串.localeCompare(字符串,"zh"); 按照拼音进行排序的 // var resArr2 = arr2.sort(function(a,b){ // // return a.name.localeCompare(b.name,"zh"); //升序 // return b.name.localeCompare(a.name,"zh"); //降序 // }); // console.log(resArr2); // console.log(arr2); // return 字符串.localeCompare(字符串); 按照英文字母进行排序的 var resArr2 = arr2.sort(function (a, b) { return b.name1.localeCompare(a.name1); }); console.log(resArr2); console.log(arr2);