内置对象的API Array数组对象 String字符串对象 json字符串 JSON对象 js作用域及变量预解析 引用类型与值类型区别 共享引用 基本包装类型 数组去重

最新推荐文章于 2022-05-10 10:03:20 发布
最新推荐文章于 2022-05-10 10:03:20 发布
阅读量243 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43157612/article/details/113060149
版权
  • 01-内置对象的API
    • a.Date对象获取时间
    • b.Array对象数组加工
    • c.String对象字符串加工
    • d.json字符串的语法格式
    • e.JSON对象的字符串与对象转换应用
  • 02-JS作用域
    • a.js的局部作用域和全局作用域的关系
    • b.js中作用域链的由来
    • c.let的块级作用域应用
  • 03-补充
    • a.值传递和引用传递的区别
    • b.包装类型的概念

01-内置对象的API

1.1-Date日期对象

  • 1.获取当前日期:let date = new Date();
  • 2.获取日期中的年月日时分秒
  • 3.创建自定义日期
   <script>
       /**
        * Date对象：js内置的用于获取当前日期与时间的对象
        *      日期：只有年月日  2018/3/20
        *      时间：只有时间  15：30：00
        *      完整时间：年月日时  2018/3/20 15：30：00
        */
   
       //1.创建一个Date对象
       let date = new Date();
   
       /*时间日期打印*/
       //2.打印当前完整时间:  （1）默认显示当前电脑的时区时间 （2）打印date时会自动转为字符串 date.toString()
       console.log ( date );//Fri Mar 23 2018 20:45:15 GMT+0800 (中国标准时间)
       //3.打印日期：标准版本
       console.log ( date.toDateString () );//Fri Mar 23 2018
       //4.打印日期：本地版本（当前电脑）
       console.log ( date.toLocaleDateString () );// 2018/3/23
       //5.打印当前时间：标准版本
       console.log ( date.toTimeString () );//20:51:17 GMT+0800 (中国标准时间)
       //6.打印当前时间：本地版本
       console.log ( date.toLocaleTimeString () );//下午8:51:17
   
       /*年月日时打印*/
       //1.打印当前年份
       console.log ( date.getFullYear () );//2018
       //2.打印当前月份  范围：0-11 代表 1-12月
       console.log ( date.getMonth () );//2 代表下标2  也就是3月
       //3.打印当前日
       console.log ( date.getDate () );//23
       //4.打印当前星期  范围0-6 代表星期天-星期六
       console.log ( date.getDay () );//5
       //5.打印时
       console.log ( date.getHours () );
       //6.打印分
       console.log ( date.getMinutes () );
       //7.打印秒
       console.log ( date.getSeconds () );
   
       /**创建自定义日期*/
       let date1 = new Date(2020,0,1,12,3,5);//依次传入 年，月，日，时，分，秒
       console.log ( date1 );//Wed Jan 01 2020 12:03:05 GMT+0800 (中国标准时间)
       let date2 = new Date("2022-05-06 12:03:35");
       console.log ( date2 );//Fri May 06 2022 12:03:35 GMT+0800 (中国标准时间)
   </script>

1.2-Array数组对象

  • 数组常用api
    • 连接数组：concat()
    • 将数组元素拼接成字符串：join()
    • 删除数组最后一个元素：pop()
    • 往数组后面添加元素：push()
    • 翻转数组：reverse()
    • 删除数组第一个元素：shift()
    • 查找数组元素：slice()
    • 数组排序：sort()
    • 数组遍历：forEach()
   <script>
       //我们创建了一个数组对象。此时它就已经拥有了内置对象所有的属性和方法
       let arr = [10,20,30];
   
       console.log ( arr.length );//访问数组对象的length属性
   
       //1.连接多个数组:将另一个数组的所有元素都添加到arr的后面
       console.log ( arr.concat ( [ 40, 50 ] ) );//[10,20,30]
   
       //2.将数组中的每一个元素都拼接成一个字符串
       let str = arr.join();//10,20,30
       console.log ( str );
   
       //3.删除数组的最后一个元素
       arr.pop()//删除数组的最后一个元素
       console.log ( arr );//[10,20]
   
   
       //3.往数组的最后面添加一个元素
       arr.push(100);
       console.log ( arr );//[10,20,100]
   
       //4.翻转数组
       let newArr =  arr.reverse();
       console.log ( newArr );//[100,20,10]
   
       //5.删除数组的第一个元素
       arr.shift();
       console.log ( arr );//[20,10]
   
       //6.查找一个数组中的某些元素
       let arr1 = [10,20,70,40,50,60];
       // 第一个参数：start：从那一个下标开始查找 如果为负数则倒着查找
       //第二个参数： end ： 结束位置    start <= 范围 < end
       console.log ( arr1.slice ( 1, 3 ) );//
   
       //7.数组排序
   
       //数组排序方法的参数是一个回调函数：告诉数组内置对象你的排序规则
       //从小到大排序
       let sortArr = arr1.sort(function (a,b)
       {
           return a - b;
       });
   
       console.log ( sortArr );//从小到大
       console.log ( sortArr.reverse () );//从大到小  （将从小到大排序好的数组翻转一下即可）
   </script>

课堂小彩蛋

   //将数组第一个元素移动到最后面
   let arr = [20,55,80,100,6];// [55,80,100,6,20]
   //将数组最后一个元素移动到最前面
   let arr = [20,55,80,100,6];// [6,20,55,80,100]

1.3-String字符串对象

  • 1.获取字符串长度:str.length
  • 2.获取字符串某一个下标字符:str.charAt()
  • 3.拼接字符串:str.concat
  • 4.判断字符串中是否包含某些字符串:str.indexOf()
  • 5.截取字符串:str.substr()
  • 6.修改字符串:str.replace()
  • 7.大小写转换:str.toLowerCase()小写
  • str.toUpperCase()大写
  • 8.分隔字符串：str.split()
   <script>
   
       //字符串常用API介绍
           let str = "一入前端深似海，从此代码是我爹";
           //1 获取字符串长度
           let length = str.length;
           console.log(length);//15
           //2  获取字符串某一个下标字符  （字符串相当于一个伪数组）
           console.log(str[4]);//深
           console.log(str.charAt(4));//担    charAt(下标)函数相当于`字符串[下标]`
           //3  拼接字符串
           let str1 = str.concat("今晚一起吃鸡");//这行代码等价于   let str1 = str + "今晚一起吃鸡";
           console.log(str);
           console.log(str1);//
           //4 判断一个字符串在不在某个字符串里面
           let index1 = str.indexOf("代码");//如果存在，则返回参数字符串首字母所在的下标
           let index2 = str.indexOf("前");
           let index3 = str.indexOf("PHP");//如果不存在，则返回 -1
           console.log(index1, index2, index3);//0,6,-1
           //5 截取字符串  第一个参数：从哪个下标开始截取  第二个参数：截取的长度
           let str2 = str.substr(2, 4);//前端深似
           console.log(str2);
           //6  修改字符串  第一个参数：要修改的字符串  第二个参数：修改后的字符串
           let str3 = str.replace("爹", "我女人");
           console.log(str);//
           console.log(str3);//一入前端深似海，从此代码是我我女人
           //7 大小写转换  (只有英文才有大小写，中文不存在大小写)
           console.log("AKlkshflsLKJHDHL".toLowerCase());//转为小写 aklkshflslkjhdhl
           console.log("AKlkshflsLKJHDHL".toUpperCase());//转为大写  AKLKSHFLSLKJHDHL
           console.log("中文不存在大小写".toLowerCase());//转为小写
           //8 分隔字符串:将字符串按照指定的符号分隔，得到一个数组
           let str4 = "我&爱&你";
           //这个函数的返回值一定是一个数组
           let arry = str4.split("&");//以&符号分隔字符串  [我,爱,你]
           console.log(arry);// [我,爱,你]
           console.log(str4.split(":"));//["我&爱&你"]   如果字符串中没有这个分隔符  也会得到一个数组
   
   </script>

1.4-json字符串

  • json字符串是目前前后端通信的数据载体
    • 前端显示的数据是不会写死，都是后台得到
    • 后台返回的数据格式最常用就是json字符串
  • json字符串格式：与普通对象一样有属性名和值
    • json字符串的属性名字和值都是使用双引号
    • 严格要求：json字符串最后一个属性之后，不能有逗号
  • json字符串的作用
    • 跨平台数据识别统一化
//后台通常返回数据是一个json字符串：为了让不同语言的平台达到数据统一性
//1.json字符串，无论键还是值，无论什么数据类型需要双引号（不识别数据类型，都是字符串）
let json = `{
    "name" : "张三",
    "age" : "18"
    }`

//2.js对象是javascript语言中的对象(识别数据类型)
let js = {
    name : "张三",
    age : 18,
}

//3.注意：js对象也是允许属性有引号的，而且不论单双引号都可以
let jsObj = {
    'name':'张三',
    "age":18
}

//打印输出
console.log ( json,typeof json );	// 字符串
console.log ( js );
console.log( jsObj );

//注意：如果json字符串外面没有引号或者反引号（模板字符串），那么就是js对象

1.5-JSON对象

  • js内部内置了一个JSON对象，专门用于处理JSON格式的数据
    • JSON.parse(’json格式字符串‘)：将json格式字符串转换成js可以识别的格式（对象或者数组）
    • JSON.stringify(js对象或者数组)：将js格式的对象或者数组，转换成json字符串
//1.json字符串，无论键还是值，无论什么数据类型需要双引号（不识别数据类型，都是字符串）
let json = `{
    "name" : "张三",
    "age" : "18"
    }`;

//上述本质就是一个字符串，符合json格式，但是js依然不方便操作
//console.log(json.name);			//undefined

//2.JSON对象转换：将json字符串转成js的对象（当前是个对象格式）
let jsonObj = JSON.parse(json);

//3.js对象操作
console.log(jsonObj.name);			//张三

//4.js将复杂数据传入给其他端(后台登陆)
let loginObj = {
    username:'missyou',				//JSON对象会自动给属性和值改成双引号
    password:'missyoutoo'
}

//5.JSON将js对象转成json字符串
let loginJson = JSON.stringify(loginObj);
console.log(loginJson);

1.6-JSON对象实现新闻展示

  • 利用json字符串和JSON对象实现真实新闻展示
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .news {
            width: 400px;
            margin: 50px auto;
            text-align: left;


        }

        .news li {
            width: 100%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }


        .news a {
            text-decoration: none;
            font-size: 14px;
            color: #222;
            line-height: 20px;

        }

        .news a:hover {
            color: #20a1f1;
        }
    </style>
</head>

<body>
    <script>
        //显示后台提供的新闻信息：news模拟后台返回的数据，为json格式字符串
        //1.接收数据（模拟数据）：外部数组，内部为对象
        const news = `[
            { "category": "要闻", "title": "牢记初心使命 实干笃定前行", "href":"https://news.ifeng.com/c/7wNelHB0SgK" },
            { "category": "要闻", "title": "你以生命相托，我必全力以赴", "href":"https://news.ifeng.com/c/7wM1V3EzQBM" },
            { "category": "要闻", "title": "中国无人战车正式服役：机枪显示惊人杀伤力", "href":"https://tech.ifeng.com/c/7wMT02ftUZ4" },
            { "category": "健康", "title": "独家 | 武汉封城建议者：向武汉人民致敬，向援助武汉的人致敬", "href":"https://finance.ifeng.com/c/7wM0E6Bs8PI" },
            { "category": "汽车", "title": "马斯克发飙：起诉当地政府！总部搬离加州！", "href":"http://auto.ifeng.com/c/7wM43afWMFs" },
            { "category": "汽车", "title": "奇瑞真正的旗舰SUV，车长近5米+2.0T动力，气场不输路虎揽胜", "href":"https://auto.ifeng.com/c/7wIpWtWvHYv" },
            { "category": "房产", "title": "广州即将推出9宗土地 涉及22.2万平米4宗宅地", "href":"https://gz.house.ifeng.com/news/2020_05_11-52744145_0.shtml" }
        ]`;

        //2.JSON转换：将json字符串转换成js的数组
        const newsArr = JSON.parse(news);

        //3.制作字符串：包含div和ul的前半部分
        let newsStr = `
            <div class="news">
                <ul>
        `;

        //4.遍历数组：构造li内部的a标签
        for (let i = 0; i < newsArr.length; i++) {
            //newsArr[i]就是一条具体的新闻对象：{ "category": "要闻", "title": "牢记初心使命 实干笃定前行", "href":"https://news.ifeng.com/c/7wNelHB0SgK" }
            //newsArr[i].category是分类，newsArr[i].title是标题,newsArr[i].href是链接

            //所以这样是不需要进行内部循环遍历的
            //ES6模板字符串应用
            newsStr += `
                <li>
                    <a href="${newsArr[i].href}">【${newsArr[i].category}】${newsArr[i].title}</a>
                </li>
            `;
        }

        // 补全标记
        newsStr += `
            </ul>
                </div>
        `;

        //输出
        document.write(newsStr);


    </script>
</body>

</html>

02-js作用域及变量预解析

1.1-js作用域

  • 1.作用域：变量起作用的范围
    * 2.js中只有两种：全局作用域 局部作用域
    * * 全局作用域：变量在任何地方起作用
    * 全局变量：在函数外面声明
    * 局部作用域：变量只能在函数内部起作用（又叫块级作用域）
    * 局部变量：在函数内部声明
  <script>
  
      //1.全局变量
      let a = 10;
      function fn (  ) {
          console.log ( a );
      }
      fn();
      
      //2.局部变量
      function fn1 (  ) {
          let num = 10;
          console.log ( num );
      }
      fn1();
      console.log ( num );
  </script>

1.2-作用域链

  • 1.作用域链是怎么来的
    • 默认情况下，我们的js代码处于全局作用域，当我们声明一个函数时，此时函数体会开辟一个局部作用域， 如果我们在这个函数体中又声明一个函数，那么又会开辟一个新的局部作用域，以此类推，就会形成一个作用域链
  • 2.变量在作用域链上的访问规则
    • 就近原则：访问变量时，会优先访问的是在自己作用域链上声明的变量，如果自己作用域链上没有声明这个变量，那么就往上一级去找有没有声明这个变量，如果有就访问，如果没有就继续往上找有没有声明，直到找到0级作用域链上，如果有，就访问，如果没有就报错
   <script>
   
       /**
        * 作用域链的由来：默认情况下，我们的js代码处于全局作用域，当我们声明一个函数时，此时函数体会开辟一个局部作用域，
        如果我们在这个函数体中又声明一个函数，那么又会开辟一个新的局部作用域，以此类推，就会形成一个作用域链条
   
        * 变量在作用域链上的访问规则
        *      * 就近原则：访问变量时，会优先访问的是在自己作用域链上声明的变量，如果自己作用域链上没有声明这个变量，那么就往上一级去找有没有声明这个变量，如果有就访问，
        如果没有就继续往上找有没有声明，直到找到0级作用域链上，如果有，就访问，如果没有就报错
        */
   
           //案例
       let num = 10;//0级链   全局作用域链
       //0级作用域
       function f1 (  ) {//函数变量f1本身还是处于0级链（变量f1本身处在全局作用域中，是一个全局变量。函数体中才是局部变量，也就是局部作用域链）
   
           let num = 20;//1级链
           console.log ( num );//20
   
           function f2 (  ) {//1级链
               //2级链
               console.log ( num );//20，当前作用域链未声明，就会找上级作用域链的num变量
               num += 100;//当前作用域链未找到，会从上级寻找 num = 20 + 100
               console.log ( "二级链" + num );//2级链  120
           }
           f2();
           console.log ( "一级链" + num );//120   为什么不是20：因为二级链上并没有声明变量，而是直接获取父级变量修改
       };
   
       //0级作用域
       f1();
       //0级作用域
       console.log ( "0级链" + num );//10
   </script>

1.3-练习：作用域

  • 记住：通常情况下，js中只有函数才可以开辟作用域，其他的语句都不可以
   <script>
   	   //案例1：函数中声明的变量才是局部变量，分支语句与循环语句的大括号中声明的变量仍然是全局变量
       var num = 10;
       if(num > 0){
           var sum = 20;
       }
       console.log ( sum );
   
       //案例2：一般其他语言，循环变量i只能在for循环内部访问（局部变量），在js语言中是全局变量
       for(let i = 0;i<5;i++){
   
       }
       console.log ( i );	
   
       //案例3：函数中可以开辟作用域（局部作用域：块级作用域）
       let name = '张三';
       function fn (  ) {
           name = '李四';
       }
       fn();
       console.log ( name );
   </script>

1.4-js预解析

  • 1.为什么要有预解析机制？
    • 通过前面的学习我们知道，js代码是从上往下执行的，这样有什么不好的地方呢？
    • 实际开发中，往往一个文件中js代码会有很多的函数，而如果我们都把函数的声明写在最上面，那么我们的业务逻辑就会在下面，这样的话开发效率不高
      • 函数毕竟只是保存一段代码的，我们希望可以将函数写在页面的下面，而把一些业务逻辑功能写在代码上面，这样的话维护起来更方便
  • 2.什么是预解析机制
    • （1）其实js代码并不是从上往下执行的，这种说法不严谨
    • （2）预解析：JS在执行代码之前，会把变量的声明提前到所在作用域的最顶端
      • a.只是声明提前（相当于提前开辟内存空间），变量的赋值与函数的调用还是在原地
      • b.函数的声明也会提前
  • 3.预解析的意义（好处）
    • 让函数可以在任意地方调用
   <script>
   
       /*1.代码从上往下执行  -----不严谨
   
       2.预解析：js在执行代码之前，会将代码扫描一遍
       在预解析的时候，js编译器会做一件事：变量的提升
   
       3.变量的提升
           * a.将变量的声明提前到当前作用域的最顶端，赋值还是在原地
           * b.函数的声明也会提前
           *
       4.js预解析意义（好处）：让函数可以在任何地方被调用
   
       5.特殊情况：如果一个变量在声明的时候没有使用var，该变量无论写在什么位置都是全局的，不参与预解析 （不要用）
   
        */
   
       console.log ( num );//undefined
       var num = 10;
       console.log ( num );//10
   
       /*
       let num;
       console.log ( num );
       num = 10;
       console.log ( num );
        */
   
       fn();
       function fn (  ) {
           console.log ( num );
           console.log ( "哈哈哈" );
           var num = 10;
           console.log ( num );
   
           /*
           //函数声明提前
           function fn(){
            var num;
           console.log ( num );//undefined
           console.log ( "哈哈哈" );
           num = 10;
           console.log ( num );//10
           }
   
           //调用语句在原地不变
           fn()
   
            */
       // }
   </script>

1.5-练习：预解析

//练习1
console.log(a);   
var a = "我是变量";
function a() {
    console.log("我是函数");
};
console.log(a);

/*预解析过程

var a;
function a(){  //变量的重复声明
        console.log("我是函数");
};
console.log ( a ) ;
a = "我是变量";//变量的重新赋值
console.log ( a ) ;
* */

//练习2

let num = 10;
fun();
function fun() {
    console.log(num); 
    var num = 20;
}

console.log(num);

/*预解析过程
var num;
fun();
   function fun(){
    var num;
     console.log(num); //undefiend
     num = 20;
   }
num = 10;
console.log ( num );
*/

03-JS补充知识点

1.1-引用类型与值类型区别

  • 引用类型：复杂数据类型，object（Object、Array、Date、RegRex、function）
  • 值类型：基本数据类型，五种：string number boolean undefined null
  • 为什么要有引用类型与值类型?
    • 假设将数据比喻为现实生活中的钱，当我们买东西的时候如果是比较少量的钱，一般我们使用钱包里面的现钱，这样更加快捷方便。如果我们买东西需要使用很多的钱，比如买一辆五百万的法拉利，那么使用现金就不方便，一般我们会把大量现金存到银行，然后使用刷卡来支付
    • 在计算机的内存中，数据的存储也是如此。
      • 1.内存主要有两部分:栈（钱包） 与 堆(银行金库)
      • 2.如果是值类型(基本数据类型)，则数据保存在栈中（数据比较小，读取比较快捷方便）
      • 3.如果是引用类型(复杂数据类型)，则将保存在堆中（银卡），而栈中存储的是这个数据的地址（钱包里面的银行卡）
      • 4.变量只能访问栈中的空间（买东西要么给现金要么刷卡，不会跟别人你把钱存到什么什么银行别人就会把东西给你）
  <script>
       /* 引用类型：array,obejct    数据存储在堆中，地址存储在栈中
           值类型：string number boolean undefined null 数据存储在栈中
  
           区别：值类型：栈中存储的是数据，变量赋值时拷贝的是数据，修改拷贝后的数据不会对原数据造成影响
           引用类型：栈中存储的是地址，变量赋值时拷贝的也是地址，修改拷贝后的数据会对原数据造成影响

       */

      //1.值类型：拷贝的是数据
      var num1 = 10;
      var num2 = num1;					//将num1的数据拷贝一份保存到num2中
      num2 = 100;
      console.log ( num1, num2 );		//修改num2不会对num1造成影响
  
      //2.引用类型:  拷贝的是地址
      var arr1 = [10,20,30,40,50];
      var arr2 = arr1;					//将arr1的地址拷贝一份保存到num2中
      arr2[0] = 100;
      console.log ( arr1, arr2 );		//修改arr2会对arr1造成影响
  </script>

1.2-共享引用

  • JS中实际对象传值不是真正的引用传值（传地址），而是传递引用的副本（call by sharing）：按共享传递
  • 对象赋值的本质是对象引用的副本
    • 保存副本的对象如果是对对象本身进行操作：那么就是引用（操作原对象）
    • 保存副本的对象如果是重新赋值：那么就重新开辟存储空间
//1.对象共享传递
var obj1 = { name: '我是本体' };

//2.对象引用（共享）
var obj2 = obj1;
var obj3 = obj1;

//3.引用的改变效果：如果操作的是对象本身（属性或者方法）那么操作的是原对象obj1，如果把保存引用的变量赋值其他任何类型数据，那么都会重开内存（不影响obj1）
obj2.name = '我是新本体';	//obj2操作的是obj1本身的对象，所以修改是共用的（不开辟新空间）
console.log(obj1);          //{name: "我是新本体"}

obj3 = 1;					//obj3独立开辟内存空间保存1，与obj1和obj2不再有关联
console.log(obj1);          //{name: "我是新本体"}

// 共享引用：共享引用是JS中复杂数据类型的本质传递方式而已

1.3-基本包装类型

  • 本身是基本数据类型，但是在执行代码的过程中，可以调用相关的属性和方法
  • JS中有三种基本包装类型
    • Number
    • String
    • Boolean
  /*
      //问题：为什么num是一个基本数据类型，可以像对象一样调用方法呢？
  
      //基本数据类型
      var num = 10;
      console.log ( typeof num );
	  num.toString () ;
      /*
      本质相当于执行了以下代码（JS解释器检测到num调用来toString()方法，所以快速处理了）
      (1) var num = new Number(10);		// 创建对象
      (2) num.toString();				// 调用对象方法
      (3) num = null;					// 删除对象
       */
       
  
      //对象类型
      var num1 = new Number(10);
  
      /*
      	由于num1本身就是对象类型，所以这里可以直接调用，无需转换
      */
      num1.toString();
      console.log ( num1 );
      console.log ( typeof num1 );//object
  
  
      var str = '111';
	  str.toString();
      /*
      (1)var str = new String('111');
      (2)str.toString();
      (3)str = null;
       */
      
  
  
      var bol = true;
      bol.toString();
      /*
      (1) var bol = new Boolean(true);
      (2) bol.toString();
      (3) bol = null();
       */

	/*
		基本包装类型和引用类型（new Number()/String()/Boolear()的区别
		1.new产生的对象是长期占用内存，直到脚本结束
		2.基本包装类型属于后台瞬发，用完就销毁了对象：对象 = null
		
		所以：String/Number/Boolean，我们在开发中都是使用基本包装类型
	*/

1.4-数组去重

  • 数组去重：将数组中重复的元素去掉
    • JS数组没有删除具体元素的删除（只能删掉值，删不掉元素的索引），可以使用另外一个结构来进行存储
      • 新数组
      • 新对象
    • JS数组虽然本质可以删除第一个和最后一个元素，可以利用这一特性，交换当前重复的元素到最后，然后进行删除（pop() 或者length–）
  <!DOCTYPE html>
  <html lang="en">
  
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Document</title>
  </head>
  
  <body>
      <script>
          var arr = [20, 66, 88, 25, 66, 90, 88, 50];// [20,25,66,88,90,50]
  
          //1.排序法 : 最好理解
  
          // //1.1 对数组排序
          // arr.sort(function(a,b){
          //     return a-b;
          // });
          // console.log(arr);
          // //1.2 声明空数组存储去重后的数组
          // var newArr = [];
          // //1.3 遍历arr，检查arr[i]与arr[i+1]是否相等
          // for(var i = 0;i<arr.length;i++){
          //     if(arr[i] != arr[i+1]){
          //         newArr[newArr.length] = arr[i];
          //     };
          // };
          // console.log(newArr);
  
  
  
  
          //2.开关思想（假设成立法）
  
          // //2.1 声明空数组存储去重后的数组
          // var newArr = [];
          // //2.2 遍历arr，检查arr[i]在不在newArr中
          // for (var i = 0; i < arr.length; i++) {
          //     //开关思想 ： 某种操作结果只有两种清空。布尔类型存储两种情况。
          //     //1.声明开关
          //     var single = true;//假设不在
          //     //2.遍历newArr检查 只要与arr[i]相等
          //     for(var j = 0;j<newArr.length;j++){
          //         if(arr[i] == newArr[j]){
          //             single = false;
          //             break;//只要发现重复元素，后面没有必要比较
          //         };
          //     };
          //     //3. 根据开关结果实现需求
          //     if(single){
          //         newArr[newArr.length] = arr[i];
          //     };
          // };
  
          // console.log(newArr);
          
  
  
          //3.indexOf : 常用
  
          // //2.1 声明空数组存储去重后的数组
          // var newArr = [];
          // //2.2 遍历arr，检查arr[i]在不在newArr中
          // for (var i = 0; i < arr.length; i++) {
          //     if(newArr.indexOf(arr[i]) == -1){//不在
          //         newArr.push(arr[i]);
          //     }
          // };
  
          // console.log(newArr);
  
          //4.对象法
  
          var arr = [20, 66, 88, 25, 66, 90, 88, 50];
  
          /* 核心思路：利用对象的属性名不能重复
              对象的取值赋值特点
                  取值 ： 存在，取值。 不存在，取undefined
                  赋值 ： 存在，修改。 不存在，动态添加
  
          1.声明空对象 ： 检查数组元素是否重复 （元素作为属性名，检查对象有没有这个属性）
          2.声明空数组 ：存储去重后的数组
          3.遍历arr，检查arr[i]是否重复
           */
           var obj = {};
           var newArr = [];
           for(var i = 0;i<arr.length;i++){
              //检查对象有没有 arr[i] 这个属性？
              if(obj[arr[i]] == undefined){//未重复 
                  newArr.push(arr[i]);
                  obj[arr[i]] = 1;//这里赋值目的是为了下一次取值，不是undefined
              }
           };
  
           console.log(newArr);
          
          
          //5.重复元素自我交换删除法
          /*
          	核心思路：判定元素在数组中查到的位置是否是自身（元素是一定能找到的）
          		* 如果是自身：说明当前元素还没有重复
          		* 如果不是自身：说明当前元素在前面已经存在过：交换最后一个元素，然后把最后一个删除
          		
          	步骤：
          	1.遍历数组的每一个元素
          	2.判定当前遍历的元素在当前数组中存在的位置，判定位置是否是当当前自己的位置
          	2.1.是自己位置，说明前面没有重复，忽略
          	2.2.不是自己位置，说明前面已经存在：
          		2.2.1交换最后一个元素过来
          		2.2.2然后删除
          		2.2.3最后一个元素有可能已经与前面重复了，为了不跳过当前新交换的元素，重新从当前元素开始检索	
          */
          arr = [1,1,2,3,5,0,1];
          for (var i = 0; i < arr.length; i++) {
              //判定当前元素在数组中找出的位置
              if (arr.indexOf(arr[i]) != i) {
                  //说明不是自己：前面已经存在过
                  //交换最后一个元素过来（因为最后一个可以删除
                  var temp = arr[i];
                  arr[i] = arr[arr.length - 1];
                  arr[arr.length - 1] = temp;
  			  
                  //删除最后一个元素：两种方式都可以
                  // arr.pop();
                  arr.length--;
                  
                  //最后一个元素有可能已经与前面重复了，所以为了保证安全，被交换过来的元素还要重新经受考验
                  i--;
              }
          }
          
          //注意：以上方式会改变数组中原来元素的顺序位置
  
      </script>
  </body>
  
  </html>
kjs--
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS笔试记录（一）【基本类型与类型转换/字符串与数字的加减/全局的对象/页面生命周期】
明日复明日的博客
04-23 171
基本类型与类型转换 六个原始类型（primitive type）：String、Number、Boolean、Undefined、Null、Symbol(ES6新增)；复杂数据类型Object 是元类型的扩展、有数组Array、Function。 简单数据类型把数据名和值直接存储在栈当中。可以用typeof运算来检测。但是typeof null返回object。 复杂数据类型在栈中存储数据名和...
Array的内置方法api
起风了
08-02 432
Array的内置方法api判断数组与转换数组Instanceof：是一个关键字用来判断A类型是否是B类型返回值类型：boolean var arr1 = [1,2,3]; var arr2 = new Array(); var str1 = "s"; var str2 = new String("s"); alert(arr1 instanceof Array );/
JavaScript基础 ----- a++ 和 ++a 的区别
Lazy_Life的博客
07-27 6226
1.a++ 和 ++a 的区别： （1）a++ ：存储新值，用旧值（上一个值）来计算，也就是输出旧值； （2）++a ：存储新值，用新值（当前的值）来计算，也就是输出新值； 2.实例： （1） var a = 0; console.log(a++) //输出0 // 1 存储新值 // 0 用旧值计算（输出） （...
js中 a++与++a的区别，双重循环的嵌套
m0_46381338的博客
03-22 471
a ++与++a的区别 a++是先赋值给其他为数字类型的变量后自己在+1，而++a则是自己先+1再把值赋给数字类型的变量； 例如：var a =1； var b=a++；此时输出的结果b为1，a为2。 先运算a++ a先赋值给b 所以b为1。之后自己本身在+1这是a结果就等于2 var a =1； var b=++a；此时输出的结果b为2，a...
Js 中 a++ 和 ++a 的区别
刘洋的博客
10-30 240
js 中 a++和++a的区别 a++ 先取a的值再++ ++a 先++在取a 的值
详解JavaScript基础知识（JSON、Function对象、原型、引用类型）
10-18
JavaScript提供了JSON.parse()和JSON.stringify()两个方法分别用于将JSON字符串转换为JavaScript对象，以及将JavaScript对象转换为JSON字符串。 接下来，我们分析Function对象。在JavaScript中，函数是一等公民，每...
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
10-19
JSON.stringify()用于将对象转换为JSON字符串，而JSON.parse()则将JSON字符串解析回JavaScript对象。但这种方法会丢失对象的方法，只保留属性。 4. **大小写切换**： 使用正则表达式可以方便地进行字符串大小写的...
浅析JavaScript中两种类型的全局对象/函数
10-26
2. 函数属性的全局对象（Function Properties of the Global Object）：这类对象包括了一系列的函数方法，比如eval()用于执行一段字符串代码，parseInt()用于将字符串转换为整数，isNaN()用于判断一个值是否是非数字...
JavaScript中的全局对象介绍
10-24
这些构造器允许创建不同类型的对象，如Date()用于处理日期和时间，RegExp()用于处理正则表达式，String()、Object()和Array()用于分别创建字符串、对象和数组类型的实例。这些构造器是JavaScript面向对象编程的基础...
js中 ++a和a++的区别
weixin_44237840的博客
05-10 480
定义： a++ 先进行赋值，然后再进行自增 ++a 先进行自增，然后再进行赋值 注意：a++的时候比如a是2 a++的时候a++是2 那么此时 a等于3,直接就是先加 ++a直接等于3 那么此时a也是3 var a = 2; console.log(a++ + ++a + a++ + ++a) // 16 var a = 12; var sum = a++ + ++a + ++a * 2 + a-- + --a; console.log(sum) // 84 直接进行计算就ok var x = 1;
js 中a++ ,和++a的区别以及理解使用
qq_36605711的博客
03-25 8425
1.先说一下 原理吧 ,a++是表示先把值赋给其他为数字类型的变量，自己在+1。而++a 是自己先+1， 再把值赋给数字类型的变量；其实原理还是运算符的优先级不同 2 举个列子说明一下比如一以下代码。 var a=1; var b=a++;//此时输出结果b为1，a为2 3。对以上的代码我是这样理解的 可以写成 var b; b=a++//因为等于的运算符优先级大于a++这种形式...
js-获取JSON数组的长度
热门推荐
琳
12-02 3万+
假设现在有一个json的数组：var json={a:1,b:2,c:3,d:4}； 要遍历这个数组：如下 for（var i in json）{       alert（i+"="+json[i]）； } 由于json没有length这个属性，那么我们可以先声明一个计数器，一开始计数器为0，遍历完成后可得到json的长度； 把代码写成一个方法，以后可以直接调用： functio
js 获取json数组里面数组的长度
weixin_30345577的博客
10-30 1900
作为一个前端页面开发者第一次处理json数据，遇到了‘js 获取json数组里面数组的长度’？竟然不知道 json没有.length属性（真是要嘲讽下自己），少壮不努力老大徒伤悲啊！以前都是去寻求男朋友帮助，但是最近尝试自己去解决遇到的问题。 我遇到的问题是这样的：***.jsp结尾的页面里面，后端传给我的json数据是一个数组，然后要获取第二个数组contacts里面的数组长度，然后...
Json对象与Json字符串互转(4种转换方式)
weixin_30448603的博客
06-12 1380
1>jQuery插件支持的转换方式： 复制代码代码如下: $.parseJSON( jsonstr ); //jQuery.parseJSON(jsonstr),可以将json字符串转换成json对象 2>浏览器支持的转换方式(Firefox，chrome，opera，safari，ie9，ie8)等浏览器： 复制代码代码如下: JSON.parse(jsonstr...
JavaScript a++和++a的区别
找个地方记录踩坑
11-08 1280
a++ 是a在调用时还是原值，a调用之后才把a的值加上1 ++a 是a在调用之前就先加上1，调用a时其值是a+1 a++ ++a
算法笔记
Y734493585的博客
04-26 572
格式显示 printf("%.nf",浮点数)保留小数n位 printf("%nd",整数) 控制数字至少占n位（默认右对齐） printf("%-nd",整数)控制数字至少占n位，左对齐 printf("%+nd",整数)控制数字至少占n位，显示+号 printf("%±nd",整数)控制数字至少占n位，左对齐，显示+号 转10进制为任意进制 String s=Integer.toString(...
A array output with the style as MWArray
weixin_30722589的博客
10-26 53
MWArray kkk = (MWArray)stdown.stdownload(e1.ToString(), pathstr); -------- dll ---------...
JavaScript进阶笔记：数据类型、数组、对象与DOM操作详解
1. **JavaScript数据类型**：首先，笔记介绍了JavaScript中的基本数据类型，包括数字(Number)、字符串(String)、布尔(Boolean)、null、undefined以及基本的空值。接着，它特别关注了数组(Array)，这是集合数据结构，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值