js学习笔记

最新推荐文章于 2024-09-25 22:15:48 发布
最新推荐文章于 2024-09-25 22:15:48 发布
阅读量109 收藏 1
点赞数 1
文章标签： javascript 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shy_manOvO/article/details/125049292
版权

js入门

  • js数据类型 6种
  1. Number 数字型
  2. String 字符串型 “” ‘’ ``
  3. Boolean 布尔型 true false
  4. Undefinded 未定义型 （只声明，不定义 缺省）
  5. Null 空
  6. Object 特殊类型 对象类型 （除了上述5种都是特殊类型）标签 数组 函数等

console.log(typeof(x))该语句可以从控制台中看到x的数据类型

数字型 特殊（NaN）
var a= NaN;

数据类型的转换

  1. 数字和字符串进行四则运算，+后转字符串类型，其余都是数字类型
  2. 转布尔类型 数字型非0即为真，非数字型非空即为真（空字符串，空内容，空内存等）
  3. 强制类型转换
var str='123';
var n=number(str);
console.log(n);

如果字符串不是纯数字 那么它就为NaN
字符串转数字 还有 parseInt parseFloat 方法

var n='1.3';
n=parseFloat(n);
console.log(n,typeof n);

结果为 数字型 1.3
如果用parseInt 则结果为1

var a=1.45;
console.log(parseInt(n));

结果为1

  • Math对象
向下取整 Math.floor(n);
向上取整 Math.ceil(n);
四舍五入 Math.round(n);
最大值最小值 Math.max(1,2,3,4,5,6,7,8); Math.min();
随机数 n = Math.random();范围(0,1)
幂数 n = Math.pow(5,2); 值为25 也可以表示为 n = 5 ** 2;
开平方 n = Math.sqrt(9); 3
绝对值 n = Math.abs()绝对值
Math.sin() Math.cos()

函数

使代码更加整洁，提高重要性

function sum(a,b)
console.log(a+b);

function 函数名 （一组参数）{
    代码体
}
一组参数 最多255个参数，也可以不写
参数：形参（声明位置） 实参（调用的位置）
函数返回值（可以有看以没有）
return 返回一个值 结束函数

随机函数 随机产生某个范围内的数字
//要5到20的随机数
function rand(min,max){ 列如(5，20)
    var n = Math.random();
    n = n * (max-min); // [0,15)
    n = Math.floor(n);// [0,14]
    n += min;//[5,19]
    return n；
    //合并一下 
    return Math.floor(Math.random() * (max - min)) + min;
}
rand(5,21);

  • 比较运算符
    == 等于 ！=或者<>不等于（只判断内容大小）
    === 恒等于 ！== 恒不等于 （即判断内容大小又判断数据类型）

  • 逻辑运算符与运算优先级
    && 逻辑与 || 逻辑或 ！逻辑非

  • 三目运算符
    判断条件 ? 对的 : 错的

循环

  • while循环
  1. while{}
  2. do while循环
do while
do{
    代码块
}while（条件）
//至少执行一次代码块

获取元素

通过id名，标签名，类名获取元素；
*

``` ```js var lis=document.getElementByTagName("li");

for(var i=0; i<lis.length; i++){
//遍历
c
lis[i].style.textAlign=“right”;
lis[i].style.backgroundColor=“orange”;
等 都可以通过.style 形式进行设置样式

}

通过标签名和类名获取的元素都是多个

## 基本数据类型与引用数据类型区别

* 基本数据类型 var a=1;是直接存储在栈内存里面，而引用数据类型
var arr1 = [1,2,3];是在栈内存里面储存地址，这个地址指向堆中具体值。

## 对象结构
```js
var cege= { 
    name : "123",
    age:18,
    sex:"man",
}
```js

//访问 
// 1.通过.语法
console.log(cege.name)
cege.name = "234" //修改
// 2.通过 [变量] 
var str = "age";
console.log(cege[str])

// 可以为对象添加任意属性
cege.car = "car"
//删除
delete cege.car

//使用for in 进行对象进行遍历

```js
for(var key in cege){
    console.log(key)
    console.log(cege[key])
}

字符串操作

字符串使用``支持换行 ‘’ 与 ""则不行

$[变量]

获取字符串长度 length

toUppercase()大写 toLowercase()小写

var s=`hello world`
console.log(s.toUppercase(),s.toLowercase())

// split(规则) 以某种规则将字符串转为数组
var str = 你好;
var arr = str.split(“”);

// indexOf 查询下标

var str = "123123";
console.log(str.indexOf[2]);(如果没有则输出-1)

substring(start,end) [)
substr(start,lenght)
 replace(x,y) 用y替换x

日期对象

//Date()

var date = new Date();//获取当前时间戳
console.log(date.getFullYear());
console.log(date.getMonth()); //[0,11]
console.log(date.getDate()); //日期
console.log(date.getDay());//星期几
console.log(date.getTime());//距离1970.1.1的毫秒数

函数补充

function add (){
  var sum = 0;
  for (var i=0;i<arguments.length; i++ >)
  {
    sum+=arguments[i];
  }
  return sum;
  函数参数可以用arguments找到
}

//匿名函数 回调函数

var add = function(){   // add是个变量

}

// 自执行函数

(function(形参){

})(实参)

// 递归函数 函数最后返回自身

function shown(){
  var n=rand(0,12);
  if(n>10){
    return ;
    console.log(n)
    shown();
  }
  shown();
}

function interval(){
  setTimeout(function(){
    console.log()
    interval();
  },1000)
}

// 闭包 （局部变量数据持久化，函数内部嵌套函数，会造成一定的内存压力）

//闭包
for(var i=0;i<buts.length; i++){
  (function(item)){
    buts[item].onclick = function(){
      console.log(item)
    }
  }(i)
}
  item是局部变量 i是全局变量 每一次循环闭包都可以将item值保存并输出
  //对象
  for(var i=0;i<buts.length; i++){
    bus[i].index=i;单独做标记
    buts[i].onclick = function(){
      console.log(this.index)
      //this代表当前事件的拥有者
    }
}

数组常见操作

函数做参数，称之为回调函数
、数组定义
// 直接使用中括号就能定义一个数组，数组中的值的类型不必相同，数组中可以嵌套数组 
var arr = [1, 2, 5, 'init', ['apple', 2, 4]]


2、数组中值的访问与修改
var arr = [1, 2, 5, 'init', ['apple', 2, 4]] // 可以使用下标（或者叫索引）来取数组中的值。下标是从0开始的 

arr[0] // 取下标为0的值，即1 

arr[3] // 取下标为3的值，即'init' 

// 我们可以给数组中某一个下标的值进行重新赋值，即修改该下标的值 
arr[0] = 'name' // 将字符串'name'赋值给数组arr下标为0的位置，此时arr[0]的值就为'name'了，而不是1了


3、数组常见属性
3.1 length
访问一个数组的length属性，返回该数组的长度，即该数组元素的个数

var arr = [1, 2, 5, 'init', ['apple', 2, 4]]
 
arr.length // 返回数组arr的长度，即5


4、数组常见方法
4.1 forEach()
对数组的每个元素执行一次给定的函数

var array1 = ['a', 'b', 'c'] 

array1.forEach( function(element) { 
console.log(element) 
}) 
// 预期输出 
// "a" 
// "b" 
// "c"
4.2 indexOf()
返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

var beasts = ['ant', 'bison', 'camel', 'duck', 'bison'] 
console.log(beasts.indexOf('bison')) // 预期输出: 1 
// start from index 2 
console.log(beasts.indexOf('bison', 2)) // 预期输出: 4
console.log(beasts.indexOf('giraffe')) // 预期输出: -1


4.3 join()
将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目，那么将返回该项目而不使用分隔符。

var elements = ['Fire', 'Air', 'Water'] 
console.log(elements.join()) // 预期输出: "Fire,Air,Water" 
console.log(elements.join('')) // 预期输出: "FireAirWater" 
console.log(elements.join('-')) // 预期输出: "Fire-Air-Water"
4.4 map()
创建一个新数组，其结果是该数组中的每个元素是调用一次提供的函数后的返回值。

var array1 = [1, 4, 9, 16]; // 传入一个回调函数给map方法 
var map1 = array1.map(function (x) { return x * 2 });
console.log(map1); // 预期输出: Array [2, 8, 18, 32]


4.5 pop()
从数组中删除最后一个元素，并返回该元素的值。此方法更改数组的长度。

var plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato']; 
console.log(plants.pop()); // 预期输出: "tomato" 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage", "kale"] 
plants.pop(); 
console.log(plants); // 预期输出: Array ["broccoli", "cauliflower", "cabbage"]


4.6 push()
将一个或多个元素添加到数组的末尾，并返回该数组的新长度。

var animals = ['pigs', 'goats', 'sheep']; 
var count = animals.push('cows'); 
console.log(count); // 预期输出: 4 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows"] 
animals.push('chickens', 'cats', 'dogs'); 
console.log(animals); // 预期输出: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]


4.7 reverse()
将数组中元素的位置颠倒，并返回该数组。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。该方法会改变原数组。

var array1 = ['one', 'two', 'three']; 
console.log('array1:', array1); // 预期输出: "array1:" Array ["one", "two", "three"] 
var reversed = array1.reverse(); 
console.log('reversed:', reversed); // 预期输出: "reversed:" Array ["three", "two", "one"] 
// 注意：该方法会修改原数组 
console.log('array1:', array1); // 预期输出: "array1:" Array ["three", "two", "one"]


4.8 shift()
从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

var array1 = [1, 2, 3]; 
var firstElement = array1.shift(); 
console.log(array1); // 预期输出: Array [2, 3] 
console.log(firstElement); // 预期输出: 1


4.9 slice()
返回一个新的数组对象，这一对象是一个由 begin 和 end 决定的原数组的浅拷贝（包括 begin，不包括end）。原始数组不会被改变。

var animals = ['ant', 'bison', 'camel', 'duck', 'elephant']; 
console.log(animals.slice(2)); // 预期输出: Array ["camel", "duck", "elephant"] 
console.log(animals.slice(2, 4)); // 预期输出: Array ["camel", "duck"] 
console.log(animals.slice(1, 5)); // 预期输出: Array ["bison", "camel", "duck", "elephant"] 
console.log(animals.slice(-2)); // 预期输出: Array ["duck", "elephant"] 
console.log(animals.slice(2, -1)); // 预期输出: Array ["camel", "duck"]


4.10 sort()
对数组的元素进行排序，并返回数组。

var months = ['March', 'Jan', 'Feb', 'Dec']; 
months.sort(); 
console.log(months); // 预期输出: Array ["Dec", "Feb", "Jan", "March"] 
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(); 
console.log(array1); // 预期输出: Array [1, 100000, 21, 30, 4]

// 如果sort()方法调用的时候没有传入回调函数，会将数组转成字符串然后进行大小比较并升序排列，字符串的大小比较是按照字典顺序进行的。所以10000会比21小。

// 如果sort()方法调用的时候传入了回调函数，会按回调函数的返回值来决定相邻两个元素的排序，例如：
var array1 = [1, 30, 4, 21, 100000]; 
array1.sort(function (item1, item2) {
return item1 - item2
}); 
console.log(array1); // 预期输出: Array [1, 4, 21, 30, 100000]

// 这里面的item, item2参数就是array1里面相邻的两个元素
// 如果这个回调函数返回的结果大于0，那么item2将排在item1的前面
// 如果这个回调函数返回的结果小于0，那么item1将排在item2的前面
// 如果这个回调函数返回的是0，那么item1和item2的位置不变


4.11 unshift()
将一个或多个元素添加到数组的开头，并返回该数组的新长度(该方法修改原有数组)。

var array1 = [1, 2, 3]; 
console.log(array1.unshift(4, 5)); // 预期输出: 5 
console.log(array1); // 预期输出: Array [4, 5, 1, 2, 3]

字符串

charAt()	获取指定位置的字符	'abcd'.charAt(2)	c
indexOf()	检索指定的字符串值在字符串中首次出现的位置	'abcd'.indexOf('a')	0
lastIndexOf()	从后往前查询所要搜索的字符串在原字符串中第一次出现的位置（索引），找不到则返回-1	'abcdabc'.lastIndexOf('a')	4
search()	检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串	'abcd'.search('c')	2
match()	字符串内检索指定的值，或找到一个或多个正则表达式的匹配	'abcdabc'.match('a')	['a', index: 0, input: 'abcdabc']
substring()	字符串截取方法，它可以接收两个参数，分别是要截取的开始位置和结束位置，它将返回一个新的字符串	'abcdabc'.substring(1, 4)	bcd
slice()	与substring()方法非常类似，它传入的两个参数也分别对应着开始位置和结束位置。而区别在于，slice()中的参数可以为负值	'abcdabc'.slice(1, 4)	bcd
replace()	用来进行字符串替换操作，它可以接收两个参数，前者为被替换的子字符串，后者为用来替换的文本	'abcd'.replace('a', 'A')	Abcd
split()	于把一个字符串分割成字符串数组	'abcd'.split('')	['a', 'b', 'c', 'd']
toLowerCase()	可以把字符串中的大写字母转换为小写	'Abcd'.toLowerCase()	abcd
toUpperCase()	可以把字符串中的小写字母转换为大写	'Abcd'.toUpperCase()	ABCD
shy_manOvO
关注
javascript学习笔记
11-24
在实际使用中，JavaScript通常通过`<script>`标签内联嵌入HTML文档，或者引用外部.js文件。需要注意的是，`<script>`标签的位置会影响代码的执行时机，通常建议将其放置在`<head>`或`<body>`标签的底部，以确保在...
JavaScript学习笔记
07-11
js学习笔记
python字符串分隔
Bear_Kai的专栏
10-23 1546
1. 用法说明：指定分隔符的字符串切片Python split()通过指定分隔符对字符串进行切片，如果参数num 有指定值，则仅分隔 num 个子字符串。 str.split(str=”“, num=string.count(str)). 其中，str – 分隔符，默认为所有的空字符，包括空格、换行(\n)、制表符(\t)等。num – 分割次数。返回分割后的字符串列表。 2. 实例#
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 1094
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
Node.js学习笔记
2301_79614379的博客
07-21 1039
前端工程化：开发项目直到上线，过程中集成的所有技术和工具。Node.js是前端工程化的基础（因为Node.js可以主动读取前端代码内容。Node.js模块化：概念：每个文件当做一个模块，独立作用域，按需加载使用：采用特定的标准语法导出和导入进行使用CommonJs标准：一般应用在Node.js项目环境中ECMAScript标准：一般应用在前端工程化项目中Node.js包：概念：把模块文件，代码文件，其他资料聚合成一个文件夹项目包：编写项目需求和业务逻辑的文件夹。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
Javascript入门学习笔记
weixin_61370021的博客
04-27 4659
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
JavaScript 学习笔记（JS进阶 Day4）
weixin_45851732的博客
01-28 990
因此当我们只是想改变 this 指向，并且不想调用这个函数的时候，可以使用 bind，比如改变定时器内部的this指向.在开发中【使用箭头函数前需要考虑函数中 this 的值】，事件回调函数使用箭头函数时，this 为全局的 window。箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。同样由于箭头函数 this 的原因，基于原型的面向对象也不推荐采用箭头函数。箭头函数中的 this 与普通函数完全不同，也不受调用方式的影响，事实上。
BabylonJS初学习笔记
qq_46098517的博客
01-26 275
初步接触Babylonjs，由于学习跨度会比较大，所以就做了一些笔记，在此分享出来，希望能够对那些和我一样学习的新人有所帮助。
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
计算机毕业设计之：基于微信小程序的诗词智能学习系统（源码+文档+解答）
程序员阿龙的博客
09-22 4203
博主介绍： ✌我是阿龙，一名专注于Java技术领域的程序员，全网拥有10W+粉丝。作为CSDN特邀作者、博客专家、新星计划导师，我在计算机毕业设计开发方面积累了丰富的经验。同时，我也是掘金、华为云、阿里云、InfoQ等平台的优质作者。通过长期分享和实战指导，我致力于帮助更多学生完成毕业项目和技术提升。 技术范围： 我熟悉的技术领域涵盖SpringBoot、Vue、SSM、HLMT、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、小程序、安卓app、大数据、物联网、机器学习等方
运行VUE项目运行时候的报错汇总
W3306698294的博客
09-21 296
上面的问题解决问题：【在npm install 后面加 --legacy-peer-deps，就可以解决了】
Babel
小秀的博客
09-20 707
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
jQuery国内大厂CDN加速链接
TANKING，开源开发者！
09-21 333
jQuery的CDN有很多，但都很不稳定，例如国内的bootcdn经常抽风，还有其他的常见的例如jQuery官方的jsDeliverstaticfile，这些都是经常抽风的。导致使用了线上的CDN的页面打开受到影响，那么就没有国内好用的CDN吗？下面是我汇总的一些大厂的！
JavaScript --数字Number的常用方法
最新发布
weixin_58694594的博客
09-25 494
【代码】JavaScript --数字Number的常用方法。
Ant design vue中的提示框（a-tooltip）
努力的nana
09-25 131
【代码】Ant design vue中的提示框（a-tooltip）
JavaScript学习笔记：从基础到DOM编程
"这是一份全面的JavaScript学习笔记，涵盖了从CSS样式表基础到JavaScript语法、DOM编程等多个方面，旨在帮助读者深入理解并掌握JavaScript语言。" 在这份笔记中，作者首先介绍了CSS样式表的基本概念，包括什么是CSS...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值