JavaScript学习笔记016-字符串方法0数组方法0值类型与引用型
JavaScript学习笔记016-字符串方法0数组方法0值类型与引用型
Mr. 柳上原
发布于 2018-09-05 15:23:11
发布于 2018-09-05 15:23:11
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结束，但是不包括end
str1.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的地址赋值给f
obj.a( ); // 此次调用this指向obj 谁调用this就指向谁
f( ); // 此次调用this指向window
function fn2(a){
a( ); // 此次调用this指向window
arguments[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 查找最后出现的位置
// 判断数组类是否有选定的值，能够识别NaN
arr1.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>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2018.08.22 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读