当前位置： 首页 > news >正文

js学习笔记

news 来源：原创 2024/5/19 1:09:54

数据类型

数字
字符串
布尔：false和true
数组
对象
null——空值
undefined——未定义。仅仅在判断函数参数是否传递的情况下使用

字符串

用''或者""包括的叫字符串。
转义字符："\"
toUpperCase()——转换为大写
toLowerCase()——转换为小写
indexOf()——搜索指定字符串出现的位置，如果没有找到返回-1
subString(start,end)——字符串截取，索引值不包含end

数组

  1. 获取数组长度直接arr.length

  2. 通过索引修改值arr[2]=0;

  3. indexOf()——搜索指定元素所在位置

  4. slice(起始索引,结束索引)——截取元素，返回新的数组，包含起始索引，但是不包含结束索引，类似数学中[start，end)

  5. push()——向数组末尾添加新元素

  6. unshift()——想数组头部添加新元素

  7. pop()——删除数组末尾的元素

  8. shift()——删除数组头部的元素

  9. sort()——数组排序

  10. reverse()——数组反向

  11. concat()——数组合并，返回新数组

  12. join()——数组转换为字符串

  13. splice(start,num,newElement)——数组修改万能方法。

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];

//从索引2开始删除3个元素,然后再添加两个元素:
arr.splice(2, 3, 'Google', 'Facebook');

//删除的元素 ['Yahoo', 'AOL', 'Excite']

arr; 
//['Microsoft', 'Apple', 'Google', 'Facebook', 'Oracle']

对象

对象我粗暴的理解就是键值对。

var person={
    name:'小明',
    age:18,
    sex:'男',
    'middle-school':'NO.1 middle school'
}

访问属性使用.，例如person.name或者person['name'],属性命名含有特殊字符的必须使用后一种方式，即person['middle-school']

判断对象中某一个属性是否存在使用in或者hasOwnProperty(),前者判断的属性不一定是对象私有也可能是继承的，后者可以判断对象是否拥有该属性。

//in
'name' in person //true
'height' in person //false

//hasOwnProperty()
person.hasOwnProperty('name') //true
person.hasOwnProperty('height') //false

对象的属性都是字符串，属性值什么类型都有。
遍历对象属性和属性值

var per={
  name:'zch',
  age:18,
  'height-h':178
}
var x=per.hasOwnProperty('name');
for(item in per){
  console.log(per[item])
}

函数

函数定义
（1）函数声明

function abc(x){
    if(x>0){
        return x;
    }else{
        return -x;
    }
}
//*函数内部执行到return时语句会停止

（2）函数表达式

var abs=function(x){
    return x > 0 ? x : -x;
};

(1)和(2)在定义上完全等价，但是使用上要注意，函数声明方式可以先调用后定义，也就是函数提升，表达式定义则不行，另外方式(2)本质上是一个赋值语句，因此在末尾要加;

变量

  1. 如果一个变量在函数体内部申明，则该变量的作用域为整个函数体，在函数体外不可引用该变量

  2. 如果两个不同的函数各自申明了同一个变量，那么该变量只在各自的函数体内起作用。换句话说，不同函数内部的同名变量互相独立，互不影响

  3. 由于JavaScript的函数可以嵌套，此时，内部函数可以访问外部函数定义的变量，反过来则不行

  4. JavaScript的函数在查找变量时从自身函数定义开始，从“内”向“外”查找。如果内部函数定义了与外部函数重名的变量，则内部函数的变量将“屏蔽”外部函数的变量

  5. 变量也可以提升，不过不能提升值

  6. 由于JavaScript的变量作用域实际上是函数内部，我们在for循环等语句块中是无法定义具有局部作用域的变量的,也就是说for循环中的i或者j在函数内部都可以访问到。

方法
在一个对象中绑定函数，称为这个对象的方法。

'use strict';

var xiaoming = {
    name: '小明',
    birth: 1990,
    age: function () {
        function getAgeFromBirth() {
            var y = new Date().getFullYear();
            return y - this.birth;
        }
        return getAgeFromBirth();
    }
};

xiaoming.age();
//在一个方法内部，this是一个特殊变量，它始终指向当前对象，也就是xiaoming这个变量。所以，this.birth可以拿到xiaoming的birth属性。
//针对函数内再套函数的问题，因为this指向发生了变化，可以使用that首先捕获this，在进行传值

高阶函数
高阶函数就是函数的参数是一个函数

function add(x, y, f) {
    return f(x) + f(y);
}
add(-5,9,Math.abs)// Math.abs(-5) + Math.abs(6)==>5+6=11

高阶函数——map()

//jquery map() 返回一个jquery对象
//js原生map()返回一个数组

<input type="text">
<input type="text">
<input type="text">

var x=$("input").map(function(){
      return $(this).val();
    })
//返回{ 0: "气球", 1: "是否", 2: "水电费刹车发生"}
console.log(x)//返回objct

//get()是jq DOM操作方法，目标对象是获取的DOM元素，返回数组。
//结果[ "气球", "是否", "水电费刹车发生" ]
console.log(x.get())

在实际使用的时候，我们可以利用map方法方便获得对象数组中的特定属性值们，如下：

var users = [
  {name: "张含韵", "email": "zhang@email.com"},
  {name: "江一燕",   "email": "jiang@email.com"},
  {name: "李小璐",  "email": "li@email.com"}
];
var emails = users.map(function (user) { return user.email; });
console.log(emails.join(", ")); // zhang@email.com, jiang@email.com, li@email.com

由map方法引发的一个js题目：

["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.但实际上,parseInt可以有两个参数.第二个参数是进制数.可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

//应该使用如下的用户函数returnInt
function returnInt(element){
  return parseInt(element,10);
}

["1", "2", "3"].map(returnInt);// 返回[1,2,3]

parseInt()方法
语法：parseInt(string, radix)
string 必需。要被解析的字符串。
radix 可选。

  1. 表示要解析的数字的基数。该值介于 2 ~ 36 之间。

  2. 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。如果它以 "0x" 或 "0X" 开头，将以 16 为基数。

  3. 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。

所以：["1", "2", "3"].map(parseInt)相当于
[parseInt("1", 0), parseInt("2", 1), parseInt("3", 2)]
parseInt("3", 2) 的第二个参数是界于 2-36 之间的，之所以返回 NaN 是因为 字符串 "3" 里面没有合法的二进制数，所以 NaN

高阶函数——reduce
Array的reduce()把一个函数作用在这个Array的[x1, x2, x3...]上，这个函数必须接收两个参数，reduce()把结果继续和序列的下一个元素做累积计算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

比方说对一个Array求和，就可以用reduce实现：

var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

高阶函数——filter()
过滤器，返回true保留，false丢弃，类似map()，接收一个函数。

//筛选出字符串
var arr=[1,2,4,'dfdf',343,'asdfsad'];
var x=arr.filter(function(x){
  return typeof(x)=='string'
})
console.log(x)

filter回调函数可以带三个参数

var arr = ['A', 'B', 'C'];
var r = arr.filter(function (element, index, self) {
    console.log(element); // 依次打印'A', 'B', 'C'
    console.log(index); // 依次打印0, 1, 2
    console.log(self); // self就是变量arr
    return true;
});

高阶函数——sort()
sort()排序时先把元素转换为字符串再进行判断，因此数字排序有时候不正确，因此需要我们自己传入一个比较函数。

arr.sort(function(x,y){
    if(x<y){
        return -1;
    }
    if(x>y){
        rerturn 1;
    }
    return 0;
})

//当然最简洁是这样写
arr.sort(function(x,y){
    return x-y;//正序
    return y-x;//倒序
})

sort()方法会对当前array进行修改，返回时当前的arry；

闭包

箭头函数

(x,y)=> x*y
等同于
function(x,y){
    return x*y;
}

generator
ES6标准，generator由function定义（注意多出的号），并且，除了return语句，还可以用yield返回多次

标准对象

在js中一切都是对象。

包装对象
在js中只有对象才可以使用.加属性进行访问，js的三个基本类型number，string和boolean看着人家有对象心里不平衡，自己也想有对象，于是就借助包装对象来让自己变成对象，有两个方式，一个是隐式转换一个是显式转换。
什么是隐式转换呢？看下面例子：

var str='asfkjas';
console.log(str.length);

变量str是一个字符串，但是却可以使用.加属性的形式获取到字符长度，这大大超出了我们的预知，完全是反人类啊，其实浏览器默默的给他包装成了一个对象，本质上是这样的：

var str='asfkjas';
console.log(new String(str).length);

再例如：

var str='hello';
str.a='haha';
console.log(str.a)

结果是undefined，第二行声明的时候默认是new String(str).a='haha',用完就立即舍弃了，所以打印的时候并没有赋值，结果是undefined；
具体解释点击这里

建议包装对象不要随意使用，涉及到类型转换的时候建议使用以下方式：

  1. 不要使用new Number()、new Boolean()、new String()创建包装对象；

  2. 用parseInt()或parseFloat()来转换任意类型到number；

  3. 用String()来转换任意类型到string，或者直接调用某个对象的toString()方法；

  4. 通常不必把任意类型转换为boolean再判断，因为可以直接写if (myVar) {...}；

  5. typeof操作符可以判断出number、boolean、string、function和undefined；

  6. 判断Array要使用Array.isArray(arr)；

  7. 判断null请使用myVar === null；

  8. 判断某个全局变量是否存在用typeof window.myVar === 'undefined'；

  9. 函数内部判断某个变量是否存在用typeof myVar === 'undefined'。
    null和undefined没有toString()方法。

number调用toString()时应该这样：

123..toString(); // '123', 注意是两个点！
(123).toString(); // '123'

为什么？不要问为什么？这就是js的乐趣！
String()和toString()方法的区别

两个转换小技巧：

var x1=x+'';
console.log(typeof(x1));//string
var y='123';
var y1=y-0;
console.log(typeof(y1));//number

date

var now = new Date();
now; // Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
now.getFullYear(); // 2015, 年份
now.getMonth(); // 5, 月份，注意月份范围是0~11，5表示六月
now.getDate(); // 24, 表示24号
now.getDay(); // 3, 表示星期三
now.getHours(); // 19, 24小时制
now.getMinutes(); // 49, 分钟
now.getSeconds(); // 22, 秒
now.getMilliseconds(); // 875, 毫秒数
now.getTime(); // 1435146562875, 以number形式表示的时间戳
new Date(1487644350463)//获取一个时间戳之后使用Date()转换成时间格式

RegExp

基础规则

  1. 用\d可以匹配一个数字

  2. \w可以匹配一个字母或数字

  3. .可以匹配任意字符

  4. 用*表示任意个字符（包括0个）

  5. 用+表示至少一个字符

  6. 用?表示0个或1个字符

  7. 用{n}表示n个字符

  8. 用{n,m}表示n-m个字符

JSON
JSON还定死了字符集必须是UTF-8，表示多语言就没有问题了。为了统一解析，JSON的字符串规定必须用双引号""，Object的键也必须用双引号""。

面向对象编程
js没有类的概念，可是通过__prototype__来实现继承，但是这个方法不要使用，有兼容问题，可以通过创建函数的形式来实现类似java类继承。

// 原型对象:
var Student = {
    name: 'Robot',
    height: 1.2,
    run: function () {
        console.log(this.name + ' is running...');
    }
};

function createStudent(name) {
    // 基于Student原型创建一个新对象:
    var s = Object.create(Student);
    // 初始化新对象:
    s.name = name;
    return s;
}

var xiaoming = createStudent('小明');
xiaoming.run(); // 小明 is running...
xiaoming.__proto__ === Student; // true

相关文章：

  • eclipse tomcat lomboz的安装配置说明
  • 微服务运行指南——For Cattle
  • DEMO[C#]TypeChange 关于类型转换的一个DEMO
  • 查看mysql的安装路径
  • 看门老头告诉你什么是网关
  • JS学习笔记——闭包
  • SuperPasterV1.0 测试版发布
  • c语言（01）
  • 第7章 处理串行线路和帧中继连接故障
  • 转载：浅谈 Scala 中下划线的用途
  • buildroot mysql mysql.mk hacking
  • 来介绍一个很好的工具--TodoList
  • Vuejs——（9）组件——props数据传递
  • struts技术的logic标签
  • Centos7下安装mysql5.6需要注意的点
  • 【407天】跃迁之路——程序员高效学习方法论探索系列（实验阶段164-2018.03.19）...
  • github指令
  • HTTP中的ETag在移动客户端的应用
  • Java多线程（4）：使用线程池执行定时任务
  • java架构面试锦集：开源框架+并发+数据结构+大企必备面试题
  • java小心机(3)| 浅析finalize()
  • Linux中的硬链接与软链接
  • php的插入排序，通过双层for循环
  • scrapy学习之路4(itemloder的使用)
  • Shadow DOM 内部构造及如何构建独立组件
  • uva 10370 Above Average
  • webpack+react项目初体验——记录我的webpack环境配置
  • Webpack4 学习笔记 - 01：webpack的安装和简单配置
  • 更好理解的面向对象的Javascript 1 —— 动态类型和多态
  • 关于springcloud Gateway中的限流
  • 驱动程序原理
  • 使用docker-compose进行多节点部署
  • 学习JavaScript数据结构与算法 — 树
  • - 语言经验 - 《c++的高性能内存管理库tcmalloc和jemalloc》
  • ​卜东波研究员：高观点下的少儿计算思维
  • ​决定德拉瓦州地区版图的关键历史事件
  • ​软考-高级-信息系统项目管理师教程 第四版【第23章-组织通用管理-思维导图】​
  • ###项目技术发展史
  • #if和#ifdef区别
  • （6）设计一个TimeMap
  • （论文阅读23/100）Hierarchical Convolutional Features for Visual Tracking
  • (区间dp) (经典例题) 石子合并
  • （入门自用）--C++--抽象类--多态原理--虚表--1020
  • （一）搭建springboot+vue前后端分离项目--前端vue搭建
  • (一)为什么要选择C++
  • *ST京蓝入股力合节能 着力绿色智慧城市服务
  • .bat批处理（二）：%0 %1——给批处理脚本传递参数
  • .NET CORE Aws S3 使用
  • .NET gRPC 和RESTful简单对比
  • .NET/C# 使用 ConditionalWeakTable 附加字段（CLR 版本的附加属性，也可用用来当作弱引用字典 WeakDictionary）
  • /etc/motd and /etc/issue
  • @Data注解的作用
  • [＜MySQL优化总结＞]
  • [autojs]逍遥模拟器和vscode对接
  • [BUG]vscode插件live server无法自动打开浏览器