【沿路行走】-javascript

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量263 收藏
点赞数
分类专栏： web3 文章标签： javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/huxixi_2/article/details/126663920
版权

简单介绍

javascript是html和css之间的粘合剂，是浏览器可以运行的变成语言

javascript代码放在html文件<script>标签中：

<script> 标签放在<head>标签中

<script>

js代码

</script>

或者有本地或远程js文件

<script src="style.js"></script> 

基本语法

变量声明

var 变量名;//可以重复声明同名变量并覆盖

变量名=变量值；//变量赋值

let 变量名=变量值;  //需要浏览器支持javascript 6及以上

使用let声明变量，同名变量只允许声明一次，不会发生同名变量覆盖问题

定义变量后最好必须给它赋值

const 常量名=常量值；//定义不可变变量，对象类型常量指向不可变，基本类型，常量值不可变

变量类型

javascript没有数据类型，所有变量都用var/let声明

可以是任意类型：数字，字符串，对象

定义好变量并赋值后可以使用

查看变量真实类型

typeof 变量名;//查看变量真实类型

  • Number:正负整数/浮点数/科学计数（1e10)/八进制（010以0开头）/十六进制（0xffff)/+（-）Infinity/NaN

判断一个数是否为正整数：num > 0 && Number.isInteger(num)

javascript在底层以64bit的双精度浮点类型表示 ：

 所以会有精度问题：0.1+0.2不等于0.3

运算符

number运算符：

加+

减-

乘*

除/

取余%

自增++

自减--

字符串

可以用双引号或者单引号括起来的串

字符串操作符

 +拼接

+=

s[index];//索引定位元素

s.concat(s1,s2..);//拼接多个字符串

s.toUpperCase();转大写

s.toLowerCase();转小写

s.replace(before, after);//替换字符串中的before为after字符串中的元素不能用索引方式定位修改

String.fromCharCode(parseInt(binArr[i], 2))//从二进制转换成10进制，然后根据10进制编码转换成字符串

String本质是字符数组,也可以使用下面数组的方法

数组

var daysOfWeek = [];//声明数组

var gradesInMaths = [12, 7, 14, 18, 9, 11];

可以下标访问 gradesInMaths[0];

数组长度：gradesInMaths.length;

添加元素：

直接使用没有元素的下标赋值：gradesInMaths[6]=100;

使用push：gradesInMaths.push(200）添加元素到数组最后

pop();移除并返回最后一个元素

shift();移除并返回第一个元素

unshift();添加元素到数组首部

splice(i,j);从索引i位置开始，移除j个元素

splice(i,j,e1,e2..)j后面的元素为在起始位置删除j个元素后插入的元素

slice(i,j)返回切片[i,j)

...arr数组的所有元素，需要用在函数参数或者[]包围使用

concat() 拼接两个数组，返回一个新数组 [...].concat([...]);

arr.indexOf(elem) 元素索引，-1没有找到

判断一个元素是否是数组：Array.isarray(elem);

[a, b] = [b, a]交换两个变量的值

[a,b,...arr]=[1,2,3,4,5,6] //a=1,b=2, arr=[3,4,5,6]

转义符

\

字符串和Number互相转换

字符串转Number:对字符串型Number进行运算，自动转换成Number:

方式一：

  1. var s = '1'; s = 3 * s; typeof s;
  2. "number"

方式二：

let num = parseInt("100");//解析转 

number转字符串 

number + "";//和字符串相加即转为字符串

object类型

使用{}

比如：var p = {givenName:'Michel', familyName: 'Buffa'};

访问属性：

可以使用p.givenName这样访问属性值

也可以使用p[属性名]

增加属性

p.newpropertie = value;

p[新属性名] = value;

删除属性：

delete p.givenName;

对象是否包含某属性：

object.hasOwnProperty(property);

对象的所有Key组成的数组

Object.keys(obj);返回obj对象的所有Key组成的数组

定义变量对象的内容也不能改变：

Object.freeze(变量名)；

构造函数

function Dog(){

this.property = value;

}

使用构造函数新建一个对象实例：let newInstance = new Dog();

判断一个实例是否是通过构造函数构造的：

instance instanceof Dog;

使用prototype定义所有实例都相同的属性：

Dog.prototype.numLegs = 4;

Dog.prototype = {

constructor: Dog,//对象赋给 prototype会导致constructor属性被覆盖，需要显示重新定义

使用某个原型创建对象：

let duck = Object.create(Animal.prototype)；

让子类继承父类的proto：

Duck.prototype = Object.create(Animal.prototype)；

这样子类就可以使用父类中的方法;子类也可以自己特有的方法：

Duck.prototype.newProp = function(){};

遍历对象的所有属性：

for(let prop in instace){};

对象数组：

使用map遍历对象元素

可以根据传入map的函数作用在每个元素上，返回一个数组包含每个元素的返回值：

const result = users.map(user => ({user.name}));

返回每个对象的name元素数组。

filter()类似map，返回使传入的函数的结果为true的元素

reduce()迭代处理元素

arr.reduce((sum,item) => sum += item.age, 0);返回元素求和的值,第二个元素0是初始化返回值

返回对象：

const usersObj = users.reduce((obj, user) => {
  obj[user.name] = user.age;
  return obj;
}, {});

sort()排序数组

可以传入一个函数，函数返回0两个元素位置不变，返回> <0的大的往后

split()，按照指定的分隔符，返回字符串的字符串数组

const str = "Hello World";
const bySpace = str.split(" ");

str.split(/\W/) 正则表达式在//之间

基于首字母大写拆分：return str.trim().split(/(?=[A-Z])/);

join()是split反操作，将字符串数组通过指定的连接符转换成字符串

every()；传入函数，返回boolean值，数组中的每个元素是否都让这个这个函数返回true

const numbers = [1, 5, 8, 0, 10, 11];

numbers.every(function(currentValue) {
  return currentValue < 10;
});

some()，同every,作用是只要有元素满足函数中定义的条件，就返回true. 

函数

定义函数function，如：

  1. function sum(a, b) {
  2.     var c = a + b;
  3.     return c;
  4. }

var othername=function functionName(parameters){};

调用的时候可以用函数变量名othername(parameters)；

调用函数：

  1. var result = sum(1, 2);

函数中内置变量arguments包含函数的所有参数

function destroyer(arr) {

let newArr = arguments[0];

for (let i = 1; i < arguments.length; i++){

while(newArr.indexOf(arguments[i]) != -1){

newArr.splice(arr.indexOf(arguments[i]), 1);

}

}

return newArr;

}

可以立即执行的函数：(function(){...})();

console.log(变量)打印到控制台

条件判断

if (foo === undefined) {}

else{}

 switch(variable){

case '***': statments;

break;

......

}

(boolean statment) ? statment1:statment2;

boolean表达式为ture执行表达式1，false执行表达式2；

逻辑运算符

&&(and)

||(or)

!(not)

非boolean值会隐式转换成Boolean值

false:

  • undefined
  • null
  • 0
  • NaN
  • 空字符串

 true:

false之外其他

比较运算符

  • Equal == （类型转换后值相等就可以 1 == '1';是true）
  • Not equal !=
  • Greater than >
  • Greater than or equal >=
  • Less than <
  • Less than or equal to <=
  • Strict equal ===（必须值和类型完全一样）
  • Strict not equal !==
  • NaN == (===)NaN; false
  • isNaN(expr) isNaN(NaN) true

循环

while(condition){}

do statment while(condition);

for(initialization;condition;incrementation){statment}

for(variable in expression){statment}

  1. var michel = {              // michel is an object
  2.     familyName:'Buffa',     // familyName, givenName, age
  3.                             // are its properties
  4.     givenName: 'Michel',
  5.     age: 51
  6. }
  8. for(var property in michel) {   // the for-in will
  9.                                 // enumerate properties
  10.     console.log(property);      // will print "familyName",
  11.                                 // "givenName",
  12.                                 // "age"
  13.     console.log(michel[property]);  // michel['givenName'] same 
  14.                                     // as michel.givenName
  15. }

 循环中也可使用break和continue
 

 类

可以使用new新建一个对象实例

  1. function Hero(name, side) {
  2.     this.name = name; // code outside of methods is usually for initializing
  3.     this.side = side; // the properties. Very often, they match the parameters
  5.     this.speak = function() {
  6.         return "<p>My name is " + this.name +
  7.                ", I'm with the " + this.side + ".</p>";
  8.     }
  9. }
  11. var darkVador = new Hero("Dark Vador", "empire");
  12. var luke = new Hero("Luke Skywalker", "rebels");
  13. var ianSolo = new Hero("Ian Solo", "rebels");
  15. function makeHeroesSpeak() {
  16.     document.body.innerHTML += darkVador.speak();
  17.     document.body.innerHTML += luke.speak();
  18.     document.body.innerHTML += ianSolo.speak();
  19. }

 也可以这样：

  1. class Hero {
  2.     constructor(name, side) {
  3.         this.name = name; // property
  4.         this.side = side; // property
  5.     }
  7.     speak() { // method, no more "function"
  8.         return "<p>My name is " + this.name +
  9.                ", I'm with the " + this.side + ".</p>";
  10.     }
  11. }
  13. var darkVador = new Hero("Dark Vador", "empire");

函数在函数声明前掉用，类只能在类声明后调用

对象可以作为函数的返回值：

  1. function getMousePos(event, canvas) {
  2.     var rect = canvas.getBoundingClientRect();
  3.     var mxx = event.clientX - rect.left;
  4.     var my = event.clientY - rect.top;
  6.     return { // the getMousePos function returns an object. It’s a factory
  7.         x: mx,
  8.         y: my
  9.     }
  10. }

 静态属性和方法

类名.静态属性 定义静态属性，最好在类定义之后初始化

static 方法名 定义静态方法

  1. class Point {
  2.    constructor(x, y) {
  3.       this.x = x;
  4.       this.y = y;
  5.       // static property
  6.       Point.nbPointsCreated++;
  7.    }
  9.    // static method
  10.    static distance(a, b) {
  11.       const dx = a.x - b.x;
  12.       const dy = a.y - b.y;
  14.       return Math.sqrt(dx*dx + dy*dy);
  15.    }
  16. }
  17. // static property definition is necessarily outside of the class with ES6
  18. Point.nbPointsCreated=0;

 对象类型变量放的是对象的地址，相当于指针；普通变量类型存放的是变量值。

比较两个对象变量时，只有两个变量指向同一个对象时它俩才真正相等。

_开头的变量是私有属性，需要使用getter和setter属性访问。get ***(){} set ***(){}

内置类

Array

 parse***

var n = Number('3.1416');强制转化

var n = parseInt('3.1416'); // convert a string to an integer number

var n = parseFloat('3.1416'); // convert a string to a float number

Math

  1. Math.PI;
  2. 3.141592653589793
  4. > Math.SQRT2;
  5. 1.4142135623730951
  7. > Math.E; // Euler constant
  8. 2.718281828459045
  10. > Math.LN2; // Neperian log of 2
  11. 0.6931471805599453
  13. > Math.LN10; // Neperian log of 10
  14. 2.302585092994046

Math.random()返回0-1之间的随机数

Math.round()，四舍五入取整

Math.ceil()，取下限

Math.floor(),取上限

Math.pow(base,pow); base的pow次方

Math.sqrt(num); 开根号

Date

var date = new Date();

JSON

var jsonStr = JSON.stringify(obj); 将对象转化成json

var jsObj  = JSON.parse(jsonStr); json转化成对象

注释

单行注释：//

多行注释：/**/

共享模块代码导入导出

const uppercaseString = (string) => {

return string.toUpperCase();

}

const lowercaseString = (string) => {

return string.toLowerCase()

}

export {uppercaseString, lowercaseString};//导出要共享的函数，在其他文件中可以导入使用

import {uppercaseString} from "./***.js";//导入指定函数

import * as stringFunctions from './string_functions.js';//导入文件中的所有导出函数

stringFunctions.uppercaseString("hello");

stringFunctions.lowercaseString("WORLD!");

正则表达式

.test()测试一个字符串中是否包含指定字符串，返回true or false

let testStr = "freeCodeCamp";
let testRegex = /Code/;
testRegex.test(testStr);

 /substring/ 严格匹配

/s1|s2|s3../ 匹配多个字符串中的一个即可

/s/i 忽略大小写匹配

.match()返回匹配到的字符串

testStr.match(testRegex);

/s/g  这样返回的所有匹配到的字符串，不加g的话只返回匹配到的一个字符串

.匹配任意一个字符

[c1c2c3...]只要匹配其中一个字符即可

[a-z]匹配范围内的任一字符

[^c1c2..]匹配不包含在中括号中的所有

c+：匹配指定字符一到多次

c*：匹配指定字符0到多次

默认是贪婪匹配，?是lazy模式

^s:匹配开头的s

s$ 匹配结尾的s

\w 字符数字下划线[a-zA-Z0-9_]

\W 除字符数字下划线外的其他

\d数字

\D非数字

\s空格

c{3,6} c重复3到6次

c? c可存在可不存在

huxixi_2
关注
专栏目录
【沿路行走】-CSS
huxixi_2的博客
08-31 1986
CSS基础
javascript学习之路1
weixin_44934478的博客
11-08 682
web发展史 Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器。于1993年问世。 1994年11月，Mosaic浏览器的开发人员创建了网景公司（Netscape Communications Corp.），并发布了Mosaic Netscape 1.0 beta浏览器，后改名为Navigator。 js历史 JavaScript作为Netscape Navigator浏览器的一部分首次出现在1996年。它最初的设计目标是改善网页的用户体验。期初JavaScript被命名为LiveSc
freecodecamp笔记
qq_44161722的博客
10-25 308
目前为止，挑战里提到的属性都是应用于 flex 容器（flex 子元素的父元素）的。除此之外，flex 子元素也有很多实用属性。首先介绍的是 flex-shrink 属性。使用之后，如果 flex 容器太小，则子元素会自动缩小。当容器的宽度小于里面所有子元素的宽度之和时，所有子元素都会自动压缩。子元素的 flex-shrink 接受数值作为属性值。
每日学习（JavaScript、ES6）
weixin_52400878的博客
08-25 624
此系列文章来记录我的学习历程。 今日任务：Javascript基础和ES6 共计142道题 Javascript基础： ①注释：行内注释"//" 行外注释/*content*/ ②变量声明: var 变量 在 JavaScript 中以分号结束语句。 变量名称可以由数字、字母、美元符号$或者下划线_组成，但是不能包含空格或者以数字为开头。 ③转义字符：/ 必须对反斜杠本身进行转义，它才能显示为反斜杠。 ④用变量构造字符串 ： var ourStr = "He...
--镇工作总结-沿路招商 沿江开发 沿山绿化 .doc
01-04
**镇工作总结-沿路招商 沿江开发 沿山绿化** **镇地处云南省大理州漾濞县，是漾濞县的东部门户，拥有独特的地理位置和丰富的自然资源。该地区坐落在点苍山西麓，与大理市和巍山县接壤，且位于漾濞江和西洱河的交汇...
工作总结沿路招商沿江开发沿山绿化.pdf
10-03
工作总结沿路招商沿江开发沿山绿化.pdf
重新审视购物中心附近作为交通综合计划的基础-研究论文
05-20
分析表明，最小的停车位，装卸站不足，狭窄的邦加吉道路，驾驶员的纪律性差，缺乏交通教育，三叉戟行驶缓慢以及车辆数量激增，导致公共购物中心沿路的车辆饱和。 公共购物中心附近的交通拥堵是一个主要问题，因此...
经济技术开发区部分路段沿路景观整治改造工程监理.doc
09-26
经济技术开发区部分路段沿路景观整治改造工程监理.doc
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2794
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 835
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 419
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 861
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1282
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 348
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
vue3中动态引入本地图片的两种方法
haodanzj的博客
09-11 246
动态在本地引入图片
JS的输出语句
最新发布
J3259392566的博客
09-13 189
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 509
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 234
echarts饼图内容循环播放实现
vite 中使用 html-minifier-terser
07-28
```javascript const htmlMinifierPlugin = require('html-minifier-terser'); module.exports = { // 其他配置项... plugins: \[ htmlMinifierPlugin({ // 配置项... }) \] } ``` 你可以根据需要配置...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值