基础js温故知新
编辑时间:2021-09-23 作者:金满斗 浏览量:93 来源:原创

还是上次给儿子推荐的那个网站,也不晓得他学到哪里了。

简单的html,css我过了,5个测试题也做了鬼认证也拿到了,今天有时间继续基础js。

系统学习,温故知新。


长度 a.length

数组 array.pop(); 去掉最后一个并返回现在的  array.shift()  去掉前面一个并返回删除掉的那个元素

array.unshift(内容) 插入数据到头部    delete array.key  删除元素     array.hasOwnProperty("key")  判断是否存在

push() 和 unshift() 都有一个与它们作用相反的函数:pop() 和 shift()。 与插入元素相反,pop() 会从数组的末尾移除一个元素,而 shift() 会从数组的开头移除一个元素。 pop() 和 shift() 与 push() 和 unshift() 的关键区别在于,用于删除元素的方法不接收参数,而且每次只能删除数组中的一个元素。

arr.concat(array)   两个数组合并


//递归累加例子   写一个递归函数,sum(arr, n),返回递归调用数组 arr 从前 n 个元素和。


function sum(arr, n) {
  // 只修改这一行下面的代码
  if (n <= 0) {
      return 0;
    } else {
      return sum(arr, n - 1) + arr[n - 1];
   }
  // 只修改这一行上面的代码
}



Math.random()   生成0到1的随机数

Math.floor() 向下取整,获得它最近的整数

生成myMin,到myMax之间随机整数例子


function randomRange(myMin, myMax) {
  return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
}


递归显示5,4,3,2,1



function countdown(n){
   if (n < 1) {
    return [];
  } else {
    const countArray = countdown(n - 1);
    countArray.unshift(n);
    return countArray;
  }

}

最后一课,递归显示两数间数组



function rangeOfNumbers(startNum, endNum) {
  if(startNum > endNum){
    return [];
  }else{
      const countArray = rangeOfNumbers(startNum,endNum - 1);
      countArray.push(endNum);
      return countArray;
  }
  

};




const 声明并不会真的保护数据不被改变。 为了确保数据不被改变,JavaScript 提供了一个函数 Object.freeze。

任何更改对象的尝试都将被拒绝,如果脚本在严格模式下运行,将抛出错误。

如Object.freeze(MATH_CONSTANTS);


ES6

箭头函数 


普通函数改箭头函数,return 可以省略,如


如果箭头函数只有一个参数,则可以省略参数外面的括号。

const doubler = item => item * 2;

可以给箭头函数传递多个参数。

const multiplier = (item, multi) => item * multi; ES6 推出了用于函数参数的 rest 操作符帮助我们创建更加灵活的函数。 rest 操作符可以用于创建有一个变量来接受多个参数的函数。 这些参数被储存在一个可以在函数内部读取的数组中。



使用 rest 参数,就不需要查看 args 数组,并且允许我们在参数数组上使用 map()、filter() 和 reduce()。

修改 sum 函数,使用 rest 参数,使 sum 函数可以接收任意数量的参数,并返回它们的总和。

例子: const sum = (...args) => args.reduce((a, b) => a + b, 0);

...表示运算符展开数组项  只能参数或者数组中使用,如:

let arr2 = [...arr1];   arr1也是一个数组

使用解构赋值来获取对象的值   取对象数据,可以这样优雅实现,如

const HIGH_TEMPERATURES = {
  yesterday: 75,
  today: 77,
  tomorrow: 80
};

const {today,tomorrow} = HIGH_TEMPERATURES;

上面同样优雅的取到了对象today,tomorrow的值并定义为了常量

使用解构赋值从对象中分配变量

可以给解构的值赋予一个新的变量名, 通过在赋值的时候将新的变量名放在冒号后面来实现。

还是以上个例子的对象来举例:

const user = { name: 'John Doe', age: 34 };

这是指定新的变量名的例子:

const { name: userName, age: userAge } = user;

你可以这么理解这段代码:获取 user.name 的值,将它赋给一个新的变量 userName,等等。 userName 的值将是字符串 John Doe,userAge 的值将是数字 34。

使用数组解构来交换变量 a 与 b 的值,使 a 接收 b 的值,而 b 接收 a 的值。 例子
let a = 8, b = 6;
// 只修改这一行下面的代码
[a, b] = [b,a];


使用模板字面量创建字符串   这个就和php非常像了,不同的是字符是以·符号标志的,旁边的那个键

如:onst greeting = `Hello, my name is ${person.name}!

I am ${person.age} years old.`;

Promise

当 promise 成功时会调用then 方法。 当 promise 的resolve方法执行时会直接调用。

当 promise 失败时会调用 catch 方法。 当 promise 的 reject 方法执行时会直接调用。 用法如下:

myPromise.catch(error => { });

error 是传入 reject 方法的参数。

正则表达式

正则文本用/ /包裹显示

JavaScript 中有多种使用正则表达式的方法。 测试正则表达式的一种方法是使用 .test() 方法。 .test() 方法会把编写的正则表达式和字符串(即括号内的内容)匹配,如果成功匹配到字符,则返回 true,反之,返回 false

如:

let myString = "Hello, World!";
let myRegex = /Hello/;

 myRegex.test(myString)


正则里支持| 匹配多个    /正则文本/i  这个i是忽略大小写意思    若要多次搜寻或提取模式匹配,可以使用 g 标志 如    let repeatRegex = /Repeat/g;

使用 .match() 方法来提取找到的实际匹配项      //后可以支持多个 比如 /xx/ig 表示不分大小写的全局匹配

通配符 . 将匹配任何一个字符    


可以把字符集放在方括号([ 和 ])之间来定义一组需要匹配的字符串。

例如,如果想要匹配 bag、big 和 bug,但是不想匹配 bog。 可以创建正则表达式 /b[aiu]g/ 来执行此操作。 [aiu] 是只匹配字符 a、i 或者 u 的字符集。

在字符集中,可以使用连字符(-)来定义要匹配的字符范围。

例如,要匹配小写字母 a 到 e,你可以使用 [a-e]

例如,/[0-5]/ 匹配 0 和 5 之间的任意数字,包含 0 和 5。

此外,还可以在单个字符集中组合一系列字母和数字。

let jennyStr = "Jenny8675309"; let myRegex = /[a-z0-9]/ig; jennyStr.match(myRegex);

要创建否定字符集,需要在开始括号后面和不想匹配的字符前面放置脱字符(即^)。 ^不在[]内部的话表示从头匹配

例如,/[^aeiou]/gi 匹配所有非元音字符

+ 一次或多次

*0次或多次 如 goRegex = /go*/; 表示o在文本中可以匹配不到,但g必须匹配到

模式匹配默认是贪婪,匹配最长,加了?就是懒惰了,最短

美元符号 $ 来搜寻字符串的结尾

javaScript 中与字母表匹配的最接近的元字符是\w。 这个缩写等同于[A-Za-z0-9_]。 此字符类匹配大写字母和小写字母以及数字。 注意,这个字符类也包含下划线字符 (_)。

\d 匹配数字

正则实战小例子

作业题:

  1. 用户名只能是数字字母字符。

  2. 用户名中的数字必须在最后。 数字可以有零个或多个。 用户名不能以数字开头。

  3. 用户名字母可以是小写字母和大写字母。

  4. 用户名长度必须至少为两个字符。 两位用户名只能使用字母。


规则: let userCheck = /^[a-z][a-z]+$|^[a-z]+\w\d+$/i; 

注意上面的还没学到{}符

正则里需要用到变量的,可以这样 let re = new RegExp(target + "$", "i");   其中target 就是变量

可以使用数量说明符(quantity specifiers)指定匹配模式的上下限。 数量说明符与花括号({ 和 })一起使用。 可以在花括号之间放两个数字,这两个数字代表匹配模式的上限和下限。

例如,要匹配出现 3 到 5 次字母 a 的在字符串 ah,正则表达式应为/a{3,5}h/

{2,} 表示匹配2及以上 {3}表示只匹配3个的


正向先行断言会查看并确保搜索匹配模式中的元素存在,但实际上并不匹配。 正向先行断言的用法是 (?=...),其中 ... 就是需要存在但不会被匹配的部分。
另一方面,负向先行断言会查看并确保搜索匹配模式中的元素不存在。 负向先行断言的用法是 (?!...),其中 ... 是希望不存在的匹配模式。 如果负向先行断言部分不存在,将返回匹配模式的其余部分。
例子:在正则表达式 pwRegex 中使用先行断言以匹配大于 5 个字符且有两个连续数字的密码。   let pwRegex = /(?=\w{6,})(?=\w*\d{2,})/


捕获组是通过把要捕获的正则表达式放在括号中来构建的。 在这个例子里, 目标是捕获一个包含字母数字字符的词,所以捕获组是将 \w+ 放在括号中:/(\w+)/。
分组匹配的子字符串被保存到一个临时的“变量”, 可以使用同一正则表达式和反斜线及捕获组的编号来访问它(例如:\1)。 捕获组按其开头括号的位置自动编号(从左到右),从 1 开始。
使用捕获组来匹配一个只由相同的数字重复三次组成的由空格分隔字符串。例子:let reRegex = /^(\d+)(\s)\1\2\1$

可以在字符串上使用 .replace() 方法来搜索并替换字符串中的文本。 .replace() 的输入首先是想要搜索的正则表达式匹配模式。 第二个参数是用于替换匹配的字符串或用于执行某些操作的函数。
可以使用美元符号($)访问替换字符串中的捕获组。

例子,清首尾空  let hello = "   Hello, World!  ";
let wsRegex = /^\s+|\s+$/g; 
let result = hello.replace(wsRegex,"");
console.log(result);


基础数据结构

arr.splice()  参数分别是要删除的数组索引,数量, 要添加的参数

arr.slice() 不会修改数组,而是会复制,或者说*提取(extract)*给定数量的元素到一个新数组。 slice() 只接收 2 个输入参数:第一个是开始提取元素的位置(索引),第二个是提取元素的结束位置(索引)。

arr.indexOf('dates') 返回 -1  看数组是否存在key,不存在是-1

和php及aario大不同的一点。for in 循环

for (let user in users) {
  console.log(user);
}
注意这个对象的for in 循环,这里user是key,并不是对象本身,这里要注意,和别的语言由区别

Object.keys()    生成一个由对象key组成的数组

通用算法,累乘递归

function factorialize(num) {
  if (num === 0) {
    return 1;
  }
  return num * factorialize(num - 1);
}


来说两句吧