手记

JavaScript学习笔记016-字符串方法0数组方法0值类型与引用型

Author:Mr.柳上原

  • 付出不亚于任何的努力

  • 愿我们所有的努力,都不会被生活辜负

  • 不忘初心,方得始终

有没有做过一件后悔的事

后悔到骨子里去了

以至于每次想起

心都很痛很痛的

所以

当想要做一件明知道不对的事情的时候

三思

而后行

后悔药是没有的

时光机也还没研发出来

做过的错事

也无法回复

<!DOCTYPE html> <!-- 文档类型:标准html文档 --><html lang='en'> <!-- html根标签 翻译文字:英文 --><head> <!-- 网页头部 --><meat charset='UTF-8'/> <!-- 网页字符编码 --><meat name='Keywords' content='关键词1,关键词2'/><meat name='Description' content='网站说明'/><meat name='Author' content='作者'/><title>前端59期学员作业</title> <!-- 网页标题 --><link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 --><style type='text/css'> /*内部样式表*/</style></head><body> <!-- 网页主干:可视化区域 --><script>/*
字符串方法:
字符串的方法都不会修改源字符串
注意:
字符串的length为只读属性,只能获取不能操作
*/// 字符串取值let str1 = "abcabc";
str1[1]; // "b"  有兼容问题str1.charAt(1); // "b"// 字符串拼接let str2 = "123123";
str1.concat(str2); // "abcabc123123"str1 + str2; // "abcabc123123" 推荐// es6字符串扩展,重复拼接str1.repeat(2); // "abcabcabcabc" 将字符串重复几次// es8字符串扩展,补全str1.padStart(10, "b"); // "bbbbabcabc" 头部补全str1.pasEnd(10, "b"); // "abcabcbbbb" 尾部补全// 查找字符串位置str1.indexOf("b"); // 1 查找首次出现的位置str1.lastIndexOf("b"); // 4 查找最后出现的位置// 原生方法function indexOf(str, target){for (let i = 0, i < str.length, i++){if (str === target){return i;
}
}return -1;
}
indexOf(str1, "b"); // 1// es6字符串扩展,查找str1.includes("b"); // 是否在字符串里查到了参数的值,返回布尔值str1.startsWith("b", 0); // 从头部开始,是否在字符串里查到了参数的值,返回布尔值str1.endsWith("b", 1); // 从尾部开始,是否在字符串里查到了参数的值,返回布尔值// 字符串的unicode码查找str1.charCodeAt("1"); // "b"在unicode码表里的位置// 返回unicode码表里的字符// 注意点:必须要用String来调用String.fromCharCode(50); // "2"// 截取字符串的一段字符str1.slice(0, 2); // "ab" [start, end) 从start开始,到end结束,但是不包括endstr1.substring(2, 0); // "ab" 用法和slice一样,不过substring会自动比较传入的值,从小切到大,slice则不能str1.substr(0, 2); // "ab" [start, length] substr第二个值是字符串的长度// 字符串大小写转换str1.toLocaleUpperCase( ); // "ABCABC" 转大写str1.toUpperCase( ); // "ABCABC" 转大写 推荐str1.toLocaleLowerCase( ); // "abcabc" 转小写// 字符串切割成数组str1.split(); // ["abcabc"] 方法内不传值,把字符串整体放入数组str1.split(""); // ["a", "b", "c", "a", "b", "c"] 方法内传入空字符串,把每项字符都切割str1.split("b"); // ["a", "ca", "c"] 方法内传入字符,把此字符作为分隔项切割// 删除字符串的前后空格let str3 = "  1233   ";
str3.trim( ); // "1233"/*
值类型数据:
number  string  null undefined  boolean
值类型数据比较,值类型相同,值长得一样,就相等
引用型数据:
object
引用型数据比较,是比较内存地址
*/// 引用型数据this指向function fn(){console.log(this);
}let obj = {a: fn // 把函数fn的地址赋值给obj.a}let f = obj.a; // 把obj.a存的函数fn的地址赋值给fobj.a( ); // 此次调用this指向obj 谁调用this就指向谁f( ); // 此次调用this指向windowfunction fn2(a){
a( ); // 此次调用this指向windowarguments[0]( ); // 此次调用this指向arguments 函数fn2传的参数在arguments里面,要访问参数先要访问arguments}
fn2(obj.a); // 传的参数为函数fn的地址/*
数组方法:
数组的方法有些会修改源数组
*/// 数组拼接let arr1 = [a, b, c, a, b, c];let arr2 = [1, 2, 3, 1, 2, 3];
arr1.concat(arr2); // [a, b, c, a, b, c, 1, 2, 3, 1, 2, 3]// 截取数组的一段内容arr1.slice(1, 3); // [b, c] [start, end) 从start开始,到end结束,但是不包括end// 数组切割成字符串arr1.join(); // "a, b, c, a, b, c" 相当于arr1.toString() 方法内不传值,把数组整体放入字符串arr1.join(""); // "abcabc" 方法内传入空字符串,删除数组内逗号相连接arr1.join("1"); // "a1b1c1a1b1c" 方法内传入字符,把此字符替换逗号分隔// 数组内添加或删除数据arr1.unshift("d"); // ["d", a, b, c, a, b, c] 相当于arr1.splice(0, 0, "d") 在数组最前面添加数据,会修改源数组的值arr1.push("d"); // [a, b, c, a, b, c, "d"] 相当于arr1.splice(arr1.length, 0, "d") 在数组最后面添加数据,会修改源数组的值arr1.shift( ); // [ b, c, a, b, c] 相当于arr1.splice(0, 1) 删除数组最前面的数据,会修改源数组的值arr1.pop( ); // [a, b, c, a, b] 相当于arr1.splice(arr1.length - 1, 1) 删除数组最后面的数据,会修改源数组的值arr1.splice(1, 2, "e"); // [a, "e", a, b, c] 从第几号位开始,删除几个数据,并在删除的位置添加数据// 清除数组arr1.length = 0; // [ ] 当数组的长度等于0时,数组为空数组// 查找数组位置arr1.indexOf("b"); // 1 查找首次出现的位置arr1.lastIndexOf("b"); // 4 查找最后出现的位置// 判断数组类是否有选定的值,能够识别NaNarr1.includes("b"); // true// 翻转数组arr1.reverse( ); // [c, b, a, c, b, a]// 遍历数组arr1.forEach((value, index, arr1) => {console.log(value); // 数组的值console.log(index); // 数组的索引值}); // 方法一for (let value of arr1){console.log(value); // 数组的值} // 方法二for (let index in arr1){console.log(index); // 数组的索引值} // 方法三,性能较差,除了遍历json对象,其他不建议使用(for in会顺着对象的原型一直向上遍历原型的原型的原型的...直到找到对应的值)// entries(), keys(),values(),实现键值对的切换遍历for (let a of arr1.entries()); // a为键值对for (let a of arr1.keys()); // a为键for (let a of arr1.values()); // a为值// 数组过滤arr1.filter(function (value, index){// 此处写入过滤条件return true;
}); // 返回的是一个全新的过滤过的数组// filter封装function filter(arr, cb){let arr3 = [ ];for (let i = 0; i < arr.length; i++){if (cb(arr[i], i, arr)){
arr3.push(arr[i]);
}
}return arr3;
}
filter(arr2, function(value, index){if (value % 2 === 0){return true;
}
}); // 返回全新的数组// 数组填充let arr4 = new Array(100).fill(2); // [2, 2, 2......] 方法一arr1.fill(6); // [6, 6, 6, 6, 6, 6] 方法二// 数组迭代arr2.map((value, index, arr) => value * 2); // [2, 4, 6, 2, 4, 6] 返回一个全新的迭代后的数组// 数组排序let arr5 = [1, 12, 2, 3, 29, 38, 52];let arr6 = [aac, bed, ecd, ced, btt, frr];
arr5.sort( ); // [1, 12, 2, 29, 3, 38, 52] 默认排序顺序是根据字符串的unicode码arr6.sort( ); // 默认排序顺序是根据字符串的unicode码arr2.sort((a, b) => a - b); // [1, 1, 2, 2, 3, 3] 升序排列 会改变源数组arr2.sort((a, b) => b - a); // [3, 3, 2, 2, 1, 1] 降序排列 会改变源数组// 类数组转数组let divS = document.querySelectorAll("div"); // Nodelist类型Array.from(divS); // 数组Array.of(1, 2, 3, 4, "风屿", "男"); // 零散数据转数组</script></body></html>



作者:Mr柳上原
链接:https://www.jianshu.com/p/8fec9d98dd4a


0人推荐
随时随地看视频
慕课网APP