javascript

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);
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值