- 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>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
