前端基础（八）：克隆、数组、ES3、ES5、ES6

已于 2022-11-05 12:43:02 修改
阅读量422 收藏
点赞数 1
分类专栏： 前端基础 文章标签： js javascript
于 2020-07-15 15:07:38 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-NC-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43526371/article/details/107361037
版权

浅克隆

let copyObj = obj; // 赋值
let copyObj = Object.assign(obj); // 将源对象的属性赋值到目标对象上
let copyArr = arr.concat(); // 连接数组,不传参,则表示复制原数组
let copyArr = arr.slice(); // 截取数组或者字符串，不传参表示默认全部

深度克隆，避免引用值被更改

  • JSON.parse(JSON.stringify(data))
  • $.extend(true, [], data)
var obj = {
    name: 'Lee',
    age: 23,
    arr: [1, 2, 3],
    family: {
        name: 'home',
        son: {
            name: 'aaa',
            fun: function () {
                console.log(this.name);
            }
        }
    }
}
// var obj = [1,2,3]
// var obj = null
// var obj = undefined
// var obj = NaN
// var obj = /asdv/
function deepClone(origin) {
    var target,
        toStr = Object.prototype.toString;
    if(toStr.call(origin) === '[object Object]'){
        target = {};
        for (var key in origin) {
            if (origin.hasOwnProperty(key)) {
                target[key] = arguments.callee(origin[key])
            }
        }
    }else if(toStr.call(origin) === '[object Array]'){
        target = [];
        for (var key in origin) {
            if (origin.hasOwnProperty(key)) {
                target[key] = arguments.callee(origin[key])
            }
        }
    }else{
        target = origin;
    }
    return target;
    // ===> 简写
    // var toStr = Object.prototype.toString;
    // var target = toStr.call(origin) === '[object Object]' ? {} : (toStr.call(origin) === '[object Array]' ? [] : origin);
    // if(toStr.call(origin) === '[object Object]' || toStr.call(origin) === '[object Array]'){
    //     for (var key in origin) {
    //         if (origin.hasOwnProperty(key)) {
    //             target[key] = arguments.callee(origin[key])
    //         }
    //     }
    // }
    // return target;
}
var copyObj = deepClone(obj);
console.log(copyObj);
obj.arr.push(2)
copyObj.arr.push(3)
console.log(obj.arr, copyObj.arr);
obj.family.son.name = 'NAM'
copyObj.family.son.name = 123
console.log(obj.family.son.name, copyObj.family.son.name);
copyObj.family.son.fun = 1;
console.log(obj.family.son.fun, copyObj.family.son.fun);

数组：ES3、ES5、ES6以及ES7操作数组方法

var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
// ES3：
// join(); 连接元素,将数组转化为字符串,不改变原数组
var arr1 = arr.join(""); // 12str4false[object Object]79function(){}0-10
// reverse(); 将数组中的元素颠倒顺序,改变原来的数组
arr.reverse(); // [null, -10, undefined, 0, ƒ, 9, Array(0), 7, {…}, false, 4, "str", 2, 1]
// sort(); 将数组的元素按照一定规则排序,改变原来的数组
arr.sort(function (a, b) { return a - b; }); // [-10, null, 0, ƒ, Array(0), false, 1, 2, 4, 7, 9, {…}, "str", undefined]
arr.sort(function (a, b) { return b - a; }); // [9, 7, 4, 2, 1, null, 0, false, -10, ƒ, Array(0), {…}, "str", undefined]
// concat(); 将参数(参数不限)粘合在数组后面,不改变原数组
var arr1 = arr.concat([1, 2, 3, 4]); // [9, 7, 4, 2, 1, null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined, 1, 2, 3, 4]
var arr1 = arr.concat(function () { }, 123); // [9, 7, 4, 2, 1, null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined, ƒ, 123]
// slice(); 返回数组的一个片段或子数组,不改变原数组
var arr1 = arr.slice(2, 4); // [4, 2] 从第2位(包含第2位)截取到第4位(不包含第4位)
// splice(index,howmany,item1,.....,itemX); 从数组中删除元素、插入元素、或者同时完成这俩种操作,改变原来的数组
// index    必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。
// howmany	必需。要删除的项目数量。如果设置为 0，则不会删除项目。数字大于等于index才有效
// item1, ..., itemX    可选。向数组添加的新项目。
arr.splice(2, 0); // [9, 7, 4, 2, 1, null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined]
arr.splice(2, 0, "ProsperLee"); // [9, 7, "ProsperLee", 4, 2, 1, null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined] 在第2位之前便添加元素,使之成为新的1位
arr.splice(2, 1, "Prosper", "Lee"); // [9, 7, "Prosper", "Lee", 4, 2, 1, null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined] 在第2位之前添加元素,使之成为新的2位
arr.splice(2, 5, "a", "b"); // [9, 7, "a", "b", null, 0, Array(0), -10, ƒ, false, {…}, "str", undefined] 删除第2位到第5+1位 在第2位之前添加元素,使之成为新的2位
// push(); 和 pop(); 向数组中插入或删除元素,改变原来的数组,末尾
// unshift(); 和 shift(); 向数组中插入或删除元素,改变原来的数组,开头
// toString(); 和 toLocaleString(); 将数组的每个方法转化为字符串，并且输出用逗号分隔的字符串列表,不改变原数组
var arr1 = arr.toString(); // 9,7,a,b,,0,,-10,function () { },false,[object Object],str,
var arr1 = arr.toLocaleString(); // 9,7,a,b,,0,,-10,function () { },false,[object Object],str,
console.log(arr);
console.log(arr1);
// -------------------------------------------------------------------------------------------------------------------------------------
var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
// ES5：
// map();  将数组的每个元素传递给指定的函数,并返回一个数组,它包含该函数的返回值,不改变原数组,返回一个新数组
var map1 = arr.map(function (x) { return x * 2; }); // [2, 4, NaN, 8, 0, NaN, 14, 0, 18, NaN, 0, NaN, -20, 0]
var newArr = [function () { return [1, 2] }, function () { return true }, function () { return 'abc' }]
var newMap = newArr.map(function (x) { return x(); }) // 返回的时 x()的结果 [Array(2), true, "abc"]
// filter(); 数组真假过滤器,将数组的每个元素传递给指定的函数，并返回一个数组，它包含该函数,不改变原数组,返回一个新数组
var newArr1 = [function a() { return [1, 2] }, function b() { return false }, function c() { return 'abc' }]
var newMap1 = newArr1.filter(function (x) { return x(); }) // 判断x()真假,返回x [function a() { return [1, 2] }, function c() { return 'abc' }]
// every(); 和 some(); 对数组元素应用指定的函数判定(对于空数组，every() 返回true, some()返回 false)
arr.every(function (x) { return x != 123; }); // true arr中的每一项都不等于123？
arr.every(function (x) { return x != 1; }); // false arr中的每一项都不等于1？
arr.some(function (x) { return x != 1; }); // true arr中有没有不等于1的项？
arr.some(function (x) { return x instanceof Object; }); // false arr中有没有不是对象的项？
// reduce(); 和 reduceRight(); 使用指定的函数将数组元素进行组合,生成单个值,reduce从左加到右,reduceRight相反
var a = [1,3,5,2]
a.reduce(function (a, b) { return a - b; }); // -9
a.reduce(function (a, b) { return -a - b; }); // -1  -(-(-1-3)-5)-2
a.reduceRight(function (a, b) { return a + b; }); // 11 2+5+3+1
// 整理字符串数组为对象格式（比如： a.b.c.d ---> [a,b,c,d] ---> [d,c,b,a] ---> {a:{b:{c:{d:null}}}}）
let keys = 'a.b.c.d'.split('.');
let obj = keys.reverse().reduce((p, c) => ({ [c]: p }), null);
// indexOf(); 和 lastIndexOf(); 搜索数组中具有给定值的元素,返回该元素索引,lastIndexOf() 指从前往后查询. lastIndexOf() 指从后往前查询
// 第一个参数指的是需要搜索的值，返回则找到第一个元素的索引或者如果没有找到就返回-1
// 第二个参数是可选的，它指定数组中的一个索引，表示从哪里开始搜索，可以是负数，它代表相对于数组末尾的个数。最后一个元素是-1
arr.indexOf(-1); // -1
arr.indexOf(1); // 0
arr.indexOf(null); // 13
arr.indexOf(2,2); // -1 从第二位开始找
arr.indexOf(2,1); // 1 从第一位开始找
// -------------------------------------------------------------------------------------------------------------------------------------
var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
// ES6：
// Array.from(); 将类数组对象和可遍历对象转化为数组,浅拷贝
var a = "ProsperLee"; // 类数组
Array.from(a); // ["P", "r", "o", "s", "p", "e", "r", "L", "e", "e"]
// Array.of(); 将一组值转化为数组。
Array.of(a); // ["ProsperLee"]
Array(a); // ["ProsperLee"]
Array.of(5); // [5]
Array(5); // [empty × 5]
// copyWithin(target,start,end); 在数组内部，将指定位置的成员复制到其他位置(会覆盖原有成员)．改变原数组
// target(必须): 从该位置开始替换数据.
// start(可选)：从该位置开始读取数据.
// end(可选)：到该位置的前一个位置.
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.copyWithin(2); // ["a", "b", "a", "b", "c", "d"]  从第二位置开始替换，替换成a数组从左到右(从0到a.length-2-1)的各各元素，不能超出数组长度
var a = ['a', 'b', 'c', 'd', 'e', 'f'];
a.copyWithin(2, 1, 5); // ["a", "b", "b", "c", "d", "e"] 从第二位置开始替换，替换成a数组从左到右(从1到5)的各各元素，不能超出数组长度
// find();返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined
arr.find(function(el){ return Boolean(el); }) // 1
arr.find(function(el){ return !Boolean(el); }) // false
arr.find(function(el){ return el == 123; }) // undefined
// findIndex(); 返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。
arr.findIndex(function(el){ return el == 123; }) // -1
arr.findIndex(function(el){ return el == 7; }) // 6
// fill(value,start,end); 从start开始填充value,填充到end-1位置结束,最大填充为数组长度．改变原数组
var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
arr.fill(0,0,13) // [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, null]
var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
arr.fill(0,5,8) // [1, 2, "str", 4, false, 0, 0, 0, 9, ƒ, 0, undefined, -10, null]
// -------------------------------------------------------------------------------------------------------------------------------------
var arr = [1, 2, 'str', 4, false, {}, 7, [], 9, function () { }, 0, undefined, -10, null]
// ES7：
// includes(); 判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回false
console.log(arr.includes(123)); // false
console.log(arr.includes('str')); // true

数组去重

Array.prototype.unique = function () {
    var temp = {};
    var arr = [];
    var len = this.length;
    for (var i = 0; i < len; i++) {
        if(!temp[this[i]]){
            temp[this[i]] = 'a';
            arr.push(this[i])
        }
    }
    return arr;
}
var arr = ['abc', 12, 5, 'abc', 1, 23, 5];
console.log(arr.unique()); // ["abc", 12, 5, 1, 23]

命名空间

  • 1：使用with的语句很难优化。
  • 2：使用with语句速度要比不使用with语句的等价代码的速度慢得多。
  • 3：在with语句中的函数定义和变量初始化可能产生令人惊讶，和直觉相抵触的行为。
  • 4：90%(或者更高比例)的with应用场景都可以用其他更好的方式代替。
var obj = {
    A:{
        Lee:{
            name: 'Lee'
        },
        Zhang:{
            name: 'Zhang'
        }
    },
    B:{
        Zhang:{},
        Zhao:{}
    }
}
with(obj.A.Lee.name){
    console.log(name); // Lee
}

严格模式 ‘use strict’

  • 不能使用 caller, callee, with
  • 变量必需声明
  • 拒绝重复属性和方法
Prosper Lee
关注
专栏目录
JavaScript对象克隆+数组函数，数组去重+封装（七）
Miracle1203的博客
05-02 6838
JavaScript对象克隆 浅拷贝 浅拷贝引用值是要相互影响的，因为它是栈内存之间的赋值，赋值的是地址，一个更改，其他的都要更改。 var obj = { name :'abc', age : 123, sex : 'female', card : ['visa','master']//存在一个引用值 } var ...
尚硅谷 ES6-12 笔记
LiuKairui的博客
06-18 1585
文章目录ES介绍ES6新特性eval函数(ES3函数补充)let关键字const关键字变量解构赋值模板字符串简化对象写法箭头函数函数默认参数REST参数...Spread扩展运算符Symbol 数据类型迭代器生成器PromiseSetMapclass 类数值扩展对象方法的扩展模块化ES7新特性Array的includes**运算符ES8新特性async & await对象方法的扩展ES9新特性REST参数与Spread扩展正则扩展ES10新特性Object.fromEntries方法trimStar
JavaScript上下文对象详细解析,ES3与ES6
最新发布
sxcsdsg的博客
03-17 389
JavaScript执行环境详细解析,VO对象、scope、this
JavaScript 中的继承：ES3、ES5 和 ES6
weixin_33755557的博客
12-31 154
选择一种继承方式 JavaScript 是一门动态语言，动态意味着高灵活性，而这尤其可以体现在继承上面。JavaScript 中的继承有很多种实现方式，可以分成下面四类： Mixin 模式，即属性混入，从一个或多个对象中复制属性到新的对象中 方法借用模式，即通过 call 或 apply 实现方法的重用 原型模式，使用 Object.create 方法直接以一个对象为原型创造新的对象 类模式，实...
前端克隆
sxm666666的博客
11-03 313
深克隆(深拷贝)/浅克隆(浅拷贝)是我们在学习js基础的时候就接触到的东西。今天我们一起回归复习下！ 在JavaScript中可以将数据类型分为两种：基本数据类型和引用数据类型。基本数据类型的值直接存储在栈内存中。引用类型在栈中仅仅只是存了一个引用。真正的数据存储在堆内存中。下面我们来分析下这两种数据类型。 浅克隆(浅拷贝) 基本数据类型 let a = 1,b = a; b = 3; conso...
ES3、ES4、ES5、ES6区别
weixin_44371237的博客
12-22 834
ES3,ES5,ES6的区别
qq_36457584的博客
07-09 5412
默认参数：{ es3.es5默认参数的写法： function f(x,y,z){ if（y===undefined）{ y = 7; } if(z === undefined){ z = 42; } return x + y +z } console..og(f(1,3)); } { es6默认参数： function f(x,y = 7 , z= ...
前端——JS基础
xzy990727的博客
08-10 999
JavaScript JS：轻量级的客户端脚本编程语言 编程语言 html和css是标记语言 编程语言是具备一定的逻辑的，拥有自己的编程思想（面向对象编程【OOP】，面向过程编程） ——面向对象：C++，Java，PHP，C#，JS ——面向过程：C 目前JS不仅仅是客户端语言，基于NODE可以做服务器端程序，所以JS是全栈编程语言 学习JS，学习它的及部分组成 JS的组成以及ES 1.JS组...
JS基础学习笔记（看珠峰视频记录）
qq_40621681的博客
05-29 2569
常用的浏览器 webkit内核（V8引擎） 谷歌chrome Safari Opera >=V14 国产浏览器 手机浏览器 ··· Gecko 火狐Firefox Presto Opera <V14 Trident +IE +IE EDGE开始采用双内核（其中包含chrome迷你） 谷歌浏览器的控制台（F12/Fn+F12） ELements：查看结构样式，可以修改这些内容 Console：查看输出结果和报错信息，是JS调试的利器 Sources：查看项目源码 Network:
JS笔记(前端小灰狼)
tby_pr的博客
09-08 3482
目录 JavaScript基础语法 序言 JavaScript发展历史（JS） JavaScript能干什么 JavaScript的组成 JavaScript代码的书写位置 行内式 JS 代码（不推荐） 内嵌式 JS 代码 外链式 JS 代码（推荐） JS 中的注释 单行注释 多行注释 变量（重点） 定义变量及赋值 变量的命名规则和命名规范 数据类型（重点） 基本数据类型 复杂数据类型（暂时先不讲） 判断数据类型 判断一个变量是不是数字 数据类型转换 其他数据
闲谈一下，ES3、ES4、ES5、ES6 分别是什么
m0_37695902的博客
07-27 1916
闲谈一下，ES3、ES4、ES5、ES6 分别是什么 上图按照时间顺序说明了JavaScript、JScript和ECMAScript的发展。 显示在网景工作的Brendan Eich临危受命，用十天时间设计出LiveScript的第一个版本。临时发布前为了讨好Sun公司和Java程序员，LiveScript改名为JavaScript。 微软这边不甘示弱，你的浏览器有脚本功能，我的浏览器也要有啊。于是在IE3.0版本附带推出JScript。为什么叫JScript？因...
ES5和ES6
yhwl66的博客
03-17 186
ECMAScript是对应js的基础语法，里面包含js中除dom操作和bom的所有内容。ECMAScript主要拆分为俩个单词 ECMA (欧洲计算机协会) 、Script (脚本)。ECMAScript 简称（es）他主要的版本有..对应的版本管理以及切换是由不同兼容问题产生的。低版本的兼容就比较好，高版本的兼容性较差。在项目中我们可以使用bable.js来进行生成代码的版本切换（后续框架中必然使用的）。
Youtobe前端克隆模板（html + CSS + JavaScript）
最爱喝椰奶
05-20 395
这是为大家准备的资源链接🤐🤐🤐： 提取码：0000 https://pan.baidu.com/s/1IsauT8ScgafP4iTlSjPHlQ?pwd=0000https://pan.baidu.com/s/1IsauT8ScgafP4iTlSjPHlQ?pwd=0000 Youtobe前端克隆模板 前言 本网页主要实现Youtobe的网页克隆 一、系统功能 1.1 开发环境 开发语言：JavaScript 技术：HTML + CSS 框架：BootStrap + JQuery..
前端克隆数据 --JS 深浅拷贝
lazy_tomato的博客
09-20 458
START 番茄我又又又来写点啥啦。 最近敲代码，总是遇到需要修改数据，在前端展示。但是最后并不想修改原数据的情况。所以，需要涉及到数据的拷贝了，数据拷贝又分深拷贝，浅拷贝。所以写一篇文章记录一下。 本文仅个人的想法，能力有限，参考即可，后续对这个有更深入的理解了，再补充。 啰嗦一句，深拷贝浅拷贝 和 深克隆浅克隆，其实都差不多一个意思啦，看个人习惯如何称呼。 JS 的数据类型 在说深浅克隆之前，我想提一下JS的数据类型。 JS数据类型，可以大致分为两种：基本数据类型 和 引用数据类型。 基本数
JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式
孙群
03-15 7980
本文首发于GitHub，《JavaScript原型链以及ES3、ES5、ES6实现继承的不同方式》，欢迎关注我的GitHub。原型执行代码var o = new Object();，此时o对象内部会存储一个指针，这个指针指向了Object.prototype，当执行o.toString()等方法（或访问其他属性）时，o会首先查看自身有没有该方法或属性，如果没有的话就沿着内部存储的指针找到Object
es3，es5语法记要
weixin_37722646的博客
05-12 803
1、没有块级作用域（只用 函数作用域 和 全局作用域） for(var i=0;i<10;i++){ } console.log(i); 等同于 var i=0; for(;i<10;i++){ } console.log(i);
前端 拷贝
qq_41850239的博客
05-22 324
前端 拷贝 记录一下呗！ 需求：将两个变量的数据合并到新的变量的数据中。 浅拷贝：（合并第一种方式） srcObj = { 'name': '明', grade: { 'chi': '50', 'eng': '50' } }; copyObj2 = Object.assign({}, srcObj); copyObj2.name = '红'; copyObj2.grad...
web前端高级JavaScript - 数组和对象的浅克隆与深克隆
lixiaosenlin的专栏
11-18 6237
浅克隆 浅克隆是指：只克隆数组/对象的第一层级内容（开辟新的堆内存），而第二层级及以上层级的内容则直接引用（使用原来第二层级及以上层级的堆内存）。如果对克隆后对象的二级或以上层级进行修改，那么克隆前对象的二级或以上层级也会跟着被修改。 例如：现有一个对象obj1对应堆内存地址0x000，obj1对象中还有个子对象obj1_1对应堆内存0x001，现在想对obj1对象进行浅克隆，则会创建一个新的对象obj2对应新的堆内存地址0x002，对于对象obj1中的基本类型数据则会直接拷贝到obj2中，而obj1中的
ES6对比ES3\ES5
Rainbow
08-12 500
20180812 变量提升 提升是浏览器解析JavaScript的结果。在执行JavaScript代码前，所有变量都会被“提升”，提升到函数作用域的顶部。 function getClothing(isCold){ if(isCold){ var freezing = &amp;quot;Grab a jacket!&amp;quot;; } else{ var hot ...
JavaScript数组方法总结：从ES3到ES5
这篇总结主要关注ES3中的11个核心数组方法，虽然现在我们已经进入了ES6甚至ES2022的时代，但这些基本方法仍然是JavaScript开发的基础。 1. **连接数组的方法：concat()** - concat() 方法用于连接两个或更多的数组...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Prosper Lee

您的赏赐将是我创作的最大动力！

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值