JS基本用法汇总(持续更新...)

最新推荐文章于 2024-04-24 19:31:26 发布
最新推荐文章于 2024-04-24 19:31:26 发布
阅读量578 收藏 2
点赞数 2
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/King0217/article/details/108829204
版权

文章目录

前言

一个小菜鸡的JS日常使用总结

一、数组篇

1. some

JavaScript Array some() 方法 用于检测数组中的元素是否满足指定条件（函数提供）。

some() 方法会依次执行数组的每个元素：
如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。
如果没有满足条件的元素，则返回false。

例子：判断数组中是否存在重复元素：

let a = [1, 2, 3];
let result = a.some((el, index, arr) => {
    return arr.indexOf(el) !== index;
});
console.log(result);

运行结果：
false

let a = [1, 2, 2, 3];
let result1 = a.some((el, index, arr) => {
    return arr.indexOf(el) !== index;
});
console.log(result1);

运行结果：
true

2. map和reduce

JavaScript Array map() 方法 ：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。不会改变原数据

let array = [1, 2, 3];
let result = array.map((x) => {
    return x * x;
});
console.log(array);
console.log(result);

运行结果：
[1, 2, 3]
[1, 4, 9]

例子：把数字数组全部转化成字符串数组

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(arr);
arr = arr.map(String);
console.log(arr);

运行结果：
[1, 2, 3, 4, 5, 6, 7, 8, 9]
[“1”, “2”, “3”, “4”, “5”, “6”, “7”, “8”, “9”]

例子：格式化字符串数组，规格：首字母大写，其他小写

/**
 * 输入：['asdD','edGs','PHD']
 * 输出：['Asdd','Edgs','Phd']
 * 规格首字母大写，其他小写
 */
function formatStrArr(arr) {
    return arr.map((x) => {
        return x.charAt(0).toUpperCase() + x.slice(1).toLowerCase();
    });
}

console.log(formatStrArr(["asdD", "edGs", "PHD"]));

运行结果：
[“Asdd”, “Edgs”, “Phd”]

JavaScript reduce() 方法：接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。‘
可以做累积、累加等其他规则的累计计算器。

let arr1 = [1, 2, 3, 4, 5, 7, 6];
let arr1Rlt = arr1.reduce((x, y) => {
    return x * 10 + y;
});
console.log(arr1);
console.log(arr1Rlt);

运行结果：
[1, 2, 3, 4, 5, 7, 6]
1234576

例：讲一个字符串转化成数字。 不要使用内置函数

function str2int(s) {
    let strArr = [...s];
    strArr = strArr.map((x) => {
        return +x;
    });
    return strArr.reduce((x, y) => {
        return x * 10 + y;
    });
}
console.log(str2int("234"),typeof  str2int("234"));

运行结果：
234 “number”

3. filter

JavaScript Array filter() 方法 创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。—过滤器

注:空数组不会检查，并且不会改变原数组。

例：数组去重
思路：过滤掉indexOf判断的元素位置和index本身位置不相等的元素。

let a = [1, 2, 3, 3];
let b = a.filter((el, index, arr) => {
    return arr.indexOf(el) === index;
});
console.log(b);

运行结果：
[1, 2, 3]

例：过滤掉字符串数组中的空串

let array1 = ["a", "", "dFG", "", "asdf", "hello world"];
let filterRlt = array1.filter((el, index, arr) => {
    return el && el.trim();
});
console.log(filterRlt);

运行结果：
[“a”, “dFG”, “asdf”, “hello world”]

4.sort

JavaScript sort() 方法 根据ASCII编码排序，需要定义排序函数，按照函数规则排序 。修改原数组

该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。

例子：从小到大排列

let sortArr = [1, 23, 4, 6, 90];
sortArr.sort((a, b) => {
    return a - b;
});
console.log(sortArr);

运行结果：
[1, 4, 6, 23, 90]

例子：从大到小排列

let sortArr = [1, 23, 4, 6, 90];
sortArr.sort((a, b) => {
    return b - a;
});
console.log(sortArr);

运行结果：
[90, 23, 6, 4, 1]

5.every

JavaScript Array every() 方法 用于检测数组所有元素是否都符合指定条件（通过函数提供）。
注意 ：区分some函数，用于检测数组中的元素是否满足指定条件（函数提供）。

every：所有元素都满足条件，返回true，只要有一个不满足(false), 则返回false。
some：如果有一个元素满足条件，返回true，全部不满足，则返回false。

例子：

let newArr = [1, 34, 6, 7, 8, 99, 4];
let everyRlt = newArr.every((el, index, arr) => {
    return el > 3;
});
let someRlt = newArr.some((el, index, arr) => {
    return el > 3;
});
console.log(everyRlt);
console.log(someRlt);

运行结果：
false
true

6. find和findIndex

find() 方法 返回通过测试（函数内判断）的数组的第一个元素的值。没有符合条件的元素返回 undefined
findIndex() 方法 返回传入一个测试条件（函数）符合条件的数组第一个元素位置。没有符合条件的元素返回 -1

let personArr = [{ name: "zhangSan", age: 23 }, { name: "liSi", age: 30 }];
let person = personArr.find((el, index, arr) => {
    return el.age === 23;
});
let personIdx = personArr.findIndex((el, index, arr) => {
    return el.age === 23;
});
console.log(person);
console.log(personIdx);

运行结果：
{name: “zhangSan”, age: 23}
0

7. fill

ES6语法，快速便捷的初始化一个数组 ，但要初始化的数组需要给定初始长度。

例如：

给定长度为0的数组，并试图填充元素1，结果为：[]

 let arr = [];
 arr.fill(1);
console.log(arr);
//  []

给定长度已知为5的数组，并填充元素1，结果为：[1,1,1,1,1]

let arr = [1, 2, 3, 4, 5];
arr.fill(1);
console.log(arr);
// [1, 1, 1, 1, 1]

还可以这样：可任意长度填充 或 指定位置填充

let arr = new Array(5).fill(10);
 console.log(arr);
 // [10, 10, 10, 10, 01]

或者

let arr = Array(5).fill(1);
console.log(arr);
// [1, 1, 1, 1, 1]

或者
let arr = Array(5).fill(1, 2, 4); //填充数组的第3 、4 个元素
console.log(arr);
// [empty × 2, 1, 1, empty]

想一想：
如何快速初始化一个长度为10，元素从1-10的数组 。
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

答案：

Array(10).fill(null).map((_, index) =>  index + 1);

二、对象篇

1. 判断自身属性是否存在

let obj = {
    a: "a",
    b: "b"
};
console.log(obj.hasOwnProperty('a'));    //true
console.log(obj.hasOwnProperty('c'));    //false

JavaScript 并没有保护 hasOwnProperty 属性名，因此，可能存在于一个包含此属性名的对象。

let object = {
	a:"a",
	hasOwnProperty:function(){
		return false;
	}
}
console.log(object.hasOwnProperty('a'));     //false
console.log(object.hasOwnProperty('c'));     //false
console.log(object.hasOwnProperty());       //false

如上代码，任何属性判断返回都为false。可以通过使用原型链上的hasOwnProperty 方法解决

let object = {
    a: "a",
    hasOwnProperty: function() {
        return false;
    }
};
let result = Object.prototype.hasOwnProperty.call(object, "a");
console.log(result);   //true

2. 原型继承

现在有两个对象，Animal和 Dog，我们希望 Dog 由 Animal 拓展而来，即：Dog继承于Animal。

Animal对象定义：

function Animal(name) {
    this.name = name;
    this.run = function() {
        return this.name + " running";
    };
}

Dog对象定义：

function Dog(name) {
    this.say = function() {
        return this.name + " said";
    };
}

我们验证其原型链：

let a = new Animal("动物");
let d = new Dog("狗");
console.log(a.__proto__ === Animal.prototype);  //true
console.log(a.__proto__.__proto__ === Object.prototype); //true
console.log(d.__proto__ === Dog.prototype);  //true
console.log(d.__proto__.__proto__ === Object.prototype); //true

由此可见原型关系为如下，二者最终的原型都是Ojbect.prototype, 互相之间没有继承关系。

new Animal() --> Animal.prototype --> Object.prototype ；
new Dog() --> Dog.prototype --> Object.prototype ；

通过上面简单说明，相信大家都能猜出那么正确的原型关系：
new Dog() --> Dog.prototype --> Animal.prototype --> Object.prototype ；
那么我们只要实现这种原型关系即可。

首先，我们修改Dog对象，在Dog对象中调用Animal的构造函数：

function Dog(name) {
    Animal.call(this, name); //调用Animal构造函数 Animal.apply(this, name);
    this.say = function() {
        return this.name + " said";
    };
}

此时我们调用Animal中的方法试试:

let xg = new Dog("小狗");
console.log(xg.run()); //小狗 running

很开心有没有，能调用Animal中的run方法了，那是不是实现继承了呢，我们验证一下：

console.log(xg.__proto__ === Dog.prototype); //true
console.log(xg.__proto__.__proto__ === Animal.prototype); //false

可以看出，原型关系还是不对。

这样不行 我直接把Dog的原型指向Animal，

Dog.prototype = Animal.prototype;

继续验证：

console.log(xg.__proto__ === Dog.prototype); //true
console.log(xg.__proto__.__proto__ === Animal.prototype); //false

还是不行… ^-^

调用构造函数不行，直接共享原型也不行，那么我们借助中间量作为中介转一下可不可以？

//空对象
function F() {
}
F.prototype = Animal.prototype;
Dog.prototype = new F();
Dog.prototype.constructor = Dog;

感觉很完美，那么我们验证：

let xb = new Dog("xiao bai");
console.log('开始验证：');
console.log(xb.__proto__ === Dog.prototype); //true
console.log(xb.__proto__.__proto__ === Animal.prototype); //true
console.log(xb.__proto__.__proto__.__proto__ === Object.prototype); //true
console.log(xb instanceof Animal);//true
console.log(xb instanceof Dog); // true

在这里插入图片描述

啧啧啧，验证也很完美，完美的原型链。至此已实现原型继承。完整代码如下：

function Animal(name) {
    this.name = name;
    this.run = function() {
        return this.name + " running";
    };
}

function Dog(name) {
    Animal.call(this, name);//调用Animal构造函数 Animal.apply(this, name);
    this.say = function() {
        return this.name + " said";
    };
}

//空对象
function F() {
}

F.prototype = Animal.prototype;
Dog.prototype = new F();
Dog.prototype.constructor = Dog;

let xb = new Dog("xiao bai");
console.log("开始验证：");
console.log(xb.__proto__ === Dog.prototype); //true
console.log(xb.__proto__.__proto__ === Animal.prototype); //true
console.log(xb.__proto__.__proto__.__proto__ === Object.prototype); //true
console.log(xb instanceof Animal);//true
console.log(xb instanceof Dog); // true

附加：另一种实现继承的方式，es6语法class。

class Car {
    constructor(name) {
        this.name = name;
    }

    run() {
        console.log("Car Running");
    };

}

class SmallCar extends Car {
    constructor(name) {
        super(name);
    }

    run() {
        super.run();
        console.log("SmallCar Running");
    }
}

let a = new Car("haha");
let b = new SmallCar("haha");
console.log(b.__proto__ === SmallCar.prototype);//true
console.log(b.__proto__.__proto__ === Car.prototype);//true
console.log(b.__proto__.__proto__.__proto__ === Object.prototype);//true

总结

随笔一记，从小小菜鸡变小菜鸡！！！

Hui-1018
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
JavaScript的基本使用（一）
weixin_61561066的博客
05-11 649
一、JavaScript JavaScript是一个脚本语言(嵌入页面中,通过浏览器解析运行) JavaScript的组成 1、ECMAScript：是Javascript的核心，主要规定JavaScript的基本语法。所有的浏览器厂商都会遵循这个语法(标准) 2、DOM：文档对象模型(Document Object Model)，是W3c组织提供的编程接口。用户可以通过DOM的接口去操作页面中的元素 3、BOM：浏览器对象模型(Browser Object Model),独立于内容,可以和浏览器
JS基本用法
yangchunshang的博客
01-10 1518
如何使用JS代码：       使用标签在HTML网页中，JavaScript代码。注意，标签要成对出现，并把JavaScript代码写在之间。       表示在之间的是文本类型(text),javascript是为了告诉浏览器里面的文本是属于JavaScript语言。 引用JS外部文件：       标签在HTML文件中添加JavaScript代码，HTML文件和JS代码可以分开，HT
JS常用语法归纳（全）
最新发布
nx_live的博客
04-24 1893
JS基础语法归纳，快速掌握JS语言
hasOwnProperty.call
月迷津渡丶的专栏
02-12 2244
JavaScript 并没有保护 hasOwnProperty 这个属性名，因此，当某个对象可能自有一个占用该属性名的属性时，就需要使用外部的 hasOwnProperty 获得正确的结果： var foo = { bar: 'Here be dragons' }; foo.hasOwnProperty('bar'); //true var foo1 = { hasOwnProperty: function() { return false; }, bar: 'Here be.
js常用方法总结
qq_53241930的博客
10-08 541
js常用方法总结 一、array 1. new Set（） 用来对数组进行去重。 2. shift（）把数组的第一个元素从其中删除，并返回第一个元素的值（改变原数组）。 3. unshift（） 向数组的起始处添加一个或多个元素,并返回新的长度（改变原数组）。 4. push（）在数组的末端添加一个或多个元素，并返回添加 新元素后的数组长度（改变原数组）。 5. delete 删除一个数组成员，会形成空位，并不会影响length属性（改变原数组）,同样适用于对象。 6. sort（） 对数组元素进行排序
JS的基础语法
m0_56911284的博客
01-11 1995
一篇文章带你了解什么是JS。
vue.js中$set与数组更新方法
01-21
当然vue中给了解决方法，就是使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice，caoncat等修改数组，同时也将触发状态更新： ex： 所以如果在实例创建后添加新的属性到实例上，则不会触发更新。 ps：现在有两...
原生JS打印插件之jQuery.EasyPrint.js使用文档
07-21
原生JS打印插件之jQuery.EasyPrint.js使用文档 调用浏览器自带打印功能，使用JavaScript的 window.print(); 方法。 使用JS实现打印功能；JavaScript 实现打印操作；javascript打印大全；通用；js实现打印的方式；JS...
Node.js的基本知识简单汇总
10-21
本文主要给大家简单介绍了Node.js的基本知识，包括概念、特点、历史、案例的相关资料,需要的朋友可以参考下
探究Javascript模板引擎mustache.js使用方法
10-22
主要为大家介绍了Javascript模板引擎mustache.js使用方法，mustache.js是一个简单强大的Javascript模板引擎，使用它可以简化在js代码中的html编写，压缩后只有9KB，非常值得在项目中使用，感兴趣的小伙伴们可以参考...
Require.js的基本用法详解
10-19
require.js是一个js脚本加载器，它遵循AMD(Asynchronous Module Definition)规范，实现js脚本的异步加载，不阻塞页面的渲染和其后的脚本的执行，并提供了在加载完成之后的执行相应回调函数的功能
js this用法
aq9527的博客
02-20 293
https://www.cnblogs.com/pssp/p/5216085.html
学习js（Jquery）
weixin_30563917的博客
02-12 174
在js中使用&&和|| a() && b() :如果执行a()后返回true，则执行b()并返回b的值；如果执行a()后返回false，则整个表达式返回a()的值，b()不执行；a() || b() :如果执行a()后返回true，则整个表达式返回a()的值，b()不执行；如果执行a()后返回false，则执行b()并返回b()的值；&& 优先级高...
js中this的用法
wyw223的博客
01-20 1045
this是js的一个关键字，随着函数使用场合不同，this的值会发生变化。但是总有一个原则，那就是this指的是调用函数的那个对象 1.全局作用域或者普通函数中this指向全局对象window //直接打印 console.log(this) //window //function声明函数 function bar () {console.log(this)} bar() //window /...
js基础用法全集
duxikuan的专栏
01-28 297
1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:window->(navigator,screen,history,location,document) 5.得到表单中元素的名称和值:document.getElementById("表单中
jsrender的基本使用
热门推荐
Henry_Lin_Wind的博客
08-22 1万+
1、什么是jsrender 一个JavaScript库，允许您定义一次样板结构并重复使用它来动态生成HTML。JsRender为HTML5开发带来了一个新的模板库，它具有无代码标记语法和高性能，不依赖于jQuery，也不依赖于文档对象模型（DOM），支持创建自定义函数并使用纯粹的基于字符串的渲染。 更详细的学习资料可参考专栏：https://msdn.microsoft.com/en-a...
使用hasOwnProperty时报错的解决方法
m0_44981797的博客
05-11 4866
hasOwnProperty hasOwnProperty这个方法是用来查找一个对象是否有某个属性，且查找的属性必须是对象本身的一个成员，但是不会去查找对象的原型链。 使用示例： var obj = { a: 1, fun: function(){}, c:{ d: 5 } }; console.log(obj.hasOwnProperty('a')); // true console.log(obj.hasOwnProperty('fun')); //
set --- Leedcode 448 找到所有数组中消失的数字
小柒的前端之旅
09-25 397
题目 给定一个范围在 1 ≤ a[i] ≤ n ( n = 数组大小 ) 的 整型数组，数组中的元素一些出现了两次，另一些只出现一次。 找到所有在 [1, n] 范围之间没有出现在数组中的数字。 示例: 输入: [4,3,2,7,8,2,3,1] 输出: [5,6] 解析 使用 set 剔除重复元素，再进行遍历。 var findDisappearedNumbers = function(nums) { const n = nums.length; const res = []; co
JS基础语法（一）
既然选择远方，便只顾风雨兼程！
01-24 4824
文章目录JavaScript基础语法（一）一、基本概念1、 编程2、 计算机语言3、 编程语言4、 编程语言和标记语言的区别5、总结6、 计算机基础计算机组成硬件软件数据存储程序运行二、 初识JavaScript1、JS简介2、 JS初体验3、 JS注释4、 输入输出三、 变量1、变量的主要作用2、 变量的使用声明变量赋值变量初始化小案例3、 变量扩展更新变量声明多个变量特殊情况4、 命名规范5、 交换变量四、 数据类型1、 数据类型简介2、 变量的数据类型3、 简单数据类型数字型数字型进制数字范围特殊值字
vue.js 基本用法
07-12
Vue.js 是一种流行的前端 JavaScript 框架，用于构建用户界面。它具有简单易用、灵活和高效的特点。 以下是 Vue.js 的基本用法： 1. 引入 Vue.js：在 HTML 文件中引入 Vue.js 库，可以使用 CDN 或者本地文件。 2. 创建 Vue 实例：使用 Vue 构造函数创建一个 Vue 实例，将其选项传入。 3. 数据绑定：Vue 使用双向数据绑定，你可以在 Vue 实例的 data 选项中定义数据，然后在模板中使用这些数据。 4. 模板语法：Vue 使用模板语法来将数据绑定到 HTML 模板中。你可以使用双大括号语法 {{ }} 来插入变量，也可以使用指令来实现条件渲染、循环和事件处理等功能。 5. 组件化开发：Vue 允许你将应用程序划分为多个可复用的组件。每个组件都包含自己的模板、逻辑和样式。 6. 生命周期钩子：Vue 提供了一些生命周期钩子函数，允许你在组件的不同阶段执行自定义逻辑，例如在组件创建、更新或销毁时。 7. 计算属性和监听器：Vue 提供了计算属性和监听器来处理复杂的数据逻辑。计算属性可以根据依赖的数据动态计算出一个新的值，而监听器可以观察数据的变化并执行相应的操作。 8. 事件处理：Vue 允许你在模板中绑定事件处理函数，通过指令 v-on: 或 @ 来实现。 9. 条件渲染：Vue 提供了 v-if 和 v-show 指令来实现条件渲染，你可以根据条件来控制元素的显示与隐藏。 10. 列表渲染：Vue 提供了 v-for 指令来实现列表渲染，你可以使用它遍历数组或对象，并将每个元素渲染到模板中。 这些是 Vue.js 的基本用法，希望对你有所帮助！如果你还有其他问题，可以继续提问。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

Hui-1018

你的鼓励将是我创作的最大动力

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

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

打赏作者

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

抵扣说明：

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

余额充值