JS基础1

最新推荐文章于 2022-11-20 21:28:32 发布
最新推荐文章于 2022-11-20 21:28:32 发布
阅读量83 收藏
点赞数
分类专栏： 前端 文章标签： javascript css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56722063/article/details/115358151
版权

数据类型

Js基本数据类型

基本数据类型(值类型)：Number、String、Boolean、Undefined、Null、Symbol(es6新增独一无二的值)和Bight(es10新增);

引用数据类型：

Object。包含Object、Array、function、Date、RegExp。
*****基本数据类型，又称值类型

手写深拷贝

/*
深拷贝
*/
const obj1 = {
	age:20,
	name:'xxx',
	address:{
		city:'beijing'
	},
	arr:['a','b','c']
}

const obj2 = deeClone(obj1)
obj2.address.city = 'shanghai'
obj2.arr[0] = 'a1'
console.log(obj1.address.city)
console.log(obj1.arr[0])

/*
	深拷贝
	@param{Object} obj 要拷贝的对象
*/
function deepClone(obj = {}){
		if(typeof obj !== 'object' || obj == null{
			//obj是Null,或者不是对象和数组，直接返回
			return obj
		}
		//初始化返回结果
		let result
		if(obj instanceof Array){
			result = []
		}else{
			result = {}
		}
		
		for(let key in obj){
			//保证key不是原型的属性
			if(obj.hasOwnProperty(key)){
				//递归调用
				result[key] = deepClone(obj[key])
			}
		}
	
		//返回结果
		return result	
}

数据类型判断

  1. typeof 对于基本数据类型判断是没有问题的，但是遇到引用数据类型（如：Array）是不起作用

  2. instanceof 判断 new 关键字创建的引用数据类型

    不考虑 null 和 undefined（这两个比较特殊）以对象字面量创建的基本数据类型

  3. constructor 似乎完全可以应对基本数据类型和引用数据类型 但如果声明了一个构造函数，并且把他的原型指向了 Array 的原型，所以这种情况下，constructor 也显得力不从心

  4. Object.prototype.toString.call() 完美的解决方案

  5. jquery.type()

    如果对象是undefined或null，则返回相应的“undefined”或“null”。

JS数组方法

join()
push()和pop()
shift() 和 unshift()
sort()
reverse()
concat()
slice()
splice()
indexOf()和 lastIndexOf() （ES5新增）
forEach() （ES5新增）
map() （ES5新增）
filter() （ES5新增）
every() （ES5新增）
some() （ES5新增）
1.join，就是把数组转换成字符串，然后给他规定个连接字符，默认的是逗号( ，)书写格式：join(" ")，括号里面写字符串 (“要加引号”),

2.push()和pop()
push(): 把里面的内容添加到数组末尾，并返回修改后的长度。
pop()：移除数组最后一项，返回移除的那个值，减少数组的length。
　　　 书写格式：arr.push(" ")，括号里面写内容 (“字符串要加引号”),
　　　 书写格式：arr.pop( )
　　　
3.shift()和unshift（）（和push，pop相反）
shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
unshift:将参数添加到原数组开头，并返回数组的长度 。

书写格式：arr.shift(" ")，括号里面写内容 (“字符串要加引号”),
　　　　
4.sort()
sort()：将数组里的项从小到大排序
　　　 书写格式：arr.sort( )
sort()方法比较的是字符串，没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数

5.reverse()
reverse():反转数组项的顺序。
书写格式:arr.reverse()

6.concat()
concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
　书写格式：arr.concat()，括号里面写内容 (“字符串要加引号”),
　
7.slice()
slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下，
slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。

书写格式：arr.slice( 1 , 3 )
　　　　
8.splice()
splice()：删除、插入和替换。
删除：指定 2 个参数：要删除的第一项的位置和要删除的项数。
书写格式：arr.splice( 1 , 3 )

插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
书写格式：arr.splice( 2,0,4,6 )

替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。
书写格式：arr.splice( 2,0,4,6 )

9.indexOf()和lastIndexOf()
indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的开头（位置 0）开始向后查找。
　　　　书写格式：arr.indexof( 5 )
lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中， 从数组的末尾开始向前查找。
　　　　书写格式：arr.lastIndexOf( 5,4 )
10.forEach()
forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

书写格式：arr.forEach()

11.map()
map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
　书写格式：arr.map()

12.filter()
filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
书写格式：arr.filter()

13.every()
every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
书写格式：arr.every()

14.some()
some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
书写格式：arr.some()

数组去重

一、利用ES6 Set去重（ES6中最常用）

function unique (arr) {
  return Array.from(new Set(arr))
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
 //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {}, {}]

不考虑兼容性，这种去重的方法代码最少。这种方法还无法去掉“{}”空对象，后面的高阶方法会添加去掉重复“{}”的方法。
二、利用for嵌套for，然后splice去重（ES5中最常用）

function unique(arr){            
        for(var i=0; i<arr.length; i++){
            for(var j=i+1; j<arr.length; j++){
                if(arr[i]==arr[j]){         //第一个等同于第二个，splice方法删除第二个
                    arr.splice(j,1);
                    j--;
                }
            }
        }
return arr;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", 15, false, undefined, NaN, NaN, "NaN", "a", {…}, {…}]     //NaN和{}没有去重，两个null直接消失了

双层循环，外层循环元素，内层循环时比较值。值相同时，则删去这个值。
想快速学习更多常用的ES6语法，可以看我之前的文章《学习ES6笔记──工作中常用到的ES6语法》。
三、利用indexOf去重

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array = [];
    for (var i = 0; i < arr.length; i++) {
        if (array .indexOf(arr[i]) === -1) {
            array .push(arr[i])
        }
    }
    return array;
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
   // [1, "true", true, 15, false, undefined, null, NaN, NaN, "NaN", 0, "a", {…}, {…}]  //NaN、{}没有去重

新建一个空的结果数组，for 循环原数组，判断结果数组是否存在当前元素，如果有相同的值则跳过，不相同则push进数组。
四、利用sort()

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return;
    }
    arr = arr.sort()
    var arrry= [arr[0]];
    for (var i = 1; i < arr.length; i++) {
        if (arr[i] !== arr[i-1]) {
            arrry.push(arr[i]);
        }
    }
    return arrry;
}
     var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
// [0, 1, 15, "NaN", NaN, NaN, {…}, {…}, "a", false, null, true, "true", undefined]      //NaN、{}没有去重

利用sort()排序方法，然后根据排序后的结果进行遍历及相邻元素比对。
五、利用includes

function unique(arr) {
    if (!Array.isArray(arr)) {
        console.log('type error!')
        return
    }
    var array =[];
    for(var i = 0; i < arr.length; i++) {
            if( !array.includes( arr[i]) ) {//includes 检测数组是否有某个值
                    array.push(arr[i]);
              }
    }
    return array
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
    //[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]     //{}没有去重

六、利用hasOwnProperty

function unique(arr) {
    var obj = {};
    return arr.filter(function(item, index, arr){
        return obj.hasOwnProperty(typeof item + item) ? false : (obj[typeof item + item] = true)
    })
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}]   //所有的都去重了

利用hasOwnProperty 判断是否存在对象属性
七、利用filter

function unique(arr) {
  return arr.filter(function(item, index, arr) {
    //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
    return arr.indexOf(item, 0) === index;
  });
}
    var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
        console.log(unique(arr))
//[1, "true", true, 15, false, undefined, null, "NaN", 0, "a", {…}, {…}]

八、利用递归去重

function unique(arr) {
        var array= arr;
        var len = array.length;

    array.sort(function(a,b){   //排序后更加方便去重
        return a - b;
    })

    function loop(index){
        if(index >= 1){
            if(array[index] === array[index-1]){
                array.splice(index,1);
            }
            loop(index - 1);    //递归loop，然后数组去重
        }
    }
    loop(len-1);
    return array;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

九、利用Map数据结构去重

function arrayNonRepeatfy(arr) {
  let map = new Map();
  let array = new Array();  // 数组用于返回结果
  for (let i = 0; i < arr.length; i++) {
    if(map .has(arr[i])) {  // 如果有该key值
      map .set(arr[i], true); 
    } else { 
      map .set(arr[i], false);   // 如果没有该key值
      array .push(arr[i]);
    }
  } 
  return array ;
}
 var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
    console.log(unique(arr))
//[1, "a", "true", true, 15, false, 1, {…}, null, NaN, NaN, "NaN", 0, "a", {…}, undefined]

创建一个空Map数据结构，遍历需要去重的数组，把数组的每一个元素作为key存到Map中。由于Map中不会出现相同的key值，所以最终得到的就是去重后的结果。
十、利用reduce+includes

function unique(arr){
    return arr.reduce((prev,cur) => prev.includes(cur) ? prev : [...prev,cur],[]);
}
var arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN', 0, 0, 'a', 'a',{},{}];
console.log(unique(arr));
// [1, "true", true, 15, false, undefined, null, NaN, "NaN", 0, "a", {…}, {…}]

十一、[…new Set(arr)]

[...new Set(arr)] 
//其实，严格来说并不算是一种，相对于第一种方法来说只是简化了代码

用forEach、indexOf、push实现数组去重
方法一：去重复数据

<script>
Array.prototype.distinct=function(){
var a=[],b=[];
for(var prop in this){
var d = this[prop];
if (d===a[prop]) continue; //防止循环到prototype
if (b[d]!=1){
a.push(d);
b[d]=1;
}
}
return a;
}
var x=['a','b','c','d','b','a','e','a','b','c','d','b','a','e'];
document.write('原始数组:'+x);
document.write("<br />");
document.write('去重复后:'+x.distinct());
</script>

方法二：取重复数据

<script type="text/javascript">
Array.prototype.distinct=function(){
var a=[],b=[],c=[],d=[];
for(var prop in this){
var d = this[prop];
if (d===a[prop])
{
continue;
}//防止循环到prototype
if (b[d]!=1){
a.push(d);
b[d]=1;
}
else {
c.push(d);
d[d]=1;
}
}
//return a;
return c.distinct1();
}
Array.prototype.distinct1=function(){
var a=[],b=[];
for(var prop in this){
var d = this[prop];
if (d===a[prop]) continue; //防止循环到prototype
if (b[d]!=1){
a.push(d);
b[d]=1;
}
}
return a;
}
H默
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
数组常用方法
qq_45700583的博客
10-18 382
数组方法总结： 1.push():该方法向数组末尾加一个或多个元素，并返回数组新长度。 var arr=["孙悟空","猪八戒","沙和尚","唐僧"]; arr.push("二郎神"); arr.push("牛魔王","铁扇公主"); 2.pop():该方法删除数组中的最后一个元素，并返回所删除的元素 var arr=["孙悟空","猪八戒","沙和尚","唐僧"]; arr.pop(); //删除了arr的最后一个元素 "唐僧" 3.unshift()方法:向数组开头添加一个或多个元素，并返回新数
JavaScript js基础用法 示例代码
06-07
本资源主要是关于js基础用法的示例代码 内容包含了js变量定义 js输入输出 js转义符 js注释和编码规范 JavaScript 是一种广泛使用的脚本语言，主要用于网页和Web应用程序的客户端开发。 JavaScript（简称JS）是一种...
数组方法总结（最全）
DJ老邓的博客
01-21 2335
文章目录一、什么是数组二、数组中的方法1. join()2. push()和pop()3. shift() 和 unshift()4. sort()5. reverse()6. concat()7. slice()8. splice()9. indexOf()和 lastIndexOf() （ES5新增）10. forEach() （ES5新增）11. map() （ES5新增）12. filter() （ES5新增）13. every() （ES5新增）14. some() （ES5新增）总结 一、
数组的常用方法大全
热门推荐
U_Are_My_Halo的博客
04-15 6万+
数组的方法 1. join (原数组不受影响) ​ 该方法可以将数组里的元素,通过指定的分隔符,以字符串的形式连接起来。 返回值:返回一个新的字符串 //将数组用 - 符号连接起来 let arr = [1,2,3,4,5]; let str = arr.join('-'); console.log(str)//str = 1-2-3-4-5; 2. split (原数组不受影响) ​ 该方法是......
数组的方法
weixin_46217304的博客
01-27 2807
1.数组的基本操作：unshift（头增）、shift（头删）、push（尾增）、pop（尾删） （1）unshift ：向数组的头部增加1个或者多个成员，返回值是数组的长度，会改变原数组。 var arr = [4,5,6]； var result = arr.unshift(4,5,55); console.log(result); （2）shift：不需要参数，默认从数组的头部移除一项，返...
数组方法
努力让自己幸运...
08-07 425
创建数组 使用 Array 构造函数创建数组 var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array("lily","lucy","Tom"); // 创建一个包含3个字符串的数组 使用数组字面量创建数组 var arr4 = []; //创...
JavaScript js基础学习 示例代码
最新发布
07-03
JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础学习 示例代码JavaScript js基础...
jsjavascript基础教程.zip
05-09
javascript基础 javascript游戏开发之贪吃蛇项目 javascript高级 nodejs开发 nosql数据之Mongodb 【javascript基础】 01-javascript的概述.md 02-字面量和变量.md 03-数据类型和typeof操作符.md 04-运算符.md 05-...
李立超JavaScript基础篇笔记
02-02
JavaScript，简称JS，是由Brendan Eich在1995年创造的一种高级编程语言，最初目的是为了增强网页的交互性，特别是在前端进行表单验证。...这些类型构成了JS编程的基础，理解和掌握它们是学习JavaScript的第一步。
JavaScript基础语法之js表达式
01-19
一般，关于javascript基础语法，人们听得比较多的术语是操作符和语句。但，其实还有一个术语经常使用，却很少被提到，这就是javascript表达式(expression)。 原始表达式(primary exression) 　原始表达式是表达式的...
数组的方法有哪些
m0_61726249的博客
06-10 1418
1.map：遍历数组，返回回调返回值组成的新数组 2.filter过滤 3. some（一真则真）/every（一假则假） 4.join 通过指定连接符生成字符串 5.sort/reverse 排序和反转数组 这两个皆改变原数组 6.push/pop：数组末尾推入和弹出 改变原数组， 7.unshift/shift 数组头部推入和弹出，推入返回长度，弹出返回操作项 8.concat连接数组，两个或多个 9.slice(start,end) 返回截断后的新数组
数组方法大全
m0_66924764的博客
04-23 2694
数组 什么是数组 JavaScript 数组用于在单一变量中存储多个值。 创建数组 1、使用 JavaScript 关键词 new var color= new Array("red", "blue", "green"); 2、使用数组文本创建 var color = ["red", "blue", "green"] 数组常用方法 toString() 把数组转换为数组值（逗号分隔）的字符串。 join() 方法也.
数组常用的函数
m0_74331185的博客
10-18 2540
数组常用函数js
数组的方法有哪些？
qq_57039857的博客
11-20 172
数组的方法
数组的所有方法
weixin_43627806的博客
03-04 2万+
JavaScript中创建数组有两种方式 （一）使用 Array 构造函数： var arr1 = new Array(); //创建一个空数组 var arr2 = new Array(20); // 创建一个包含20项的数组 var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组 （二）var 创建数组 var arr4 = [...
Javscript数组的常用方法有哪些？
铁锤妹妹的博客
03-16 1749
数组基本操作可以归纳为 增、删、改、查，需要留意的是哪些方法会对原数组产生影响，哪些方法不会 下面对数组常用的操作方法做一个归纳 增 下面前三种是对原数组产生影响的增添方法，第四种则不会对原数组产生影响 push() unshift() splice() concat() push() push()方法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新长度 let colors = []; // 创建一个数组 let count = colors.push("red", "green"); /.
数组常用方法汇总
大G的博客
11-07 3万+
Array.length 返回或设置一个数组中的元素个数 设置 length 属性的值来截断任何数组 Array.from() : 对伪数组或可迭代对象(包括arguments Array,Map,Set,String…)转换成数组对象 语法 Array.from(arrayLike, mapFn, thisArg)arrayLike 想要转换成数组的伪数组对象或可迭代对象。mapFn (可选参数
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值